/* El tablero de un pipeline y los rótulos de los objetos de la sala (A161, 2-nov-2026). js/rooms/tablero-paquete.js */

/* ---------------------------------------------------------------- la sala: el rótulo de cada pipeline sobre su objeto */
.tbp-rotulos { position: fixed; inset: 0; pointer-events: none; z-index: 6; }
.tbp-rotulos[hidden] { display: none; }
.tbp-r {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
  min-width: 190px; max-width: 260px; padding: 9px 13px 10px; border: 0; border-radius: 13px; text-align: left;
  background: #FFF; color: var(--tinta, #13283F); font: 600 13px var(--letra, Inter, sans-serif);
  box-shadow: 0 10px 26px rgba(27,58,92,.28), inset 0 0 0 2px var(--marca, #1B3A5C); transition: background .15s;
}
/* La línea de cada rótulo a su objeto (el rótulo va al espacio libre, 3-nov). */
.tbp-r-lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tbp-r-lineas line { stroke: var(--marca, #1B3A5C); stroke-width: 1.6; stroke-dasharray: 5 4; opacity: .55; }
.tbp-r-lineas circle { fill: #FFF; stroke: var(--marca, #1B3A5C); stroke-width: 2; }
.tbp-r-lineas .activa line { stroke-width: 2.6; stroke-dasharray: none; opacity: 1; }
.tbp-r-lineas .activa circle { fill: var(--menta, #52E2AC); }
.tbp-r:hover, .tbp-r:focus-visible { background: var(--marca, #1B3A5C); color: #FFF; outline: none; }
.tbp-r-cab { display: flex; align-items: center; gap: 7px; }
.tbp-r-cab svg { width: 20px; height: 20px; flex: none; color: var(--madera-osc, #7A4B1E); }
.tbp-r:hover .tbp-r-cab svg { color: var(--menta, #52E2AC); }
.tbp-r-cab b { font: 700 14.5px/1.2 var(--titulo, Fraunces, Georgia, serif); }
.tbp-r-cifras { display: flex; flex-wrap: wrap; gap: 4px; }
.tbp-r-n { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 99px; font: 800 12px var(--letra); background: #EEF1F4; color: #3F4E5E; }
.tbp-r-n svg { width: 12px; height: 12px; }
.tbp-r-agente { background: #E3F1F7; color: #1D5D77; }
.tbp-r-revisar { background: var(--ambar-suave, #FDEBC4); color: #7A4D05; }
.tbp-r-hecho { background: #DDF2E9; color: #1E6B55; }

/* ---------------------------------------------------------------- la sala por dentro: tareas + pantallas (11-nov-2026)
   Sustituye al tablero de cuatro columnas. El azul claro es el del cielo de la ciudad (--cielo-3 / --cielo-4); la etapa de
   cada tarea (por lanzar · con el agente · para revisar · hecho) tiñe la tarjeta ENTERA con UN solo color, en pastel y
   uniforme (Andrés, 11-nov: sin degradados, que al pasar por azul o verde parecen otra etapa). */
.r1t1.con-tablero .r1v-cuerpo { overflow: hidden; background: var(--cielo-4, #F4F8FC); }
.tbp { position: relative; height: 100%; display: flex; flex-direction: column; }
.tbp-tablero { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 16px 14px; }
.tbp-cab { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.tbp-cab .r1v-h { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 21px/1.2 var(--titulo, Fraunces, Georgia, serif); color: var(--marca, #1B3A5C); }
.tbp-cab .r1v-h svg { width: 22px; height: 22px; color: var(--madera-osc, #7A4B1E); }
.tbp-motivo { margin: 0; flex: 1 1 260px; color: var(--tinta-2, #4A6582); font-size: 13px; }

/* Los tonos de etapa: --et es el color (r,g,b) y --et-t su tinta. */
.tbp-t--pend, .tbp-t--todas { --et: 74,101,130; --et-t: #1F4366; }
.tbp-t--ag { --et: 46,127,160; --et-t: #155E7A; }
.tbp-t--rev { --et: 224,169,59; --et-t: #7A4D05; }
.tbp-t--hecho { --et: 62,158,126; --et-t: #1E6B55; }
.tbp-t--bloq { --et: 200,85,61; --et-t: #8A2F1F; }
.tbp-t--esp { --et: 179,154,100; --et-t: #6A5326; }

.tbp-sala { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(290px, 340px) minmax(0, 1fr); gap: 14px; }

/* ---- la columna de tareas */
.tbp-tareas { display: flex; flex-direction: column; min-height: 0; padding: 12px 10px 8px 12px; border-radius: 16px; background: var(--cielo-3, #DCEBF8);
  box-shadow: inset 0 0 0 1px rgba(46,127,160,.20), 0 1px 0 #FFF; }
.tbp-tareas-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 9px 0; }
.tbp-tareas-cab h4 { margin: 0; font: 700 20px/1.1 var(--titulo, Fraunces, Georgia, serif); color: var(--marca, #1B3A5C); }
.tbp-modo { display: inline-flex; padding: 3px; border-radius: 99px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1px rgba(27,58,92,.14); }
.tbp-modo button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 0; border-radius: 99px; background: none; cursor: pointer; font: 700 12px var(--letra); color: var(--tinta-2, #4A6582); }
.tbp-modo button svg { width: 14px; height: 14px; }
.tbp-modo button[aria-pressed="true"] { background: var(--marca, #1B3A5C); color: #FFF; box-shadow: 0 1px 3px rgba(27,58,92,.3); }
.tbp-modo button:focus-visible, .tbp-f:focus-visible, .tbp-p-visor:focus-visible { outline: 2px solid var(--celeste-osc, #2E7FA0); outline-offset: 2px; }
.tbp-filtros { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 2px 9px 0; }
.tbp-f { display: inline-flex; align-items: center; gap: 5px; padding: 3px 5px 3px 9px; border: 0; border-radius: 99px; cursor: pointer; font: 700 11.5px var(--letra); color: var(--et-t);
  background: color-mix(in srgb, rgb(var(--et)) 24%, #FFF); box-shadow: inset 0 0 0 1px rgba(var(--et), .40); }
.tbp-f b { min-width: 18px; padding: 0 5px; border-radius: 99px; background: rgba(255,255,255,.85); text-align: center; font-size: 11px; }
.tbp-f[aria-pressed="true"] { background: rgb(var(--et)); color: #FFF; box-shadow: 0 1px 3px rgba(27,58,92,.25); }
.tbp-f.tbp-t--rev[aria-pressed="true"] { color: #3A2700; }
.tbp-f[aria-pressed="true"] b { color: var(--et-t); background: #FFF; }
.tbp-lanzar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 2px 9px 0; padding: 8px 9px 9px; border-radius: 12px; background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(27,58,92,.10); }
.tbp-lanzar .r1c-todos { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; font: 700 12.5px var(--letra); color: var(--marca, #1B3A5C); cursor: pointer; }
.tbp-lanzar .r1c-todos em { margin-left: 2px; font: 600 11.5px var(--letra); color: var(--tinta-3, #6B7F93); }
.tbp-lanzar .tbp-pie { display: contents; }
.tbp-lanzar .tbp-pie > p { flex: 1 1 100%; margin: 0; text-align: left; }
.tbp-scroll { flex: 1; min-height: 0; overflow: hidden auto; padding: 0 4px 4px 0; scrollbar-width: thin; }
.tbp-g + .tbp-g { margin-top: 10px; }
.tbp-g.vacia { display: none; }
.tbp-g > h5 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font: 800 10.5px var(--letra); letter-spacing: .09em; text-transform: uppercase; color: var(--et-t); }
.tbp-g > h5 svg { width: 13px; height: 13px; }
.tbp-g > h5 b { margin-left: auto; padding: 0 7px; border-radius: 99px; background: rgba(var(--et), .22); letter-spacing: 0; font-size: 11px; }
.tbp-sala[data-filtro="revisar"] .tbp-g:not([data-tbp-grupo="revisar"]), .tbp-sala[data-filtro="agente"] .tbp-g:not([data-tbp-grupo="agente"]),
.tbp-sala[data-filtro="preparar"] .tbp-g:not([data-tbp-grupo="preparar"]), .tbp-sala[data-filtro="hecho"] .tbp-g:not([data-tbp-grupo="hecho"]),
.tbp-sala[data-filtro="revisar"] .tbp-p:not([data-et="revisar"]), .tbp-sala[data-filtro="agente"] .tbp-p:not([data-et="agente"]),
.tbp-sala[data-filtro="hecho"] .tbp-p:not([data-et="hecho"]) { display: none; }
.tbp-lista { display: flex; flex-direction: column; gap: 6px !important; margin: 0; padding: 0; list-style: none; }
.tbp-lista > li { flex-shrink: 0; }
.tbp-vacio { padding: 14px 6px; text-align: center; color: var(--tinta-3, #6B7F93); font-size: 12.5px; }

/* La tarjeta de una tarea: el nombre y su dato arriba, el estado debajo, el botón a la derecha; teñida entera por su etapa. */
.tbp-lista .r1c-fila { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 5px; align-items: center; padding: 8px 9px 8px 7px; min-height: 0; border-radius: 12px;
  background: color-mix(in srgb, rgb(var(--et)) 28%, #FFF);
  box-shadow: 0 1px 2px rgba(27,58,92,.08), inset 0 0 0 1px rgba(var(--et), .42); }
.tbp-t--pend .tbp-lista .r1c-fila { background: color-mix(in srgb, rgb(var(--et)) 9%, #FFF); box-shadow: 0 1px 2px rgba(27,58,92,.07), inset 0 0 0 1px rgba(var(--et), .26); }
.tbp-lista .r1c-fila:has(.r1t1-sello.bloq) { --et: 200,85,61; --et-t: #8A2F1F; }
.tbp-lista .r1c-fila.sel { box-shadow: inset 0 0 0 2px rgb(var(--et)); }
.tbp-lista .r1c-fila > .r1v-marca, .tbp-lista .r1c-fila > .r1c-hueco { grid-column: 1; grid-row: 1 / span 2; align-self: start; padding-top: 2px; }
.tbp-lista .r1c-fila > .r1c-hueco { display: none; }
.tbp-lista .r1c-fila:has(> .r1c-hueco) { grid-template-columns: 0 minmax(0, 1fr) auto; column-gap: 0; padding-left: 11px; }
.tbp-lista .r1c-fila:has(> .r1c-hueco) > .r1c-accion, .tbp-lista .r1c-fila:has(> .r1c-hueco) > .r1c-ver { margin-left: 8px; }
.tbp-lista .r1c-fila > .r1c-quien { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; text-align: left; background: none; }
.tbp-lista .r1c-fila > .r1c-quien .r1c-dato { margin-left: 0; }
.tbp-lista .r1c-fila > .r1c-quien .nom { max-width: 100%; white-space: normal; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tbp-lista .r1c-fila > .r1c-quien .r1c-dato { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbp-g:not([data-tbp-grupo="preparar"]) .r1c-fila > .r1c-quien .r1c-dato { display: none; }
.tbp-lista .r1c-fila > .r1t1-sello { grid-column: 2; grid-row: 2; justify-self: start; background: rgba(255,255,255,.72); color: var(--et-t); }
.tbp-lista .r1c-fila > .qc-sello { grid-column: 3; grid-row: 2; justify-self: end; margin: 0; }
.tbp-lista .r1c-fila > .r1c-accion, .tbp-lista .r1c-fila > .r1c-ver, .tbp-lista .r1c-fila > .r1c-confirma { grid-column: 3; grid-row: 1; align-self: center; }
.tbp-g[data-tbp-grupo="preparar"] .r1c-fila > .r1c-accion, .tbp-g[data-tbp-grupo="preparar"] .r1c-fila > .r1c-confirma { grid-row: 1 / span 2; }
.r1v .tbp-lista .r1c-fila .r1c-accion { height: 30px; padding: 0 9px; font-size: 12px; gap: 5px; }
.r1v .tbp-lista .r1c-fila .r1c-accion svg { width: 14px; height: 14px; }
.tbp-g[data-tbp-grupo="preparar"] .r1c-fila { cursor: grab; }
.tbp-g[data-tbp-grupo="preparar"] .r1c-fila:hover { box-shadow: 0 4px 12px rgba(27,58,92,.16), inset 0 0 0 1px rgba(var(--et), .45); }
.tbp-arrastrando { opacity: .4; }
.tbp-pie { margin-top: 8px; }
.tbp-pie .r1v-boton { width: 100%; justify-content: center; }
.r1v .tbp-lanzar .r1v-boton { flex: none; width: auto; min-height: 0; padding: 5px 12px; font-size: 12.5px; line-height: 1.25; border-radius: 9px; box-shadow: inset 0 0 0 1.5px var(--celeste-osc, #2E7FA0); }
.r1v .tbp-lanzar .r1v-boton svg { width: 15px; height: 15px; }
.tbp-pie .r1v-ayuda { margin: 4px 0 0; font-size: 11.5px; }

/* ---- el muro de pantallas */
.tbp-muro { position: relative; min-height: 0; overflow: auto; padding: 2px 4px 6px 2px; scrollbar-width: thin; }
.tbp-pantallas { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-content: start; }
.tbp-pantallas--pocas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tbp-muro-vacio { height: 100%; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; border-radius: 16px;
  background: var(--cielo-3, #DCEBF8); box-shadow: inset 0 0 0 2px rgba(46,127,160,.18); color: var(--tinta-2, #4A6582); }
.tbp-muro-vacio svg { width: 44px; height: 44px; color: var(--celeste-osc, #2E7FA0); }
.tbp-muro-vacio b { font: 700 19px/1.25 var(--titulo, Fraunces, Georgia, serif); color: var(--marca, #1B3A5C); }
.tbp-muro-vacio p { margin: 0; max-width: 520px; font-size: 13.5px; line-height: 1.5; }
.tbp-soltar { display: none; position: absolute; inset: 4px; z-index: 3; align-items: center; justify-content: center; gap: 8px; border-radius: 16px; font: 700 15px var(--letra); color: #155E7A;
  background: rgba(228,244,250,.90); border: 2px dashed var(--celeste-osc, #2E7FA0); pointer-events: none; margin: 0; }
.tbp-soltar svg { width: 22px; height: 22px; }
.tbp-con-arrastre .tbp-soltar { display: flex; }
.tbp-muro.tbp-destino .tbp-soltar { background: rgba(196,230,244,.96); }

.tbp-p { display: flex; flex-direction: column; min-width: 0; padding: 8px 9px 7px; border-radius: 15px;
  background: color-mix(in srgb, rgb(var(--et)) 32%, #FFF);
  box-shadow: inset 0 0 0 1.5px rgba(var(--et), .55), 0 3px 10px rgba(27,58,92,.10); }
.tbp-p-cab { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 0 2px 6px; }
.tbp-p-cab h5 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14.5px/1.2 var(--titulo, Fraunces, Georgia, serif); color: var(--marca, #1B3A5C); }
.tbp-p-cab small { flex: none; font: 600 11.5px var(--letra); color: var(--tinta-2, #4A6582); }
.tbp-p-estado { flex: none; margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 99px; font: 800 11px var(--letra);
  background: rgb(var(--et)); color: #FFF; white-space: nowrap; }
.tbp-t--rev .tbp-p-estado { color: #3A2700; }
.tbp-p-estado svg { width: 13px; height: 13px; }
.tbp-p-visor { display: block; width: 100%; aspect-ratio: 16 / 8.6; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; container-type: inline-size; border-radius: 9px; }
button.tbp-p-visor { cursor: pointer; transition: transform .12s; }
button.tbp-p-visor:hover { transform: translateY(-1px); }
button.tbp-p-visor:hover .tbv { box-shadow: 0 6px 18px rgba(27,58,92,.26); }

/* El visor: una ventana de la herramienta, en pequeño. Todo va en em sobre un tamaño que sigue al ancho de la pantalla. */
.tbv { --app: #1F4366; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 9px; background: #FFF; color: #23364A;
  font: 500 clamp(6.5px, 2.25cqw, 10.5px)/1.35 var(--letra, Inter, sans-serif); box-shadow: 0 2px 7px rgba(27,58,92,.20); }
.tbv--hoja { --app: #1E7B4F; } .tbv--escrito, .tbv--nota { --app: #2B5FAE; } .tbv--correo, .tbv--bandeja { --app: #0F6CBD; } .tbv--navegador { --app: #55657A; } .tbv--documentos { --app: #1B3A5C; }
.tbv span, .tbv em, .tbv b, .tbv small, .tbv i { font-style: normal; }
.tbv-barra { display: flex; align-items: center; gap: .6em; padding: .45em .8em; border-bottom: 1px solid #E6EAEF; }
.tbv-app { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: .35em; background: var(--app); color: #FFF; flex: none; }
.tbv-app svg { width: 1.25em; height: 1.25em; }
.tbv-barra b { color: var(--app); font-weight: 700; white-space: nowrap; }
.tbv-barra em { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7A8896; }
.tbv-ctl { display: inline-flex; gap: .7em; flex: none; }
.tbv-ctl i { width: .75em; height: .75em; border: 1px solid #9AA7B4; }
.tbv-ctl i:first-child { height: 0; border-width: 1px 0 0; align-self: center; }
.tbv-ctl i:last-child { border: 0; background: linear-gradient(45deg, transparent 44%, #9AA7B4 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #9AA7B4 44% 56%, transparent 56%); }
.tbv-cinta { display: flex; gap: 1.3em; padding: .35em .9em 0; border-bottom: 1px solid #E6EAEF; color: #6B7A8A; font-size: .92em; }
.tbv-cinta span { padding-bottom: .3em; }
.tbv-cinta .on { color: var(--app); font-weight: 700; box-shadow: inset 0 -2px 0 var(--app); }
.tbv-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 29%; }
.tbv-lienzo { position: relative; display: block; min-width: 0; overflow: hidden; padding: .7em .8em; background: #F2F5F8; }
.tbv-notas { display: flex; flex-direction: column; gap: .5em; padding: .6em .7em; border-left: 1px solid #E6EAEF; background: #FFF; min-width: 0; }
.tbv-notas small { color: #7A8896; font-size: .9em; }
.tbv-nota { display: flex; flex-direction: column; gap: .25em; padding: .5em .6em; border-radius: .4em; background: #F6F8FA; box-shadow: inset 2px 0 0 rgb(var(--et)); overflow: hidden; }
.tbv-nota b { color: #13283F; }
.tbv-nota span { color: #52647A; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* hoja */
.tbv-formula { display: flex; align-items: center; gap: .6em; margin-bottom: .45em; padding: .25em .5em; background: #FFF; border: 1px solid #DDE3EA; border-radius: .25em; white-space: nowrap; overflow: hidden; }
.tbv-formula b { color: #7A8896; font-style: italic; }
.tbv-rejilla { width: 100%; border-collapse: collapse; table-layout: fixed; background: #FFF; }
.tbv-rejilla th { width: 1.9em; padding: .12em 0; background: #EEF1F4; color: #7A8896; font-weight: 600; border: 1px solid #DDE3EA; text-align: center; }
.tbv-rejilla thead th:not(:first-child) { width: auto; }
.tbv-rejilla td { padding: .2em .45em; border: 1px solid #E3E8EE; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbv-rejilla td.tbv-cab { background: #E6F2EC; font-weight: 700; color: #1B5E3F; }
.tbv-rejilla td.tbv-fuerte { font-weight: 700; }
.tbv-rejilla td.tbv-num { text-align: right; font-variant-numeric: tabular-nums; }
/* correo */
.tbv-campos { background: #FFF; border-radius: .3em .3em 0 0; border: 1px solid #E3E8EE; border-bottom: 0; }
.tbv-campos p { display: flex; gap: .8em; margin: 0; padding: .3em .7em; border-bottom: 1px solid #EEF1F4; white-space: nowrap; overflow: hidden; }
.tbv-campos small { width: 3.6em; color: #7A8896; flex: none; }
.tbv-campos b, .tbv-campos span { overflow: hidden; text-overflow: ellipsis; }
.tbv-texto { background: #FFF; border: 1px solid #E3E8EE; border-top: 0; border-radius: 0 0 .3em .3em; padding: .5em .7em; height: 100%; }
.tbv-texto p { margin: 0 0 .35em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* navegador */
.tbv-url { display: flex; align-items: center; gap: .5em; margin-bottom: .5em; padding: .3em .7em; border-radius: 99px; background: #FFF; border: 1px solid #DDE3EA; color: #52647A; white-space: nowrap; overflow: hidden; }
.tbv-url svg { width: 1em; height: 1em; flex: none; color: #3E9E7E; }
.tbv-url span { overflow: hidden; text-overflow: ellipsis; }
.tbv-web { display: flex; flex-direction: column; gap: .4em; height: 100%; padding: .7em .9em; background: #FFF; border: 1px solid #E3E8EE; border-radius: .3em; }
.tbv-web b { font: 700 1.25em var(--titulo, Fraunces, Georgia, serif); color: #13283F; }
.tbv-web p { margin: 0; color: #52647A; }
.tbv-web i { display: block; height: .55em; border-radius: .3em; background: #E9EDF2; }
.tbv-web i:nth-of-type(2) { width: 82%; } .tbv-web i:nth-of-type(3) { width: 58%; }
/* expediente */
.tbv-ruta { margin-bottom: .45em; color: #7A8896; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbv-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35em; }
.tbv-docs li { display: flex; align-items: center; gap: .6em; padding: .35em .6em; border-radius: .3em; background: #FFF; border: 1px solid #E3E8EE; }
.tbv-docs li i { flex: none; padding: .05em .35em; border-radius: .2em; background: #FBE9E5; color: #A3321F; font-weight: 800; font-size: .78em; }
.tbv-docs li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbv-docs li em { flex: none; padding: 0 .5em; border-radius: 99px; background: #E3F6EE; color: #1E6B55; font-weight: 700; font-size: .85em; }
.tbv-docs li.falta em { background: #FDEBC4; color: #7A4D05; }
.tbv-docs li.vacio { color: #7A8896; justify-content: center; }
/* documento */
.tbv-pagina { width: 84%; min-height: 115%; margin: 0 auto; padding: 1em 1.3em; background: #FFF; box-shadow: 0 1px 4px rgba(27,58,92,.16); }
.tbv-pagina b { display: block; margin-bottom: .5em; font: 700 1.3em/1.2 var(--titulo, Fraunces, Georgia, serif); color: #13283F; }
.tbv-pagina h6 { margin: .5em 0 .15em; font: 700 1em var(--letra); color: #13283F; }
.tbv-pagina p { margin: 0 0 .2em; color: #3F4E5E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Mientras el agente trabaja, una luz recorre el lienzo; a la espera, la propuesta queda apagada. */
.tbp-p[data-fase="trabajando"] .tbv-lienzo::after { content: ''; position: absolute; inset: 0 auto 0 -40%; width: 40%; background: linear-gradient(90deg, transparent, rgba(126,200,227,.38), transparent); animation: tbp-luz 1.9s ease-in-out infinite; }
.tbp-p[data-fase="espera"] .tbv-lienzo > * { opacity: .45; }
@keyframes tbp-luz { to { left: 110%; } }

/* Los pasos: juntos en el centro, con la ruedita. No son botones. */
.tbp-pasos { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 0 1px; font: 600 11.5px var(--letra); color: var(--tinta-2, #4A6582); }
.tbp-paso { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tbp-paso svg { width: 13px; height: 13px; }
.tbp-raya { width: 13px; height: 1.5px; border-radius: 1px; background: rgba(27,58,92,.22); }
.tbp-rueda { flex: none; width: 15px; height: 15px; margin-right: 3px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box; }
.tbp-rueda svg { width: 10px; height: 10px; stroke-width: 3; color: #FFF; }
.tbp-p[data-fase="trabajando"] .tbp-rueda { border: 2.5px solid rgba(var(--et), .25); border-top-color: rgb(var(--et)); animation: tbp-gira .85s linear infinite; }
.tbp-p[data-fase="espera"] .tbp-rueda { border: 2px dotted rgba(var(--et), .75); }
.tbp-p[data-fase="hecho"] .tbp-rueda { background: var(--ok, #3E9E7E); }
.tbp-p[data-fase="trabajando"] .tbp-paso { animation: tbp-paso 3.9s linear infinite; animation-delay: calc(var(--i) * 1.3s); opacity: .45; }
.tbp-p[data-fase="espera"] .tbp-paso, .tbp-p[data-fase="espera"] .tbp-raya { opacity: .45; }
.tbp-p[data-fase="hecho"] .tbp-paso { color: var(--et-t); }
@keyframes tbp-gira { to { transform: rotate(360deg); } }
@keyframes tbp-paso { 0%, 33% { opacity: 1; color: var(--et-t); } 34%, 100% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .tbp-p[data-fase="trabajando"] .tbp-rueda, .tbp-p[data-fase="trabajando"] .tbp-paso, .tbp-p[data-fase="trabajando"] .tbv-lienzo::after { animation: none; }
  .tbp-p[data-fase="trabajando"] .tbp-paso { opacity: 1; }
}

/* ---- el chat (el interruptor de la columna lo cambia por las pantallas) */
.tbp-chat { display: none; flex-direction: column; min-height: 0; padding: 12px 14px 10px; border-radius: 16px; background: var(--cielo-3, #DCEBF8); box-shadow: inset 0 0 0 1px rgba(46,127,160,.20); }
.tbp-sala[data-modo="chat"] .tbp-muro { display: none; }
.tbp-sala[data-modo="chat"] .tbp-chat { display: flex; }
.tbp-chat-log { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 4px 6px 8px 2px; list-style: none; display: flex; flex-direction: column; gap: 9px; scrollbar-width: thin; }
.tbp-msg { display: flex; align-items: flex-end; gap: 8px; max-width: min(720px, 82%); }
.tbp-msg p { margin: 0; padding: 9px 13px; border-radius: 15px 15px 15px 4px; background: #FFF; color: var(--tinta, #13283F); font-size: 13.5px; line-height: 1.45; box-shadow: 0 1px 3px rgba(27,58,92,.10); }
.tbp-msg > i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #E4F4FA; color: #155E7A; box-shadow: inset 0 0 0 1.5px var(--celeste-osc, #2E7FA0); }
.tbp-msg > i svg { width: 16px; height: 16px; }
.tbp-msg--yo { align-self: flex-end; }
.tbp-msg--yo p { border-radius: 15px 15px 4px 15px; background: var(--marca, #1B3A5C); color: #FFF; }
.tbp-chat-sug { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.tbp-chat-sug button { padding: 5px 12px; border: 0; border-radius: 99px; background: #FFF; cursor: pointer; font: 600 12.5px var(--letra); color: var(--marca, #1B3A5C); box-shadow: inset 0 0 0 1.5px rgba(27,58,92,.20); }
.tbp-chat-sug button:hover { background: var(--marca, #1B3A5C); color: #FFF; }
.tbp-chat-form { display: flex; gap: 8px; }
.tbp-chat-form input { flex: 1; min-width: 0; padding: 11px 14px; border: 0; border-radius: 12px; background: #FFF; font: 14px var(--letra); color: var(--tinta, #13283F); box-shadow: inset 0 0 0 1.5px rgba(27,58,92,.22); }
.tbp-chat-form input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--celeste-osc, #2E7FA0); }
.tbp-chat-nota { margin: 7px 2px 0; font-size: 11.5px; color: var(--tinta-3, #6B7F93); }

@media (max-width: 900px) {
  .tbp-sala { display: flex; flex-direction: column; overflow: auto; }
  .tbp-tareas, .tbp-muro, .tbp-chat { flex: none; }
  .tbp-scroll { max-height: 42vh; }
  .tbp-muro { overflow: visible; }
  .tbp-chat { min-height: 60vh; }
  .tbp-pantallas, .tbp-pantallas--pocas { grid-template-columns: 1fr; }
  .tbp-velo { padding: 6px; }
}

/* ---------------------------------------------------------------- la pantalla EN GRANDE (11-nov): pinchar una pantalla la abre
   igual que se ve en pequeño (la ventana de su herramienta) y, a la derecha, las notas del agente con lo que falta, los datos
   usados, las preguntas y los botones. Es la revisión de siempre (ren1t1-revision.js) con este aspecto. */
.tbp-modal:has(.pg) { width: min(1680px, 100%); padding: 0; overflow: hidden; border-top: 0; border-radius: 18px; background: none; display: flex; }
.tbp-modal [data-revision]:has(> .pg) { flex: 1; min-width: 0; min-height: 0; display: flex; }
.pg { flex: 1; min-width: 0; min-height: 0; gap: 9px; padding: 10px 12px 12px; border-radius: 18px;
  background: color-mix(in srgb, rgb(var(--et)) 32%, #FFF);
  box-shadow: inset 0 0 0 2px rgba(var(--et), .60); }
.pg .r1r-cab { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0 2px; }
.pg .r1r-cab h3 { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 20px; }
.pg .r1r-cab h3 small { display: inline; margin: 0; white-space: nowrap; }
.pg .r1r-cab .tbp-p-estado { margin-left: auto; font-size: 12.5px; padding: 3px 11px 3px 8px; }
.pg-cerrar { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px 5px 9px; border: 0; border-radius: 99px; background: #FFF; cursor: pointer; font: 700 12.5px var(--letra); color: var(--marca, #1B3A5C); box-shadow: inset 0 0 0 1.5px rgba(27,58,92,.22); }
.pg-cerrar svg { width: 14px; height: 14px; }
.pg-cerrar:hover { background: var(--marca, #1B3A5C); color: #FFF; }
.pg .r1r-dos, .pg .r1r-dos:has(.hc) { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 400px); gap: 10px; align-items: stretch; }
.pg .r1r-visor { position: static; gap: 0; min-height: 0; overflow: hidden; border-radius: 12px; background: #FFF; box-shadow: 0 3px 12px rgba(27,58,92,.22); --app: #1B3A5C; }
.pg .r1r-visor.tbv--hoja { --app: #1E7B4F; } .pg .r1r-visor.tbv--escrito { --app: #2B5FAE; } .pg .r1r-visor.tbv--correo { --app: #0F6CBD; }
.pg-barra { font: 500 13px/1.35 var(--letra); color: #23364A; }
.pg-barra em { font-style: normal; }
.pg .r1r-pestanas { flex-wrap: nowrap; gap: 2px; padding: 4px 12px 0; border-bottom: 1px solid #E6EAEF; overflow-x: auto; scrollbar-width: none; }
.pg .r1r-pestanas button, .pg .r1r-pestanas .r1r-pest-hoja, .pg .r1r-pestanas .r1r-pest-agente { flex: none; min-height: 30px; border-radius: 0; background: none; box-shadow: none; border: 0; color: #6B7A8A; font-size: 12.5px; }
.pg .r1r-pestanas button[aria-selected="true"], .pg .r1r-pestanas .r1r-pest-hoja[aria-selected="true"] { background: none; color: var(--app); box-shadow: inset 0 -2px 0 var(--app); }
.pg .r1r-hoja, .pg .r1r-hoja:has(.hc) { flex: 1; min-height: 0; max-height: none; border-radius: 0; box-shadow: none; overflow: auto; }
.pg .r1r-hoja { background: #F2F5F8; }
.pg .r1r-hoja:has(.hc) { background: #FFF; }
.pg .r1r-der { min-width: 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 14px; border-radius: 12px; background: #FFF; box-shadow: 0 3px 12px rgba(27,58,92,.18); scrollbar-width: thin; }
.pg .r1r-der > * { flex: none; margin: 0; }
.pg-notas-t { display: flex; align-items: center; gap: 6px; font: 800 11px var(--letra); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3, #6B7F93); }
.pg-notas-t svg { width: 14px; height: 14px; }
.pg .r1r-via { padding: 10px 12px; border-radius: 10px; background: #F6F8FA; color: var(--marca, #1B3A5C); box-shadow: inset 3px 0 0 rgb(var(--et)); }
.pg .r1r-via b { font-size: 14px; line-height: 1.3; }
.pg-falta, .pg-adjuntos, .pg-validada { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: 10px; font-size: 13px; line-height: 1.4; }
.pg-falta svg, .pg-adjuntos svg, .pg-validada svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.pg-falta span, .pg-adjuntos span, .pg-validada span { min-width: 0; overflow-wrap: anywhere; }
.pg-falta b, .pg-adjuntos b, .pg-validada b { display: block; font: 800 11px var(--letra); letter-spacing: .06em; text-transform: uppercase; }
.pg-falta { background: var(--ambar-suave, #FDEBC4); color: #6B4405; box-shadow: inset 0 0 0 1px var(--ambar, #E0A93B); }
.pg-adjuntos { background: #E4F4FA; color: #155E7A; }
.pg-validada { background: #E3F6EE; color: var(--verde-osc, #1E6B55); box-shadow: inset 0 0 0 1px #9ED5BF; }
.pg-h { display: flex; align-items: center; gap: 6px; font: 800 11px var(--letra); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2, #4A6582); }
.pg-h svg { width: 14px; height: 14px; }
.pg .r1r-tabla { font-size: 12.5px; }
.pg .r1r-tabla th, .pg .r1r-tabla td { padding: 7px 9px; overflow-wrap: anywhere; }
.pg .r1r-tabla tbody th { width: 84px; }
.pg .r1r-preguntas { padding: 12px; background: var(--cielo-4, #F4F8FC); box-shadow: inset 0 0 0 1px rgba(46,127,160,.22); }
.pg .r1r-botones { flex-direction: column; flex-wrap: nowrap; }
.pg .r1r-botones > button, .pg .r1r-botones > label { width: 100%; justify-content: center; min-height: 42px; box-sizing: border-box; }
.pg-adjuntar { cursor: pointer; }
.pg-adjuntar.ocupado { opacity: .6; cursor: progress; }
@media (max-width: 1000px) {
  .pg { overflow: auto; }
  .pg .r1r-dos, .pg .r1r-dos:has(.hc) { display: flex; flex-direction: column; }
  .pg .r1r-visor { min-height: 60vh; }
  .pg .r1r-der { overflow: visible; }
}

.pg .r1r-cab h3:focus { outline: none; }

/* «Pantalla completa» de la hoja dentro de la pantalla en grande: la ventana de la hoja ocupa todo el pop-up (no la ciudad). */
.tbp-modal .hc.hc-completa { position: static; inset: auto; z-index: auto; box-shadow: none; }
.tbp-modal.pg-ancha .pg .r1r-dos, .tbp-modal.pg-ancha .pg .r1r-dos:has(.hc) { grid-template-columns: minmax(0, 1fr); }
.tbp-modal.pg-ancha .pg .r1r-der, .tbp-modal.pg-ancha .pg .r1r-cab { display: none; }
.tbp-modal.pg-ancha .pg { padding: 10px; }
.pg .r1r-hoja:has(.hc) { display: flex; flex-direction: column; }
.pg .r1r-hoja > .hc { flex: 1; min-height: 0; }

/* ---------------------------------------------------------------- la cortina: un cristal sobre la pantalla, con el proceso en grande */
.tbp-pasos { position: relative; }
.tbp-p-cambio { position: absolute; right: 0; bottom: -1px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 7px; cursor: pointer; background: rgba(255,255,255,.65); color: var(--et-t); box-shadow: inset 0 0 0 1px rgba(var(--et), .45); }
.tbp-p-cambio svg { width: 14px; height: 14px; }
.tbp-p-cambio:hover { background: #FFF; }
.tbp-p-cambio[aria-pressed="true"] { background: rgb(var(--et)); color: #FFF; box-shadow: none; }
.tbp-t--rev .tbp-p-cambio[aria-pressed="true"] { color: #3A2700; }
.tbp-p-visor { position: relative; }
.tbp-cortina { position: absolute; inset: 0; z-index: 2; display: none; align-items: center; justify-content: center; border-radius: 9px;
  background: color-mix(in srgb, rgb(var(--et)) 16%, rgba(255,255,255,.62)); -webkit-backdrop-filter: blur(5px) saturate(1.1); backdrop-filter: blur(5px) saturate(1.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); font: 700 clamp(7px, 2.5cqw, 11.5px)/1.2 var(--letra, Inter, sans-serif); color: var(--marca, #1B3A5C); }
.tbp-p--cortina .tbp-cortina { display: flex; }
.tbp-p--cortina .tbv-lienzo::after { animation: none; display: none; }
.tbp-cadena { display: flex; align-items: flex-start; justify-content: center; gap: .5em; width: 94%; }
.tbp-nodo { flex: 0 1 16%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .7em; text-align: center; }
.tbp-nodo > i { display: grid; place-items: center; width: 4.6em; height: 4.6em; border-radius: 50%; background: #FFF; color: var(--tinta-3, #6B7F93); box-shadow: 0 .2em .7em rgba(27,58,92,.18), inset 0 0 0 .18em rgba(27,58,92,.16); }
.tbp-nodo > i svg { width: 2.2em; height: 2.2em; }
.tbp-nodo > b { font-weight: 700; color: var(--tinta-2, #4A6582); overflow-wrap: anywhere; }
.tbp-flecha { flex: 1 1 0; min-width: .8em; height: .18em; margin-top: 2.25em; border-radius: 1px; background: rgba(27,58,92,.30); position: relative; }
.tbp-flecha::after { content: ''; position: absolute; right: -.1em; top: 50%; width: .6em; height: .6em; border: solid rgba(27,58,92,.42); border-width: .18em .18em 0 0; transform: translateY(-50%) rotate(45deg); }
.tbp-nodo--hecho > i { background: rgb(var(--et)); color: #FFF; box-shadow: 0 .2em .7em rgba(27,58,92,.18); }
.tbp-t--rev .tbp-nodo--hecho > i { color: #3A2700; }
.tbp-nodo--hecho > b { color: var(--marca, #1B3A5C); }
.tbp-nodo--ahora > i { color: var(--et-t); box-shadow: 0 0 0 .3em rgba(var(--et), .45), 0 .2em .9em rgba(27,58,92,.22); animation: tbp-late 1.6s ease-in-out infinite; }
.tbp-nodo--ahora > b { color: var(--et-t); font-weight: 800; }
.tbp-nodo--gira { opacity: .5; animation: tbp-nodo 3.9s linear infinite; animation-delay: calc(var(--i) * 1.3s); }
.tbp-nodo--pend { opacity: .5; }
@keyframes tbp-late { 50% { box-shadow: 0 0 0 .55em rgba(var(--et), .22), 0 .2em .9em rgba(27,58,92,.22); } }
@keyframes tbp-nodo { 0%, 33% { opacity: 1; } 34%, 100% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .tbp-nodo--ahora > i, .tbp-nodo--gira { animation: none; } .tbp-nodo--gira { opacity: 1; } }
.tbp-p--cortina .tbp-pasos > :not(.tbp-p-cambio) { visibility: hidden; }

/* «Cómo lo ha hecho»: el botón que rehace despacio lo que se ve en la ventana. */
.pg-notas-t > span { flex: 1; }
.pg-como { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 8px; border: 0; border-radius: 99px; cursor: pointer; background: #E4F4FA; color: #155E7A;
  box-shadow: inset 0 0 0 1.5px var(--celeste-osc, #2E7FA0); font: 700 12px var(--letra); letter-spacing: 0; text-transform: none; }
.pg-como svg { width: 13px; height: 13px; }
.pg-como:hover, .pg-como.jugando { background: var(--celeste-osc, #2E7FA0); color: #FFF; }
/* La leyenda de la hoja, siempre pegada abajo de la ventana (con un pequeño margen); la rejilla ocupa lo que queda. */
.pg .hc .hc-rejilla { flex: 1 1 auto; min-height: 0; max-height: none; }
.pg .hc .hc-leyenda, .pg .hc .hc-cambios { flex: none; }
.pg .hc .hc-leyenda { margin-top: auto; padding: 8px 12px 10px; }
/* ---------------------------------------------------------------- lo abierto de una tarjeta: pop-up encima del tablero */
.tbp-velo { position: absolute; inset: 0; z-index: 5; display: flex; justify-content: center; align-items: stretch; padding: 14px 18px;
  background: rgba(27,58,92,.30); backdrop-filter: blur(1.5px); }
.tbp-velo[hidden] { display: none; }
.tbp-modal { width: min(1480px, 100%); overflow: auto; padding: 14px 20px 20px; border-radius: 14px; background: var(--papel, #FFFDF8);
  box-shadow: 0 20px 60px rgba(27,58,92,.35); border-top: 4px solid var(--ambar, #E0A93B); }

@media (max-width: 900px) {
  .tbp-cols { grid-template-columns: repeat(4, minmax(240px, 1fr)); overflow-x: auto; }
  .tbp-velo { padding: 6px; }
}
/* La guía «Cómo se trabaja» es corta: pop-up estrecho y arriba. */
.tbp-velo:has(.tbp-guia-modal) { align-items: flex-start; }
.tbp-modal:has(.tbp-guia-modal) { width: min(760px, 100%); max-height: 100%; }

/* ---------------------------------------------------------------- el expediente central del cliente (encima de todo) */
.exc { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; padding: calc(var(--bajo-cab, 84px) + 14px) max(28px, 3vw) 28px;
  background: rgba(27,58,92,.38); backdrop-filter: blur(2px); font-family: var(--letra, Inter, sans-serif); color: var(--tinta, #13283F); }
.exc[hidden] { display: none; }
.exc-hoja { width: min(1560px, 100%); display: flex; flex-direction: column; min-height: 0; border-radius: 16px; background: var(--papel, #FFFDF8);
  box-shadow: 0 28px 80px rgba(27,58,92,.42); border-top: 6px solid var(--madera-osc, #7A4B1E); overflow: hidden; }
.exc-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 22px 12px; border-bottom: 1px solid rgba(27,58,92,.12); }
.exc-k { margin: 0; font: 800 11px var(--letra); letter-spacing: .06em; text-transform: uppercase; color: var(--madera-osc, #7A4B1E); display: flex; gap: 8px; align-items: center; }
.exc-cab h2 { margin: 2px 0 0; font: 700 26px/1.15 var(--titulo, Fraunces, Georgia, serif); color: var(--marca, #1B3A5C); }
.exc-sub { margin: 2px 0 0; color: var(--tinta-2, #4A6582); font-size: 13px; }
.exc-sub code { font-size: 11.5px; color: var(--tinta-3, #6B7F93); }
.exc-cerrar { border: 0; background: none; font-size: 20px; color: var(--tinta-3, #6B7F93); cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.exc-cerrar:hover { background: var(--papel-2, #F7F4EE); }
.exc-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.exc-izq, .exc-der { min-height: 0; overflow: auto; padding: 14px 20px 20px; }
.exc-der { background: var(--papel-2, #F7F4EE); border-left: 1px solid rgba(27,58,92,.10); }
.exc-bloque + .exc-bloque { margin-top: 18px; }
.exc-bloque h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font: 800 12px var(--letra); letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-2, #4A6582); }
.exc-bloque h3 svg { width: 16px; height: 16px; }
/* 4-nov (check-in, Lucas y Andrés): la izquierda, visual. Cada estado es un juego de colores: --f fondo, --t tinta,
   --b borde, --p punto. Las casillas de sala usan los iconos del tablero; las que no tienen nada, en gris claro. */
.exc-s-pend { --f: #E8EEF5; --t: var(--marca, #1B3A5C); --b: rgba(27,58,92,.32); --p: #12283F; }
.exc-s-ag { --f: #E4F4FA; --t: #155E7A; --b: #9CCFE2; --p: var(--celeste-osc, #2E7FA0); }
.exc-s-rev { --f: var(--ambar-suave, #FDEBC4); --t: #7A4D05; --b: var(--ambar, #E0A93B); --p: var(--ambar, #E0A93B); }
.exc-s-bloq, .exc-t-bloq { --f: var(--rojo-suave, #FBE9E5); --t: #8A2F1F; --b: #E3A193; --p: var(--rojo, #C8553D); }
.exc-s-esp, .exc-t-esp { --f: #F3F0E8; --t: #6A5326; --b: #D9CDB2; --p: #B39A64; }
.exc-s-hecho, .exc-t-hecho, .exc-t-ok { --f: #E3F6EE; --t: var(--verde-osc, #1E6B55); --b: #9ED5BF; --p: var(--ok, #3E9E7E); }
.exc-s-desc, .exc-t-desc { --f: #F1F3F5; --t: var(--tinta-3, #6B7F93); --b: #D7E3EE; --p: var(--tinta-3, #6B7F93); }
.exc-s-ok { --f: #F6F7F8; --t: #A3B0BC; --b: transparent; --p: #A3B0BC; }
.exc-s-notoca { --f: transparent; --t: #C3CCD4; --b: #E3E7EB; --p: #C3CCD4; }
.exc-t-pend { --f: #E8EEF5; --t: var(--marca, #1B3A5C); --b: rgba(27,58,92,.22); --p: #12283F; }
.exc-t-rev { --f: #FFF6E0; --t: #7A4D05; --b: var(--ambar, #E0A93B); --p: var(--ambar, #E0A93B); }
.exc-t-falta { --f: var(--rojo-suave, #FBE9E5); --t: #A3321F; --b: var(--rojo, #C8553D); --p: var(--rojo, #C8553D); }
.exc-t-info { --f: #FFF; --t: var(--marca, #1B3A5C); --b: rgba(27,58,92,.12); --p: var(--marca, #1B3A5C); }
.exc-t-na { --f: #F6F7F8; --t: #8A98A6; --b: transparent; --p: #A3B0BC; }
.exc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Datos del caso: teselas (icono del dato, valor corto, y arriba a la derecha el icono de su estado). */
.exc-teselas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; container-type: inline-size; }
.exc-tes { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 10px; border-radius: 11px; background: var(--f); color: var(--t); box-shadow: inset 0 0 0 1px var(--b); cursor: help; }
.exc-tes-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #FFF; box-shadow: 0 1px 2px rgba(27,58,92,.14); }
.exc-tes-ic svg { width: 19px; height: 19px; }
.exc-tes-v { display: flex; flex-direction: column; min-width: 0; }
.exc-tes-v b { font: 800 14px/1.2 var(--letra); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exc-tes-v small { font: 600 11px/1.3 var(--letra); opacity: .85; white-space: nowrap; }
.exc-tes-e { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--p); color: #FFF; box-shadow: 0 0 0 2px var(--papel, #FFFDF8); }
.exc-tes-e svg { width: 12px; height: 12px; stroke-width: 2.6; }
.exc-puntos { display: flex; gap: 3px; margin-top: 4px; }
.exc-puntos i { width: 14px; height: 5px; border-radius: 3px; background: var(--ok, #3E9E7E); }
.exc-puntos .exc-p-rev { background: var(--ambar, #E0A93B); } .exc-puntos .exc-p-falta { background: var(--rojo, #C8553D); }
/* Con poco ancho (pantalla de 1280, o móvil), la tesela se pone de pie: icono arriba y valor debajo, sin cortar. */
@container (max-width: 640px) {
  .exc-tes { flex-direction: column; justify-content: flex-start; gap: 5px; padding: 9px 6px 8px; text-align: center; }
  .exc-tes-v { align-items: center; max-width: 100%; }
  .exc-tes-v b { font-size: 13px; white-space: normal; overflow-wrap: anywhere; }
}
/* Dónde está en cada sala: un edificio por fila; a la derecha, su tira de salas (T1…T5 alineadas entre edificios). */
.exc-eds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.exc-ed { display: grid; grid-template-columns: minmax(112px, 168px) minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px 7px 6px 11px; border-radius: 12px; background: #FFF; box-shadow: inset 0 0 0 1px rgba(27,58,92,.10); }
.exc-ed-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; min-width: 0; cursor: help; }
.exc-ed-cab code { font: 800 11.5px var(--letra); padding: 2px 7px; border-radius: 6px; background: var(--marca, #1B3A5C); color: #FFF; }
.exc-ed-nom { order: 3; flex-basis: 100%; font: 600 12px/1.25 var(--letra); color: var(--tinta-2, #4A6582); }
.exc-cont { display: flex; align-items: center; gap: 3px; }
.exc-cont i { width: 9px; height: 9px; border-radius: 50%; background: var(--p); }
.exc-cont svg { width: 16px; height: 16px; color: var(--ok, #3E9E7E); stroke-width: 2.6; }
.exc-tira { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.exc-cas { width: 100%; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; border: 0; border-radius: 10px;
  background: var(--f); color: var(--t); box-shadow: inset 0 0 0 1.5px var(--b); cursor: pointer; font: inherit; transition: transform .1s, box-shadow .1s; }
.exc-cas.exc-s-notoca { box-shadow: inset 0 0 0 1.5px var(--b); background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(27,58,92,.035) 6px 8px); }
.exc-cas:hover, .exc-cas:focus-visible { transform: translateY(-1px); box-shadow: inset 0 0 0 2px var(--p), 0 3px 9px rgba(27,58,92,.16); }
.exc-cas-ic { display: grid; place-items: center; }
.exc-cas-ic svg { display: block; width: 21px; height: 21px; }
.exc-cas-ic i { display: block; width: 14px; height: 2.5px; border-radius: 2px; background: currentColor; }
.exc-cas code { font: 800 11px var(--letra); letter-spacing: .02em; color: inherit; }
.exc-cas.exc-s-ok code, .exc-cas.exc-s-notoca code { font-weight: 700; }
/* La leyenda: sólo los iconos que salen en esta ficha, para los primeros días. */
.exc-ley { list-style: none; display: flex; flex-wrap: wrap; gap: 5px 12px; margin: 10px 2px 0; padding: 0; font: 600 11px var(--letra); color: var(--tinta-3, #6B7F93); }
.exc-ley li { display: inline-flex; align-items: center; gap: 5px; }
.exc-ley .exc-cas-ic { width: 20px; height: 20px; border-radius: 6px; background: var(--f); color: var(--t); box-shadow: inset 0 0 0 1px var(--b); }
.exc-ley .exc-cas-ic svg { width: 13px; height: 13px; }
.exc-ley .exc-cas-ic i { width: 9px; height: 2px; }
.exc-docs { display: flex; flex-direction: column; min-height: 100%; }
.exc-pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.exc-pestanas button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 11px; border: 0; border-radius: 9px; background: #FFF; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(27,58,92,.14); font: 600 12.5px var(--letra); color: var(--tinta, #13283F); }
.exc-pestanas button[aria-selected="true"] { background: var(--marca, #1B3A5C); color: #FFF; box-shadow: none; }
.exc-pestanas span { font-size: 11px; font-weight: 700; }
.exc-d-ok { color: var(--ok, #3E9E7E); } .exc-d-rev { color: #9A6A0C; } .exc-d-falta { color: var(--rojo, #C8553D); }
.exc-pestanas button[aria-selected="true"] span { color: var(--menta, #52E2AC); }
.exc-visor { flex: 1; border-radius: 12px; background: #E9E4DA; padding: 14px; overflow: auto; }
.exc-falta { display: flex; gap: 8px; align-items: center; margin: 30px auto; justify-content: center; color: var(--tinta-2, #4A6582); }
.exc-falta svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .exc { padding: 70px 6px 6px; } .exc-cuerpo { grid-template-columns: 1fr; overflow: auto; } .exc-izq, .exc-der { overflow: visible; } }
/* 4-nov: en una columna, la izquierda ocupa su alto (con min-height: 0 la fila encogía y los documentos la tapaban). */
@media (max-width: 900px) { .exc-izq, .exc-der { min-height: auto; } }
/* El nombre de la tarjeta abre el expediente: que se note que se puede pinchar. */
.tbp-lista .r1c-quien .nom { text-decoration: underline; text-decoration-color: rgba(27,58,92,.22); text-underline-offset: 3px; }
.tbp-lista .r1c-quien:hover .nom { text-decoration-color: var(--celeste-osc, #2E7FA0); color: var(--celeste-osc, #2E7FA0); }

/* ---------------------------------------------------------------- los pipelines de la sala, en la barra de arriba (A163) */
.tbp-pipes { align-items: center; padding-left: 10px; margin-left: 2px; border-left: 2px solid rgba(15,42,67,.25); }
.tbp-pipes[hidden] { display: none; }
.tbp-pipes button { font-weight: 700; }

/* Freedom (12-nov): cómo se lanza el pipeline, lo que lleva dentro y el aviso de hueco reservado. */
.tbp-lanza { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding: 3px 4px 3px 10px; border-radius: 999px; font: 700 12px/1.2 inherit; color: #fff; background: #2B5D8A; white-space: nowrap; }
.tbp-lanza i { font-style: normal; font-weight: 600; background: rgba(255, 255, 255, .92); color: #1B3A5C; border-radius: 999px; padding: 2px 9px; }
.tbp-lanza--solo { background: #2F6F4F; } .tbp-lanza--formulario { background: #8A5A12; } .tbp-lanza--hueco { background: #8C8778; }
.tbp-incluye, .tbp-hueco { margin: 0 16px 8px; font-size: 13px; color: rgba(27, 58, 92, .78); }
.tbp-hueco { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: 10px; background: repeating-linear-gradient(135deg, #FDF6E6, #FDF6E6 10px, #FAEFD3 10px, #FAEFD3 20px); border: 1px solid #E8D29A; color: #5C4A05; }
.tbp-hueco svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }