/* Ciudad Euskaltax · motor visual (Opus 5.5, 29-oct-2026).
   Marca del cliente (ADR-020): tinta del logotipo medida en el granate de Getxo (v0 de la ciudad, 21-oct) → #1B3A5C y su claro #D7E3EE.
   Estética luminosa de la ciudad de Andrés: cielo claro, papel, madera, aristas finas. Ámbar y rojo solo en andones y avisos.
   Lo que se lee va de frente y con margen; nada se abre a pantalla completa en escritorio (A109). */
:root {
  --marca: #1B3A5C; --marca-2: #12283F; --marca-claro: #D7E3EE; --marca-velo: rgba(27, 58, 92, .08);
  --tinta: #13283F; --tinta-2: #4A6582; --tinta-3: #6B7F93;
  --papel: #FFFDF8; --papel-2: #F7F4EE; --papel-3: #EFE6D6; --madera: #C79A68; --madera-osc: #7A4B1E;
  --cielo-1: #6FA8DC; --cielo-2: #A9CFEF; --cielo-3: #DCEBF8; --cielo-4: #F4F8FC;
  --menta: #52E2AC; --celeste: #7EC8E3; --celeste-osc: #2E7FA0; --verde-osc: #1E6B55;
  --ambar: #E0A93B; --ambar-suave: #FDEBC4; --rojo: #C8553D; --rojo-suave: #FBE9E5;
  --sombra: 0 10px 34px rgba(27, 58, 92, .22); --sombra-2: 0 4px 14px rgba(27, 58, 92, .18);
  --radio: 14px; --letra: Inter, system-ui, -apple-system, sans-serif; --titulo: Fraunces, Georgia, serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--cielo-3); color: var(--tinta); font: 14px/1.45 var(--letra); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--celeste-osc); outline-offset: 2px; }
kbd { font: 600 10.5px var(--letra); padding: 1px 5px; border-radius: 5px; background: rgba(255,255,255,.18); border: 1px solid currentColor; opacity: .75; }

/* ---------------------------------------------------------------- escena */
.mundo { position: fixed; inset: 0; background: linear-gradient(var(--cielo-1), var(--cielo-2) 45%, var(--cielo-3) 80%, var(--cielo-4)); }
.lienzo { position: absolute; inset: 0; }
.lienzo canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; touch-action: none; }
.lienzo canvas.puntero { cursor: pointer; }
.rotulos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* Andón flotante: icono + cifra; el estado se lee por forma e icono, no solo por color. */
.andon {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 4px; border: 0; border-radius: 99px; background: #FFF; box-shadow: var(--sombra-2), inset 0 0 0 1.5px rgba(27,58,92,.16);
  font: 800 12.5px/1 var(--letra); color: var(--tinta); white-space: nowrap; transition: transform .12s, box-shadow .12s; will-change: transform;
}
.andon:hover, .andon:focus-visible { box-shadow: 0 6px 18px rgba(27,58,92,.32), inset 0 0 0 2px var(--marca); z-index: 3; }
.andon::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #FFF; filter: drop-shadow(0 1px 0 rgba(27,58,92,.14)); }
.andon .chip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px 3px 4px; border-radius: 99px; }
.andon .chip svg { width: 16px; height: 16px; flex: none; }
.andon .chip.pend { background: #EEF2F6; color: var(--marca); }
.andon .chip.rev { background: var(--ambar-suave); color: #7A4D05; box-shadow: inset 0 0 0 1.5px var(--ambar); }
.andon .chip.bloq { background: var(--rojo-suave); color: #8A2F1F; box-shadow: inset 0 0 0 1.5px var(--rojo); }
.andon .chip.ag { background: #E4F4FA; color: #155E7A; box-shadow: inset 0 0 0 1.5px var(--celeste-osc); }
.andon .chip.ag svg { animation: latido 1.4s ease-in-out infinite; }
.andon .chip.ok { background: #E3F6EE; color: var(--verde-osc); }
.andon .chip.esp { background: #F3F0E8; color: #6A5326; box-shadow: inset 0 0 0 1.5px #B9A27A; border-radius: 6px; }
.andon .chip.desc { background: #FFF; color: var(--tinta-3); box-shadow: inset 0 0 0 1.5px rgba(107,127,147,.55); border: 0; background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(107,127,147,.12) 4px 6px); }
.andon .nombre { padding: 0 6px 0 4px; font: 700 11.5px/1 var(--letra); color: var(--tinta-2); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
/* Andón de edificio: el nombre solo al pasar o enfocar (sin texto permanente sobre la ciudad). Revisión 9: en posición
   absoluta (no ensancha el andón) y colocado por el motor dentro del área útil, también junto al borde y en 390 px. */
.andon .nombre.al-foco { display: none; position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; max-width: min(240px, calc(100vw - 24px));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px 9px; border-radius: 8px; background: var(--marca); color: #FBF8F1; box-shadow: var(--sombra-2); }
.andon:hover .nombre.al-foco, .andon:focus-visible .nombre.al-foco { display: inline-block; }
.andon.grande { font-size: 13.5px; padding: 4px 5px; }
.andon.grande .chip svg { width: 18px; height: 18px; }
.andon.atenuado { opacity: .55; }
@keyframes latido { 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .andon .chip.ag svg { animation: none; } }

/* Rótulo de objeto en una sala: solo pictograma; el nombre aparece al pasar o enfocar. */
.rot-obj {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 4px; border: 0; border-radius: 99px; background: rgba(255,255,255,.96); box-shadow: var(--sombra-2);
  font: 700 12px/1 var(--letra); color: var(--marca); white-space: nowrap; will-change: transform;
}
.rot-obj i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--marca); color: #FFF; font: 800 11.5px var(--letra); font-style: normal; }
.rot-obj svg { width: 18px; height: 18px; }
/* El nombre no ensancha el rótulo (taparía a los vecinos): queda para lectores de pantalla y el motor lo enseña aparte. */
.rot-obj span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rot-obj.activo, .rot-obj:focus-visible { z-index: 5; box-shadow: 0 0 0 2.5px var(--marca), var(--sombra-2); }
/* Línea fina del ancla al rótulo cuando la colocación lo separa de su objeto; un punto marca el ancla. */
.rot-guia { position: absolute; left: 0; top: 0; height: 1.5px; background: rgba(27,58,92,.55); transform-origin: 0 50%; pointer-events: none; will-change: transform; }
.rot-guia::before { content: ''; position: absolute; left: -3px; top: -2.25px; width: 6px; height: 6px; border-radius: 50%; background: var(--marca); box-shadow: 0 0 0 1.5px #FFF; }
/* Nombre del rótulo señalado o enfocado: junto a él, sin tapar a otros, sin interceptar clics. */
.rot-nombre { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; max-width: 300px; padding: 5px 10px; border-radius: 9px; background: var(--marca); color: #FBF8F1;
  font: 700 12px/1.3 var(--letra); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--sombra-2); will-change: transform; }
/* Pantallas táctiles: objetivo cómodo de 44 px sin agrandar la gráfica en escritorio. */
@media (pointer: coarse) { .rot-obj, .rot-obj.nodo { min-width: 44px; height: 44px; justify-content: center; } }
.rot-obj.agente i { background: var(--celeste-osc); }
.rot-obj.nodo { height: 26px; background: rgba(255,255,255,.9); }
.rot-obj.nodo svg { width: 16px; height: 16px; }
.rot-obj.desconocido { box-shadow: inset 0 0 0 2px var(--rojo), var(--sombra-2); }
.rot-sala { position: absolute; left: 0; top: 0; pointer-events: none; font: 800 12px/1 var(--letra); color: rgba(122,75,30,.75); letter-spacing: .04em; will-change: transform; }

/* ---------------------------------------------------------------- cabecera */
.cab {
  position: fixed; left: 14px; right: 14px; top: 12px; z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  padding: 8px 10px 8px 12px; border-radius: 16px; background: #FFFFFF; box-shadow: var(--sombra);
  /* Mate, sin backdrop-filter: el desenfoque de fondo de la cabecera llegaba a componerse sobre la navegación de debajo
     y la dejaba ilegible con la cámara quieta (CUA, revisión 3). */
}
.cab-marca { display: flex; align-items: center; flex: none; }
.cab-marca img { height: 34px; width: auto; display: block; }
.cab-marca { gap: 9px; text-decoration: none; }
.cab-nombre { display: flex; flex-direction: column; line-height: 1.05; color: var(--marca); }
.cab-nombre b { font: 800 17px/1 var(--letra); letter-spacing: .02em; text-transform: uppercase; }
.cab-nombre small { font: 600 10.5px/1.2 var(--letra); color: var(--tinta-2); letter-spacing: .04em; }
@media (max-width: 700px) { .cab-nombre { display: none; } }
.miga { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; min-width: 0; flex: 1 1 0; overflow: hidden; font-size: 13px; }
.miga a, .miga span { padding: 4px 7px; border-radius: 8px; color: var(--tinta-2); text-decoration: none; white-space: nowrap; flex: none; }
.miga .actual { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.miga a:hover { background: var(--marca-velo); color: var(--marca); }
.miga .sep { padding: 0; color: var(--tinta-3); }
.miga .actual { color: var(--marca); font-weight: 700; }
.miga code { font: 700 11px var(--letra); color: var(--madera-osc); letter-spacing: .04em; margin-right: 4px; }
.cab-filtro { display: flex; gap: 8px; align-items: center; }
.cab-filtro label { display: flex; align-items: center; gap: 6px; font: 600 11px var(--letra); color: var(--tinta-2); }
.cab-filtro label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cab-filtro select { border: 1px solid rgba(27,58,92,.2); border-radius: 8px; padding: 5px 8px; background: #FFF; color: var(--tinta); font: 600 12.5px var(--letra); max-width: 140px; }
.cab-filtro.activo select { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.cab-estado { display: flex; gap: 6px; align-items: center; }
.estado-chip { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 99px; background: #EEF2F6; color: var(--tinta-2); cursor: help; }
.estado-chip svg { width: 16px; height: 16px; }
.estado-chip > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.estado-chip.ok { background: #E3F6EE; color: var(--verde-osc); }
.estado-chip.mal { background: var(--rojo-suave); color: #8A2F1F; }
.estado-chip.practica { background: #F1ECFB; color: #4B3A86; }
.cab-indice { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 10px; padding: 8px 12px; background: var(--marca); color: #FFF; cursor: pointer; font-weight: 700; font-size: 13px; }
.cab-indice svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; }

/* ---------------------------------------------------------------- navegación de capas */
.navegar { position: fixed; left: 14px; top: var(--bajo-cab, 84px); z-index: 21; isolation: isolate; display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; max-width: calc(100% - 28px); }
.nav-atras { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 11px; padding: 9px 13px; background: var(--marca); color: #FFF; cursor: pointer; font: 700 13px var(--letra); box-shadow: var(--sombra-2); }
.nav-atras span { font-size: 18px; line-height: 1; }
.hermanas { display: flex; gap: 6px; flex-wrap: wrap; }
.hermanas button { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 10px; padding: 7px 10px; background: rgba(255,255,255,.95); cursor: pointer; font: 700 12px var(--letra); color: var(--tinta-2); box-shadow: var(--sombra-2); }
.hermanas button svg { width: 16px; height: 16px; }
.hermanas button[aria-current="true"] { background: var(--marca); color: #FFF; }
.hermanas button .mini { font: 800 11px var(--letra); padding: 1px 6px; border-radius: 99px; background: #EEF2F6; color: var(--marca); }
.hermanas button .mini.rev { background: var(--ambar-suave); color: #7A4D05; }
.hermanas button .mini.bloq { background: var(--rojo-suave); color: #8A2F1F; }
.hermanas button .mini.esp, .indice-lista .mini.esp { background: #F3F0E8; color: #6A5326; }
.hermanas button .mini.ok { background: #E3F6EE; color: var(--verde-osc); }
.mini i.ag { font-style: normal; margin-right: 4px; padding: 0 4px; border-radius: 99px; background: #E4F4FA; color: #155E7A; }
.hermanas button .mini.desc { background: transparent; color: var(--tinta-3); box-shadow: inset 0 0 0 1px rgba(107,127,147,.5); }
.plantas { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 15; display: flex; flex-direction: column; gap: 6px; }
.plantas button { min-width: 54px; border: 0; border-radius: 10px; padding: 8px 10px; background: rgba(255,255,255,.95); cursor: pointer; font: 800 13px var(--letra); color: var(--marca); box-shadow: var(--sombra-2); }
.plantas button[aria-current="true"] { background: var(--marca); color: #FFF; }
.plantas button small { display: block; font: 600 10.5px var(--letra); opacity: .8; }
.ayuda { position: fixed; left: 50%; bottom: 46px; pointer-events: none; transform: translateX(-50%); z-index: 12; margin: 0; max-width: calc(100% - 28px); padding: 7px 14px; border-radius: 99px; background: rgba(27,58,92,.84); color: #FBF8F1; font-size: 12.5px; text-align: center; }
.tip { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; max-width: min(320px, calc(100vw - 16px)); overflow-wrap: anywhere; padding: 8px 11px; border-radius: 10px; background: var(--marca); color: #FBF8F1; box-shadow: var(--sombra-2); }
.tip b { display: block; font-size: 13px; }
.tip small { display: block; font-size: 11.5px; opacity: .85; }
.tip code { font: 700 10.5px var(--letra); color: var(--menta); letter-spacing: .05em; }
.aviso { position: fixed; left: 50%; top: var(--bajo-cab, 88px); transform: translateX(-50%); z-index: 60; max-width: min(620px, calc(100% - 28px)); padding: 11px 16px 11px 14px; border-radius: 12px; background: #FFF8E8; border-left: 5px solid var(--ambar); box-shadow: var(--sombra); font-weight: 600; }
.aviso.mal { background: var(--rojo-suave); border-left-color: var(--rojo); }
.aviso.ok { background: #E9F7F0; border-left-color: #23A877; }
.aviso button { margin-left: 10px; border: 0; background: none; text-decoration: underline; cursor: pointer; font-weight: 700; color: var(--marca); }

/* ---------------------------------------------------------------- la hoja de trabajo (papel, con margen) */
.velo { position: fixed; inset: 0; z-index: 28; background: rgba(27,58,92,.14); }
.hoja {
  position: fixed; z-index: 30; top: var(--bajo-cab, 84px); right: 18px; width: min(560px, calc(100% - 36px));
  max-height: calc(100% - var(--bajo-cab, 84px) - 52px);
  display: flex; flex-direction: column; border-radius: 18px; background: var(--papel); box-shadow: 0 24px 80px rgba(27,58,92,.38);
  border-top: 6px solid var(--marca); overflow: hidden;
}
.hoja[data-ancho="estrecha"] { width: min(430px, calc(100% - 36px)); }
.hoja[data-ancho="ancha"] { width: min(880px, calc(100% - 36px)); }
.hoja-cerrar { position: absolute; right: 10px; top: 8px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 26px; line-height: 1; color: var(--tinta-2); cursor: pointer; }
.hoja-cerrar:hover { background: var(--papel-3); }
.hoja-cuerpo { flex: 0 1 auto; min-height: 0; overflow: auto; padding: 14px 20px 20px; overscroll-behavior: contain; }
.hoja h2 { margin: 2px 44px 4px 0; font: 700 20px/1.2 var(--titulo); color: var(--marca); }
.cab-hoja { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-right: 40px; }
.cab-hoja h2 { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 19px; }
.cab-hoja code { font: 800 11px var(--letra); padding: 3px 7px; border-radius: 6px; background: var(--papel-3); color: var(--marca); letter-spacing: .04em; }
.cab-hoja .marca-base svg, .cab-hoja .marca-prop svg { width: 12px; height: 12px; }
.sub.breve { font-size: 12.5px; margin: 4px 0 2px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.titulo-ficha { text-transform: none !important; letter-spacing: 0 !important; font: 700 16px/1.3 var(--titulo) !important; color: var(--marca) !important; }
.objetivo { margin: 8px 0 2px; }
.enlace { border: 0; padding: 0; background: none; color: var(--marca); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font: inherit; text-align: left; }
.hoja h3 { margin: 20px 0 8px; font: 700 11.5px var(--letra); text-transform: uppercase; letter-spacing: .1em; color: var(--madera-osc); display: flex; align-items: center; gap: 8px; }
.hoja h3 svg { width: 16px; height: 16px; }
.hoja h4 { margin: 12px 0 4px; font-size: 13px; }
.hoja p { margin: 6px 0; }
.rotulo-hoja { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 700 10.5px/1.3 var(--letra); text-transform: uppercase; letter-spacing: .13em; color: var(--madera-osc); }
.rotulo-hoja code { font: inherit; padding: 2px 6px; border-radius: 6px; background: var(--papel-3); color: var(--marca); }
.sub { color: var(--tinta-2); font-size: 13px; }
.marca-prop { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; border: 1.5px dashed #8C6BD1; color: #4B3A86; background: #F6F2FD; font: 700 10.5px var(--letra); text-transform: none; letter-spacing: 0; }
.marca-base { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; border: 1.5px solid var(--verde-osc); color: var(--verde-osc); background: #E9F7F0; font: 700 10.5px var(--letra); text-transform: none; letter-spacing: 0; }
.marca-ej { display: inline-flex; padding: 2px 8px; border-radius: 99px; background: #F1ECFB; color: #4B3A86; font: 800 10.5px var(--letra); text-transform: uppercase; letter-spacing: .08em; }

/* Lista de encargos de una sala como fichas de papel con su sello (no tarjetas de web). */
.mazo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.mazo li > button { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; border: 0; cursor: pointer; padding: 10px 12px; border-radius: 4px 10px 10px 4px; background: #FFF; box-shadow: 0 1px 0 rgba(27,58,92,.08), 0 3px 10px rgba(27,58,92,.08); background-image: linear-gradient(90deg, rgba(199,154,104,.18) 0 4px, transparent 4px); }
.mazo li > button:hover { box-shadow: 0 1px 0 rgba(27,58,92,.1), 0 6px 18px rgba(27,58,92,.16); }
.mazo .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #EEF2F6; }
.mazo .ic svg { width: 20px; height: 20px; }
.mazo b { display: block; font-size: 13.5px; }
.mazo small { display: block; color: var(--tinta-2); font-size: 12px; }
.sello { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; border: 2px solid currentColor; font: 800 11px var(--letra); text-transform: uppercase; letter-spacing: .06em; transform: rotate(-2deg); white-space: nowrap; }
.sello svg { width: 13px; height: 13px; }
.sello.preparar { color: var(--tinta-2); }
.sello.lista { color: var(--marca); }
.sello.en_curso { color: var(--celeste-osc); }
.sello.revisar { color: #9A6408; background: var(--ambar-suave); }
.sello.bloqueada { color: #A33A24; background: var(--rojo-suave); }
.sello.terminada { color: var(--verde-osc); }
.sello.cancelada { color: var(--tinta-3); text-decoration: line-through; }
.sello.esperando { color: #6A5326; background: #F3F0E8; }
.vacio { color: var(--tinta-3); font-style: italic; }
.grupo-estado { margin-top: 14px; }
.grupo-estado > summary { cursor: pointer; font: 700 12px var(--letra); color: var(--tinta-2); padding: 4px 0; }

/* Recorrido de la tarea: cinco sellos en fila; el actual, marcado. */
.recorrido { display: flex; gap: 0; margin: 12px 0 4px; padding: 0; list-style: none; }
.recorrido li { flex: 1; position: relative; text-align: center; font: 700 10.5px/1.2 var(--letra); color: var(--tinta-3); padding-top: 30px; }
.recorrido li::before { content: ''; position: absolute; top: 12px; left: 0; right: 0; height: 2px; background: #D9DEE4; }
.recorrido li:first-child::before { left: 50%; } .recorrido li:last-child::before { right: 50%; }
.recorrido li i { position: absolute; top: 0; left: 50%; margin-left: -13px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #FFF; box-shadow: inset 0 0 0 2px #D9DEE4; font-style: normal; z-index: 1; }
.recorrido li i svg { width: 15px; height: 15px; }
.recorrido li.hecho { color: var(--verde-osc); } .recorrido li.hecho i { box-shadow: inset 0 0 0 2px #23A877; background: #E9F7F0; }
.recorrido li.omitida { color: var(--tinta-3); } .recorrido li.omitida i { box-shadow: none; border: 2px dashed #C3CBD4; opacity: .7; }
.recorrido li.omitida i svg { opacity: .45; }
.recorrido li.ahora { color: var(--marca); } .recorrido li.ahora i { background: var(--marca); box-shadow: 0 0 0 4px var(--marca-velo); color: #FFF; }
.recorrido li.ahora i svg { stroke: #FFF; }
.siguiente { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: #EEF5FA; border-left: 5px solid var(--marca); }
.siguiente.rev { background: #FFF8E8; border-left-color: var(--ambar); }
.siguiente.bloq { background: var(--rojo-suave); border-left-color: var(--rojo); }
.siguiente.esp { background: #F7F4EC; border-left-color: #B9A27A; }
.siguiente b svg { width: 15px; height: 15px; vertical-align: -2px; }
.siguiente b { display: block; font-size: 14px; }
.siguiente small { color: var(--tinta-2); }

/* Formularios en papel. */
.campo { display: block; margin: 10px 0; }
.campo > span { display: block; margin-bottom: 4px; font: 700 11px var(--letra); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.campo input, .campo textarea, .campo select { width: 100%; border: 1px solid rgba(27,58,92,.2); border-radius: 9px; padding: 9px 11px; background: #FFF; color: var(--tinta); font: 13.5px/1.45 var(--letra); }
.campo textarea { min-height: 70px; resize: vertical; }
.fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.lista-edit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.lista-edit li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px 10px; border-radius: 9px; background: var(--papel-2); border-left: 4px solid var(--papel-3); }
.lista-edit li.si { border-left-color: #23A877; } .lista-edit li.no { border-left-color: var(--rojo); } .lista-edit li.nulo { border-left-color: #B9C2CC; border-left-style: dashed; }
.lista-edit input[type="text"], .lista-edit textarea { width: 100%; border: 1px solid rgba(27,58,92,.15); border-radius: 7px; padding: 6px 8px; font: 13px var(--letra); background: #FFF; }
.lista-edit .quitar { border: 0; background: none; cursor: pointer; font-size: 18px; color: var(--tinta-3); line-height: 1; padding: 4px; }
.tri { display: inline-flex; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(27,58,92,.2); }
.tri button { border: 0; background: #FFF; padding: 5px 8px; cursor: pointer; font: 700 11.5px var(--letra); color: var(--tinta-2); display: inline-flex; gap: 4px; align-items: center; }
.tri button svg { width: 13px; height: 13px; }
.tri button[aria-pressed="true"].si { background: #E3F6EE; color: var(--verde-osc); }
.tri button[aria-pressed="true"].no { background: var(--rojo-suave); color: #8A2F1F; }
.tri button[aria-pressed="true"].nulo { background: #EEF2F6; color: var(--tinta); }
.mas { border: 1px dashed rgba(27,58,92,.3); border-radius: 9px; padding: 7px 12px; background: transparent; cursor: pointer; font: 700 12.5px var(--letra); color: var(--marca); margin-top: 6px; }
.lista-fija { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.lista-fija li { display: grid; grid-template-columns: 16px auto minmax(0, 1fr); gap: 8px; align-items: start; padding: 7px 10px; border-radius: 9px; background: #F1F3F5; font-size: 12.5px; color: var(--tinta-2); }
.lista-fija svg { width: 14px; height: 14px; margin-top: 2px; }
.lista-fija code { font: 800 11px var(--letra); color: var(--marca); }
.fijo { display: block; padding: 8px 0; font-size: 13px; }
.fijo small { color: var(--tinta-3); }
.marca-check { display: flex; gap: 8px; align-items: center; margin: 8px 0; font-size: 13px; color: var(--tinta-2); }
.motivo { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--papel-2); }
.faltan { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: #FFF8E8; border-left: 4px solid var(--ambar); font-size: 12.5px; }
.faltan ul { margin: 4px 0 0; padding-left: 18px; }
.botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.b-prin, .b-sec, .b-peligro, .b-agente { border: 0; border-radius: 11px; padding: 10px 15px; cursor: pointer; font: 700 13.5px var(--letra); display: inline-flex; gap: 7px; align-items: center; }
.b-prin svg, .b-sec svg, .b-peligro svg, .b-agente svg { width: 17px; height: 17px; }
.b-prin { background: var(--marca); color: #FFF; box-shadow: 0 3px 0 #05162A; }
.b-agente { background: #E4F4FA; color: #155E7A; box-shadow: inset 0 0 0 2px var(--celeste-osc), 0 3px 0 #9CCFE3; }
.b-sec { background: #FFF; color: var(--marca); box-shadow: inset 0 0 0 1.5px rgba(27,58,92,.25); }
.b-peligro { background: #FFF; color: #A33A24; box-shadow: inset 0 0 0 1.5px var(--rojo); }
button:disabled { opacity: .45; cursor: not-allowed !important; }
.error-api { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--rojo-suave); border-left: 4px solid var(--rojo); font-size: 13px; }
.error-api code { font-size: 11px; color: #8A2F1F; }

/* Fuentes y documentos: se leen de frente, en papel. */
.fuentes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.fuentes li button, .fuentes li label { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; border: 0; padding: 8px 10px; border-radius: 8px; background: #FFF; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(27,58,92,.1); font-size: 12.5px; }
.fuentes svg { width: 18px; height: 18px; flex: none; }
.fuentes small { color: var(--tinta-3); }
.folio { margin: 10px 0; padding: 22px 26px; background: #FFF; box-shadow: 0 1px 0 rgba(27,58,92,.06), 0 10px 26px rgba(27,58,92,.12); border-radius: 3px; font: 13.5px/1.6 Georgia, serif; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; background-image: linear-gradient(90deg, transparent 38px, rgba(200,85,61,.18) 38px 39px, transparent 39px); }
.meta-doc { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.meta-doc span { padding: 3px 8px; border-radius: 99px; background: #EEF2F6; font: 600 11px var(--letra); color: var(--tinta-2); }
.meta-doc span.mal { background: var(--rojo-suave); color: #8A2F1F; }

/* Traza del agente: un renglón por evento real, con su pictograma. Sin porcentajes. */
.traza { list-style: none; margin: 8px 0; padding: 0; max-height: 44vh; overflow: auto; border-radius: 10px; background: #0F2236; color: #DCE8F1; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.traza li { display: grid; grid-template-columns: 22px 64px minmax(0, 1fr); gap: 8px; padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,.06); }
.traza li svg { width: 16px; height: 16px; stroke: #8CF0CB; }
.traza li time { color: #7E95AB; }
.traza li .t { overflow-wrap: anywhere; white-space: pre-wrap; max-height: 9em; overflow: hidden; }
.traza li.error svg, .traza li.parada svg, .traza li.interrupcion svg { stroke: #F2A9A1; }
.traza li.fin svg { stroke: #52E2AC; }
.traza .espera { padding: 10px; color: #7E95AB; font-style: italic; }
.vivo { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--letra); color: var(--celeste-osc); }
.vivo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: latido 1.2s infinite; }

/* Revisión por criterio: cada criterio con su veredicto y sus evidencias. */
.criterios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.criterios > li { padding: 12px; border-radius: 10px; background: #FFF; box-shadow: inset 0 0 0 1px rgba(27,58,92,.12); }
.criterios .crit-cab { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; }
.criterios .crit-cab b { font-size: 13px; }
.criterios .evs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.criterios .evs label { display: inline-flex; gap: 5px; align-items: center; padding: 4px 8px; border-radius: 7px; background: var(--papel-2); font: 600 12px var(--letra); cursor: pointer; }
.evidencias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.evidencias li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px 10px; border-radius: 8px; background: #FFF; box-shadow: inset 0 0 0 1px rgba(27,58,92,.1); font-size: 12.5px; }
.evidencias li > code { font: 800 12px var(--letra); color: var(--marca); background: #EEF2F6; border-radius: 6px; padding: 3px 6px; text-align: center; }
.resultado-texto { padding: 14px 16px; border-radius: 4px; background: #FFF; box-shadow: 0 6px 18px rgba(27,58,92,.1); font: 13.5px/1.6 Georgia, serif; white-space: pre-wrap; max-height: 38vh; overflow: auto; }
.resultado-texto.obsoleto { opacity: .6; background-image: repeating-linear-gradient(135deg, transparent 0 10px, rgba(200,85,61,.08) 10px 12px); }
.historial { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--papel-3); display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; font-size: 12.5px; }
.historial li { position: relative; }
.historial li::before { content: ''; position: absolute; left: -19px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--madera); }
.historial time { color: var(--tinta-3); margin-right: 6px; }

/* Pasos de la sala: fichas numeradas. */
.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pasos li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 10px; background: #FFF; box-shadow: inset 0 0 0 1px rgba(27,58,92,.1); }
.pasos li.activo { box-shadow: inset 0 0 0 2px var(--marca); }
.pasos li > i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--marca); color: #FFF; font: 800 13px var(--letra); font-style: normal; }
.pasos b { display: block; font-size: 13px; }
.pasos small { display: block; color: var(--tinta-2); }
.quien { display: inline-flex; gap: 4px; align-items: center; margin-top: 4px; font: 700 11px var(--letra); color: var(--tinta-2); }
.quien svg { width: 14px; height: 14px; }
.desplegable { margin-top: 10px; border-radius: 10px; background: var(--papel-2); padding: 2px 12px; }
.desplegable > summary { cursor: pointer; padding: 8px 0; font: 700 12px var(--letra); color: var(--tinta-2); }
.desplegable ul { margin: 0 0 10px; padding-left: 18px; font-size: 12.5px; }

/* Paso, operaciones de las fichas, procedimientos y aprendizajes: detalle a demanda, nunca volcado en la escena. */
.paso-ficha { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; margin: 12px 0 6px; padding: 12px 14px; border-radius: 12px; background: #FFF; box-shadow: inset 0 0 0 1px rgba(27,58,92,.12); }
.paso-ficha .num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--marca); color: #FFF; font: 800 14px var(--letra); }
.paso-ficha .num svg { width: 17px; height: 17px; stroke: #FFF; }
.paso-ficha b { font-size: 14px; } .paso-ficha p { margin: 4px 0; font-size: 13px; }
.paso-ficha .sub svg, .sub > svg { width: 14px; height: 14px; vertical-align: -2px; }
.paso-breve { display: flex; gap: 10px; align-items: center; margin: 10px 0; padding: 8px 12px; border-radius: 10px; background: #FFF8E8; }
.paso-breve svg { width: 18px; height: 18px; flex: none; } .paso-breve small { display: block; color: var(--tinta-2); }
.ops { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.ops li, .ops li > button { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 12.5px; }
.ops li { padding: 6px 8px; border-radius: 8px; background: #FFF; box-shadow: inset 0 0 0 1px rgba(27,58,92,.08); }
.ops li > button { width: 100%; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: var(--tinta); }
.ops li.aqui { box-shadow: inset 3px 0 0 var(--marca), inset 0 0 0 1px rgba(27,58,92,.16); }
.ops svg { width: 16px; height: 16px; margin-top: 1px; } .ops small { display: block; color: var(--tinta-3); font-size: 11.5px; }
.ops.num { counter-reset: op; } .ops.num li::before { counter-increment: op; content: counter(op); position: absolute; margin: 0 0 0 -22px; font: 800 11px var(--letra); color: var(--tinta-3); }
.ops.num { padding-left: 22px; } .ops.num li { position: relative; }
.orden { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; padding: 9px 12px; border-radius: 10px; background: #EEF5FA; font-size: 12.5px; }
.orden svg { width: 18px; height: 18px; flex: none; } .orden small { display: block; color: var(--tinta-2); }
.orden.propuesto { background: #F6F2FD; } .orden.sin_orden { background: #F3F5F7; }
.aprs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding-bottom: 10px; }
.apr { border-radius: 9px; background: #FFF; box-shadow: inset 0 0 0 1px rgba(27,58,92,.1); padding: 0 10px; }
.apr > summary { cursor: pointer; padding: 8px 0; display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; }
.apr dl { margin: 0 0 8px; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 10px; font-size: 12.5px; }
.apr dt { color: var(--tinta-3); font-weight: 700; } .apr dd { margin: 0; }
.apr .b-sec { margin-bottom: 10px; padding: 6px 10px; font-size: 12px; }
.alc { flex: none; padding: 1px 7px; border-radius: 99px; font: 800 10px var(--letra); text-transform: uppercase; letter-spacing: .06em; background: #EEF2F6; color: var(--marca); }
.alc.personal { background: #F6F2FD; color: #4B3A86; } .alc.caso { background: #FFF8E8; color: #7A4D05; }
.procedencia { margin: 10px 0; font-size: 12px; color: var(--tinta-2); }
.procedencia > summary { cursor: pointer; font-weight: 700; }
.procedencia dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 3px 10px; margin: 6px 0; }
.procedencia dd { margin: 0; overflow-wrap: anywhere; } .procedencia code { font-size: 11px; }

/* Respuestas del agente: todas, en orden de evento, íntegras; la primera abierta y el resto plegadas con su primera línea.
   Cada texto tiene su propio scroll para que una respuesta larga no tape la revisión. */
.titulo-resp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 6px; }
.titulo-resp svg { width: 16px; height: 16px; }
.titulo-resp .cuenta { font: 800 11px var(--letra); padding: 1px 7px; border-radius: 99px; background: #EEF2F6; color: var(--marca); }
.respuestas { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.respuestas > li > details { border-radius: 4px 10px 10px 4px; background: #FFF; box-shadow: 0 1px 0 rgba(27,58,92,.08), 0 3px 10px rgba(27,58,92,.08); background-image: linear-gradient(90deg, rgba(126,200,227,.35) 0 4px, transparent 4px); }
.respuestas > li > details > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 12.5px; min-width: 0; }
.respuestas summary i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--celeste-osc); color: #FFF; font: 800 11px var(--letra); font-style: normal; }
.respuestas summary time { flex: none; color: var(--tinta-3); font-size: 11.5px; }
.respuestas summary .linea { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-2); }
.respuestas details[open] > summary .linea { display: none; }
.respuestas .et { flex: none; padding: 1px 7px; border-radius: 99px; font: 800 10px var(--letra); text-transform: uppercase; letter-spacing: .05em; }
.respuestas .et.cierre { background: #F3F5F7; color: var(--tinta-2); box-shadow: inset 0 0 0 1px rgba(107,127,147,.4); }
.respuestas .et.parcial { background: var(--rojo-suave); color: #8A2F1F; }
.respuesta-texto { margin: 0 12px 8px; padding: 12px 14px; border-radius: 4px; background: var(--papel); box-shadow: inset 0 0 0 1px rgba(27,58,92,.08);
  font: 13.5px/1.6 Georgia, serif; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 45vh; overflow: auto; }
.respuestas .procedencia { margin: 0 12px 10px; }
.respuestas .procedencia ul { margin: 4px 0 0; padding-left: 18px; }
.traza-plegable > summary svg { width: 14px; height: 14px; vertical-align: -2px; }

/* Bandeja del agente: los archivos reales del encargo, junto a su resultado. Se leen como texto; nada se ejecuta. */
.bandeja-enc { margin: 6px 0 10px; }
.archivos { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.archivos li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 4px 10px 10px 4px; background: #FFF;
  box-shadow: 0 1px 0 rgba(27,58,92,.08), 0 3px 10px rgba(27,58,92,.08); background-image: linear-gradient(90deg, rgba(199,154,104,.18) 0 4px, transparent 4px); }
.archivos li.anterior { opacity: .6; background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(107,127,147,.08) 8px 10px); }
.archivos .ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #EEF2F6; }
.archivos .ic svg { width: 18px; height: 18px; }
.archivos .nom { min-width: 0; } .archivos .nom b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archivos .nom small { color: var(--tinta-3); font-size: 11.5px; }
.archivos .acc { display: inline-flex; gap: 4px; }
.archivos .acc .b-sec { padding: 6px 9px; font-size: 12px; }
.archivos .acc .b-sec svg { width: 15px; height: 15px; }
.est { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font: 700 11px var(--letra); cursor: help; white-space: nowrap; }
.est svg { width: 13px; height: 13px; }
.est.integro { background: #E9F7F0; color: var(--verde-osc); }
.est.obsoleto { background: #F3F0E8; color: #6A5326; }
.est.desc { background: #F3F5F7; color: var(--tinta-3); box-shadow: inset 0 0 0 1px rgba(107,127,147,.4); }
.nombre-archivo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 17px !important; overflow-wrap: anywhere; }
.texto-archivo { margin: 10px 0; white-space: pre-wrap; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; max-height: 62vh; }
.folio.tabla { padding: 10px; overflow: auto; max-height: 62vh; font-family: var(--letra); }
.tabla-archivo { border-collapse: collapse; font-size: 12.5px; }
.tabla-archivo th, .tabla-archivo td { padding: 4px 8px; border: 1px solid rgba(27,58,92,.12); text-align: left; vertical-align: top; white-space: pre-wrap; }
.tabla-archivo th { background: var(--papel-2); position: sticky; top: 0; }
.indice-tecnico { border: 0; border-radius: 9px; padding: 7px 11px; background: transparent; color: var(--tinta-3); font: 600 12px var(--letra) !important; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(27,58,92,.15); white-space: nowrap; }
@media (max-width: 760px) { .archivos li { grid-template-columns: 28px minmax(0, 1fr); } .archivos .est, .archivos .acc { grid-column: 2; } .archivos .acc .b-sec span { display: none; } }

/* Canal personal: estado honesto y copia local. */
.canal-estado { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 12px; background: #F3F5F7; border: 1.5px dashed #B9C2CC; }
.canal-estado svg { width: 34px; height: 34px; flex: none; }
.canal-estado.practica { background: #F6F2FD; border-color: #8C6BD1; }
.elementos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.elementos li { padding: 8px 10px; border-radius: 8px; background: #FFF; box-shadow: inset 0 0 0 1px rgba(27,58,92,.1); font-size: 12.5px; }

/* ---------------------------------------------------------------- modal de confirmación y diagnóstico */
.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 5vh 5vw; background: rgba(27,58,92,.36); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal-caja { width: min(560px, 100%); max-height: 100%; overflow: auto; padding: 22px 24px; border-radius: 18px; background: var(--papel); box-shadow: 0 24px 80px rgba(27,58,92,.4); border-top: 6px solid var(--ambar); }
.modal-caja h2 { margin: 0 0 8px; font: 700 20px/1.25 var(--titulo); color: var(--marca); }

/* ---------------------------------------------------------------- índice accesible */
.indice { position: fixed; inset: 0; z-index: 65; display: grid; place-items: center; padding: 4vh 4vw; background: rgba(27,58,92,.3); }
.indice-caja { width: min(980px, 100%); height: 100%; display: flex; flex-direction: column; border-radius: 18px; background: var(--papel); box-shadow: 0 24px 80px rgba(27,58,92,.4); overflow: hidden; }
.indice-caja header { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--papel-3); }
.indice-caja h2 { margin: 0; font: 700 19px var(--titulo); color: var(--marca); white-space: nowrap; }
.indice-caja input { flex: 1; min-width: 0; border: 1px solid rgba(27,58,92,.2); border-radius: 9px; padding: 8px 11px; font: 13.5px var(--letra); }
.indice-caja header button { border: 0; background: none; font-size: 26px; cursor: pointer; color: var(--tinta-2); }
.indice-lista { flex: 1; overflow: auto; padding: 10px 16px 24px; columns: 2 380px; column-gap: 24px; }
.indice-lista section { break-inside: avoid; margin-bottom: 14px; }
.indice-lista h3 { margin: 6px 0; font: 800 12px var(--letra); text-transform: uppercase; letter-spacing: .1em; color: var(--madera-osc); }
.indice-lista h4 { margin: 8px 0 4px; font-size: 13px; }
.indice-lista h4 a { color: var(--marca); text-decoration: none; }
.indice-lista ul { list-style: none; margin: 0; padding: 0; }
.indice-lista li a { display: flex; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 7px; color: var(--tinta); text-decoration: none; font-size: 13px; }
.indice-lista li a:hover, .indice-lista li a:focus-visible { background: var(--marca-velo); }
.indice-lista code { font: 700 10.5px var(--letra); color: var(--madera-osc); min-width: 54px; }
.indice-lista .mini { margin-left: auto; font: 800 11px var(--letra); padding: 1px 6px; border-radius: 99px; background: #EEF2F6; color: var(--marca); }
.indice-lista .mini.desc { background: transparent; color: var(--tinta-3); box-shadow: inset 0 0 0 1px rgba(107,127,147,.5); }
.indice-lista .mini.rev { background: var(--ambar-suave); color: #7A4D05; }

/* ---------------------------------------------------------------- pie */
.pie { position: fixed; left: 14px; right: 14px; bottom: 10px; z-index: 10; display: flex; justify-content: space-between; gap: 10px; align-items: flex-end; pointer-events: none; }
.pie > * { pointer-events: auto; }
.pie-entregas { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11.5px; }
.pie-entregas .ent svg { width: 13px; height: 13px; }
.pie-entregas .ent { display: inline-flex; gap: 5px; align-items: center; padding: 3px 8px; border-radius: 7px; background: rgba(255,255,255,.85); color: var(--tinta-2); border: 0; cursor: pointer; font: 600 11px var(--letra); }
.pie-entregas .ent.ok { color: var(--verde-osc); }
.pie-entregas .ent.pend { color: #7A4D05; background: rgba(253,235,196,.95); }
.pie-entregas .ent.mal { color: #8A2F1F; background: rgba(251,233,229,.95); }
.pie-firma { padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,.8); font-size: 11.5px; color: var(--tinta-3); white-space: nowrap; }
.pie-firma b { color: var(--tinta-2); font-weight: 700; }
.carga { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: linear-gradient(var(--cielo-1), var(--cielo-3)); color: var(--marca); font: 700 15px var(--letra); }
.carga .caja { padding: 22px 28px; border-radius: 16px; background: rgba(255,255,255,.95); box-shadow: var(--sombra); max-width: min(560px, calc(100% - 28px)); }
.sin-js { position: fixed; inset: 40% 10% auto; padding: 20px; background: #FFF; border-radius: 12px; }

/* ---------------------------------------------------------------- móvil */
@media (max-width: 760px) {
  .cab { left: 8px; right: 8px; top: 8px; gap: 8px; padding: 6px 8px; }
  .cab-marca img { height: 28px; }
  .miga { order: 5; flex-basis: 100%; font-size: 12px; }
  .miga a, .miga span { max-width: 150px; padding: 3px 6px; }
  .cab-filtro label span { display: none; }
  .cab-filtro select { max-width: 104px; font-size: 12px; }
  .cab-estado { display: none; }
  .cab-indice span { display: none; }
  .navegar { top: auto; bottom: 46px; left: 8px; }
  .hermanas { max-width: calc(100vw - 16px); overflow-x: auto; flex-wrap: nowrap; }
  .cab { flex-wrap: wrap; }
  .hoja, .hoja[data-ancho] { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: min(72vh, calc(100% - var(--bajo-cab, 96px) - 8px)); border-radius: 16px 16px 12px 12px; }
  .hoja-cuerpo { padding: 12px 14px 18px; }
  .apr dl, .procedencia dl { grid-template-columns: minmax(0, 1fr); }
  .fila { grid-template-columns: minmax(0, 1fr); }
  .ayuda { display: none; }
  .plantas { top: auto; bottom: 110px; transform: none; right: 8px; }
  .andon .nombre { display: none; }
  .indice { padding: 8px; }
  .indice-lista { columns: 1; }
  .pie-firma { display: none; }
}

/* ---------------------------------------------------------------- contención de anchos en la hoja (revisión 6)
   CUA midió en 390×844 una respuesta de 830 px dentro de una hoja de 374: no era falta de corte de texto, sino el tamaño
   intrínseco de rejillas, details y summary (min-width:auto toma el min-content de una línea sin cortes). Regla común:
   todo bloque de la hoja puede encoger hasta su contenedor y las palabras largas se parten; las pistas de rejilla son
   minmax(0, 1fr). La tabla de un CSV conserva su desplazamiento horizontal intencionado dentro de su propia caja. */
.hoja-cuerpo { overflow-wrap: anywhere; }
.hoja-cuerpo :where(section, form, details, summary, li, ul, ol, dl, dd, dt, div, p, span, label, h2, h3, h4, pre, button) { min-width: 0; max-width: 100%; }
.hoja-cuerpo :where(details, summary, li) { box-sizing: border-box; }
.hoja h2, .hoja h3, .hoja h4, .rotulo-hoja, .cab-hoja h2 { overflow-wrap: anywhere; }
.hoja h3 { flex-wrap: wrap; }
.crit-cab { flex-wrap: wrap; } .crit-cab > span:first-child { flex: 1 1 12em; min-width: 0; }
.respuestas > li, .respuestas > li > details { min-width: 0; max-width: 100%; }
.respuestas .procedencia li, .procedencia dd, .procedencia code { overflow-wrap: anywhere; word-break: break-word; }
.siguiente, .faltan, .error-api { overflow-wrap: anywhere; }
.folio.tabla { max-width: 100%; }
.folio.tabla .tabla-archivo, .folio.tabla .tabla-archivo :where(th, td) { overflow-wrap: normal; word-break: normal; max-width: none; }
.estado-resp.aceptada { color: var(--verde-osc); } .estado-resp.devuelta { color: #7A4D05; }
.estado-resp svg { width: 14px; height: 14px; vertical-align: -2px; }

/* ---------------------------------------------------------------- zona personal: registros importados (revisión 8)
   Lista seleccionable con teclado y ratón, búsqueda y páginas; el registro se lee entero como texto. */
.buscador { display: flex; gap: 6px; margin: 4px 0; }
.buscador input { flex: 1 1 auto; min-width: 0; border: 1px solid rgba(27,58,92,.2); border-radius: 9px; padding: 8px 10px; font: 13.5px var(--letra); background: #FFF; }
.buscador .b-sec { padding: 8px 10px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.registros { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.registros li > button { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; align-items: start; text-align: left; border: 0; cursor: pointer; padding: 9px 11px;
  border-radius: 4px 10px 10px 4px; background: #FFF; box-shadow: 0 1px 0 rgba(27,58,92,.08), 0 3px 10px rgba(27,58,92,.07); background-image: linear-gradient(90deg, rgba(199,154,104,.18) 0 4px, transparent 4px); }
.registros li > button:hover, .registros li > button:focus-visible { box-shadow: 0 1px 0 rgba(27,58,92,.1), 0 6px 18px rgba(27,58,92,.16), inset 0 0 0 2px var(--marca); }
.registros svg { width: 18px; height: 18px; margin-top: 1px; }
.registros b { display: block; font-size: 13px; overflow-wrap: anywhere; }
.registros small { display: block; color: var(--tinta-3); font-size: 11.5px; overflow-wrap: anywhere; }
.paginas { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0; font: 600 12.5px var(--letra); color: var(--tinta-2); }
.paginas .b-sec { padding: 6px 12px; }
.titulo-registro { overflow-wrap: anywhere; }
.campos-registro { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 10px; margin: 8px 0; font-size: 13px; }
.campos-registro dt { color: var(--tinta-3); font-weight: 700; overflow-wrap: anywhere; }
.campos-registro dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.campos-registro dd.desc { color: var(--tinta-3); font-style: italic; }
.campos-registro pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.texto-registro { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; font: 13.5px/1.6 Georgia, serif; }
.equipo-grupo > summary svg { width: 15px; height: 15px; vertical-align: -3px; }
@media (max-width: 760px) { .campos-registro { grid-template-columns: minmax(0, 1fr); } .campos-registro dd { margin-bottom: 6px; } }

/* ---------------------------------------------------------------- tamaño base de los pictogramas (revisión 9)
   Sin regla de contexto, un SVG en línea toma su tamaño intrínseco (se midieron 346×346 px en el rótulo de un encargo
   nuevo en 390×844). Base: del tamaño de la letra, sin encogerse en flex y con un tope; cada contexto (andón, hoja,
   botones, canal…) sigue fijando el suyo con su propia regla, más específica. */
svg.pic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; max-width: 48px; max-height: 48px; }
.rotulo-hoja svg, .sub svg, .faltan svg, .siguiente small svg, .vacio svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- la ciudad de Andrés en el cielo (revisión 10)
   Su lienzo ocupa la escena en ciudad y barrio; al entrar en un edificio se oculta y se usa el lienzo de interiores. */
/* Revisión 11: su caja es el área útil (main.js · cajaCiudad), y la capa de sus rótulos va con ella para que coincidan. */
.ciudad-andres { position: absolute; left: 0; right: var(--der-ciudad, 0px); top: var(--sup-ciudad, 0px); bottom: var(--inf-ciudad, 0px); }
main #etq-andres { inset: auto; left: 0; right: var(--der-ciudad, 0px); top: var(--sup-ciudad, 0px); bottom: var(--inf-ciudad, 0px); }
.ciudad-andres canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; }
.cab-mapa { background: #FFF; color: var(--marca); box-shadow: inset 0 0 0 1.5px var(--marca); }
.mapa-procesos .mp-barrio > summary { cursor: pointer; display: flex; gap: 8px; align-items: center; padding: 8px 0; font: 700 13.5px var(--letra); }
.mapa-procesos .mp-barrio > summary i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.mapa-procesos .mp-edif { margin: 4px 0 8px 14px; padding-left: 10px; border-left: 2px solid var(--papel-3); }
.mapa-procesos .mp-edif > summary { cursor: pointer; padding: 5px 0; font: 700 13px var(--letra); color: var(--marca); }
.mapa-procesos .mp-salas { list-style: none; margin: 2px 0 6px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.mapa-procesos .mp-salas a { display: flex; gap: 8px; align-items: baseline; padding: 4px 6px; border-radius: 7px; color: var(--tinta); text-decoration: none; font-size: 12.5px; }
.mapa-procesos .mp-salas a:hover, .mapa-procesos .mp-salas a:focus-visible { background: var(--marca-velo); }
.mapa-procesos .mp-salas code { font: 700 10.5px var(--letra); color: var(--madera-osc); min-width: 52px; }
.mapa-procesos .mp-pasos { margin: 0 0 4px 60px; font-size: 12px; color: var(--tinta-2); }
.mapa-procesos .mp-rel { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; font-size: 12px; }
.mapa-procesos .mp-rel .alc { margin-right: 6px; }
.mapa-procesos .mp-ficha { margin: 8px 0 2px; font-size: 12px; } .mapa-procesos .mp-ficha i { font-style: normal; color: var(--madera-osc); }

/* ---------------------------------------------------------------- el árbol del letrero (revisión 11)
   La miga del árbol: el camino (cada peldaño sube), la ficha que se ve y cómo se lee su orden, entrar, lista y cerrar.
   Con el árbol abierto, la navegación de barrio se retira (Esc y la miga suben un peldaño). */
.miga-arbol { position: fixed; left: 14px; right: 14px; top: var(--bajo-cab, 84px); z-index: 21; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
  padding: 7px 9px; border-radius: 12px; background: rgba(255, 255, 255, .94); box-shadow: var(--sombra); font-size: 12.5px; }
.miga-arbol[hidden] { display: none; }
.miga-arbol .camino-arbol { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; min-width: 0; }
.miga-arbol .camino-arbol button { display: inline-flex; gap: 5px; align-items: center; max-width: 280px; padding: 4px 7px; border: 0; border-radius: 8px; background: transparent; color: var(--marca); font: 600 12.5px var(--letra); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.miga-arbol .camino-arbol button:hover, .miga-arbol .camino-arbol button:focus-visible { background: var(--marca-velo); }
.miga-arbol .camino-arbol button[aria-current="true"] { background: var(--marca); color: #FFF; }
.miga-arbol .camino-arbol code { font: 700 10.5px var(--letra); opacity: .8; }
.miga-arbol .sep { color: var(--tinta-2); }
.miga-arbol .ficha-arbol { color: var(--tinta-2); max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.miga-arbol .ficha-arbol i { font-style: normal; font-weight: 700; color: var(--madera-osc); }
.miga-arbol .paginas-arbol select { max-width: 260px; font: 12px var(--letra); }
.miga-arbol .acciones-arbol { display: flex; gap: 6px; margin-left: auto; }
.arbol-abierto .navegar, .arbol-abierto #ayuda { display: none; }
@media (max-width: 760px) {
  .miga-arbol { left: 8px; right: 8px; font-size: 12px; }
  .miga-arbol .camino-arbol button { max-width: 150px; }
  .miga-arbol .ficha-arbol { max-width: 100%; }
  .miga-arbol .acciones-arbol { margin-left: 0; width: 100%; }
  .miga-arbol .acciones-arbol .b-prin { flex: 1; }
}

/* ---------------------------------------------------------------- revisión 13: decisiones visibles, revisión directa, este caso */
/* La decisión que toca: icono del tamaño del texto y texto corto; agente y espera en tonos sin urgencia. */
.decision { display: inline-flex; align-items: center; gap: 5px; max-width: 150px; padding: 3px 8px; border-radius: 99px; font: 800 11px/1.25 var(--letra); white-space: normal; text-align: left; background: #EEF2F6; color: var(--marca); }
.decision svg { flex: none; width: 1.1em; height: 1.1em; }
.decision.rev { background: var(--ambar-suave); color: #8A5A06; }
.decision.bloq { background: var(--rojo-suave); color: #A33A24; }
.decision.pend { background: #E6F0F8; color: var(--marca); }
.decision.ag { background: #E6F4F8; color: var(--celeste-osc); }
.decision.esp { background: #F3F0E8; color: #6A5326; }
.decision.desc { background: #F3F5F7; color: var(--tinta-2); }
.resumen-cola { color: var(--tinta-2); }
.decision-encargo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.decision-encargo > div { flex: 1 1 200px; min-width: 0; }
.decision-encargo small { display: block; }
.decision-encargo .b-prin { flex: none; }
.siguiente.pend { background: #EEF5FA; border-left-color: var(--marca); }
.siguiente.ag { background: #EAF5F9; border-left-color: var(--celeste-osc); }
.siguiente.desc { background: #F3F5F7; border-left-color: var(--tinta-3); }
.siguiente.ok { background: #EDF7F2; border-left-color: var(--verde-osc); }
.rotulo-hoja .b-sec { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 12px; padding: 4px 10px; }
.identidad { overflow-wrap: anywhere; }
.id-resultado code { font: 800 11.5px var(--letra); padding: 1px 6px; border-radius: 5px; background: #EEF2F6; color: var(--marca); }
.resumen-largo summary { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.resumen-largo summary .linea { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todas-resp > summary { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.todas-resp > summary .linea { flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-2); }
.todas-resp > summary .et.cierre { padding: 1px 7px; border-radius: 99px; font: 800 10px var(--letra); text-transform: uppercase; letter-spacing: .05em; background: #F3F5F7; color: var(--tinta-2); box-shadow: inset 0 0 0 1px rgba(107,127,147,.4); }
.este-caso > summary b { overflow-wrap: anywhere; }
.este-caso > summary small { color: var(--tinta-2); font-weight: 600; }
.caso-lista { margin: 8px 0; }
.caso-lista code { font: 800 10.5px var(--letra); padding: 1px 5px; border-radius: 5px; background: var(--papel-3); color: var(--marca); }
.preparar-otra { margin-top: 10px; }
.preparar-otra select { width: 100%; max-width: 100%; }
.mazo small code { font: 800 10.5px var(--letra); padding: 0 4px; border-radius: 4px; background: var(--papel-3); color: var(--marca); }
@media (max-width: 480px) {
  .mazo li > button { grid-template-columns: 30px minmax(0, 1fr); }
  .mazo li > button > .decision, .mazo li > button > .sello { grid-column: 2; justify-self: start; max-width: 100%; }
  .decision-encargo .b-prin { width: 100%; }
}

/* ---------------------------------------------------------------- revisión 16: entradas editables en móvil */
/* En pantalla estrecha, el triestado (Disponible/Falta/Sin comprobar) ya no comparte fila con los campos: va arriba a todo
   lo ancho y debajo quedan nombre y valor, uno bajo otro, con «Quitar» a su derecha. Solo las filas de ENTRADAS (las que
   llevan .tri); los criterios propios conservan su fila código · texto · quitar. Escritorio sin cambios. */
@media (max-width: 760px) {
  .lista-edit li > .tri { grid-column: 1 / -1; grid-row: 1; justify-self: start; max-width: 100%; flex-wrap: wrap; }
  .lista-edit li > .tri + span { grid-column: 1 / 3; grid-row: 2; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .lista-edit li > .tri ~ .quitar { grid-column: 3; grid-row: 2; align-self: start; }
  .lista-edit .tri button { min-height: 34px; }
  .lista-edit .quitar { min-width: 36px; min-height: 36px; }
}

/* ---------------------------------------------------------------- revisión 17: el cierre × no pisa el encabezado */
/* El × de la hoja (absoluto, 36 px a 10 px del borde) cae sobre la línea del rótulo cuando esta abre la hoja (fuente, mapa,
   canal o registro sin sala) o va justo bajo la cabecera de la sala (encargo, borrador, archivo, ficha). Solo esa línea
   reserva su hueco, como ya hacen .cab-hoja (40 px) y h2 (44 px); el resto del cuerpo usa todo el ancho. */
.hoja-cuerpo > .rotulo-hoja:first-child, .hoja-cuerpo > .cab-hoja + .rotulo-hoja { margin-right: 40px; }

/* ---------------------------------------------------------------- revisión 18: vínculos de operación a todo el ancho */
/* «.ops li» es una rejilla icono (18 px) + texto. En «En este objeto» el único hijo del li es un botón (que a su vez lleva
   icono + texto): sin esto caía en la columna de 18 px y se leía una letra por línea. El botón ocupa las dos columnas; su
   propia rejilla 18 px + texto se conserva. Las listas de la ficha (icono y span hermanos, numeradas) no cambian. */
.ops li > button { grid-column: 1 / -1; min-width: 0; }
.ops li > button > span { min-width: 0; overflow-wrap: break-word; }

/* Freedom: el logo es la palabra del manual de marca (apaisada). */
.cab-marca img[src*="freedom-logo"] { height: 26px; }
.cab-marca { align-items: flex-end; }