/* TRAZA CORE — sistema visual (ETC-TRAZA-IMPLEMENTACION-VISUAL-CODE-001)
   Reimplementa en CSS plano los tokens y componentes del handoff de Design
   (docs/design-system del paquete "Módulos futuros y estructura shell"):
   sistema Classical (ingreso, modo día) + Nocturne (aplicación, estructura y
   densidad en toda la app, modo oscuro). Color como trazo, nunca como
   relleno; sin tarjetas decorativas ni degradados; sombra solo en modal y
   aviso efímero. El modo se aplica con data-tz-theme="day|dark" en <html>. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Cormorant+Garamond:wght@400;500;600&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

:root{
  /* ETC CORRECCIONES UX + SESIONES (2026-09-15): `color-scheme` le dice al
     NAVEGADOR de que color es esta pagina. Es distinto de `prefers-color-scheme`,
     que solo pregunta que prefiere el sistema -- TRAZA usaba el segundo para
     elegir tema y nunca declaraba el primero.
     Sin esta linea, todo lo que dibuja el navegador y no el CSS se pinta en
     claro aunque TRAZA este en modo noche: el desplegable de los <select>, las
     sugerencias de autocompletado, el calendario de los input date, las
     flechas de los number y las barras de scroll. De ahi los "fondos blancos"
     que aparecian sobre la interfaz oscura.
     No es un color nuevo ni una excepcion: es declarar la base sobre la que el
     navegador calcula sus propios colores. */
  color-scheme: light;
  /* ---- Modo día (por defecto) ----
     ETC-TRAZA-COLORES-VISUALES-MODO-DIA-002: capa cromatica EXCLUSIVA del
     modo dia -- este bloque :root{} nunca se lee en modo noche (ver
     :root[data-tz-theme="dark"] mas abajo, que no se toco; el
     @media prefers-color-scheme que acompanaba a ese bloque se elimino en
     la limpieza del 2026-09-13, ver la nota en su lugar). El acento institucional dorado/cafe
     (--color-accent/--tz-accent-ink) se conserva sin cambios (§4: "debe
     conservar el caracter elegante que ya tiene TRAZA"). El semaforo
     (--tz-ok/--tz-naranja/--tz-danger/--tz-azul) se afina hacia mas
     vivacidad/contraste sobre el fondo claro, sin volverse chillon --
     mismos matices, mas presencia a simple vista (§2/§15). */
  /* Fase Visual X (2026-09-19): --color-bg baja de #f5f4f2 a #eceae4 -- EL
     MISMO tono que ya traía --tz-fondo-inicio (reutilizado, no inventado).
     Antes solo el tablero tenía un fondo distinguible de sus tarjetas; el
     resto de TRAZA vivía sobre #f5f4f2, casi idéntico al blanco de
     --tz-panel (#f9f6f3) -- de ahí el "todo es un bloque blanco" que
     reportó el usuario. Con el fondo más oscuro, es --tz-panel (blanco, sin
     cambios) el que ahora resalta -- el fondo separa, no decora. */
  /* Modo día «Arena dorada» (2026-10-03, pedido de Diego): el blanco de las
     tarjetas (#f9f6f3) cansaba la vista y se confundía con el fondo. Ahora el
     fondo es arena (#ddd6c6) y la tarjeta crema (#efeadf), sin blanco puro:
     menos brillo, y más distancia de tono entre fondo, riel y tarjeta. Texto
     #201f1d sobre la tarjeta ≈ 13:1; --tz-accent-ink (#7d5411) ≈ 5.9:1.
     --tz-superficie/--tz-fondo-inicio (.tz-inicio) leen estos mismos tokens. */
  --color-bg:#e8e1d1; --color-surface:#ece6d8; --color-text:#201f1d;
  --color-accent:#b68235; --tz-accent-ink:#7d5411;
  --color-divider:rgba(32,31,29,.20);
  --tz-panel:#f4efe4; --tz-rail:#ece6d8; --tz-hover:rgba(32,31,29,.06);
  /* Fase Visual X — borde de tarjeta visible en modo día (2026-09-19): el
     usuario reportó que, incluso tras el ajuste anterior, las tarjetas del
     tablero seguían "sintiéndose planas, confundidas con el fondo" -- el
     --color-divider base (16% de alfa) mezclado encima al 50% quedaba en
     ~8% de opacidad, demasiado tenue para leerse como borde real. Este
     token sube el contraste SOLO del trazo (sigue siendo 1px, sin relleno,
     "color como trazo") tomando --color-text en vez de --color-divider. */
  --tz-borde-tarjeta:color-mix(in srgb, var(--color-text) 22%, transparent);
  --tz-ok:#2a6f46; --tz-danger:#a13d27; --tz-temporal:#7d5411;
  /* ETC-TRAZA-CORRECCION-CICLO-AUDITOR-COORDINADOR-DIRECTOR-002 (§17): semaforo
     de estado -- naranja=en revision/pendiente, azul=requiere accion/info,
     gris=no iniciado. Verde/rojo ya existian (--tz-ok/--tz-danger). */
  --tz-naranja:#9a5b12; --tz-azul:#3a6690; --tz-gris:#6b6862;
  --color-accent-900:#3a2c10; --color-accent-200:#f1e3c9;
  --color-neutral-900:#201f1d; --color-neutral-100:#ffffff;
  --color-accent-700:#8a611f; --color-accent-800:#6e4d18;

  --tz-row:9px 12px; --tz-row-compact:4px 10px; --tz-row-medium:7px 10px; --tz-row-ample:10px 12px;
  --radius-panel:8px; --radius-control:6px; --radius-pill:4px; --radius-mark:2px;
  --shadow-md:0 1px 2px rgba(20,16,8,.12),0 6px 18px rgba(20,16,8,.14);
  --shadow-lg:0 2px 4px rgba(20,16,8,.16),0 16px 40px rgba(20,16,8,.20);

  --font-app:'Inter',system-ui,sans-serif; --font-heading:'Cormorant Garamond',serif; --font-body:'Lora',Georgia,serif;

  --space-1:4.6px; --space-2:5.6px; --space-3:8.4px; --space-4:11.2px; --space-5:16.8px; --space-6:22.4px;

  /* ETC-LOGIN-REDISENO-001 (2026-10-03): fondo del ingreso. Una sola foto para
     los dos modos (decision de Diego) -- lo que cambia es el overlay y el
     color de la tarjeta, igual que el resto de TRAZA cambia solo sus
     variables entre modo dia y modo noche. Overlay claro y suave: el
     paisaje debe seguir viendose (Fase 9 de la ETC). */
  /* Modo día «Amanecer» (2026-10-03, referencia de Diego): la foto se ve viva
     (velo mínimo, solo calienta y asienta el borde inferior) y la tarjeta es
     un cristal crema con filo dorado. El texto va sobre la tarjeta, no sobre
     la foto, así que el contraste lo da la tarjeta (#201f1d sobre ≈ #f6f1e6). */
  --tz-auth-bg-image:url("assets/auth/login-dia.webp");
  --tz-auth-overlay:linear-gradient(180deg, rgba(255,244,222,.06) 0%, rgba(255,226,170,.12) 60%, rgba(120,84,30,.22) 100%);
  --tz-auth-card-bg:rgba(251,247,238,.82);
  --tz-auth-card-border:rgba(182,130,53,.50);
  --tz-auth-card-radius:22px;
}
:root[data-tz-theme="dark"]{
  color-scheme: dark;
  /* Fase Visual X — dorado institucional en modo oscuro (2026-09-13):
     el acento aqui era lavanda (#9184d9), un color sin relacion con la
     identidad de marca -- el dorado (--color-accent #b68235 en modo dia)
     desaparecia por completo en Nocturne (hallazgo Impeccable, decision
     explicita del usuario: recuperarlo). Mismo patron que modo dia (accent
     para trazo/borde, tz-accent-ink para texto sobre fondo oscuro, un tono
     mas claro que accent) pero aclarado para el fondo oscuro en vez de
     invertido -- ambos tonos verificados >=4.5:1 contra --color-bg (#161826)
     y --tz-panel (#232532): accent 5.78:1/6.69:1, ink 6.56:1/7.61:1.
     Ningun otro token de este bloque cambia. */
  --color-bg:#161826; --color-surface:#232532; --color-text:#e9e9ed;
  --color-accent:#c9973f; --tz-accent-ink:#d4a24c;
  --color-divider:rgba(233,233,237,.16);
  --tz-panel:#232532; --tz-rail:#1d1f2d; --tz-hover:rgba(233,233,237,.06);
  /* Modo noche congelado (decisión explícita del usuario, 2026-09-19): mismo
     valor que ya se usaba antes de introducir --tz-borde-tarjeta -- ningún
     píxel cambia acá, el token solo existe para que los selectores que lo
     usan (compartidos con modo día) no queden sin valor. */
  --tz-borde-tarjeta:color-mix(in srgb, var(--color-divider) 50%, transparent);
  --tz-ok:#8fc4a2; --tz-danger:#e0917c; --tz-temporal:#d2cefd;
  --tz-naranja:#e0a86f; --tz-azul:#8fb3d9; --tz-gris:#9a9aa5;
  --color-accent-900:#2b2741; --color-accent-200:#e7e5fe;
  --color-neutral-900:#292b31; --color-neutral-100:#f3f5fe;
  --color-accent-700:#5d5294; --color-accent-800:#423a6a;
  --shadow-md:0 0 0 1px #3f424d,0 6px 18px rgba(0,0,0,.55);
  --shadow-lg:0 0 0 1px #595d6c,0 16px 40px rgba(0,0,0,.65);

  /* ETC-LOGIN-REDISENO-001: overlay oscuro/indigo y tarjeta oscura/semitransparente
     sobre la MISMA foto de --tz-auth-bg-image (definida solo en :root). */
  --tz-auth-bg-image:url("assets/auth/login-fondo.jpg");
  --tz-auth-card-radius:14px;
  --tz-auth-overlay:linear-gradient(180deg, rgba(10,9,24,.58) 0%, rgba(22,18,40,.80) 100%);
  --tz-auth-card-bg:rgba(21,20,34,.62);
  --tz-auth-card-border:rgba(233,233,237,.16);
}
/* Fase Visual X — limpieza CSS (2026-09-13): aqui vivia un bloque
   @media (prefers-color-scheme: dark) con el acento lavanda viejo
   (#9184d9/#d2cefd). Se elimino, NO se perdio: su selector
   :root:not([data-tz-theme="day"]):not([data-tz-theme="dark"]) solo podia
   matchear en la ventana previa a que corra aplicarTema() -- que siempre
   estampa data-tz-theme -- asi que lo unico que hacia era pintar por un
   instante un acento que ya no existe en ningun tema. El modo oscuro real
   vive en :root[data-tz-theme="dark"], con el dorado institucional.
   No reintroducir este bloque: si alguna vez hace falta respetar el tema
   del SO, se resuelve en el arranque del JS, no duplicando tokens aqui. */

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-app);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:600}
p{margin:0}
[hidden]{display:none!important}
::selection{background:var(--color-accent);color:var(--color-neutral-100)}
.tabular{font-variant-numeric:tabular-nums}
.hr{border:none;border-top:1px solid var(--color-divider);margin:0}

@keyframes tzUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes tzPulse{0%,100%{opacity:.35}50%{opacity:.8}}

/* ================= INGRESO (Classical) ================= */
/* ETC-LOGIN-REDISENO-001 (2026-10-03): tarjeta centrada sobre foto, en vez
   del split-screen anterior. --tz-auth-bg-image/--tz-auth-overlay/
   --tz-auth-card-bg/--tz-auth-card-border estan definidas arriba, una vez en
   :root (dia) y sobreescritas en :root[data-tz-theme="dark"] -- el login no
   decide ningun color por su cuenta, igual que el resto de TRAZA. Si hay
   temporada activa (data-tz-season), themes/season.js sigue pintando su capa
   encima de #auth-view sin que nada de aqui lo sepa ni lo module. */
.tz-auth{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;padding:32px 16px;font-family:var(--font-body);overflow:hidden}
.tz-auth-bg{position:absolute;inset:0;background-image:var(--tz-auth-bg-image);background-size:cover;background-position:center;z-index:0}
.tz-auth-scrim{position:absolute;inset:0;background:var(--tz-auth-overlay);z-index:1}
/* ETC-LOGIN-ANIMACION-001 (2026-10-03): SIN scroll interno -- la tarjeta
   crece con su contenido (los accesos de laboratorio, los mas altos, ya no
   viven aqui dentro, ver .tz-auth-lab). Si el viewport es mas bajo que la
   tarjeta, la pagina hace scroll (.tz-auth la permite al no recortar), nunca
   la tarjeta misma. `transition:transform` es lo que anima el leve zoom-out
   de .tz-auth-saliendo (arriba); no es parte del reveal de entrada, que usa
   su propia animation. */
.tz-auth-card{position:relative;z-index:2;width:100%;max-width:440px;padding:36px 36px 32px;border-radius:var(--tz-auth-card-radius,14px);
  background:var(--tz-auth-card-bg);border:1px solid var(--tz-auth-card-border);box-shadow:var(--shadow-lg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:flex;flex-direction:column;gap:18px;
  animation:tzAuthReveal 560ms cubic-bezier(.22,.7,.25,1) both;transition:transform 420ms ease}
/* La orbita dorada: una sola vuelta al aparecer, nunca en loop (reusa el
   mismo mecanismo --tz-borde-ang/@property/tzBordeViajero ya declarado para
   el borde viajero de las tarjetas KPI -- ver nota ahi, no se redeclara
   @property). Arranca despues del reveal (animation-delay) para que primero
   se note la tarjeta y despues el trazo que la recorre. */
.tz-auth-card::before{
  content:"";position:absolute;inset:-1px;border-radius:calc(var(--tz-auth-card-radius,14px) + 1px);padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--tz-borde-ang,0deg),transparent 0 78%,var(--color-accent) 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;animation:tzAuthOrbita 1200ms ease-out 260ms both;
}
@keyframes tzAuthReveal{
  from{opacity:0;transform:translateY(10px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes tzAuthOrbita{
  0%{opacity:0;--tz-borde-ang:0deg}
  10%,78%{opacity:1}
  100%{opacity:0;--tz-borde-ang:360deg}
}
.tz-auth-lockup{text-align:center}
.tz-auth-kicker{font-family:var(--font-heading);font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--tz-accent-ink)}
.tz-auth-wordmark{font-family:var(--font-heading);font-weight:400;font-size:48px;letter-spacing:.04em;margin:8px 0 0}
.tz-auth-form-col{display:flex;flex-direction:column;gap:10px}
.tz-auth-form-col h2{font-family:var(--font-heading);margin:0 0 4px;font-size:22px;font-weight:400;text-align:center}
.tz-auth-sub{font-size:13px;opacity:.85;margin:0 0 14px;text-align:center}
.tz-auth-note{font-size:11px;opacity:.88;line-height:1.5}
.tz-auth-error{display:flex;gap:9px;padding:10px 12px;border:1px solid var(--tz-danger);border-radius:4px;font-size:13px;color:var(--tz-danger)}
.tz-auth-radicado{border:1px solid var(--color-divider);border-radius:4px;padding:12px 14px;font-size:13px}
.tz-auth-radicado-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tz-accent-ink);margin-bottom:6px}

/* Campos con icono (Fase 3: cedula con icono de persona, contraseña con
   candado + ojo). Icono como pseudo-elemento, sin imagenes ni fuentes
   nuevas -- mismo espiritu de "color como trazo" del resto del sistema. */
.field-icon{position:relative}
.field-icon input.input{padding-left:34px}
.field-icon::after{content:"";position:absolute;left:11px;bottom:10px;width:14px;height:14px;opacity:.55;
  background:currentColor;-webkit-mask:var(--tz-field-icon) center/contain no-repeat;mask:var(--tz-field-icon) center/contain no-repeat}
.field-icon-user{--tz-field-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='8' r='4'/><path d='M4 20c0-4.4 3.6-7 8-7s8 2.6 8 7'/></svg>")}
.field-icon-lock{--tz-field-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='5' y='11' width='14' height='9' rx='1.5'/><path d='M8 11V7a4 4 0 0 1 8 0v4' fill='none' stroke='black' stroke-width='2'/></svg>")}
.field-icon-lock input.input{padding-right:34px}
.tz-auth-ver-pw{position:absolute;right:4px;bottom:3px;width:28px;height:28px;border:none;background:none;cursor:pointer;opacity:.6;font-size:14px;line-height:28px;border-radius:4px}
.tz-auth-ver-pw:hover,.tz-auth-ver-pw:focus-visible{opacity:1;outline:2px solid var(--color-accent);outline-offset:-2px}

.tz-auth-opciones{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;margin:2px 0 2px}
.tz-auth-remember{display:flex;align-items:center;gap:6px;cursor:pointer;opacity:.9}
.tz-auth-link{background:none;border:none;padding:0;color:var(--tz-accent-ink);cursor:pointer;font-size:12px;text-decoration:underline;text-underline-offset:2px}
.tz-auth-link:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

.tz-auth-divider{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.55;margin:2px 0}
.tz-auth-divider::before,.tz-auth-divider::after{content:"";flex:1;height:1px;background:var(--color-divider)}

.tz-auth-sso{display:flex;align-items:center;justify-content:center;gap:10px;position:relative}
.tz-auth-sso[disabled]{opacity:.55;cursor:not-allowed}
.tz-auth-ms-logo{width:14px;height:14px;flex:none;display:inline-block;background-image:
  linear-gradient(#f25022,#f25022),linear-gradient(#7fba00,#7fba00),
  linear-gradient(#00a4ef,#00a4ef),linear-gradient(#ffb900,#ffb900);
  background-repeat:no-repeat;
  background-size:6px 6px;
  background-position:0 0,7px 0,0 7px,7px 7px}
.tz-auth-proximamente{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.7;border:1px solid currentColor;border-radius:3px;padding:2px 5px;margin-left:4px}

.tz-auth-frase{text-align:center;font-size:12px;font-style:italic;opacity:.75;margin:4px 0 0;line-height:1.5}

/* ── ESTADOS DE INGRESO: verificando / exito (ETC-LOGIN-ANIMACION-001) ────
   `data-tz-auth-estado` en .tz-auth-card ("verificando"|"exito") atenua el
   formulario y muestra esta capa encima, SIN cambiar de pantalla ni de
   ruta -- todo ocurre sobre la misma tarjeta (ver traza-core.js). El anillo
   reutiliza .tz-cargando-torta, el componente de carga que ya existe en el
   resto de TRAZA (nada de spinners nuevos); la marca del centro es
   .tz-brand-mark, el mismo acento de 9px del header -- "elemento grafico
   oficial que ya este disponible", sin inventar un logo nuevo. */
.tz-auth-card[data-tz-auth-estado] .tz-auth-form-col,
.tz-auth-card[data-tz-auth-estado] .tz-auth-divider,
.tz-auth-card[data-tz-auth-estado] .tz-auth-sso{opacity:.18;pointer-events:none;transition:opacity .25s ease}
.tz-auth-estado{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  opacity:0;pointer-events:none;transition:opacity .25s ease;background:var(--tz-auth-card-bg);border-radius:inherit}
.tz-auth-card[data-tz-auth-estado] .tz-auth-estado{opacity:1;pointer-events:auto}
.tz-auth-estado-anillo{position:relative;width:52px;height:52px;display:grid;place-items:center}
.tz-auth-estado-anillo .tz-cargando-torta{width:52px;height:52px;position:absolute;inset:0;
  --tz-dorado:var(--color-accent);--tz-avance:72%}
.tz-auth-estado-anillo .tz-cargando-torta::after{background:var(--tz-auth-card-bg)}
.tz-auth-estado-marca{width:11px;height:11px;border-radius:var(--radius-mark,2px);background:var(--color-accent);z-index:1;
  transition:opacity .2s ease,transform .2s ease}
.tz-auth-estado-check{width:26px;height:26px;z-index:1;fill:none;stroke:var(--color-accent);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.7);transition:none}
.tz-auth-estado-texto{font-size:12.5px;letter-spacing:.03em;opacity:.85;text-align:center}
/* Estado "exito": gira a mostrar el check en vez del anillo/marca. El anillo
   se detiene (deja de girar, se queda como aro completo) en vez de
   desaparecer de golpe -- lectura mas tranquila del cierre. */
.tz-auth-card[data-tz-auth-estado="exito"] .tz-auth-estado-anillo .tz-cargando-torta{animation:none;--tz-avance:100%}
.tz-auth-card[data-tz-auth-estado="exito"] .tz-auth-estado-marca{opacity:0;transform:scale(.5)}
.tz-auth-card[data-tz-auth-estado="exito"] .tz-auth-estado-check{opacity:1;transform:scale(1);transition:opacity .25s ease .05s,transform .3s cubic-bezier(.34,1.56,.64,1) .05s}

/* ── LABORATORIO DE PRUEBAS: zona secundaria, fuera de la tarjeta ─────────
   Antes vivia DENTRO de .tz-auth-card (ver bitacora del rediseno anterior) y
   era lo que obligaba al scroll interno que esta ETC pide eliminar. Es una
   herramienta de desarrollo, no parte del flujo de ingreso: ahora es una
   franja discreta, fija en la esquina, que solo aparece si
   GET /api/ambiente dice que este NO es el Core (misma condicion de
   siempre, ver traza-core.js). */
.tz-auth-lab{position:fixed;left:14px;bottom:14px;z-index:3;max-width:min(92vw,360px);
  padding:10px 12px;border-radius:10px;font-size:12px;line-height:1.5;
  background:var(--tz-auth-card-bg);border:1px solid var(--tz-auth-card-border);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:.82}
.tz-auth-lab:hover,.tz-auth-lab:focus-within{opacity:1}
.tz-auth-lab strong{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-bottom:4px}
.tz-auth-lab p{margin:0 0 8px;opacity:.85}
.tz-auth-lab .btn{padding:4px 9px;font-size:11px}

@media (max-width:480px){
  .tz-auth{padding:16px}
  .tz-auth-card{padding:28px 20px;border-radius:10px}
  .tz-auth-wordmark{font-size:40px}
  .tz-auth-lab{left:8px;right:8px;bottom:8px;max-width:none}
}

/* ── ANIMACIONES DE INGRESO (ETC-LOGIN-ANIMACION-001, 2026-10-03) ─────────
   Reemplaza por completo el telon anterior (ETC-TRAZA-TELON-INGRESO-001):
   ya no hay pantalla intermedia ni logo viajando hacia el centro -- la
   experiencia ocurre SOBRE la propia tarjeta (ver estados en
   traza-core.js: mostrarEstadoLogin/restablecerEstadoLogin/desvanecerAuthView).
   El problema que resolvia el telon (armado del shell visible, ~540ms-3s)
   sigue resuelto igual: la tarjeta se queda tapando el workspace con su
   estado "exito" hasta que arrancarApp() termina de verdad, y solo entonces
   se desvanece #auth-view completo (ver desvanecerAuthView). */
.tz-auth{transition:opacity 420ms ease}
.tz-auth.tz-auth-saliendo{opacity:0;pointer-events:none}
.tz-auth.tz-auth-saliendo .tz-auth-card{transform:scale(.97)}

/* Modo día del ingreso: brillo cálido alrededor de la tarjeta, arco dorado
   detrás (decorativo, aria-hidden por ser pseudo-elemento) y botón de acción
   en dorado sólido. Modo noche intacto. */
:root:not([data-tz-theme="dark"]) .tz-auth-card{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 2px 6px rgba(110,72,20,.14),0 18px 50px rgba(110,72,20,.26);
}
:root:not([data-tz-theme="dark"]) .tz-auth::after{
  content:"";position:absolute;z-index:1;left:50%;top:-6%;bottom:12%;width:min(600px,92vw);transform:translateX(-50%);
  border:1px solid rgba(255,238,200,.60);border-bottom:0;border-radius:300px 300px 0 0;pointer-events:none;
}
:root:not([data-tz-theme="dark"]) .tz-auth .input{background:rgba(255,252,245,.70);border-color:rgba(32,31,29,.22)}
:root:not([data-tz-theme="dark"]) .tz-auth .btn-ghost{background:rgba(255,252,245,.70)}
:root:not([data-tz-theme="dark"]) .tz-auth .btn-primary{
  background:linear-gradient(180deg,#a8742a 0%,#8f5f1a 100%);border-color:#8a5c18;color:#fff;
  box-shadow:0 2px 8px rgba(120,80,20,.30);
}
:root:not([data-tz-theme="dark"]) .tz-auth .btn-primary:hover{background:linear-gradient(180deg,#b27d30 0%,#996720 100%)}
@media (max-width:720px){:root:not([data-tz-theme="dark"]) .tz-auth::after{display:none}}

/* ================= FORM ELEMENTS (comunes) ================= */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field label{font-size:12px;color:var(--color-text);opacity:.75}
.input,textarea.input,select.input{min-height:36px;padding:8px 10px;background:var(--color-bg);border:1px solid var(--color-divider);border-radius:var(--radius-control);color:var(--color-text)}
.input:disabled{opacity:.55}
textarea.input{min-height:80px;resize:vertical;font-family:var(--font-app)}
.field-help{font-size:11px;opacity:.6;margin-top:2px}

.seg{display:flex;border:1px solid var(--color-divider);border-radius:var(--radius-control);overflow:hidden;width:fit-content}
.seg-opt{position:relative}
.seg-opt input{position:absolute;opacity:0;pointer-events:none}
.seg-opt span{display:block;padding:7px 14px;font-size:12.5px;cursor:pointer;border-right:1px solid var(--color-divider)}
.seg-opt:last-child span{border-right:none}
.seg-opt input:checked + span{background:var(--tz-hover);color:var(--tz-accent-ink);font-weight:600}

.btn{font:inherit;font-size:13px;border-radius:var(--radius-control);padding:8px 16px;cursor:pointer;background:transparent;border:1px solid var(--color-divider);color:var(--color-text);transition:background-color .12s ease,border-color .12s ease}
/* Fase Visual 2 — Bloque 6.1 (2026-09-13): .btn no tenia transicion, ni
   estado activo, ni foco visible; y .btn-secondary/.btn-ghost no tenian
   siquiera hover, asi que solo el primario se sentia interactivo. El foco
   visible es requisito de accesibilidad (WCAG 2.4.7), no cosmetica:
   :focus-visible solo dibuja el anillo en navegacion por teclado, no al
   hacer clic. Se transicionan unicamente background-color y border-color:
   ninguna afecta el layout. Los colores corporativos no cambian -- el hover
   usa --tz-hover, que ya era el hover del resto de la app. */
.btn:hover{background:var(--tz-hover)}
.btn:active{background:color-mix(in srgb, var(--color-text) 9%, transparent)}
.btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}
.btn:disabled:hover,.btn[disabled]:hover{background:transparent}
.btn-primary{border:1px solid var(--color-accent);color:var(--tz-accent-ink);font-weight:600}
.btn-secondary{border:1px solid var(--color-divider)}
.btn-ghost{border:none;background:transparent;color:var(--tz-accent-ink);padding:6px 4px}
/* Fase Visual X — iconos SVG fuera del header (2026-09-13): modificador para
   botones cuyo unico contenido es un icono. No se toca .btn ni .btn-ghost,
   compartidas por el resto de TRAZA (misma politica que la nota de mas
   abajo sobre .tz-resp-*). Sin esto el <svg> se alinea a baseline dentro
   del boton y queda descentrado. */
.btn-icono{display:inline-flex;align-items:center;justify-content:center}
.btn-block{width:100%;display:block;text-align:center}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-danger{border:1px solid var(--tz-danger);color:var(--tz-danger)}
.auds-coordinador-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:8px;margin-top:8px}
.auds-coordinador-lista[hidden]{display:none}
.auds-coordinador-btn{display:grid;gap:5px;min-height:88px;padding:11px 12px;border:1px solid var(--color-divider);border-radius:var(--radius-control);background:var(--tz-panel);color:var(--color-text);text-align:left;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.auds-coordinador-btn:hover{border-color:var(--color-accent);background:var(--tz-hover)}
.auds-coordinador-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.auds-coordinador-btn[aria-pressed="true"]{border:2px solid var(--color-accent);background:var(--tz-hover)}
.auds-coordinador-lista .auds-coordinador-btn[aria-pressed="false"]{opacity:.5}
.auds-coordinador-lista .auds-coordinador-btn[aria-pressed="false"]:hover,.auds-coordinador-lista .auds-coordinador-btn[aria-pressed="false"]:focus-visible{opacity:.85}
.auds-coordinador-codigo{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:700;color:var(--tz-accent-ink)}
.auds-coordinador-nombre{font-size:13px;font-weight:600;line-height:1.35}
.auds-coordinador-meta{font-size:11px;opacity:.7}
.auds-coordinador-estado{font-size:10px;font-weight:600}

/* ================= APP SHELL (Nocturne) ================= */
.tz-app{display:flex;flex-direction:column;min-height:100vh}
.tz-header{flex:none;height:50px;display:flex;align-items:center;gap:12px;padding:0 14px;background:var(--tz-rail);border-bottom:1px solid var(--color-divider);position:sticky;top:0;z-index:40}
.tz-brand{display:flex;align-items:center;gap:8px;min-width:0;cursor:pointer}
.tz-brand:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:4px}
.tz-brand-mark{width:9px;height:9px;background:var(--color-accent);border-radius:var(--radius-mark);display:block;flex-shrink:0}
.tz-brand-name{font-size:13px;letter-spacing:.2em;font-weight:600;flex-shrink:0}
.tz-vsep{width:1px;height:20px;background:var(--color-divider)}
.tz-context{display:flex;align-items:baseline;gap:7px;min-width:0}
.tz-context-modulo{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
.tz-context-pantalla{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* AJUSTE VISUAL — CIERRE INTERFAZ PRINCIPAL TRAZA: el buscador global pasa de
   "campo secundario" a herramienta principal de la barra -- mas ancho, icono
   propio, mas contraste en foco. Misma logica de busqueda de siempre (Grupo 6
   de la ETC anterior), solo presentacion. */
/* Fase Visual X — Header premium (2026-09-13): mas ancho ("elemento
   protagonista", pedido explicito) -- misma logica de busqueda de siempre,
   solo presentacion. */
.tz-search{margin-left:16px;flex:3;max-width:640px;position:relative}
.tz-search-icono{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:flex;opacity:.55;pointer-events:none}
/* Fase Visual X — iconos SVG (2026-09-13): tamaño único para los 4 iconos
   de trazo que reemplazan los emoji del header (buscador/campana/tema);
   heredan color y opacidad del boton/contenedor que los envuelve, en vez
   de ser glifos de color fijo dependientes del SO. */
.tz-icono{width:14px;height:14px;flex-shrink:0}
/* Fase Visual X — Accesibilidad header (2026-09-13): --color-divider (usado
   para bordes de control aqui y en .tz-btn-plain de abajo) mide 1.36-1.57:1
   contra el fondo del header -- muy por debajo del minimo WCAG 1.4.11 de
   3:1 para limites de componentes interactivos, asi que estos controles no
   se leian como controles (Impeccable). Se agrega un borde propio, mas
   visible, SOLO para estos dos elementos del header -- no se toca
   --color-divider global (lo usan decenas de separadores/filas en todo el
   sistema como hairline no interactivo, ese uso esta bien como esta). */
.tz-search input{width:100%;height:34px;min-height:34px;font-size:13px;padding:4px 68px 4px 32px;border-radius:7px;background:var(--color-bg);border-color:color-mix(in srgb, var(--color-text) 55%, transparent)}
/* Fase Visual X — Header premium (2026-09-13): hint del atajo Ctrl+K (real,
   ver listener en traza-core.js) -- oculto en angosto junto al buscador
   (misma regla @media de abajo). */
.tz-search-atajo{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:inherit;font-size:10.5px;font-family:inherit;padding:2px 6px;border:1px solid var(--color-divider);border-radius:4px;opacity:.5;pointer-events:none;white-space:nowrap}
.tz-search input:focus{border-color:var(--color-accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent)}
.tz-header-actions{margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0}
/* Seccion de modulos (2026-09-19, pedido explicito del usuario): en el
   selector de modulos y su stub, el header queda reducido a "Salir"
   unicamente -- nada de marca, buscador, notificaciones, tema ni menu de
   usuario. .tz-header-actions sigue siendo el ultimo flex item con
   margin-left:auto, asi que al ocultar sus otros hijos #btn-salir queda
   solo, empujado a la esquina, sin tocar el layout del header. */
.tz-header-solo-salir #btn-rail-toggle,.tz-header-solo-salir .tz-brand,.tz-header-solo-salir .tz-vsep,
.tz-header-solo-salir .tz-context,.tz-header-solo-salir .tz-search,.tz-header-solo-salir #btn-volver-modulos,
.tz-header-solo-salir #btn-novedades,.tz-header-solo-salir #btn-tema,.tz-header-solo-salir #user-menu-wrap{display:none}
/* Pedido del usuario (2026-09-19): ni siquiera la barra del header debe
   notarse aqui -- sin fondo ni linea inferior, "que solo se vea el boton
   de salir" (flotando sobre la fotografia, no una franja completa). */
.tz-header.tz-header-solo-salir{background:transparent;border-bottom:none;position:absolute;top:0;left:0;right:0;z-index:2}
.tz-btn-plain{background:transparent;border:1px solid color-mix(in srgb, var(--color-text) 55%, transparent);border-radius:6px;color:inherit;font:inherit;font-size:12px;padding:5px 10px;cursor:pointer;white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:6px}
/* Fase Visual X — Header premium (2026-09-13): estados normal/hover/foco
   para los botones del header -- antes solo el buscador tenia :focus
   propio (hallazgo Impeccable P1: "cinco controles interactivos sin ningun
   estado disenado"). Mismo patron de foco ya usado en el resto del sistema
   (ej. .tz-resp-adjuntar:focus-within, css linea ~314). */
.tz-btn-plain:hover{background:var(--tz-hover)}
.tz-btn-plain:focus-visible,.tz-user-chip:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}
.tz-btn-plain:disabled{opacity:.45;cursor:not-allowed;background:transparent}
/* Boton "solo icono" (campana, tema, hamburguesa) -- sin borde ni texto,
   circular, fondo sutil solo al pasar el mouse; distinto de .tz-btn-plain
   "de texto" (Salir), que conserva su borde. */
.tz-btn-icon{border-color:transparent;padding:6px;border-radius:50%}
.tz-btn-icon:hover{background:var(--tz-hover)}
.tz-icono-wrap{position:relative;display:flex}
/* Fase Visual X — Header premium (2026-09-13): contador de novedades pasa
   de texto en linea ("🔔 2") a badge superpuesto sobre el icono -- el tope
   "99+" ya existente (Fase Visual X Bloque 1) sigue aplicando igual. */
.tz-badge-notif{position:absolute;top:-4px;right:-6px;min-width:14px;height:14px;padding:0 3px;border-radius:999px;background:color-mix(in srgb, var(--color-accent) 60%, black);color:var(--color-neutral-100);font-size:9px;font-weight:700;line-height:14px;text-align:center}
.tz-user-chip{display:flex;align-items:center;gap:8px;background:transparent;border:0;color:inherit;font:inherit;cursor:pointer;padding:3px 4px;border-radius:6px;text-align:left;min-width:0}
.tz-user-chip:hover{background:var(--tz-hover)}
/* Avatar circular + nombre con mas presencia, cargo secundario -- misma
   estructura/datos de siempre (§3.2 del ajuste visual). Fase Visual X
   (2026-09-13): tinte del acento como fondo -- unica excepcion ademas del
   hover que ya preveia el DESIGN.md ("color solo como trazo"), aplicada
   aqui porque el avatar es la unica pieza de identidad personal del header
   y se beneficia de un poco mas de presencia, sin romper la regla para el
   resto del sistema (botones/tarjetas siguen sin relleno). */
.tz-user-ini{width:28px;height:28px;border-radius:50%;border:1px solid var(--color-accent);background:color-mix(in srgb, var(--color-accent) 16%, transparent);color:var(--tz-accent-ink);display:grid;place-items:center;font-size:11px;font-weight:600;letter-spacing:.04em;flex-shrink:0}
/* Fase Visual X — Bloque 1 (2026-09-13): nombres reales de 4 segmentos
   ("CRISTIAN DAVID MESTRA TERAN") no tenian limite y envolvian a varias
   lineas, rompiendo la barra de 50px verticalmente (hallazgo Impeccable).
   Trunca con elipsis en una sola linea; el nombre completo sigue disponible
   en "Mi perfil". */
.tz-user-meta{display:flex;flex-direction:column;line-height:1.35;min-width:0;max-width:160px}
.tz-user-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tz-user-role{font-size:10px;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Fase Visual X — Header premium (2026-09-13): chevron + menu real (Mi
   perfil / Salir) -- funcional, decision explicita del usuario. */
.tz-chevron{opacity:.5;transition:transform .15s ease}
.tz-user-menu-wrap{position:relative}
.tz-user-menu-wrap.abierto .tz-chevron{transform:rotate(180deg)}
.tz-user-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:160px;background:var(--tz-panel);border:1px solid var(--color-divider);border-radius:8px;box-shadow:var(--shadow-md);padding:6px;z-index:36;animation:tzUp .14s ease-out}
.tz-user-menu-item{display:block;width:100%;text-align:left;background:transparent;border:0;border-radius:6px;color:inherit;font:inherit;font-size:12.5px;padding:8px 10px;cursor:pointer}
.tz-user-menu-item:hover{background:var(--tz-hover)}
.tz-user-menu-item:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}
.tz-user-menu-danger{color:var(--tz-danger)}

.tz-novedades{position:absolute;right:14px;top:54px;z-index:35;width:min(400px,90vw);background:var(--tz-panel);border:1px solid var(--color-divider);border-radius:8px;box-shadow:var(--shadow-md);padding:10px 0;animation:tzUp .14s ease-out}
.tz-novedades-head{display:flex;align-items:center;gap:8px;padding:0 12px 8px;border-bottom:1px solid var(--color-divider);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.tz-novedades-head>span{opacity:.6}
.tz-novedades-marcar-todo{margin-left:auto;background:transparent;border:0;padding:0;color:var(--tz-accent-ink);font-size:11px;font-weight:600;text-transform:none;letter-spacing:normal;cursor:pointer;white-space:nowrap}
.tz-novedades-marcar-todo:hover{text-decoration:underline}
.tz-novedades-marcar-todo:disabled{opacity:.4;cursor:default;text-decoration:none}
.tz-novedades-row{display:block;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--color-divider);color:inherit;font:inherit;padding:9px 12px;cursor:pointer}
.tz-novedades-row:last-child{border-bottom:none}
.tz-novedades-row .accion{font-size:12px;font-weight:500}
.tz-novedades-row .meta{font-size:11px;opacity:.65;margin-top:1px}

.tz-body{flex:1;display:flex;min-height:0}
/* ===== FASE VISUAL 4.3 — Rail institucional oscuro =====
   CAMBIO DE IDENTIDAD APROBADO POR EL USUARIO (2026-09-13). A diferencia de las
   sombras de la Fase 4, esto NO se puede acotar a .tz-inicio: el rail es el
   marco de toda la app, asi que el cambio se ve en cada pantalla. Se advirtio
   antes de ejecutar y el usuario dio el visto bueno.
   El rail deja de seguir el tema dia/noche: es SIEMPRE oscuro, como el marco
   fijo de la marca -- el area de trabajo sigue conmutando normalmente.
   Los tokens propios (--tz-rail-*) se declaran aqui para que los descendientes
   no hereden los del tema claro y pierdan contraste sobre el fondo oscuro. */
/* ===== FASE VISUAL 4.4 — la montaña también en modo día =====
   CORRIGE la decisión de la 4.3. Allí el rail se fijó como SIEMPRE oscuro; en
   modo día eso producía una ruptura real: una fotografía oscura pegada a una
   interfaz clara, como si fueran dos productos distintos.
   Ahora el rail vuelve a seguir el tema, pero la montaña se conserva en AMBOS:
   en noche es fotografía; en día pasa a TEXTURA corporativa -- desaturada,
   aclarada y al 18% -- de modo que aporta la misma identidad sin competir con
   el menú. Los tokens se declaran por tema para que el color del texto y del
   acento acompañen al fondo en vez de quedar fijos. */
.tz-rail{
  width:238px;flex:none;display:flex;flex-direction:column;overflow:auto;padding:0 0 18px;position:relative;
  --tz-rail-bg:#eeebe5; --tz-rail-texto:#2b2823; --tz-rail-tenue:#5e594f;
  --tz-rail-linea:rgba(43,40,35,.13); --tz-rail-acento:#7d5411; --tz-rail-acento-suave:rgba(125,84,17,.10);
  --tz-rail-foto-op:.18; --tz-rail-foto-filtro:grayscale(.4) saturate(.55) brightness(1.28) contrast(.85);
  background:var(--tz-rail-bg);color:var(--tz-rail-texto);border-right:1px solid var(--tz-rail-linea);
}
:root[data-tz-theme="dark"] .tz-rail{
  --tz-rail-bg:#14161f; --tz-rail-texto:#e9e7e4; --tz-rail-tenue:rgba(233,231,228,.55);
  --tz-rail-linea:rgba(233,231,228,.12); --tz-rail-acento:#d4a24c; --tz-rail-acento-suave:rgba(233,231,228,.10);
  --tz-rail-foto-op:.7; --tz-rail-foto-filtro:none;
  border-right-color:rgba(0,0,0,.4);
}
/* La fotografia de cumbre ancla el pie del rail. Va como capa propia y no como
   background del contenedor para poder degradarla hasta cero sin afectar al
   texto que queda encima (mask), y queda aria-hidden por ser decorativa. */
/* La foto se ancla al VIEWPORT, no al rail: el rail crece con el contenido de
   la pagina (medido: 2910px de alto) y un bottom:0 relativo a el dejaba la
   imagen fuera de la vista. fixed + el ancho del rail la mantiene al pie de
   la pantalla, que es donde la referencia la coloca. Se oculta cuando el
   rail se colapsa o pasa a barra horizontal. */
.tz-rail-foto{position:fixed;left:0;bottom:0;width:238px;height:34vh;background-position:center bottom;background-size:cover;background-repeat:no-repeat;
  /* Fase Visual 4.4 — imagen optimizada: el PNG original pesaba 1811 KB para
     mostrarse en una columna de 238px. Reescalada a 560px (cubre pantallas 2x)
     y convertida a WebP queda en 38 KB: 97.9% menos. UI/UX Pro Max marca
     "Unoptimized full-size images" con severidad alta. La primera declaracion
     es el respaldo JPG para navegadores sin image-set(). */
  background-image:url("assets/traza-cumbre.jpg?v=5");
  background-image:image-set(url("assets/traza-cumbre.webp?v=5") type("image/webp"),url("assets/traza-cumbre.jpg?v=5") type("image/jpeg"));
  opacity:var(--tz-rail-foto-op);filter:var(--tz-rail-foto-filtro);pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 38%);mask-image:linear-gradient(to bottom,transparent,#000 55%)}
.tz-rail-marca{position:relative;padding:18px 16px 14px}
.tz-rail-wordmark{font-family:var(--font-heading);font-size:19px;letter-spacing:.34em;color:var(--tz-rail-texto)}
:root[data-tz-theme="dark"] .tz-rail-wordmark{color:#fff}
.tz-rail-tagline{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tz-rail-tenue);line-height:1.7;margin-top:10px;padding-top:10px;border-top:1px solid var(--tz-rail-linea);max-width:150px}
/* Fase Visual 2 (2026-09-13): se quito "transition:width .18s ease" de
   .tz-rail. Animar width en un contenedor con ~15 hijos y scroll propio
   provoca layout thrash: medido en vivo, la transicion NO completaba de
   forma consistente y el rail se quedaba en 238px, o sea el boton
   hamburguesa no colapsaba nada. Sin la transicion el colapso es inmediato
   y fiable. No se reemplaza por transform: el rail DEBE reacomodar el
   layout (el area de trabajo gana esos 238px), y transform no lo hace.
   La regla de prefers-reduced-motion mas abajo queda redundante pero se
   conserva como defensa si alguien reintroduce una transicion aqui. */
/* Fase Visual X — Header premium (2026-09-13): rail colapsable via el nuevo
   boton hamburguesa (funcional, decision explicita del usuario) -- no toca
   el colapso responsive de abajo (<=1180px), que sigue siendo automatico
   por ancho de pantalla; esto es una preferencia manual del usuario, para
   cualquier ancho, persistida como el tema. */
/* Fase Visual 2 (2026-09-13): min-width:0 es IMPRESCINDIBLE, no decorativo.
   El rail es un flex item y los flex items traen min-width:auto, que impide
   encogerse por debajo del ancho minimo de su contenido (los items de
   navegacion). Sin esto el width:0 no tenia efecto: el rail seguia midiendo
   238px y el boton hamburguesa solo le quitaba el padding y el borde. */
.tz-body.tz-rail-oculto .tz-rail{width:0;min-width:0;padding:0;border:0;overflow:hidden}
.tz-body.tz-rail-oculto .tz-rail-foto{display:none}
.tz-rail-group-label{position:relative;padding:14px 16px 5px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tz-rail-tenue);opacity:1}
.tz-rail-items{position:relative;display:flex;flex-direction:column;padding:0 10px;gap:1px}
/* ETC TRAZA GRUPO 2 - REFINAMIENTO (2026-09-12): revertido a formato oracion
   ("Inicio", "Bandeja"...) -- referencia visual SINNUT, navegacion natural.
   El mayuscula queda solo para estados/alertas/control (.tz-tag), no para
   navegacion. El group-label de arriba (.tz-rail-group-label) SI sigue
   mayuscula -- no forma parte de este ajuste, no se toco. */
/* Sobre el rail oscuro el color de texto ya no puede salir del tema: se toma
   de los tokens propios del rail. El activo usa el dorado NOCHE (#d4a24c),
   que es el que contrasta sobre #14161f -- el dorado dia (#7d5411) sobre
   oscuro daria ~2:1 y seria ilegible. */
.tz-nav-item{position:relative;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;font-size:12.5px;text-align:left;background:transparent;border:0;color:var(--tz-rail-texto);cursor:pointer;width:100%;transition:background-color .14s ease,color .14s ease}
.tz-nav-item .tz-icono{width:15px;height:15px;flex:none;opacity:.6}
.tz-nav-item > span:not(.tz-nav-badge){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tz-nav-item:hover{background:var(--tz-rail-acento-suave)}
.tz-nav-item:focus-visible{outline:2px solid var(--tz-rail-acento);outline-offset:-2px}
.tz-nav-item.active{background:var(--tz-rail-acento-suave);color:var(--tz-rail-acento);font-weight:600;box-shadow:inset 2px 0 0 var(--tz-rail-acento)}
:root[data-tz-theme="dark"] .tz-nav-item.active{color:#f0c987}
.tz-nav-item.active .tz-icono{opacity:1}
.tz-nav-badge{font-size:10px;font-variant-numeric:tabular-nums;border-radius:9px;border:1px solid var(--tz-rail-linea);padding:0 6px;flex:none}
.tz-nav-item.active .tz-nav-badge{border-color:var(--tz-rail-acento);color:var(--tz-rail-acento)}
:root[data-tz-theme="dark"] .tz-nav-item.active .tz-nav-badge{color:#f0c987}
.tz-rail-foot{position:relative;margin-top:auto;padding:14px 16px 0;border-top:1px solid var(--tz-rail-linea);font-size:10px;color:var(--tz-rail-tenue);line-height:1.6}

.tz-main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.tz-work{flex:1;min-width:0;overflow:auto;padding:14px 16px 22px}
/* Fondo de toda el área de trabajo: lo pone la capa única de fondo_modulos.css/js (2026-10-04). Aquí vivía la foto de montaña del modo
   día (la foto de amanecer), que se eliminó. */
:root:not([data-tz-theme="dark"]) .tz-main{position:relative}
/* Textura de curvas de nivel en la barra lateral (modo día): líneas doradas
   tenues que se desvanecen hacia arriba, para que el menú no compita con ellas. */
:root:not([data-tz-theme="dark"]) .tz-rail{
  --tz-rail-bg:#ece6d8;
  background:linear-gradient(180deg,#ece6d8 0%,rgba(236,230,216,.94) 34%,rgba(236,230,216,0) 100%),
             url("assets/traza-curvas.svg") center bottom/cover no-repeat,#ece6d8;
}
/* El inicio pintaba su propio fondo opaco y tapaba la foto. */
:root:not([data-tz-theme="dark"]) .tz-inicio{background:transparent}
.tz-detalle-acciones{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;max-width:100%}
.tz-detalle-acciones .btn{min-height:40px;padding:9px 14px}
.tz-detalle-acciones .btn[data-accion="DERIVAR_JURIDICO"]{border-color:var(--tz-accent-ink);background:var(--tz-accent-bg,var(--tz-hover));font-weight:600}
.tz-detalle-acciones .btn[data-accion="DERIVAR_JURIDICO"]::before{content:"→ ";opacity:.75}
.tz-detalle-acciones .tz-accion-ruta-principal{border-color:var(--color-accent);font-weight:600}
.tz-detalle-acciones .tz-accion-ruta-alternativa{opacity:.86}
.tz-acc-wrap{position:relative}
.tz-acc-grupo{display:inline-flex;align-items:center;gap:8px}
.tz-acc-caret{font-size:11px;opacity:.7}
.tz-acc-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:250px;display:grid;gap:2px;padding:6px;background:var(--tz-panel);border:1px solid var(--color-divider);border-radius:var(--radius-control);box-shadow:0 10px 28px rgba(0,0,0,.28)}
.tz-acc-menu[hidden]{display:none}
.tz-acc-item{display:block;width:100%;text-align:left;padding:9px 10px;border:0;border-radius:6px;background:transparent;color:var(--color-text);font:inherit;font-size:13px;cursor:pointer}
.tz-acc-item:hover:not(:disabled),.tz-acc-item:focus-visible{background:var(--tz-hover);outline:none}
.tz-acc-item:disabled{opacity:.45;cursor:not-allowed}
.tz-acc-item small{display:block;margin-top:2px;font-size:11px;line-height:1.35;opacity:.9}
.tz-detalle-acciones .tz-acc-off{opacity:.5}
.tz-detalle-acciones .tz-acc-peligro{border-color:var(--tz-danger);color:var(--tz-danger)}
.tz-acc-sep{align-self:stretch;width:1px;min-height:28px;background:var(--color-divider);margin:0 2px}
@media (max-width:760px){.tz-acc-wrap{flex:1 1 180px}.tz-acc-wrap .btn{width:100%;justify-content:space-between}.tz-acc-menu{min-width:100%}.tz-acc-sep{display:none}}
.tz-chat-mensajes{display:flex;flex-direction:column;gap:12px;height:360px;max-height:52vh;overflow-y:auto;overflow-x:hidden;padding:8px 6px;border:1px solid var(--color-divider);border-radius:8px;background:color-mix(in srgb,var(--tz-hover) 42%,transparent)}
@media (max-width:760px){
  .tz-detalle-acciones{width:100%;margin-left:0;justify-content:flex-start}
  .tz-detalle-acciones .btn{flex:1 1 180px}
}

/* ================= FILTROS (ETC FASE 2.2, FASE 10) =================
   Barra de filtros combinables sobre cualquier listado de informes. Densa a
   proposito: es una herramienta de trabajo, no un formulario -- cabe en una
   sola linea en escritorio y se apila sola en pantallas angostas. */
.tz-filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;padding:10px 12px;border-bottom:1px solid var(--color-divider);background:var(--tz-panel)}
.tz-filtro{display:flex;flex-direction:column;gap:3px;min-width:0}
.tz-filtro > label{font-size:10px;text-transform:uppercase;letter-spacing:.05em;opacity:.6}
.tz-filtro .input{font-size:12px;padding:5px 8px;max-width:180px}
.tz-filtros-pie{display:flex;align-items:center;gap:10px;margin-left:auto}
.tz-filtros-activos{font-size:11px;opacity:.7}

/* ================= CARGA Y REFRESCO (ETC FASE 2.2, FASES 11-13) =================
   Tres piezas para que TRAZA se sienta conectada y no como una pagina que se
   recarga: (1) el "fantasma", una copia congelada de la pantalla actual que se
   deja encima mientras la nueva se arma -- asi un refresco tras una accion no
   pasa por blanco; (2) el indicador circular con tiempo transcurrido, que solo
   aparece si la operacion supera el umbral (400 ms) y solo cubre el area de
   trabajo, nunca toda la aplicacion; (3) el area de trabajo como contenedor
   posicionado, para que ambos se ubiquen contra ella. */
.tz-work{position:relative}
.tz-fantasma{position:absolute;inset:0;z-index:5;overflow:hidden;pointer-events:none;padding:14px 16px 22px;background:var(--color-bg,transparent);opacity:1;transition:opacity .16s ease-out}
.tz-fantasma.tz-fantasma-sale{opacity:0}
.tz-cargando{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;pointer-events:none}
.tz-cargando[hidden]{display:none}
.tz-cargando-caja{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 22px;border-radius:12px;background:var(--tz-panel);border:1px solid var(--color-divider);box-shadow:0 8px 28px rgba(0,0,0,.14)}
.tz-cargando-torta{width:38px;height:38px;border-radius:50%;background:conic-gradient(var(--tz-dorado,#b8860b) var(--tz-avance,25%),var(--color-divider) 0);animation:tzGirar 1s linear infinite;position:relative}
.tz-cargando-torta::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--tz-panel)}
.tz-cargando-texto{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.tz-cargando-tiempo{font-size:12px;font-variant-numeric:tabular-nums;opacity:.85}
@keyframes tzGirar{to{transform:rotate(360deg)}}
/* Fase Visual 2 — Bloque 6.4 (2026-09-13): esto era una lista manual de
   selectores (.tz-cargando-torta, .tz-fantasma, .tz-skeleton-row, .tz-rail,
   .tz-chevron) que habia que ampliar a mano cada vez que se agregaba una
   transicion -- y cualquier olvido dejaba movimiento a un usuario que pidio
   no tenerlo. Pasa al catch-all estandar: cubre TODA animacion y transicion
   del archivo, presente y futura, sin mantenimiento. No se usa 0s: un valor
   minimo deja que los eventos transitionend/animationend sigan disparando,
   que es de lo que depende .tz-fantasma para retirarse. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

.tz-skeleton{display:flex;flex-direction:column;gap:8px}
.tz-skeleton-row{height:34px;border-radius:6px;background:var(--tz-panel);border:1px solid var(--color-divider);animation:tzPulse 1.1s ease-in-out infinite}
/* Fase Visual 3 — Bloques 3 y 4 (2026-09-13): piezas de esqueleto y entrada.
   .tz-skeleton-row ya existia en este archivo pero NUNCA se uso desde el JS:
   estaba definida esperando a alguien. Se reutiliza tal cual, junto con la
   animacion tzPulse y con tzUp (la que ya usa el aviso efimero) -- no se
   agrego ningun keyframe nuevo.
   .tz-sk es la barra generica para texto; su altura la fija quien la usa,
   para que el esqueleto ocupe el MISMO alto que el contenido real y no haya
   salto al reemplazarlo (Bloque 5).
   El catch-all de prefers-reduced-motion (mas arriba) ya neutraliza estas
   animaciones sin necesidad de listarlas aqui. */
.tz-sk{display:block;background:color-mix(in srgb, var(--color-text) 10%, transparent);border-radius:4px;animation:tzPulse 1.1s ease-in-out infinite}
.tz-sk-metric{padding:10px 12px;border-right:1px solid var(--color-divider)}
.tz-sk-metric:last-child{border-right:none}
.tz-entra{animation:tzUp .18s ease-out}

/* ================= FASE VISUAL 4 — CENTRO DE CONTROL (inicio) =================
   Todo lo de aqui vive bajo .tz-inicio a proposito: el nuevo lenguaje con
   elevacion se aplica SOLO a la pantalla de inicio, no a toda la app. El resto
   de TRAZA conserva el sistema plano del DESIGN.md.
   DECISION DEL USUARIO (2026-09-13): se admite sombra suave en tarjetas
   estaticas del inicio, cosa que el DESIGN.md prohibia ("sin tarjetas
   decorativas", "nunca hay sombra para separar contenido estatico"). Se eligio
   entre tres opciones y el usuario opto por aplicarla y actualizar el
   DESIGN.md, que queda corregido en la misma iteracion. UI/UX Pro Max lo
   respalda para dashboards ejecutivos ("card shadows for hierarchy").
   La sombra es deliberadamente MUY tenue: separa por profundidad sin volverse
   decorativa, y el borde de 1px se conserva como en el resto del sistema. */
/* ETC 4.2 — Bloque 8: el "blanco vacio" venia de que --tz-panel (#f9f6f3) y
   --color-bg (#f5f4f2) estan a 4 puntos: las tarjetas casi no se despegaban
   del fondo. Dentro del inicio la superficie sube a un blanco calido y el
   fondo baja, para que haya separacion por TONO ademas de por sombra.
   La paleta global no se toca: esto vive solo bajo .tz-inicio. */
/* Fase Visual 4.3 — --tz-text-sec: color solido para texto secundario, en vez
   de atenuar --color-text con opacity. Las fases 4.1/4.2 usaron opacity para
   bajar el peso visual y eso dejo 7 elementos bajo 4.5:1 (medido: cabeceras de
   tabla en 2.79, "Pendiente:" en 2.57). La opacidad reduce el contraste sin
   avisar; un token solido da la misma jerarquia con el contraste garantizado.
   Es el arreglo que la propia bitacora habia propuesto para el problema
   sistemico de opacity, aplicado aqui al alcance del inicio. */
/* Fase Visual 4.4 — cromatica de piedra. El blanco puro se reemplaza por un
   blanco calido y el fondo por un gris piedra: el mismo registro terroso de
   la fotografia, para que la montaña del rail no parezca pegada sino parte
   del sistema. La sombra tambien se entibia (base marron, no negra). */
/* Fase Visual X (2026-09-19): --tz-elev sube de .05/.07 a .06/.11 -- el
   usuario reportó que la sombra original, combinada con el borde débil de
   antes, dejaba las tarjetas "sintiéndose planas". Sigue siendo la MISMA
   sombra tenue (mismo tono tierra rgba(74,58,38,...), sin bordes gruesos ni
   relleno), solo un poco más presente. Modo noche (línea de abajo) NO se
   toca -- congelado por decisión del usuario. */
.tz-inicio{--tz-elev:0 1px 2px rgba(74,58,38,.10),0 3px 10px rgba(74,58,38,.16);--tz-superficie:var(--tz-panel);--tz-fondo-inicio:var(--color-bg);--tz-text-sec:#4f4739}
:root[data-tz-theme="dark"] .tz-inicio{--tz-elev:0 1px 2px rgba(0,0,0,.30),0 2px 10px rgba(0,0,0,.26);--tz-superficie:#272935;--tz-fondo-inicio:#121420;--tz-text-sec:#a6a39d}
/* Sin fondo propio: el fondo institucional (fondo_modulos.*) debe verse detrás del inicio, de día y de noche. */
.tz-inicio{background:transparent;margin:-14px -16px;padding:16px}
.tz-inicio .tz-panel,.tz-inicio .tz-metric,.tz-inicio .tz-metric-clic,.tz-inicio .tz-operacion,.tz-inicio .tz-prioridad{background:var(--tz-superficie)}
/* Cristal (2026-10-04): las tarjetas del inicio dejan ver el fondo institucional, igual que las de módulos y Circulares. */
.tz-inicio{--tz-superficie:rgba(255,252,246,.76)}
:root[data-tz-theme="dark"] .tz-inicio{--tz-superficie:rgba(19,22,35,.64)}
.tz-inicio .tz-panel,.tz-inicio .tz-metric,.tz-inicio .tz-metric-clic,.tz-inicio .tz-operacion,.tz-inicio .tz-prioridad{-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15)}

/* --- Bloque 1: encabezado personalizado --- */
/* ETC 4.1 — Bloque 1: el hero pasa de 20px a 34px y gana aire. La referencia
   premium no gana por adornos sino por ESCALA y respiracion: el saludo manda
   sobre todo lo demas en vez de competir con las tarjetas. El nombre va en
   serif dorada (Cormorant, la tipografia editorial que TRAZA ya usa en el
   login) -- es el unico punto donde el inicio toma prestado el registro
   Classical, y lo hace para que el saludo se lea como voz de la casa. */
/* Fase Visual 4.4 — presencia del hero: un velo calido que nace arriba y se
   disuelve. Da profundidad al encabezado sin imagen ni banner: la sensacion
   de plataforma viene de la luz, no de un elemento decorativo (que es lo que
   volveria esto una landing). */
.tz-inicio .tz-hero{padding:14px 0 24px;position:relative}
.tz-inicio .tz-hero::before{content:"";position:absolute;left:-16px;right:-16px;top:-16px;height:190px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--color-accent) 7%,transparent) 0%,transparent 78%)}
.tz-inicio .tz-hero > *{position:relative;z-index:1}
.tz-hero{padding:6px 0 22px}
.tz-hero-fecha{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tz-text-sec);margin-bottom:10px}
.tz-saludo{font-size:34px;font-weight:400;letter-spacing:-.015em;line-height:1.1;font-family:var(--font-heading)}
.tz-saludo em{font-style:normal;color:var(--tz-accent-ink)}
.tz-saludo-rol{font-size:14px;opacity:.65;margin-top:8px}
.tz-saludo-frase{font-size:15px;margin-top:4px}
.tz-saludo-frase strong{font-weight:600}

/* --- Bloque 2: tarjetas KPI ejecutivas ---
   .tz-metrics era UNA caja con las 4 metricas separadas por border-right.
   Bajo .tz-inicio se abre en 4 tarjetas independientes con aire entre ellas:
   misma informacion, misma navegacion, solo cambia el envase. */
.tz-inicio .tz-metrics{background:none;border:none;border-radius:0;overflow:visible;gap:10px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
/* ETC 4.2 — Bloque 6: el borde baja al 50%. La separacion la hacen el tono y
   la sombra; el trazo deja de ser el que dibuja cada caja. */
.tz-inicio .tz-metric,.tz-inicio .tz-metric-clic{border:1px solid var(--tz-borde-tarjeta);border-right:1px solid var(--tz-borde-tarjeta);border-radius:12px;padding:12px 14px;box-shadow:var(--tz-elev);transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}
.tz-inicio .tz-metric-clic:hover{background:var(--tz-panel);border-color:color-mix(in srgb,var(--color-accent) 45%,var(--color-divider));box-shadow:0 2px 4px rgba(20,16,8,.07),0 6px 16px rgba(20,16,8,.09);transform:translateY(-1px)}
.tz-inicio .tz-metric-clic:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
/* Fase Visual X — borde viajero en tarjetas KPI (2026-09-19). Nació SOLO
   para modo día; el usuario validó el resultado ahí ("10/10") y pidió
   extenderlo también a modo noche. Ya no está gateado por tema: usa
   var(--color-accent), que ya tiene su propia variante dorada para modo
   noche (#c9973f) definida en :root[data-tz-theme="dark"] -- se reutiliza
   tal cual, no se inventa un color nuevo por tema. Capa aparte via ::after
   -- no reemplaza el hover ya existente arriba (fondo, borde, sombra,
   translateY): se suma encima como acento adicional, así no se pierde
   ninguna señal de hover/foco ya validada. `@property` permite animar el
   ángulo del conic-gradient sin rotar la caja (rotar la caja distorsionaría
   el marco rectangular en las esquinas). El prefers-reduced-motion global
   (línea ~412) ya neutraliza esta animación sin declarar nada extra acá. */
.tz-metric-clic{position:relative}
.tz-metric-clic::after{
  content:"";position:absolute;inset:-1px;border-radius:13px;padding:1.5px;
  background:conic-gradient(from var(--tz-borde-ang,0deg),transparent 0 300deg,var(--color-accent) 330deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.tz-metric-clic:hover::after{opacity:1;animation:tzBordeViajero 2.4s linear infinite}
@property --tz-borde-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes tzBordeViajero{to{--tz-borde-ang:360deg}}
/* ETC 4.1 — Bloque 3: el color deja de ser un punto de 7px y pasa a un disco
   con el icono dentro. Es el cambio que mas acerca la percepcion a la
   referencia: el estado se lee de un vistazo, sin leer la etiqueta. */
.tz-metric-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.tz-metric-disco{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--tz-gris) 14%,transparent);color:var(--tz-gris)}
.tz-metric-disco .tz-icono{width:16px;height:16px;opacity:1;margin:0}
.tz-metric-punto{width:7px;height:7px;border-radius:50%;flex:none;background:var(--tz-gris)}
.tz-metric-punto-rojo{background:var(--tz-danger)}
.tz-metric-punto-amarillo{background:var(--tz-naranja)}
.tz-metric-punto-verde{background:var(--tz-ok)}
.tz-metric-disco-rojo{background:color-mix(in srgb,var(--tz-danger) 14%,transparent);color:var(--tz-danger)}
.tz-metric-disco-amarillo{background:color-mix(in srgb,var(--tz-naranja) 16%,transparent);color:var(--tz-naranja)}
.tz-metric-disco-verde{background:color-mix(in srgb,var(--tz-ok) 16%,transparent);color:var(--tz-ok)}
.tz-metric-disco-azul{background:color-mix(in srgb,var(--tz-azul) 16%,transparent);color:var(--tz-azul)}

/* ETC TRAZA TABLERO INSTITUCIONAL (2026-09-18): tarjetas del mapa de riesgo
   por zona (Director) -- mismos 3 tonos de semaforo ya usados en el resto
   de la app (--tz-danger/--tz-naranja/--tz-ok) mas gris neutral para "sin
   definir", sin inventar una paleta nueva. */
.tz-zonas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;padding:12px 14px}
.tz-zona-card{display:block;width:100%;text-align:left;background:transparent;border:1px solid var(--color-divider);border-left:3px solid var(--tz-gris);border-radius:8px;padding:10px 12px;cursor:pointer;font:inherit;color:inherit}
.tz-zona-card:hover{background:var(--tz-hover)}
.tz-zona-card-rojo{border-left-color:var(--tz-danger)}
.tz-zona-card-naranja{border-left-color:var(--tz-naranja)}
.tz-zona-card-verde{border-left-color:var(--tz-ok)}
.tz-zona-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:7px}
.tz-zona-nombre{font-size:13px;font-weight:600}
.tz-zona-total{font-size:12px;opacity:.6}
.tz-zona-barra{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--tz-hover);margin-bottom:7px}
.tz-zona-seg{display:block;height:100%}
.tz-zona-seg-rojo{background:var(--tz-danger)}
.tz-zona-seg-naranja{background:var(--tz-naranja)}
.tz-zona-seg-verde{background:var(--tz-ok)}
.tz-zona-seg-gris{background:var(--tz-gris)}
.tz-zona-leyenda{display:flex;flex-wrap:wrap;gap:8px;font-size:11px}
.tz-zona-cifra-rojo{color:var(--tz-danger)}
.tz-zona-cifra-naranja{color:var(--tz-naranja)}
.tz-zona-cifra-verde{color:var(--tz-ok)}

/* ================= Seccion de modulos (pantalla portal tras el login) =====
   ETC-TRAZA-SECCION-MODULOS-001, rediseno 2026-09-19 sobre referencia visual
   del usuario ("FONDO PARA LOS MODULOS.png" + "IMAGEN DE COMO SE DEBEN
   GENERAR LOS MODULOS.png"). A diferencia de .tz-inicio (Fase Visual 4.4,
   que evito imagen a proposito para no sentirse "landing" en el uso diario
   repetido), esta pantalla SI es un portal/lanzador -- se ve una vez por
   sesion antes de entrar a un modulo, la fotografia es el lugar correcto
   para ella. Colores de icono por categoria: tokens YA existentes del
   semaforo (--color-accent/--tz-naranja/--tz-azul/--tz-ok/--tz-gris),
   ningun color nuevo. El icono sigue dibujado con trazo (currentColor,
   sin relleno) -- el tinte detras es del mismo tipo color-mix() al 16%
   que ya usa .tz-modulo-badge, no una superficie solida: respeta "color
   como trazo, nunca como relleno" del DESIGN.md. */
.tz-modulos-hero{
  position:relative;margin:-14px -16px -22px;padding:20px 32px 24px;min-height:calc(100vh - 52px);
  --tz-text-sec:#4f4739;
}
:root[data-tz-theme="dark"] .tz-modulos-hero{--tz-text-sec:#a6a39d}
.tz-modulos-hero > *{position:relative;z-index:1}
.tz-modulos-kicker{position:absolute;font-family:var(--font-heading);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;line-height:1.9;color:var(--tz-text-sec);opacity:.6;max-width:180px}
.tz-modulos-kicker-izq{top:22px;left:32px}
.tz-modulos-kicker-der{top:22px;right:32px;text-align:right}
.tz-modulos-kicker-pie{bottom:28px;right:32px;text-align:right;max-width:220px}
@media (max-width:960px){.tz-modulos-kicker{display:none}}
.tz-modulos-encabezado{max-width:640px;margin:8px auto 8px;text-align:center}
.tz-modulos-titulo{font-family:var(--font-heading);font-size:38px;font-weight:400;letter-spacing:-.01em;line-height:1.15}
.tz-modulos-titulo em{font-style:normal;color:var(--tz-accent-ink)}
.tz-modulos-sub{font-size:15px;color:var(--tz-text-sec);margin-top:8px}
.tz-modulos-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;max-width:1120px;margin:22px auto 0}
@media (max-width:640px){.tz-modulos-hero{padding:28px 18px 24px}.tz-modulos-encabezado{margin-top:20px}.tz-modulos-titulo{font-size:28px}}

/* Tarjetas de módulo (2026-10-04, pedido de Diego: ordenarlas y darles la profundidad de los bocetos).
   - Cuadrícula en filas de 3 con la última fila CENTRADA.
   - El contenido siempre arranca arriba: son <button> y un botón centra su contenido en vertical por defecto, así que la tarjeta con más
     texto subía y las demás bajaban (se veían desalineadas). Ahora es una columna y la insignia de estado va siempre abajo.
   - Cristal: fondo translúcido con desenfoque, brillo en el borde superior y sombras en capas. Una luz del color del módulo sigue al cursor
     (--mx/--my, los pone modulos_vida.js) y la tarjeta se inclina un poco (--rx/--ry). Todo el movimiento se apaga con prefers-reduced-motion. */
.tz-modulos-hero{
  --tz-card-vidrio:rgba(255,252,246,.74);--tz-card-borde:rgba(150,118,66,.30);
  --tz-card-brillo:rgba(255,255,255,.85);--tz-card-sombra:rgba(86,62,24,.34);
}
:root[data-tz-theme="dark"] .tz-modulos-hero{
  --tz-card-vidrio:rgba(19,22,35,.62);--tz-card-borde:rgba(255,255,255,.11);
  --tz-card-brillo:rgba(255,255,255,.10);--tz-card-sombra:rgba(0,0,0,.72);
}
.tz-modulo-card{
  position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  flex:0 1 calc((100% - 40px) / 3);min-width:280px;min-height:232px;
  text-align:left;font:inherit;color:inherit;cursor:pointer;padding:20px 22px 18px;border-radius:16px;
  background:linear-gradient(165deg,var(--tz-card-brillo) 0%,transparent 42%),var(--tz-card-vidrio);
  border:1px solid var(--tz-card-borde);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 1px 0 var(--tz-card-brillo) inset,0 22px 44px -22px var(--tz-card-sombra),0 3px 8px -2px rgba(0,0,0,.22);
  transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateY(0);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  animation:tzModuloEntra .65s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 80ms);
}
.tz-modulo-card:nth-child(1){--i:0}.tz-modulo-card:nth-child(2){--i:1}.tz-modulo-card:nth-child(3){--i:2}
.tz-modulo-card:nth-child(4){--i:3}.tz-modulo-card:nth-child(5){--i:4}.tz-modulo-card:nth-child(6){--i:5}
.tz-modulo-card:nth-child(7){--i:6}.tz-modulo-card:nth-child(8){--i:7}
.tz-modulo-card:hover{
  transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateY(-5px);
  border-color:color-mix(in srgb,var(--tz-modulo-color) 55%,var(--tz-card-borde));
  box-shadow:0 1px 0 var(--tz-card-brillo) inset,0 30px 54px -22px var(--tz-card-sombra),0 0 0 1px color-mix(in srgb,var(--tz-modulo-color) 28%,transparent),0 0 34px -8px color-mix(in srgb,var(--tz-modulo-color) 40%,transparent);
}
/* La luz que sigue al cursor, por debajo del contenido. */
.tz-modulo-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s ease;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--tz-modulo-color) 24%,transparent),transparent 62%);
}
.tz-modulo-card:hover::before{opacity:1}
.tz-modulo-card > *{position:relative;z-index:1}
/* Borde viajero (pedido del usuario, 2026-09-19): mismo acento dorado de las tarjetas KPI. */
.tz-modulo-card::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--tz-borde-ang,0deg),transparent 0 300deg,var(--color-accent) 330deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.tz-modulo-card:hover::after{opacity:1;animation:tzBordeViajero 2.4s linear infinite}
.tz-modulo-card:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.tz-modulo-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.tz-modulo-icono{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;
  background:color-mix(in srgb,var(--tz-modulo-color) 16%,transparent);color:var(--tz-modulo-color);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--tz-modulo-color) 22%,transparent) inset;animation:tzIconoRespira 6s ease-in-out infinite}
.tz-modulo-icono .tz-icono{width:21px;height:21px}
.tz-modulo-flecha{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--tz-card-borde);color:var(--color-text);opacity:.55;transition:opacity .16s ease,border-color .16s ease,transform .22s ease}
.tz-modulo-flecha .tz-icono{width:13px;height:13px}
.tz-modulo-card:hover .tz-modulo-flecha{opacity:1;border-color:var(--tz-modulo-color);color:var(--tz-modulo-color);transform:translateX(2px)}
.tz-modulo-card-nombre{font-size:16px;font-weight:600;margin-bottom:6px}
.tz-modulo-card-desc{font-size:12.5px;opacity:.74;margin:0 0 16px;line-height:1.55}
/* La insignia de estado siempre abajo, en la misma línea en todas las tarjetas. */
.tz-modulo-badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--radius-pill);white-space:nowrap;display:inline-block}
.tz-modulo-card .tz-modulo-badge{margin-top:auto;align-self:flex-start}
.tz-modulo-badge-ok{background:color-mix(in srgb, var(--tz-ok) 16%, transparent);color:var(--tz-ok)}
.tz-modulo-badge-construccion{background:color-mix(in srgb, var(--tz-gris) 22%, transparent);color:var(--tz-gris)}
@keyframes tzModuloEntra{from{opacity:0;transform:perspective(900px) translateY(18px) scale(.97)}to{opacity:1}}
@keyframes tzIconoRespira{0%,100%{box-shadow:0 0 0 1px color-mix(in srgb,var(--tz-modulo-color) 22%,transparent) inset,0 0 0 0 transparent}
  50%{box-shadow:0 0 0 1px color-mix(in srgb,var(--tz-modulo-color) 30%,transparent) inset,0 0 18px 0 color-mix(in srgb,var(--tz-modulo-color) 30%,transparent)}}
@media (prefers-reduced-motion:reduce){
  .tz-modulo-card{animation:none;transform:none!important}.tz-modulo-icono{animation:none}
  .tz-modulo-card:hover{transform:none!important}
}
@media (max-width:640px){.tz-modulo-card{flex-basis:100%;min-width:0}}
.tz-modulo-card-accent{--tz-modulo-color:var(--color-accent)}
.tz-modulo-card-naranja{--tz-modulo-color:var(--tz-naranja)}
.tz-modulo-card-azul{--tz-modulo-color:var(--tz-azul)}
.tz-modulo-card-gris{--tz-modulo-color:var(--tz-gris)}
.tz-modulo-card-ok{--tz-modulo-color:var(--tz-ok)}

/* Pantalla "modulo en construccion" (stub) -- mismo velo/fondo del portal,
   sin el grid, para que no se sienta una pantalla de error suelta. */
.tz-modulo-construccion-panel{max-width:480px;margin:64px auto 0;text-align:center;padding:32px 28px;background:var(--tz-panel);border:1px solid var(--color-divider);border-radius:var(--radius-panel);box-shadow:var(--shadow-md)}
.tz-modulo-construccion-icono{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;background:color-mix(in srgb,var(--tz-modulo-color,var(--tz-gris)) 16%,transparent);color:var(--tz-modulo-color,var(--tz-gris))}
.tz-modulo-construccion-icono .tz-icono{width:22px;height:22px}
.tz-zona-cifra-gris{color:var(--tz-gris);opacity:.8}

/* Mapa de riesgo por departamento (Director) -- 2026-09-18. Layout: mapa a
   la izquierda, ranking+tabla a la derecha; en pantallas angostas cae a una
   sola columna (auto-fit hace el trabajo, sin media query dedicada). */
.tz-mapa-layout{display:grid;grid-template-columns:minmax(280px,1.1fr) minmax(280px,1fr);gap:16px;padding:0 14px 14px;align-items:start}
.tz-mapa-col{min-width:0}
.tz-mapa-svg-wrap{display:flex;justify-content:center;align-items:center;min-height:220px}
.tz-mapa-svg{width:100%;max-width:480px;height:auto}
.tz-mapa-depto{stroke:var(--color-bg);stroke-width:1;cursor:default;transition:opacity .15s ease}
.tz-mapa-depto-rojo{fill:var(--tz-danger)}
.tz-mapa-depto-naranja{fill:var(--tz-naranja)}
.tz-mapa-depto-verde{fill:var(--tz-ok)}
.tz-mapa-depto-gris{fill:var(--tz-gris);opacity:.55;cursor:pointer}
.tz-mapa-depto-gris:hover{opacity:.8}
.tz-mapa-depto-rojo,.tz-mapa-depto-naranja,.tz-mapa-depto-verde{cursor:pointer}
.tz-mapa-depto-rojo:hover,.tz-mapa-depto-naranja:hover,.tz-mapa-depto-verde:hover{opacity:.82}
.tz-mapa-depto-sin-datos{fill:var(--tz-gris);opacity:.25}
.tz-mapa-ranking-titulo{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.6;padding:0 14px;margin-bottom:6px}
.tz-mapa-ranking{display:flex;flex-direction:column;gap:2px;padding:0 6px}
.tz-mapa-ranking-fila{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:8px;background:transparent;border:none;padding:6px 8px;border-radius:6px;cursor:pointer;font:inherit;color:inherit;text-align:left}
.tz-mapa-ranking-fila:hover{background:var(--tz-hover)}
.tz-mapa-ranking-nombre{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tz-mapa-ranking-riel{height:6px;border-radius:3px;background:var(--tz-hover);overflow:hidden}
.tz-mapa-ranking-tramo{display:block;height:100%}
.tz-mapa-ranking-tramo-rojo{background:var(--tz-danger)}
.tz-mapa-ranking-tramo-naranja{background:var(--tz-naranja)}
.tz-mapa-ranking-tramo-verde{background:var(--tz-ok)}
.tz-mapa-ranking-tramo-gris{background:var(--tz-gris)}
.tz-mapa-ranking-cifra{font-size:12px;opacity:.7;min-width:24px;text-align:right}
.tz-mapa-tabla-wrap{max-height:260px;overflow:auto;border:1px solid var(--color-divider);border-radius:8px;margin:0 6px}
.tz-depto-fila{cursor:pointer}
.tz-depto-fila:hover{background:var(--tz-hover)}
@media (max-width:720px){.tz-mapa-layout{grid-template-columns:1fr}}
.tz-inicio .tz-metric{padding:16px 16px 15px}
.tz-inicio .tz-metric-value{font-size:34px;line-height:1;margin-top:0;font-weight:600}
.tz-inicio .tz-metric-label{font-size:13px;opacity:1;margin-top:6px;text-transform:none;letter-spacing:0;font-weight:600}
.tz-inicio .tz-metric-note{font-size:11.5px;color:var(--tz-text-sec);opacity:1;margin-top:2px}

/* --- Bloque 3: "Tu prioridad" --- */
/* El borde lateral grueso (border-left:3px) se quito tras la auditoria de
   Impeccable: lo marca como "the most recognizable tell of AI-generated
   UIs", justo lo contrario del criterio de exito de esta ETC. La jerarquia
   la dan ahora el kicker dorado, el tamano del titulo y un contorno teñido
   con el acento a baja intensidad -- color como trazo, que es la regla del
   propio DESIGN.md. */
.tz-prioridad{display:flex;align-items:flex-start;gap:14px;border:1px solid color-mix(in srgb,var(--color-accent) 30%,transparent);border-radius:12px;padding:20px 22px;box-shadow:var(--tz-elev);margin-bottom:16px}
.tz-prioridad-cuerpo{flex:1;min-width:0}
/* ETC 4.1 — Bloque 2: la prioridad deja de ser una barra estrecha y pasa a
   tarjeta protagonista de 2 columnas -- accion a la izquierda, metadatos a
   la derecha. El fondo se tiñe levemente con el acento para separarla del
   resto sin recurrir al borde lateral grueso que Impeccable ya rechazo. */
.tz-prioridad-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:26px;align-items:start}
.tz-prioridad-icono{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--color-accent) 13%,transparent);color:var(--tz-accent-ink)}
.tz-prioridad-icono .tz-icono{width:20px;height:20px}
.tz-prioridad-copy{font-size:12.5px;color:var(--tz-text-sec);margin-top:10px;line-height:1.5}
.tz-prioridad-copy .tz-etq{color:var(--tz-text-sec)}
.tz-prioridad-datos{display:flex;flex-direction:column;gap:9px;border-left:1px solid var(--color-divider);padding-left:22px}
.tz-prioridad-dato{display:grid;grid-template-columns:minmax(0,88px) minmax(0,1fr);gap:10px;font-size:12px;align-items:baseline}
.tz-prioridad-dato dt{color:var(--tz-text-sec)}
.tz-prioridad-dato dd{margin:0;font-weight:500}
.tz-prioridad .btn-primary{margin-top:14px;padding:10px 18px;font-size:13.5px}
.tz-prioridad-kicker{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tz-accent-ink);font-weight:600}
.tz-prioridad-titulo{font-size:15px;font-weight:600;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tz-prioridad-meta{font-size:11px;opacity:.7;margin-top:2px}
.tz-prioridad-tags{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.tz-prioridad .btn{flex:none;white-space:nowrap}

/* --- Fase Visual 4.3: panel de resumen invertido ---
   La referencia crea jerarquia invirtiendo la superficie, no agregando color:
   el resumen operativo es el unico panel oscuro del inicio en modo dia, y eso
   lo vuelve el ancla visual de la columna derecha. En modo noche ya es oscuro
   por definicion, asi que ahi se distingue subiendo un punto la superficie.
   Los tokens se redeclaran dentro del panel para que el texto y las
   divisorias de sus hijos no hereden los del tema claro y desaparezcan. */
/* Fase Visual 4.4 (2026-09-13): en modo dia el panel invertido paso de negro
   a PIEDRA OSCURA (#3b3731) -- seguia siendo el ancla visual de la columna
   derecha, pero con el rail ya claro un panel casi negro quedaba como la
   unica mancha oscura de la pantalla. */
/* Fase Visual X (2026-09-19), REVIERTE lo anterior para modo dia -- decision
   explicita del usuario, aplica a todos los roles (esta plantilla es
   compartida). Con el fondo global ya bajado a --color-bg:#eceae4 y los
   paneles con borde/sombra visibles (--tz-borde-tarjeta/--tz-elev, mismo
   dia), la inversion de superficie que resolvia la "unica mancha oscura"
   de la 4.4 dejo de hacer falta -- y paso a sentirse como un bloque que
   corta la interfaz en vez de una jerarquia. En modo dia el panel ya NO
   redeclara --color-text/--color-divider/--tz-accent-ink ni fuerza un
   background propio: cae en la misma regla que cualquier otro
   ".tz-inicio .tz-panel" (bg --tz-superficie, borde/sombra ya reforzados),
   se distingue igual que sus vecinos, sin mancha oscura.
   Modo noche NO se toca -- ahi el panel invertido ya era oscuro "por
   definicion" (nunca fue el problema que reporto el usuario), asi que el
   bloque de abajo queda exactamente como estaba. */
:root[data-tz-theme="dark"] .tz-panel-invertido{background:#2b2e3c!important;border-color:rgba(255,255,255,.09);color:#e9e7e4;
  --color-text:#e9e7e4;--color-divider:rgba(233,231,228,.14);--tz-accent-ink:#d4a24c}
.tz-panel-invertido .tz-panel-head{border-bottom-color:var(--color-divider)}
.tz-panel-invertido .tz-resumen-ultima-head{color:var(--color-text);opacity:.72}
.tz-panel-invertido .btn{border-color:color-mix(in srgb,var(--color-text) 26%,transparent);color:var(--color-text)}
.tz-panel-invertido .btn:hover{background:color-mix(in srgb,var(--color-text) 10%,transparent)}

/* --- ETC 4.1 Bloque 4: "Estado de operación" ---
   Barra de proporcion real: el ancho de cada tramo sale del conteo que ya se
   calculo para los KPI. No hay dato nuevo ni consulta nueva -- es la MISMA
   informacion del semaforo, leida como reparto en vez de como lista. Si el
   total es 0 el bloque no se pinta (no se dibuja una barra vacia). */
.tz-operacion{border:1px solid var(--tz-borde-tarjeta);border-radius:12px;box-shadow:var(--tz-elev);padding:18px 20px;margin-bottom:16px}
.tz-operacion-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.tz-operacion-titulo{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tz-text-sec);font-weight:600}
.tz-operacion-total{font-size:11.5px;color:var(--tz-text-sec);margin-left:auto}
/* ETC 4.2 — Bloque 4: deja de ser UNA barra apilada (que se leia como
   progreso, como si la operacion "avanzara" de rojo a verde) y pasa a mapa:
   una fila por estado, cada una con su propia barra sobre el mismo riel. Ya
   no sugiere avance, sugiere reparto -- que es lo que el dato realmente dice.
   Sin transition en width: Impeccable lo marca como layout-transition y en
   esta app ese patron ya causo un bug real (rail que no colapsaba). */
.tz-operacion-mapa{display:flex;flex-direction:column;gap:12px}
.tz-operacion-fila{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr) minmax(0,40px);gap:14px;align-items:center}
.tz-operacion-nombre{display:flex;align-items:center;gap:8px;font-size:12.5px}
.tz-operacion-riel{height:8px;border-radius:999px;background:color-mix(in srgb,var(--color-text) 7%,transparent);overflow:hidden}
.tz-operacion-cifra{font-size:15px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.tz-operacion-tramo{height:100%;display:block;border-radius:999px}
.tz-operacion-tramo-rojo{background:var(--tz-danger)}
.tz-operacion-tramo-amarillo{background:var(--tz-naranja)}
.tz-operacion-tramo-verde{background:var(--tz-ok)}

/* --- Bloques 4 y 5: paneles y bandeja como tarjetas --- */
.tz-inicio .tz-panel{border-radius:12px;box-shadow:var(--tz-elev);border-color:var(--tz-borde-tarjeta)}
.tz-inicio .tz-panel-head{padding:11px 14px}
.tz-inicio .tz-panel-body{padding:14px}
/* Fase Visual 4 — Bloque 9 (2026-09-13): la tabla de "Indicadores
   institucionales" (solo Director) trae una columna "Fuente" con nombres de
   funciones del backend y no entra en un panel lateral de ~355px: a 1280px
   desbordaba 53px en silencio. Mismo patron de scroll contenido que ya usan
   #inicio-pend-tabla y #bandeja-tabla-wrap -- la informacion no se recorta,
   se desplaza dentro de su panel. Desborde preexistente, no de esta fase. */
#inicio-indicadores{overflow-x:auto}
/* La bandeja baja jerarquia: el encabezado de la tabla deja de gritar y las
   filas respiran. Misma tabla, misma logica -- solo lectura mas calmada. */
/* ETC 4.1 — Bloques 5 y 6: la bandeja baja un escalon mas. Las divisorias
   entre filas se atenuan a la mitad (la referencia casi no tiene lineas: la
   separacion la da el aire) y la primera fila queda destacada como "lo
   siguiente a mirar". La tabla no se recorta ni se pagina distinto: sigue
   siendo la misma, solo pesa menos en la composicion. */
.tz-inicio .table thead th{font-size:10.5px;color:var(--tz-text-sec);opacity:1;padding:10px 16px;border-bottom:1px solid var(--color-divider)}
.tz-inicio .table td{padding:15px 16px;border-bottom:1px solid color-mix(in srgb,var(--color-divider) 55%,transparent)}
.tz-inicio .table tbody tr{transition:background-color .12s ease}
.tz-inicio .table tbody tr:first-child td{background:color-mix(in srgb,var(--color-accent) 4%,transparent)}
.tz-inicio .table tbody tr:first-child:hover td{background:var(--tz-hover)}

/* --- Bloque 7: entrada escalonada ---
   Reutiliza tzUp (ya existente). El escalonado es por retardo, no por
   animaciones distintas: 45ms entre bloques, lo justo para leerse como
   secuencia sin que el usuario espere. */
/* SIN animation-fill-mode:both -- a proposito. Con "both", si la animacion no
   llega a ejecutarse (pestana en segundo plano, el navegador la difiere), el
   elemento se queda clavado en el fotograma inicial, que es opacity:0: el
   contenido del inicio quedaba INVISIBLE ocupando su espacio. Verificado en
   vivo: .tz-metric con opacity computada 0 y 156px de alto. Sin "both" el
   estado natural del elemento es visible y la animacion solo aporta la
   entrada. Regla: la visibilidad del contenido no puede depender de que una
   animacion corra. */
.tz-inicio .tz-aparece{animation:tzUp .22s ease-out}
.tz-inicio .tz-aparece-1{animation-delay:0ms}
.tz-inicio .tz-aparece-2{animation-delay:45ms}
.tz-inicio .tz-aparece-3{animation-delay:90ms}
.tz-inicio .tz-aparece-4{animation-delay:135ms}

/* ================= PANELS / TABLES / TAGS ================= */
.tz-panel{background:var(--tz-panel);border:1px solid var(--color-divider);border-radius:var(--radius-panel);overflow:hidden}
/* Fase Visual X — separación tarjeta/fondo en modo día (2026-09-19). Fuera de
   .tz-inicio, --tz-panel (#f9f6f3) y --color-bg (#f5f4f2) quedan a 4 puntos
   de gris -- el mismo "blanco vacío" que ya se había detectado y corregido
   SOLO dentro de inicio (ver comentario ETC 4.2 Bloque 8, más arriba) pero
   nunca se extendió al resto de pantallas (Bandeja, Casos escalados, etc.).
   Reutiliza el mismo tono de --tz-elev (bumpeado 2026-09-19, ver .tz-inicio
   más arriba) y --tz-borde-tarjeta -- una sola definición de "cómo se ve una
   tarjeta en modo día", no dos escalas de contraste distintas conviviendo.
   Modo noche queda intacto por decisión explícita del usuario: ahí el
   contraste --tz-panel/--color-bg ya es alto y no hace falta nada de esto. */
:root:not([data-tz-theme="dark"]) .tz-panel{
  border-color:var(--tz-borde-tarjeta);
  box-shadow:0 1px 2px rgba(74,58,38,.10),0 3px 10px rgba(74,58,38,.16);
}
/* La regla de arriba (:root:not(...) .tz-panel) es más específica que
   ".tz-inicio .tz-panel" (línea ~658) y por eso, sin este ajuste, la
   pisaría. Se reafirman acá los mismos valores que ya trae .tz-inicio
   .tz-panel (--tz-borde-tarjeta/--tz-elev) para que no haya ambigüedad de
   cuál regla manda -- incluso siendo iguales, sin esto la cascada podría
   aplicar cualquiera de las dos según el navegador. */
:root:not([data-tz-theme="dark"]) .tz-inicio .tz-panel{
  border-color:var(--tz-borde-tarjeta);
  box-shadow:var(--tz-elev);
}
/* Auditoria diseno (2026-09-18): overflow:hidden recorta cualquier
   desplegable posicionado en absoluto que crezca fuera del panel (el
   autocompletar de joyeria en "Nuevo informe" y "Agregar joyeria a un
   auditor"). Clase de escape puntual, no se toca el overflow:hidden base
   (sigue siendo necesario para no dejar sangrar fondos/sombras de otros
   paneles con esquinas redondeadas). */
.tz-panel-desborda{overflow:visible}
.tz-panel-head{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--color-divider)}
/* ETC TRAZA GRUPO 2 - REFINAMIENTO (2026-09-12): revertido a formato oracion
   ("Condiciones del precierre", "Decisiones administrativas"...) -- mismo
   tamano/peso, solo cambia la transformacion de texto. La variante
   .tz-panel-secundario de abajo (Custodia, 2026-09-11) sigue mayuscula: es
   ese panel especifico en segundo plano, no una regla de navegacion. */
.tz-panel-title{font-size:12px;font-weight:600}
.tz-panel-actions{margin-left:auto;display:flex;gap:6px}
.tz-panel-body{padding:12px}

/* Fase Visual 1.2 — Corrección responsive sidebar (2026-09-13): las tablas
   de Coordinador/Director (opts.columnasExtendidas, ver tablaInformes() en
   traza-core.js) suman 2 columnas ("Empleado auditado","Criticidad") que
   Auditor no tiene -- .table{width:100%} no evita que el navegador ensanche
   la tabla mas alla de su contenedor cuando el contenido lo exige (no hay
   table-layout:fixed), y esa celda vive en un grid minmax(0,1.75fr) que
   puede terminar mas angosta que la tabla. Antes: .tz-main{overflow:hidden}
   recortaba el excedente en silencio (columnas/informacion perdidas) al
   expandir el rail lateral -- reproducido y confirmado con Coordinador a
   1024px. Ahora: scroll horizontal propio de cada panel de tabla, nunca se
   pierde informacion. Sin efecto para Auditor/Supernumerario (su tabla mas
   angosta ya entra sin necesitar scroll). Patron recomendado por UI/UX Pro
   Max para tablas anchas ("Table Handling": scroll horizontal en vez de
   romper el layout). */
#inicio-pend-tabla,#bandeja-tabla-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;opacity:.6;padding:6px 12px;border-bottom:1px solid var(--color-divider)}
/* Fase Visual 2 — Bloque 4 (2026-09-13): bandeja operativa, no tabla
   administrativa. (1) Mas aire vertical: se pasa de --tz-row (9px 12px) a
   --tz-row-ample (10px 12px), token que YA existia en la paleta de densidad;
   no se invento uno nuevo. (2) Divisor mas suave dentro de la tabla: el borde
   entre filas se atenua a la mitad, porque con una divisoria por fila el
   --color-divider pleno leia como reja. Se atenua SOLO el separador
   decorativo; ningun texto pierde contraste. (3) Hover: cursor y transicion
   de fondo -- la fila entera ya era clicable (data-ir) pero nada lo indicaba;
   el boton "Abrir" sigue siendo la via explicita, asi que el hover es
   refuerzo y no el unico camino (UI/UX Pro Max, "Hover vs Tap", severidad
   alta en tactil). */
.table td{padding:var(--tz-row-ample);border-bottom:1px solid color-mix(in srgb, var(--color-divider) 55%, transparent)}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr{cursor:pointer;transition:background-color .12s ease}
.table tbody tr:hover{background:var(--tz-hover)}
.table td.tz-sub{font-size:11px;opacity:.55;display:block;margin-top:1px}
/* (4) Jerarquia de la celda: el motivo es el "nombre del caso" y encabeza la
   prioridad visual que pide la ETC; el identificador interno sigue VISIBLE
   pero deja de competir. (5) Truncamiento elegante: la celda de joyeria hacia
   wrap descontrolado ("048-CORONA / APARTADO / · Auditado: / Juan Perez" en 6
   lineas). line-clamp corta a 2 lineas con ellipsis y el texto completo queda
   en el title (tooltip nativo), que es el "expand option" que recomienda
   UI/UX Pro Max -- nunca se corta sin dar acceso al contenido. */
.table td.tz-caso{font-weight:600}
.tz-trunc{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tz-id-interno{opacity:.5;font-variant-numeric:tabular-nums;white-space:nowrap}
.table td.tz-actions{text-align:right}

/* ETC TRAZA GRUPO 2 (diccionario visual): estados/urgencias/tipos/motivos/avisos
   comparten esta clase -- una sola regla de mayuscula los cubre a todos. */
.tz-tag{display:inline-flex;align-items:center;gap:4px;border:1px solid currentColor;border-radius:var(--radius-pill);padding:2px 8px;font-size:11px;text-transform:uppercase}
.tz-tag-neutral{color:var(--color-text);opacity:.75}
/* Fase Visual 2 — contraste (2026-09-13): estos 3 pintaban TEXTO con
   --color-accent (el token de trazo), quedando en 3.13:1 sobre el panel en
   modo dia -- bajo el minimo AA de 4.5:1, medido en vivo. Pasan a
   --tz-accent-ink, que el DESIGN.md define justamente como "variante tinta
   del acento, para texto que necesita el color de marca con mas contraste".
   La paleta NO cambia: cambia el token, que es el patron que el resto del
   sistema ya seguia. El borde de .tz-tag es currentColor, asi que acompana. */
.tz-tag-curso{color:var(--tz-accent-ink)}
.tz-tag-ok{color:var(--tz-ok)}
.tz-tag-alerta{color:var(--tz-danger)}
.tz-tag-temporal{color:var(--tz-temporal)}
.tz-tag-naranja{color:var(--tz-naranja)}
.tz-tag-azul{color:var(--tz-azul)}
.tz-tag-gris{color:var(--tz-gris);opacity:.75}

/* ETC-TRAZA-VIDA-01: notificacion de actividad + urgencia por plazo real.
   Mismo lenguaje visual que .tz-tag-* de arriba (borde currentColor, sin
   relleno) -- ninguna paleta nueva, solo 2 tonos ya usados en TRAZA. */
.tz-tag-nueva{color:var(--tz-accent-ink);font-weight:600}
.tz-urg-proxima{color:var(--tz-naranja)}
.tz-urg-hoy{color:var(--tz-danger)}
.tz-urg-vencida{color:var(--tz-danger);font-weight:600}
.tz-part-row.tz-urg-proxima{border-left:2px solid var(--tz-naranja);padding-left:8px}
.tz-part-row.tz-urg-hoy,.tz-part-row.tz-urg-vencida{border-left:2px solid var(--tz-danger);padding-left:8px}
.tz-part-row.tz-fila-nueva{background:var(--tz-hover);border-radius:6px;padding:8px 10px;margin:0 -10px}
.tz-punto-nuevo{color:var(--tz-accent-ink);font-size:9px;vertical-align:1px}

/* Señal "algo llego": ESTATICA (2026-10-02, a pedido de Diego). Antes era un halo que respiraba sin parar (tzGlow); un indicador que se
   mueve solo simula vida. Queda el color y el borde de acento, y el contador del badge dice cuanto hay. */
.tz-tiene-novedades{border-color:var(--color-accent) !important;color:var(--tz-accent-ink) !important}

.tz-chip{border:1px solid var(--color-divider);border-radius:999px;padding:4px 10px;font-size:11.5px;background:transparent;cursor:pointer;color:var(--color-text)}
.tz-chip.active{border-color:var(--color-accent);color:var(--tz-accent-ink)}

/* ETC-TRAZA-FASE3B-BANDEJA-UX-002: tarjeta de solicitud compacta, una sola
   columna, agrupaciones horizontales (referencia conceptual del mockup, no
   copia literal) -- reemplaza el diseño de 2 columnas de FASE3B-001 (panel
   lateral con ficha + alerta en cajas separadas, mas alto de lo necesario).
   Solo se usa en Bandeja; el detalle del informe/Seguimiento conservan su
   version compacta anterior (.tz-part-row), sin cambios. */
.tz-sol-card{padding:10px 14px;border:1px solid var(--color-divider);border-radius:var(--radius-panel);background:var(--tz-panel);margin-bottom:8px;border-left:3px solid var(--color-divider)}
.tz-sol-card.tz-urg-proxima{border-left-color:var(--tz-naranja)}
.tz-sol-card.tz-urg-hoy,.tz-sol-card.tz-urg-vencida{border-left-color:var(--tz-danger)}
.tz-sol-card.tz-fila-nueva{border-left-color:var(--color-accent);background:var(--tz-hover)}
.tz-sol-badge{display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;font-size:11px;font-weight:600;border:1px solid currentColor;flex:0 0 auto}
.tz-sol-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tz-sol-tiempo{margin-left:auto;font-size:10.5px;opacity:.55;white-space:nowrap}
/* §1/§2: la pregunta ("{nombre} solicita: ...") es el nivel 2, protagonista
   despues del tipo/estado -- una sola linea de texto, sin caja propia. */
.tz-solicitud-pregunta{font-size:12.5px;margin-top:4px}
.tz-sol-datos{display:flex;flex-wrap:wrap;gap:3px 12px;margin-top:4px;font-size:11px;opacity:.7}
/* §3/§8: participantes en UNA linea horizontal ("Nombre · Rol → Nombre ·
   Rol"), nunca en una caja lateral separada -- nombre real cuando esta
   disponible (personaResumen), ID como respaldo cuando no (AUDITOR). */
.tz-sol-participantes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:11.5px;padding-top:6px;border-top:1px solid var(--color-divider)}
.tz-sol-flecha{opacity:.4}
.tz-sol-aviso{color:var(--tz-danger);font-weight:600;font-size:11px;margin-left:auto}
/* §4: la respuesta se separa de la solicitud con un divisor + etiqueta
   propia -- nunca el mismo peso visual que el resto de la tarjeta. */
.tz-sol-respuesta{margin-top:6px;padding-top:6px;border-top:1px solid var(--color-divider)}
.tz-sol-respuesta p{font-size:12px;margin:2px 0 0;opacity:.9}
.tz-sol-footer{display:flex;justify-content:flex-end;margin-top:6px}
.tz-sol-ver{border:1px solid var(--color-accent);color:var(--tz-accent-ink);background:transparent;border-radius:var(--radius-control);padding:6px 14px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.tz-sol-ver:hover{background:var(--tz-hover)}
@media (max-width:640px){.tz-sol-participantes{flex-direction:column;align-items:flex-start}.tz-sol-aviso{margin-left:0}}

/* ETC REDISEÑO SOLICITUDES (2026-09-18): pestaña "Solicitudes" del detalle
   del informe -- solicitud/respuesta como dos tarjetas conectadas en vez de
   una tarjeta con texto apilado. Reutiliza .tz-sol-card/.tz-sol-head/
   .tz-sol-badge/.tz-sol-tiempo/.tz-sol-datos ya existentes (arriba, de
   Bandeja) -- estas reglas solo agregan lo que es exclusivo de la vista de
   conversacion. Tintes de color via color-mix() sobre los mismos tokens de
   tema (--tz-ok/--tz-danger/--tz-panel), sin paleta nueva: se adaptan solos
   entre modo dia/noche porque esos tokens ya cambian de valor por tema. */
.tz-sol-timeline{display:flex;flex-direction:column;gap:18px}
.tz-sol-conversacion{display:flex;flex-direction:column}
.tz-sol-card-solicitud{border-left:3px solid var(--tz-azul)}
.tz-sol-conector{text-align:center;font-size:13px;opacity:.35;line-height:1;margin:2px 0}
.tz-sol-titulo-cuerpo{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.55;margin-top:10px}
.tz-sol-cuerpo{font-size:14.5px;font-weight:500;margin-top:2px}
.tz-sol-autor{font-size:11.5px;opacity:.65;line-height:1.5;margin-top:10px;padding-top:8px;border-top:1px solid var(--color-divider)}
.tz-sol-card-respuesta{border-left:3px solid var(--tz-ok);background:color-mix(in srgb, var(--tz-ok) 10%, var(--tz-panel))}
.tz-sol-card-respuesta-alerta{border-left-color:var(--tz-danger);background:color-mix(in srgb, var(--tz-danger) 10%, var(--tz-panel))}
.tz-sol-cierre{margin-top:8px;font-size:11.5px;opacity:.7}

/* Tarjeta lateral "Nueva solicitud" -- discreta por defecto (§ "no debe ser
   dominante"), mismo .tz-panel de siempre, se expande in-place al pulsar. */
.tz-sol-nueva-card{padding:16px;text-align:left}
.tz-sol-nueva-icono{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb, var(--color-accent) 16%, transparent);color:var(--tz-accent-ink)}
.tz-sol-nueva-icono .tz-icono{width:18px;height:18px}

/* ETC-TRAZA-AUDITOR-V2-BANDEJA-JERARQUIA-VISUAL-001 (§6): "Adjuntar
   soporte"/"Sin soportes" como par de opciones equivalentes, con sus 5
   estados (normal/hover/focus/seleccionado/deshabilitado). Clases propias
   (no se toca .btn/.btn-ghost, compartidas por el resto de TRAZA) para
   contener el cambio exclusivamente a este control. */
.tz-resp-opciones{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.tz-resp-adjuntar,.tz-resp-sin-soportes{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;border:1px solid var(--color-divider);border-radius:var(--radius-control);padding:8px 14px;cursor:pointer;background:transparent;color:var(--color-text)}
.tz-resp-adjuntar:hover,.tz-resp-sin-soportes:hover{background:var(--tz-hover)}
.tz-resp-adjuntar:focus-within,.tz-resp-sin-soportes:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}
.tz-resp-sin-soportes:disabled{opacity:.45;cursor:not-allowed;background:transparent}
.tz-resp-elegido{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--tz-ok);margin-bottom:8px}

.tz-tabs{display:flex;gap:14px;border-bottom:1px solid var(--color-divider);flex-wrap:wrap}
/* ETC TRAZA GRUPO 2 - REFINAMIENTO (2026-09-12): revertido -- las pestanas son
   navegacion, no estado/alerta/control, mismo criterio que el rail y los
   titulos de panel. */
.tz-tab{background:none;border:none;font:inherit;font-family:var(--font-app);font-size:12.5px;font-weight:500;padding:8px 2px;cursor:pointer;color:var(--color-text);opacity:.65;border-bottom:2px solid transparent;margin-bottom:-1px}
.tz-tab.active{opacity:1;color:var(--tz-accent-ink);border-bottom-color:var(--color-accent)}
.tz-tab .cnt{margin-left:4px;font-size:10px;opacity:.7}

.tz-empty{border:1px dashed var(--color-divider);border-radius:var(--radius-panel);padding:24px;text-align:center}

/* ETC-TRAZA-FASE-2: paginador transversal -- puramente funcional (§20: sin
   animaciones/halos nuevos), mismo lenguaje visual que .tz-chip/.btn ya
   existentes. */
.tz-paginador{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--color-divider)}
.tz-paginador-info{font-size:11.5px;opacity:.65}
.tz-paginador-controles{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.tz-pag-num{border:1px solid var(--color-divider);border-radius:6px;background:transparent;color:var(--color-text);font:inherit;font-size:12px;padding:5px 9px;cursor:pointer;min-width:30px}
.tz-pag-num.active{border-color:var(--color-accent);color:var(--tz-accent-ink);font-weight:600}
.tz-pag-ellipsis{padding:0 4px;opacity:.55;font-size:12px}

.crear-sec-h{font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.6;margin:0 0 10px}
.tz-paso-ind{opacity:.45;padding-bottom:8px;border-bottom:2px solid transparent}
.tz-paso-ind.done{opacity:.75}
.tz-paso-ind.active{opacity:1;color:var(--tz-accent-ink);font-weight:600;border-bottom-color:var(--color-accent)}
.tz-ev-pendiente-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--color-divider);border-radius:var(--radius-panel);padding:8px 10px}
.tz-empty-title{font-size:13px;font-weight:600;margin-bottom:6px}
.tz-empty-copy{font-size:12px;opacity:.65;max-width:44ch;margin:0 auto}
.tz-scope-error{border:1px solid var(--tz-danger);border-radius:var(--radius-panel);padding:20px;color:var(--tz-danger)}
.tz-scope-error h3{color:var(--tz-danger);margin-bottom:6px}

.tz-toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--tz-panel);border:1px solid var(--color-divider);border-radius:8px;box-shadow:var(--shadow-md);padding:10px 16px;font-size:12.5px;display:flex;align-items:center;gap:12px;animation:tzUp .16s ease-out;z-index:60}
.tz-toast button{background:none;border:none;color:inherit;cursor:pointer;opacity:.6;font-size:14px}

.tz-dialog-backdrop{position:fixed;inset:0;background:rgba(10,10,10,.45);display:flex;align-items:center;justify-content:center;z-index:70}
.tz-dialog{background:var(--tz-panel);border:1px solid var(--color-divider);border-radius:8px;box-shadow:var(--shadow-lg);width:min(460px,92vw);padding:18px}
.tz-dialog h3{font-size:15px;margin-bottom:10px}
.tz-dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:16px}

/* ETC CORRECCIONES POST-VALIDACION (2026-09-10, FASE 7): grid principal del
   detalle de informe (contenido + Custodia/Participantes). Vivia como estilo
   inline sin punto de quiebre -- en pantallas angostas la columna de 1fr
   quedaba comprimida y sus botones se cortaban. No es un parche puntual: es
   el comportamiento responsive real del componente. */
/* RETROALIMENTACION DE VALIDACION FUNCIONAL (2026-09-11): la primera vuelta
   solo achico la letra de Custodia (tz-panel-secundario), pero la COLUMNA
   seguia con el mismo ancho que el contenido principal -- seguia "ocupando
   espacio" real. Ahora la columna lateral se reduce de verdad (1fr -> 0.62fr)
   para que Comunicación del expediente / Decisiones / info del caso tengan
   el ancho real de la pantalla. Custodia sigue existiendo y funcionando --
   solo con menos espacio, nunca oculta. */
.tz-detalle-grid{display:grid;grid-template-columns:minmax(0,2.6fr) minmax(0,0.62fr);gap:14px;align-items:start}
@media (max-width:1100px){
  .tz-detalle-grid{grid-template-columns:1fr}
}

/* RETROALIMENTACION DE VALIDACION FUNCIONAL (2026-09-11, punto 1): Custodia
   pasa a segundo plano visual -- sigue con toda su informacion, solo con
   menos peso tipografico y espacio, para dejarle protagonismo a Comunicación
   del expediente / Decisiones / info del caso. */
.tz-panel-secundario{opacity:.85}
.tz-panel-secundario .tz-panel-head{padding:8px 12px;min-height:0}
.tz-panel-secundario .tz-panel-head .tz-panel-title{font-size:11px;text-transform:uppercase;letter-spacing:.04em;opacity:.7;font-weight:600}
.tz-panel-secundario .tz-panel-body{padding:8px 12px;font-size:12px}
.tz-panel-secundario .tz-custodia-actual{font-size:12px}

/* ---- métricas / franja de resumen ---- */
.tz-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:var(--tz-panel);border:1px solid var(--color-divider);border-radius:8px;overflow:hidden}
.tz-metric{padding:10px 12px;border-right:1px solid var(--color-divider)}
.tz-metric:last-child{border-right:none}
/* Fase Visual 2 — escala (2026-09-13): los paneles usaban 7 tamanos fuera de
   la rampa del DESIGN.md (9 / 10 / 10.5 / 11.5 / 12 / 12.5). Se alinean a
   11 (label) / 13 (body) / 14 (dato destacado). La "Regla del Registro
   Pequeno" del DESIGN.md fija un TECHO de 15px, no un piso: no amparaba los
   valores de 9 y 10px, que ademas caen bajo el piso de legibilidad de 11px. */
.tz-metric-label{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.tz-metric-value{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:5px;letter-spacing:-.02em}
.tz-metric-note{font-size:11px;opacity:.6}
/* ETC-TRAZA-FASE-3 (§20): jerarquia de atencion -- el color solo aparece
   cuando el numero es > 0 (evento real: hay algo que decidir), nunca
   decorativo. Mismo tono naranja que ya usa "Sin revisar"/tagEstado(). */
.tz-metric-atencion .tz-metric-value{color:var(--tz-naranja)}
/* ETC-TRAZA-FASE3A-INICIO-PUESTO-TRABAJO-001 (§6): las tarjetas de metricas
   son ahora <button> para poder llevar a los informes correspondientes --
   se resetean los estilos nativos de boton, conservando exactamente el
   mismo aspecto que ya tenian como <div>. */
.tz-metric-clic{background:none;border:none;border-right:1px solid var(--color-divider);display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;padding:10px 12px}
.tz-metric-clic:last-child{border-right:none}
.tz-metric-clic:hover{background:var(--tz-hover)}

/* ---- cadena de estados del expediente ---- */
.tz-chain{display:flex;flex-wrap:wrap;border:1px solid var(--color-divider);border-radius:8px;overflow:hidden;font-size:11px}
.tz-chain-cell{flex:1 1 0;min-width:112px;padding:7px 10px;border-right:1px solid var(--color-divider);opacity:.4}
.tz-chain-cell:last-child{border-right:none}
.tz-chain-cell.pasado{opacity:.8}
.tz-chain-cell.actual{opacity:1;color:var(--tz-accent-ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--color-accent)}
/* §17/18: semaforo funcional sobre la cadena -- naranja=en revision,
   verde=aprobado, azul=requiere info/correccion (con pulso sutil),
   rojo=bloqueo/critico, gris=no iniciado (estado base ya es gris via opacity). */
.tz-chain-cell.st-naranja{opacity:1;color:var(--tz-naranja);font-weight:600;box-shadow:inset 0 -2px 0 var(--tz-naranja)}
.tz-chain-cell.st-verde{opacity:1;color:var(--tz-ok);font-weight:600;box-shadow:inset 0 -2px 0 var(--tz-ok)}
.tz-chain-cell.st-azul{opacity:1;color:var(--tz-azul);font-weight:600;box-shadow:inset 0 -2px 0 var(--tz-azul)}
.tz-chain-cell.st-rojo{opacity:1;color:var(--tz-danger);font-weight:600;box-shadow:inset 0 -2px 0 var(--tz-danger)}
.tz-chain-cell.st-bloqueado{opacity:.55;font-style:italic}
.tz-chain-cell.st-pulso{animation:tzPulseAzul 1.8s ease-in-out infinite}
@keyframes tzPulseAzul{0%,100%{box-shadow:inset 0 -2px 0 var(--tz-azul)}50%{box-shadow:inset 0 -2px 0 transparent}}

/* ---- panel de custodia / historial / línea de tiempo ---- */
.tz-custodia-actual{font-size:14px;font-weight:600}
.tz-custodia-rol{font-size:11px;opacity:.65}
.tz-custodia-creador{font-size:11px;opacity:.6;padding-top:8px;margin-top:8px;border-top:1px solid var(--color-divider)}
.tz-timeline{display:flex;flex-direction:column}
.tz-timeline-row{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--color-divider);font-size:12px}
.tz-timeline-row:last-child{border-bottom:none}
.tz-timeline-fecha{font-variant-numeric:tabular-nums;opacity:.6;font-size:11px}
.tz-timeline-accion{font-size:12.5px;font-weight:600}
.tz-timeline-meta{font-size:11px;opacity:.65;margin-top:1px}
.tz-timeline-row.exc{color:var(--tz-temporal)}
.tz-custodia-row{display:grid;grid-template-columns:88px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--color-divider);font-size:12px}
.tz-custodia-row:last-child{border-bottom:none}
.tz-custodia-row.exc{color:var(--tz-temporal)}

/* ---- participantes ---- */
.tz-part-row{padding:8px 0;border-bottom:1px solid var(--color-divider)}
/* Fase Visual 2 — Bloque 5 (2026-09-13): "Su contexto" ejecutivo. Reemplaza
   las 5 filas clave/valor (cada una con su divisoria: 5 lineas horizontales en
   un panel de 200px) por identidad + alcance + capacidades. Una sola divisoria,
   y la jerarquia la da el tamano, no el borde. Tamanos en la rampa del
   DESIGN.md (13 body / 11 label). El icono reutiliza .tz-icono e ICONO_CHECK,
   que ya existian -- no se agrego iconografia nueva. */
.tz-ctx-identidad{font-size:13px;font-weight:600}
.tz-ctx-alcance{font-size:11px;opacity:.7;margin-top:2px;line-height:1.45}
.tz-ctx-caps{list-style:none;margin:8px 0 0;padding:8px 0 0;border-top:1px solid var(--color-divider);display:flex;flex-direction:column;gap:5px}
.tz-ctx-cap{display:flex;align-items:flex-start;gap:6px;font-size:11px}
.tz-ctx-cap .tz-icono{color:var(--tz-ok);margin-top:1px}
.tz-part-row:last-child{border-bottom:none}
.tz-part-nombre{font-size:13px}
.tz-part-meta{font-size:11px;opacity:.6}

/* AJUSTE VISUAL — CIERRE INTERFAZ PRINCIPAL TRAZA: "Resumen operativo" (radar
   ejecutivo que reemplaza "Actividad reciente"). Reutiliza los mismos tokens de
   color del semaforo de estados (--tz-danger/--tz-naranja/--tz-ok) -- ningun color
   nuevo, ya cubiertos en dia y noche. */
.tz-resumen-conteos{display:flex;flex-direction:column}
.tz-resumen-fila{display:flex;align-items:center;gap:7px;padding:4px 0;border-bottom:1px solid var(--color-divider)}
.tz-resumen-fila:last-child{border-bottom:none}
.tz-resumen-punto{width:7px;height:7px;border-radius:50%;flex:none}
.tz-resumen-punto-rojo{background:var(--tz-danger)}
.tz-resumen-punto-amarillo{background:var(--tz-naranja)}
.tz-resumen-punto-verde{background:var(--tz-ok)}
.tz-resumen-label{font-size:11px;flex:1}
.tz-resumen-valor{font-size:14px;font-weight:600}
.tz-resumen-ultima{margin-top:6px;padding-top:6px;border-top:1px solid var(--color-divider)}
.tz-resumen-ultima-head{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.55;margin-bottom:3px}
.tz-resumen-ultima-titulo{font-size:13px;font-weight:600}
.tz-resumen-ultima-meta{font-size:11px;opacity:.7;margin-top:1px}
.tz-resumen-ultima-estado{margin-top:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tz-resumen-ultima-hace{font-size:10.5px;opacity:.6}
.tz-resumen-ultima .btn{padding:5px 10px;font-size:13px;margin-top:6px}

/* AJUSTE VISUAL — CIERRE INTERFAZ PRINCIPAL TRAZA: tarjetas de "Seguimiento
   precierre" (antes filas de linea de tiempo tecnica). Mismos botones/estados de
   siempre, solo layout de tarjeta + checklist visual. */
.tz-seg-cards{display:flex;flex-direction:column;gap:12px}
.tz-seg-card{border:1px solid var(--color-divider);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.tz-seg-card-titulo{font-size:13px;font-weight:600}
.tz-seg-card-meta{font-size:11.5px;opacity:.7}
.tz-seg-card-datos{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;margin:2px 0}
.tz-seg-card-checklist{border-top:1px solid var(--color-divider);padding-top:8px;margin-top:2px;display:flex;flex-direction:column;gap:6px}
.tz-seg-check{display:flex;align-items:flex-start;gap:7px;font-size:12.5px}
.tz-seg-check-ok{opacity:.65}
.tz-seg-check-marca{flex:none}
.tz-seg-check-nota{font-size:11px;opacity:.6;margin-top:1px}
/* ETC-TRAZA-FASE3B-VIDA-INTELIGENTE-001 (§5): "que me estan pidiendo" es lo
   primero que debe leerse en una solicitud -- opacidad plena (a diferencia
   de .tz-part-meta) y la etiqueta del rol en semibold, sin cambiar tamano de
   fuente respecto al resto de la tarjeta (nada de gritar, solo jerarquia). */
.tz-solicitud-pregunta{opacity:.92;font-weight:500}

/* ================= RESPONSIVE ================= */
@media (max-width:1180px){
  .tz-body{flex-direction:column}
  /* Fase Visual 4.3: en barra horizontal la marca y la fotografia no caben ni
     tienen sentido (el rail pasa a ser una tira de 54px): se ocultan y queda
     solo la navegacion. El wordmark sigue visible en el header. */
  .tz-rail{width:100%;flex-direction:row;overflow-x:auto;padding:6px 8px;align-items:center}
  .tz-rail-marca,.tz-rail-foto{display:none}
  .tz-rail-items{gap:4px}
  .tz-nav-item{white-space:nowrap}
  .tz-rail-group-label{display:none}
  .tz-rail-items{flex-direction:row;padding:0}
  .tz-rail-foot{display:none}
  .tz-metrics{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  /* Fase Visual X — Header premium (2026-09-13): en este ancho el rail es
     una fila horizontal apilada arriba del contenido (tz-body en columna),
     no una columna lateral -- "width:0" no lo oculta aqui (el alto lo
     siguen marcando sus hijos), hace falta colapsar el alto tambien. */
  .tz-body.tz-rail-oculto .tz-rail{width:100%;height:0;padding:0;overflow:hidden}
}
/* Fase Estabilizacion (2026-09-14) -- E-06. Esta rejilla vivia como estilo en
   linea en index.html, asi que NINGUNA media query podia colapsarla: a 375px
   seguia partiendo en dos columnas y la primera quedaba en ~110px, con el
   texto quebrando palabra por palabra. Se vuelve clase para que pueda
   responder al ancho; los valores de escritorio no cambian. */
.tz-inicio-dos-columnas{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(250px,1fr);gap:14px;align-items:start}

@media (max-width:760px){
  /* E-06: una sola columna. Con dos, la de la izquierda no tiene ancho
     utilizable en un telefono -- se veia sobre todo durante la carga, cuando
     los esqueletos ocupan todo el alto. */
  .tz-inicio-dos-columnas{grid-template-columns:1fr}

  /* E-05: a 375px el header no cabe y sus cajas se comprimian POR DEBAJO de
     su contenido (.tz-brand 33px para 57px; .tz-context 52px para 77px).
     Como ambas tienen overflow visible, el texto se salia de su caja y
     "TRAZA" se superponia con "Informes" (16px de solape medido).
     El wordmark esta declarado "protegido, no se acota" mas arriba, asi que
     lo que sobra es el breadcrumb: la barra de navegacion que va justo debajo
     ya dice en que modulo esta el usuario. */
  .tz-context{display:none}
  .tz-brand{flex:none}
  /* Fase Visual 1 (2026-09-12): el selector original ".tz-header-actions
     .tz-search" nunca aplicaba -- .tz-search y .tz-header-actions son
     hermanos en index.html (no hay anidamiento), asi que la regla
     descendente jamas matcheaba y el buscador nunca se ocultaba en movil. */
  .tz-search{display:none}
  .tz-user-meta{display:none}
}
@media (max-width:480px){
  /* Fase Visual X — Bloque 1 (2026-09-13): con el .tz-ambiente ya acotado
     (no desborda), a este ancho igual queda tan angosto que trunca a 1-2
     caracteres ilegibles -- mejor ocultarlo del todo que mostrar un
     fragmento sin sentido; el wordmark "TRAZA" (protegido, no se acota) y el
     acceso a usuario/notificaciones/salida siguen intactos. */
  #ambiente-app{display:none}
}

/* ETC-TRAZA-GOBIERNO-PUERTOS-001 (§3): distintivo de ambiente. El ambiente
   oficial es discreto; el de desarrollo tiene que saltar a la vista. */
/* Fase Visual X — Bloque 1 (2026-09-13): sin limite de ancho, esta insignia
   forzaba el desborde horizontal de TODA la barra superior en viewports
   angostos (620px de contenido en 420px de pantalla -- hallazgo Impeccable);
   el texto completo sigue disponible en el "title" del elemento. */
.tz-ambiente{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.03em;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Fase Visual X — Accesibilidad header (2026-09-13): la insignia medía
   2.32:1 de contraste real (Impeccable) -- muy por debajo del minimo WCAG
   AA de 4.5:1 para texto -- exactamente el elemento cuyo trabajo es evitar
   operar en el ambiente equivocado, siendo el menos legible del header. Se
   quita el relleno de color saturado (volviendo a "color solo como trazo")
   y se reutilizan tokens YA existentes y ya calibrados por tema en vez de
   los hexadecimales crudos de antes (que tampoco tenian variante de modo
   oscuro): --tz-accent-ink da 5.50:1 (dia) / 7.05:1 (noche) contra el fondo
   del header; --tz-danger da 5.40:1 (dia) / 6.62:1 (noche). De paso se
   corrige "oficial", que referenciaba var(--tz-text) -- token que nunca
   existio en ningun lado del CSS (hallazgo Impeccable) y por eso ese texto
   dependia del color heredado del padre en vez del suyo propio -- ahora usa
   var(--color-text), el token real, con el mismo opacity:.75 "discreto" ya
   pensado para ese caso (sigue midiendo 6.5:1+, con margen de sobra). */
.tz-ambiente.oficial{background:rgba(120,120,120,.14);color:var(--color-text);opacity:.75}
.tz-ambiente.desarrollo{color:var(--tz-accent-ink);border:1px dashed var(--tz-accent-ink)}
.tz-ambiente.alerta{color:var(--tz-danger);border:1px solid var(--tz-danger)}
.tz-auth-lockup .tz-ambiente{margin:14px 0 0}

/* ETC EXPORTACION WORD -- PROGRESO (2026-09-18): tarjeta flotante no
   bloqueante (esquina inferior derecha) que muestra las etapas reales de
   generar el Word (puede tardar unos segundos porque mide la paginacion
   con Word real via COM -- ver exportacion_word_service.py). Reusa los
   mismos tokens de color de paneles/acento que el resto de TRAZA, no
   introduce paleta nueva. */
.tz-export-overlay{position:fixed;right:20px;bottom:20px;z-index:80;width:290px;
  background:var(--tz-panel);border:1px solid var(--color-divider);border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.22);padding:14px 16px;font-size:12.5px;
  display:flex;align-items:flex-start;gap:10px}
.tz-export-spinner{width:18px;height:18px;flex:0 0 auto;margin-top:1px;
  border-radius:999px;border:2.5px solid var(--color-divider);border-top-color:var(--color-accent);
  animation:tz-export-girar .8s linear infinite}
@keyframes tz-export-girar{to{transform:rotate(360deg)}}
.tz-export-check{width:18px;height:18px;flex:0 0 auto;border-radius:999px;background:var(--tz-ok);
  color:var(--color-neutral-100);font-size:12px;line-height:18px;text-align:center;font-weight:700}
.tz-export-error{width:18px;height:18px;flex:0 0 auto;border-radius:999px;background:var(--tz-danger);
  color:var(--color-neutral-100);font-size:12px;line-height:18px;text-align:center;font-weight:700}
.tz-export-cuerpo{flex:1 1 auto;min-width:0}
.tz-export-titulo{font-weight:700;color:var(--color-text)}
.tz-export-etapa{margin-top:2px;color:var(--color-text);opacity:.75}
/* Cronómetro del indicador de proceso largo (2026-09-22). Va con cifras de
   ancho fijo para que el número no baile de segundo en segundo. */
.tz-export-crono{margin-top:3px;font-size:11.5px;font-weight:600;letter-spacing:.03em;
  color:var(--color-accent);font-variant-numeric:tabular-nums}
.tz-export-cerrar{margin-left:8px;flex:0 0 auto;background:none;border:0;color:var(--color-text);
  opacity:.55;cursor:pointer;font-size:15px;line-height:1;padding:2px}
.tz-export-cerrar:hover{opacity:.9}


/* ==========================================================================
   Central de Riesgos (ETC-TRAZA-MODULO-RIESGOS-001, 2026-09-20)
   Modulo exclusivo de directores. Usa SOLO tokens ya existentes de TRAZA
   (--color-accent, --color-panel, --color-borde, --color-texto...) y el mismo
   borde viajero que las tarjetas del selector de modulos: identidad TRAZA, sin
   nada heredado de la interfaz de SIGA.
   ========================================================================== */

.tz-rsg { max-width: 1240px; margin: 0 auto; padding: 4px 0 40px; }

.tz-rsg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.tz-rsg-h1 { font-size: 26px; letter-spacing: -0.02em; margin: 0 0 4px; }
.tz-rsg-sub { margin: 0; font-size: 13px; color: var(--color-texto-suave); max-width: 62ch; }
.tz-rsg-volver { margin-bottom: 14px; }

/* --- Filtros ------------------------------------------------------------- */
.tz-rsg-filtros { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }

.tz-rsg-paises { display: flex; gap: 8px; flex-wrap: wrap; }
.tz-rsg-pais {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border: 1px solid var(--color-borde); border-radius: 999px;
  background: var(--color-panel); color: var(--color-texto);
  font: inherit; font-size: 12.5px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.tz-rsg-pais:hover { border-color: var(--color-accent); transform: translateY(-1px); }
.tz-rsg-pais-activo { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, var(--color-panel)); }
.tz-rsg-pais-nombre { font-weight: 500; }
.tz-rsg-pais-num { font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--color-texto-suave); }
.tz-rsg-pais-activo .tz-rsg-pais-num { color: var(--color-accent); font-weight: 600; }

.tz-rsg-bandera { width: 16px; height: 11px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.14) inset; flex: 0 0 auto; }

.tz-rsg-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tz-rsg-buscador {
  flex: 1 1 320px; min-width: 240px; padding: 9px 13px;
  border: 1px solid var(--color-borde); border-radius: 8px;
  background: var(--color-panel); color: var(--color-texto); font: inherit; font-size: 13px;
}
.tz-rsg-buscador:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.tz-rsg-conteo { font-size: 12px; color: var(--color-texto-suave); font-variant-numeric: tabular-nums; }

.tz-rsg-familias { display: flex; gap: 7px; flex-wrap: wrap; }
.tz-rsg-familia {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 11px; border: 1px dashed var(--color-borde); border-radius: 6px;
  background: transparent; color: var(--color-texto-suave);
  font: inherit; font-size: 12px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.tz-rsg-familia:hover { border-style: solid; border-color: var(--color-accent); color: var(--color-texto); }
.tz-rsg-familia-activa { border-style: solid; border-color: var(--color-accent); color: var(--color-accent); font-weight: 600; }
.tz-rsg-familia-num { font-variant-numeric: tabular-nums; font-size: 11px; }

/* --- Tarjetas de caso ---------------------------------------------------- */
.tz-rsg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.tz-rsg-vacio { grid-column: 1 / -1; padding: 40px 0; text-align: center; }

.tz-rsg-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 9px;
  padding: 16px 17px 14px; text-align: left;
  border: 1px solid var(--color-borde); border-radius: 12px;
  background: var(--color-panel); color: var(--color-texto);
  font: inherit; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tz-rsg-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.10); border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-borde)); }
.tz-rsg-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Borde viajero: mismo patron ya validado en las tarjetas KPI del inicio y en
   el selector de modulos (@keyframes tzBordeViajero ya existe arriba). */
.tz-rsg-card::after {
  content: ""; position: absolute; inset: -1px; border-radius: 12px; pointer-events: none;
  padding: 1px; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 78%, var(--color-accent) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .2s ease;
}
.tz-rsg-card:hover::after { opacity: 1; animation: tzBordeViajero 1.8s linear infinite; }

.tz-rsg-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tz-rsg-card-pais { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--color-texto-suave); font-weight: 500; }
.tz-rsg-card-titulo { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.tz-rsg-card-previsual { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--color-texto-suave); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tz-rsg-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tz-rsg-card-tipo { font-size: 11.5px; color: var(--color-texto-suave); }
.tz-rsg-card-pie { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--color-texto-suave); border-top: 1px solid var(--color-borde); padding-top: 9px; margin-top: 2px; flex-wrap: wrap; }

.tz-rsg-chip-familia {
  display: inline-block; padding: 3px 9px; border-radius: 5px; font-size: 11px; font-weight: 600;
  background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent);
}

/* --- Detalle ------------------------------------------------------------- */
.tz-rsg-detalle-head { padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--color-borde); }
.tz-rsg-detalle-pais { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-texto-suave); margin-bottom: 8px; }
.tz-rsg-detalle-titulo { font-size: 27px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 12px; max-width: 34ch; }
.tz-rsg-detalle-tags { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tz-rsg-detalle-tipo, .tz-rsg-detalle-fecha { font-size: 11.5px; color: var(--color-texto-suave); }
.tz-rsg-anonimo { margin: 12px 0 0; font-size: 11.5px; color: var(--color-texto-suave); font-style: italic; }

.tz-rsg-detalle-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; }
.tz-rsg-detalle-principal { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tz-rsg-detalle-lado { position: sticky; top: 16px; }

.tz-rsg-bloque { padding: 18px 20px; border: 1px solid var(--color-borde); border-radius: 10px; background: var(--color-panel); }
.tz-rsg-bloque-destacado { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-borde)); background: color-mix(in srgb, var(--color-accent) 6%, var(--color-panel)); }
.tz-rsg-bloque-lado { padding: 16px 17px; }
.tz-rsg-bloque-titulo { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--color-texto-suave); margin: 0 0 12px; font-weight: 600; }
.tz-rsg-bloque-texto p { margin: 0 0 10px; font-size: 14px; line-height: 1.65; }
.tz-rsg-bloque-texto p:last-child { margin-bottom: 0; }
.tz-rsg-lista { margin: 0; padding-left: 20px; }
.tz-rsg-lista li { font-size: 13.5px; line-height: 1.6; margin-bottom: 6px; }

.tz-rsg-ficha { display: flex; flex-direction: column; gap: 11px; }
.tz-rsg-ficha-grupo { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.tz-rsg-ficha-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-texto-suave); min-width: 150px; }
.tz-rsg-ficha-valores { display: flex; gap: 6px; flex-wrap: wrap; }
.tz-rsg-ficha-valor { padding: 3px 9px; border: 1px solid var(--color-borde); border-radius: 5px; font-size: 11.5px; }

/* --- Material ------------------------------------------------------------ */
.tz-rsg-material-sub { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-texto-suave); margin: 16px 0 10px; font-weight: 600; }
.tz-rsg-material-sub:first-child { margin-top: 0; }
.tz-rsg-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.tz-rsg-foto { margin: 0; border: 1px solid var(--color-borde); border-radius: 8px; overflow: hidden; background: var(--color-fondo); }
.tz-rsg-foto img, .tz-rsg-foto video { display: block; width: 100%; height: 150px; object-fit: cover; background: #000; }
.tz-rsg-foto figcaption { padding: 7px 9px; font-size: 11px; color: var(--color-texto-suave); word-break: break-word; }

.tz-rsg-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.tz-rsg-docs li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 11px; border: 1px solid var(--color-borde); border-radius: 7px; font-size: 12.5px; }
.tz-rsg-doc-meta { font-size: 11px; color: var(--color-texto-suave); white-space: nowrap; }

/* --- Antecedentes -------------------------------------------------------- */
.tz-rsg-antecedentes-intro { margin: 0 0 11px; font-size: 12px; color: var(--color-texto-suave); }
.tz-rsg-antecedentes { display: flex; flex-direction: column; gap: 9px; }
.tz-rsg-antecedente {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  width: 100%; padding: 11px 12px; text-align: left;
  border: 1px solid var(--color-borde); border-radius: 8px;
  background: var(--color-fondo); color: var(--color-texto); font: inherit; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.tz-rsg-antecedente:hover { border-color: var(--color-accent); transform: translateX(2px); }
.tz-rsg-antecedente:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tz-rsg-antecedente-pais { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-texto-suave); }
.tz-rsg-antecedente-titulo { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.tz-rsg-antecedente-familia { font-size: 11px; color: var(--color-texto-suave); }
.tz-rsg-antecedente-sim { font-size: 11px; font-weight: 600; color: var(--color-accent); font-variant-numeric: tabular-nums; }

.tz-rsg-patrones { display: flex; flex-direction: column; gap: 6px; }
.tz-rsg-patron { font-size: 11.5px; color: var(--color-texto-suave); }
.tz-rsg-patron em { font-style: normal; font-weight: 600; color: var(--color-texto); text-transform: lowercase; }
.tz-rsg-advertencia { margin: 12px 0 0; font-size: 11px; line-height: 1.5; color: var(--color-texto-suave); font-style: italic; }

/* --- Formulario ---------------------------------------------------------- */
.tz-rsg-form { display: flex; flex-direction: column; gap: 16px; max-width: 760px; padding: 22px 24px; }
.tz-rsg-campo { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; }
.tz-rsg-campo-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-texto-suave); font-weight: 600; }
.tz-rsg-campo-fila { display: flex; gap: 14px; flex-wrap: wrap; }
.tz-rsg-campo input, .tz-rsg-campo select, .tz-rsg-campo textarea {
  padding: 9px 11px; border: 1px solid var(--color-borde); border-radius: 7px;
  background: var(--color-fondo); color: var(--color-texto); font: inherit; font-size: 13px;
}
.tz-rsg-campo input:focus-visible, .tz-rsg-campo select:focus-visible, .tz-rsg-campo textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.tz-rsg-campo textarea { resize: vertical; }

@media (max-width: 1000px) {
  .tz-rsg-detalle-cols { grid-template-columns: 1fr; }
  .tz-rsg-detalle-lado { position: static; }
}
@media (max-width: 680px) {
  .tz-rsg-detalle-titulo { font-size: 22px; }
  .tz-rsg-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tz-rsg-card, .tz-rsg-pais, .tz-rsg-antecedente { transition: none; }
  .tz-rsg-card:hover { transform: none; }
  .tz-rsg-card:hover::after { animation: none; }
  .tz-rsg-antecedente:hover { transform: none; }
}

/* M9.3 — relato evidencial (ETC_M9_3_ENSAMBLAJE_NARRATIVO, 2026-09-20) */
.tz-rsg-fuentes { margin: 12px 0 0; font-size: 10.5px; color: var(--color-texto-suave); font-style: italic; }
.tz-rsg-conciliacion { width: 100%; max-width: 460px; border-collapse: collapse; font-size: 13.5px; }
.tz-rsg-conciliacion td { padding: 8px 10px; border-bottom: 1px solid var(--color-borde); }
.tz-rsg-conciliacion td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.tz-rsg-conciliacion-dif td { border-bottom: none; color: var(--color-accent); font-size: 15px; border-top: 2px solid var(--color-accent); }
.tz-rsg-timeline { list-style: none; margin: 0; padding: 0 0 0 4px; }
.tz-rsg-timeline > li { display: flex; gap: 14px; padding: 9px 0 9px 16px; border-left: 2px solid var(--color-borde); position: relative; }
.tz-rsg-timeline > li::before { content: ""; position: absolute; left: -5px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.tz-rsg-timeline-fecha { flex: 0 0 110px; font-size: 11.5px; font-weight: 600; color: var(--color-accent); }
.tz-rsg-timeline-hecho { font-size: 12.5px; line-height: 1.55; color: var(--color-texto-suave); }
/* ETC-05: fuente normativa verificada. Se distingue del relato (borde propio,
   cuerpo menor) porque no es lo que el auditor narró sino lo que el motor
   pudo cotejar contra el repositorio -- incluido cuando NO pudo. */
.tz-rsg-normativa { margin: 10px 0 0; padding: 9px 12px; border-left: 2px solid var(--color-divider); background: color-mix(in srgb, var(--color-text) 3%, transparent); border-radius: 0 4px 4px 0; }
.tz-rsg-normativa-titulo { margin: 0 0 5px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 58%, transparent); }
.tz-rsg-normativa-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tz-rsg-normativa-lista > li { font-size: 11.5px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.tz-rsg-normativa-ok { color: var(--color-text); }
/* Una mención que el repositorio no respalda no se pinta como error del
   sistema: es un dato del expediente que el auditor tiene que revisar. */
.tz-rsg-normativa-falta { color: var(--color-accent); }
.tz-rsg-normativa-candidatos { margin: 4px 0 0; padding-left: 18px; font-size: 11px; }
/* El hito es una fila flex (fecha | hecho): la cita baja a su propio renglón
   en vez de competir por el ancho del hecho. */
.tz-rsg-timeline > li { flex-wrap: wrap; }
/* La base descuenta la sangria de la fecha: base + margen = 100%, sin
   desbordar la fila (producia scroll horizontal). */
.tz-rsg-timeline > li > .tz-rsg-normativa { flex: 1 0 calc(100% - 124px); margin-left: 124px; }
@media (max-width: 680px) { .tz-rsg-timeline > li > .tz-rsg-normativa { flex-basis: 100%; margin-left: 0; } }
@media (max-width: 680px) {
  .tz-rsg-timeline > li { flex-direction: column; gap: 4px; }
  .tz-rsg-timeline-fecha { flex: none; }
}

/* ETC-02 Fase 3: imágenes del informe pintadas dentro del bloque que narra su
   parte. La posición la trae M0; el anclaje, la cobertura del relato. */
.tz-rsg-bloque-imagenes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 4px;
}
.tz-rsg-imagen-inline {
  margin: 0;
  flex: 0 1 220px;
}
.tz-rsg-imagen-inline img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--tz-borde, #d8d2c4);
  display: block;
}

/* ══════════════════════════════════════════════════════════════════════════
   MÓDULO CIRCULARES Y COMUNICADOS (ETC Circulares, 2026-09-23)
   Pantallas de circulares.js. Usa SOLO tokens ya declarados en :root
   (--color-text, --tz-text-sec, --color-divider, --tz-panel, --color-accent,
   --tz-ok, --tz-naranja): ningún color suelto y ninguna paleta nueva.
   ══════════════════════════════════════════════════════════════════════════ */

.tz-cir { display: flex; flex-direction: column; gap: 20px; }

.tz-cir-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.tz-cir-h1 { margin: 0 0 4px; font-size: 1.5rem; color: var(--color-text); }
.tz-cir-h2 { margin: 8px 0 0; font-size: 1rem; color: var(--color-text); }
.tz-cir-sub { margin: 0; color: var(--tz-text-sec); font-size: .9rem; }
.tz-cir-volver { align-self: flex-start; }

/* Tablero: solo lo que el backend puede responder hoy. */
.tz-cir-tablero {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.tz-cir-kpi {
  background: var(--tz-panel); border: 1px solid var(--color-divider);
  border-radius: var(--radius-panel); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.tz-cir-kpi-valor { font-size: 1.6rem; font-weight: 600; color: var(--color-text); line-height: 1.1; }
.tz-cir-kpi-etiqueta { font-size: .78rem; color: var(--tz-text-sec); }
.tz-cir-kpi-ok .tz-cir-kpi-valor { color: var(--tz-ok); }
.tz-cir-kpi-aviso .tz-cir-kpi-valor { color: var(--tz-naranja); }

.tz-cir-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.tz-cir-filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.tz-cir-filtro {
  background: transparent; border: 1px solid var(--color-divider);
  border-radius: 999px; padding: 6px 14px; font-size: .82rem;
  color: var(--tz-text-sec); cursor: pointer; font-family: var(--font-app);
}
.tz-cir-filtro:hover { color: var(--color-text); }
.tz-cir-filtro-activo {
  color: var(--color-text); border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.tz-cir-buscar { display: flex; align-items: center; gap: 10px; }
.tz-cir-buscador {
  background: var(--tz-panel); border: 1px solid var(--color-divider);
  border-radius: 8px; padding: 8px 12px; min-width: 240px;
  color: var(--color-text); font-family: var(--font-app); font-size: .85rem;
}
.tz-cir-conteo { font-size: .8rem; color: var(--tz-text-sec); white-space: nowrap; }

.tz-cir-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.tz-cir-vacio { color: var(--tz-text-sec); font-size: .88rem; margin: 8px 0; }

/* Una tarjeta por circular. La franja de color dice el TIPO, que el
   coordinador declaró al cargar -- nunca se infiere del documento. */
.tz-cir-card {
  text-align: left; background: var(--tz-panel);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-panel); padding: 14px 16px; cursor: pointer;
  display: flex; flex-direction: row; align-items: flex-start; gap: 12px;
  font-family: var(--font-app); color: var(--color-text);
  transition: box-shadow .15s ease, transform .15s ease;
}
.tz-cir-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tz-cir-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* El cuerpo de texto es lo que antes era todo el contenido de la tarjeta:
   envolverlo deja que la miniatura (Opcion B) se acomode al lado sin romper
   el layout de las tarjetas que no tienen (docx/xlsx sin rasterizar). */
.tz-cir-card-cuerpo { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
/* Portada de la pagina 1, a ancho de tarjeta -- mismo motor de rasterizado
   que el visor de detalle, solo que pedido con un ancho chico. */
.tz-cir-mini {
  width: 56px; height: 72px; object-fit: cover; flex-shrink: 0;
  border-radius: 4px; border: 1px solid var(--color-divider); background: var(--tz-panel);
}
/* El extracto es literal (Asunto/Objeto del documento, o su primer parrafo
   real) -- nunca un resumen inventado. Dos lineas, se corta con "...". */
.tz-cir-card-extracto {
  font-size: .82rem; color: var(--tz-text-sec); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* El tipo se nombra. Antes era una franja de color en el borde: no tenia
   alternativa textual y obligaba a aprender el codigo de colores. */
.tz-cir-tipo {
  font-size: .7rem; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--color-divider); color: var(--tz-text-sec); white-space: nowrap;
}
.tz-cir-tipo-oro { color: var(--tz-naranja); border-color: var(--tz-naranja); }
.tz-cir-tipo-verde { color: var(--tz-ok); border-color: var(--tz-ok); }
/* Sin declarar: en gris de texto secundario, no en rojo. No es un error --
   es una circular que espera que un coordinador diga que tipo es. */
.tz-cir-tipo-pendiente { color: var(--tz-text-sec); border-style: dashed; }

.tz-cir-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tz-cir-ref { font-size: .75rem; color: var(--tz-text-sec); letter-spacing: .02em; }
.tz-cir-card-titulo { font-size: .96rem; font-weight: 600; line-height: 1.35; }
.tz-cir-card-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: .76rem; color: var(--tz-text-sec); flex-wrap: wrap;
}

.tz-cir-estado {
  font-size: .7rem; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--color-divider); color: var(--tz-text-sec); white-space: nowrap;
}
.tz-cir-estado-activa { color: var(--tz-ok); border-color: var(--tz-ok); }
.tz-cir-estado-programada { color: var(--color-accent); border-color: var(--color-accent); }
.tz-cir-aviso { font-size: .75rem; color: var(--tz-naranja); }

/* Detalle */
.tz-cir-detalle-head { display: flex; flex-direction: column; gap: 6px; }
.tz-cir-detalle-head .tz-cir-estado { align-self: flex-start; }
.tz-cir-detalle-cuerpo { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.tz-cir-ficha {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 18px;
  margin: 0; font-size: .87rem;
}
.tz-cir-ficha dt { color: var(--tz-text-sec); }
.tz-cir-ficha dd { margin: 0; color: var(--color-text); }

.tz-cir-historial { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tz-cir-historial > li {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  border-left: 2px solid var(--color-divider); padding-left: 12px;
  font-size: .85rem;
}
.tz-cir-historial-estado { font-weight: 600; color: var(--color-text); }
.tz-cir-historial-fecha { color: var(--tz-text-sec); font-size: .8rem; }
.tz-cir-historial-motivo { color: var(--tz-text-sec); }

/* Carga */
.tz-cir-form { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.tz-cir-campo { display: flex; flex-direction: column; gap: 5px; font-size: .85rem; }
.tz-cir-campo > span { color: var(--tz-text-sec); }
.tz-cir-campo input[aria-invalid="true"] { border-color: var(--tz-danger); box-shadow: 0 0 0 2px rgba(224, 82, 82, .25); }
.tz-cir-campo input, .tz-cir-campo select {
  background: var(--tz-panel); border: 1px solid var(--color-divider);
  border-radius: 8px; padding: 9px 12px; color: var(--color-text);
  font-family: var(--font-app); font-size: .88rem;
}
.tz-cir-campos-fila { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tz-cir-propuesta {
  background: var(--tz-row); border: 1px solid var(--color-divider);
  border-radius: var(--radius-panel); padding: 12px 14px;
}
.tz-cir-propuesta:empty { display: none; }
.tz-cir-propuesta-intro { margin: 0 0 8px; font-size: .82rem; color: var(--tz-text-sec); }

@media (max-width: 640px) {
  .tz-cir-barra { align-items: stretch; }
  .tz-cir-buscar { flex-direction: column; align-items: stretch; }
  .tz-cir-buscador { min-width: 0; width: 100%; }
}

/* Aviso de circular ya cargada: la circular es UNA sola aunque la carguen
   cuatro coordinadores (ETC Circulares, decisión de Diego 2026-09-23). */
.tz-cir-propuesta-duplicada { border-color: var(--tz-naranja); }
.tz-cir-duplicado-titulo {
  margin: 0 0 6px; font-size: .9rem; font-weight: 600; color: var(--tz-naranja);
}

/* Distribución por ciudad, con la zona como atajo (ETC Circulares, 2026-09-23).
   La circular declara ciudades; la zona solo marca varias de una vez. */
.tz-cir-zonas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.tz-cir-zona {
  background: transparent; border: 1px solid var(--color-divider);
  border-radius: 999px; padding: 4px 11px; font-size: .76rem;
  color: var(--tz-text-sec); cursor: pointer; font-family: var(--font-app);
}
.tz-cir-zona:hover { color: var(--color-text); }
.tz-cir-zona-activa { color: var(--color-text); border-color: var(--color-accent); }
.tz-cir-zona-nacional { border-style: dashed; }

.tz-cir-ciudades {
  display: grid; gap: 2px 14px; max-height: 260px; overflow-y: auto;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  border: 1px solid var(--color-divider); border-radius: var(--radius-panel);
  padding: 10px 12px; background: var(--tz-panel);
}
.tz-cir-ciudades-inactivas { opacity: .5; }
.tz-cir-ciudad {
  display: flex; align-items: center; gap: 7px;
  font-size: .82rem; color: var(--color-text); padding: 2px 0; cursor: pointer;
}

/* El número de destinatarios, ANTES de enviar: si dice 0, el coordinador lo ve
   y avisa, en vez de que la circular se pierda en silencio. */
.tz-cir-destinatarios { font-size: .85rem; color: var(--tz-text-sec); margin: 12px 0; }
.tz-cir-destino { border: 0; padding: 0; margin: 8px 0 0; min-width: 0; }
.tz-cir-destino legend { padding: 0; }
.tz-cir-destinatarios-vacio { color: var(--tz-naranja); }

/* Quién la envió, y a qué ciudades. */
.tz-cir-envios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tz-cir-envios > li {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: .84rem;
}
.tz-cir-envio-cor { font-weight: 600; color: var(--color-text); }
.tz-cir-envio-ciudades { color: var(--color-text); }
.tz-cir-envio-meta { color: var(--tz-text-sec); font-size: .78rem; }

/* Aviso de circulares sin enviar: cierra el riesgo de que un coordinador no
   distribuya y su equipo nunca se entere. El sistema avisa; no envía por él. */
.tz-cir-pendientes {
  background: var(--tz-row); border: 1px solid var(--color-divider);
  border-radius: var(--radius-panel); padding: 12px 14px;
}
.tz-cir-pendientes-urgente { border-color: var(--tz-naranja); }
.tz-cir-pendientes-titulo { margin: 0 0 8px; font-size: .88rem; font-weight: 600; color: var(--color-text); }
.tz-cir-pendientes-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tz-cir-pendientes-lista > li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: .83rem; }
.tz-cir-pendiente-meta { color: var(--tz-text-sec); font-size: .77rem; }

/* ---------------------------------------------------------------------------
   Visor de circulares: la hoja es la protagonista
   ---------------------------------------------------------------------------
   El panel se pone oscuro a proposito: contra un fondo neutro el papel blanco
   se lee como papel y no como un bloque mas de la interfaz. La barra queda
   pegada arriba para que el numero de pagina y el zoom sigan a mano al
   desplazarse por un manual largo. */

.tz-cir-visor {
  margin: 18px 0 8px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: var(--tz-panel);
}

.tz-cir-visor:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* Modo lectura: la circular ocupa la ventana y el desplazamiento queda dentro.
   Por debajo del toast (60) y de los dialogos (70), para que un aviso siga
   viendose encima de la circular. */
.tz-cir-visor-lectura {
  position: fixed;
  inset: 0;
  z-index: 50;
  margin: 0;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

.tz-cir-visor-lectura .tz-cir-visor-hojas {
  max-height: none;
  flex: 1;
}

.tz-cir-visor-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-divider);
  background: var(--tz-row);
  position: sticky;
  top: 0;
  z-index: 1;
}

.tz-cir-visor-pagina {
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  font-size: .86rem;
}

.tz-cir-visor-origen {
  color: var(--tz-naranja);
  font-size: .78rem;
}

.tz-cir-visor-acciones {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tz-cir-visor-acciones .tz-btn-plain {
  padding: 4px 10px;
  font-size: .82rem;
  line-height: 1.4;
}

.tz-cir-visor-hojas {
  --cir-zoom: 1;
  max-height: 78vh;
  overflow: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: var(--color-bg);
  scroll-behavior: smooth;
  /* La rueda no se contagia a la pagina de atras cuando la circular llega a
     su primera o su ultima hoja. Sin esto, seguir bajando en el PDF terminaba
     moviendo la aplicacion entera. */
  overscroll-behavior: contain;
}

.tz-cir-hoja {
  width: calc(100% * var(--cir-zoom));
  max-width: none;
  height: auto;
  /* Reserva el alto de una hoja carta ANTES de que la imagen cargue. Sin
     esto `loading="lazy"` no sirve de nada: las 127 paginas del manual
     medirian cero, todas caerian "cerca del viewport" y el navegador las
     pediria de golpe. El `auto` hace que, ya cargada, mande la proporcion
     real de la pagina y no esta. */
  aspect-ratio: auto 1 / 1.294;
  display: block;
  box-shadow: var(--shadow-md);
  background: #fff;   /* el papel es blanco en cualquier tema: es una hoja */
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .tz-cir-visor-hojas { scroll-behavior: auto; }
}

@media (max-width: 640px) {
  .tz-cir-visor-hojas { padding: 8px; max-height: 68vh; }
  .tz-cir-visor-acciones { margin-left: 0; width: 100%; }
}

/* Texto de apoyo bajo un campo del formulario de circulares. */
.tz-cir-ayuda {
  display: block;
  margin-top: 4px;
  color: var(--tz-text-sec);
  font-size: .74rem;
  line-height: 1.35;
}

/* Circular a la que no se le pudo leer la fecha de emisión: no es un error,
   es un dato que falta declarar, así que se marca sin gritar. */
.tz-cir-sin-fecha {
  color: var(--tz-text-sec);
  font-style: italic;
}

/* Formulario de clasificación en el detalle. Panel aparte: no es la ficha de
   la circular, es una acción sobre ella. */
.tz-cir-clasificar {
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-panel);
  background: var(--tz-panel);
}

.tz-cir-clasificar .tz-cir-h2 { margin-top: 0; }

/* Directriz: azul del acento, para separarla del oro del precio y del verde
   de campaña sin agregar un color nuevo a la paleta. */
.tz-cir-tipo-azul { color: var(--color-accent); border-color: var(--color-accent); }

/* Aviso de novedades sobre la tarjeta de un módulo. Un número pequeño, no un
   globo rojo: lo que hay que abrir no es una alarma. El resplandor del borde
   hace que la tarjeta se note de reojo sin gritar. */
.tz-modulo-card { position: relative; }

.tz-modulo-novedad {
  position: absolute;
  top: auto;
  bottom: 18px;
  right: 22px;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  border-radius: 10px;
  background: var(--tz-naranja);
  color: var(--color-bg);
  font-size: .72rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
/* La lupa dice "hay algo que mirar" de un vistazo, antes de leer el número.
   Un `::before` con mask: un solo ícono, reusado por cualquier módulo que
   use esta clase (Circulares, Gestión Documental, y los que vengan). */
.tz-modulo-novedad::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'%3E%3Ccircle cx='10.5' cy='10.5' r='7.5'/%3E%3Cpath d='M21 21l-5.5-5.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3'%3E%3Ccircle cx='10.5' cy='10.5' r='7.5'/%3E%3Cpath d='M21 21l-5.5-5.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tz-modulo-card-novedad {
  border-color: var(--tz-naranja);
  box-shadow: 0 1px 0 var(--tz-card-brillo) inset, 0 22px 44px -22px var(--tz-card-sombra), 0 0 0 1px var(--tz-naranja), 0 0 26px -10px var(--tz-naranja);
}

@media (prefers-reduced-motion: no-preference) {
  .tz-modulo-card-novedad .tz-modulo-novedad { animation: tzLatido 2.4s ease-in-out 3; }
  @keyframes tzLatido {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
  }
}

/* Aviso de prórroga: esta circular fue extendida por otra. Va arriba del
   documento porque cambia cómo se lee todo lo demás — sin él, quien abre la
   circular vieja cree que venció. */
.tz-cir-prorroga {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--tz-ok);
  border-left-width: 3px;
  border-radius: var(--radius-panel);
  background: var(--tz-row);
}

.tz-cir-prorroga-titulo {
  margin: 0 0 6px;
  color: var(--tz-ok);
  font-size: .86rem;
  font-weight: 600;
}

.tz-cir-prorroga-lista {
  margin: 0;
  padding-left: 18px;
  color: var(--color-text);
  font-size: .86rem;
}

.tz-cir-prorroga-lista li { margin: 2px 0; }

/* ---------------------------------------------------------------------------
   Gestión Documental
   ---------------------------------------------------------------------------
   Reusa las piezas de circulares (tarjeta, ficha, visor) y agrega solo lo que
   este módulo necesita: los filtros y la marca de alcance. */

.tz-doc-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 6px;
}

.tz-doc-buscar {
  flex: 1 1 260px;
  min-width: 200px;
}

.tz-doc-filtros select { flex: 0 1 auto; max-width: 260px; }

/* Alcance: decir si un documento vale para todos o solo para una sociedad es
   lo más importante de la tarjeta. Corporativo va discreto porque es el caso
   normal; la edición propia se marca, porque confundirla da una respuesta
   equivocada. */
.tz-doc-alcance {
  font-size: .74rem;
  color: var(--tz-text-sec);
}

.tz-doc-alcance-sociedad {
  color: var(--tz-naranja);
  border: 1px solid var(--tz-naranja);
  border-radius: 999px;
  padding: 1px 8px;
}

.tz-doc-aviso {
  margin: 6px 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--tz-naranja);
  border-left-width: 3px;
  border-radius: var(--radius-panel);
  background: var(--tz-row);
  color: var(--color-text);
  font-size: .84rem;
}

.tz-cir-estado-vigente { color: var(--tz-ok); border-color: var(--tz-ok); }
.tz-cir-estado-reemplazada { color: var(--tz-text-sec); border-color: var(--color-divider); }

/* Pie de la tarjeta: la fecha en circulares, el formato y las páginas en
   documentos. Nunca tuvo estilo propio y heredaba el del contenedor. */
.tz-cir-fecha {
  font-size: .74rem;
  color: var(--tz-text-sec);
  white-space: nowrap;
}

/* Paginador compartido. Discreto: es un control, no contenido. */
.tz-paginador {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 16px 0 4px;
}

.tz-pag-btn {
  min-width: 30px;
  padding: 4px 8px;
  border: 1px solid var(--color-divider);
  border-radius: 6px;
  background: var(--tz-panel);
  color: var(--color-text);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.tz-pag-btn:hover:not(:disabled) { border-color: var(--color-accent); }
.tz-pag-btn:disabled { opacity: .4; cursor: default; }

.tz-pag-activa {
  border-color: var(--color-accent);
  color: var(--color-accent);
  font-weight: 700;
}

.tz-pag-salto { padding: 0 2px; color: var(--tz-text-sec); }

.tz-pag-info {
  margin-left: auto;
  color: var(--tz-text-sec);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .tz-pag-info { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------------------
   Asistente de Consulta
   ---------------------------------------------------------------------------
   La cita es la protagonista: el asistente no redacta, cita. Por eso cada
   resultado se ve como un recorte de documento, con su procedencia arriba. */

.tz-asi-form {
  display: flex;
  gap: 8px;
  margin: 16px 0 10px;
}

.tz-asi-pregunta {
  flex: 1;
  min-width: 0;
  font-size: .95rem;
}

.tz-asi-ejemplos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.tz-asi-ejemplo {
  padding: 4px 10px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: none;
  color: var(--tz-text-sec);
  font-size: .78rem;
  cursor: pointer;
}

.tz-asi-ejemplo:hover { border-color: var(--color-accent); color: var(--color-accent); }

.tz-asi-intro {
  margin: 0 0 10px;
  color: var(--tz-text-sec);
  font-size: .82rem;
}

.tz-asi-cita {
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-panel);
  background: var(--tz-panel);
}

.tz-asi-cita-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.tz-asi-cita-titulo {
  margin: 0 0 6px;
  color: var(--color-text);
  font-size: .88rem;
  font-weight: 600;
}

.tz-asi-cita-texto {
  margin: 0 0 8px;
  color: var(--color-text);
  font-size: .86rem;
  line-height: 1.55;
}

/* La abstención no es un error: se ve tranquila, no en rojo. */
.tz-asi-vacio {
  padding: 16px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-panel);
  background: var(--tz-row);
}

.tz-asi-vacio-titulo {
  margin: 0 0 6px;
  color: var(--color-text);
  font-weight: 600;
}

.tz-asi-nota {
  margin: 8px 0 0;
  color: var(--tz-text-sec);
  font-size: .78rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   PUBLICAR CIRCULAR — rediseño visual (2026-10-02, a pedido de Diego)
   Solo presentación: tres pasos en tarjetas, resumen en vivo a la derecha y barra de acciones fija abajo. Los ids y las funciones de
   circulares.js no cambian. Usa los tokens del tema (claro y oscuro); el único color derivado es la tinta sobre el acento.
   ══════════════════════════════════════════════════════════════════════════ */
.tz-cir-pub { --tz-cir-tinta: color-mix(in srgb, var(--color-accent) 10%, black); --tz-cir-borde-control: color-mix(in srgb, var(--color-text) 40%, transparent); gap: 18px; max-width: 1240px; }

.tz-cir-pub-cabecera { display: flex; align-items: center; gap: 16px; }
.tz-cir-pub-icono {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px;
  background: color-mix(in srgb, var(--color-accent) 12%, var(--tz-panel));
  border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent); color: var(--tz-accent-ink);
}
.tz-cir-pub-icono svg { width: 26px; height: 26px; }
.tz-cir-pub-icono-chico { width: 44px; height: 44px; border-radius: 10px; }
.tz-cir-pub-icono-chico svg { width: 22px; height: 22px; }
.tz-cir-pub .tz-cir-h1 { font-size: 1.75rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.15; }
.tz-cir-pub .tz-cir-sub { max-width: 70ch; line-height: 1.45; }

.tz-cir-pub-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px 20px; align-items: start; }
.tz-cir-pub-pasos { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Cada paso es una tarjeta con su número: es una secuencia real (archivo, datos, destino). */
.tz-cir-paso {
  display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px 20px 20px;
  background: var(--tz-panel); border: 1px solid var(--color-divider); border-radius: 12px;
}
.tz-cir-paso-cab { display: flex; align-items: center; gap: 12px; }
.tz-cir-paso-cab h2 { margin: 0; font-size: 1.02rem; font-weight: 650; color: var(--color-text); }
.tz-cir-paso-cab p { margin: 2px 0 0; font-size: .8rem; line-height: 1.4; color: var(--tz-text-sec); }
.tz-cir-paso-n {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--color-accent); color: var(--tz-cir-tinta); font-size: .85rem; font-weight: 700;
}

/* Zona del archivo: el input la cubre (opacidad 0), así sirve para clic, soltar y teclado. */
.tz-cir-archivo-fila { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; }
.tz-cir-zona-archivo {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 116px; padding: 18px;
  background: var(--color-bg); border: 1.5px dashed var(--tz-cir-borde-control); border-radius: 10px; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.tz-cir-zona-archivo:hover, .tz-cir-zona-archivo-sobre { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg)); }
.tz-cir-zona-archivo:focus-within { border-color: var(--color-accent); outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tz-cir-zona-archivo input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.tz-cir-zona-archivo > svg { flex: none; width: 34px; height: 34px; color: var(--tz-text-sec); }
.tz-cir-zona-archivo-lleno { border-style: solid; border-color: color-mix(in srgb, var(--color-accent) 70%, transparent); }
.tz-cir-zona-archivo-lleno > svg { color: var(--tz-accent-ink); }
.tz-cir-zona-archivo-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.tz-cir-zona-archivo-texto strong { font-size: .92rem; font-weight: 650; overflow-wrap: anywhere; }
.tz-cir-zona-archivo-texto small { font-size: .78rem; color: var(--tz-text-sec); }
.tz-cir-zona-archivo-boton { color: var(--tz-accent-ink); border-color: color-mix(in srgb, var(--color-accent) 70%, transparent); pointer-events: none; }

.tz-cir-recomendaciones {
  padding: 14px 16px; border: 1px solid var(--color-divider); border-radius: 10px;
  background: color-mix(in srgb, var(--color-text) 3%, transparent); font-size: .8rem; color: var(--tz-text-sec);
}
.tz-cir-recomendaciones h3 { margin: 0 0 8px; font-size: .82rem; font-weight: 650; color: var(--color-text); }
.tz-cir-recomendaciones ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; line-height: 1.4; }

/* Lo que se leyó del documento: una tarjeta de aviso con fondo y borde de acento parejos, sin filo grueso de un solo lado. */
.tz-cir-pub .tz-cir-propuesta {
  padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--color-accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.tz-cir-pub .tz-cir-propuesta-duplicada { border-color: var(--tz-naranja); background: color-mix(in srgb, var(--tz-naranja) 8%, transparent); }

/* Campos */
.tz-cir-pub .tz-cir-campo { gap: 6px; }
.tz-cir-pub .tz-cir-campo > span { color: var(--color-text); font-size: .8rem; font-weight: 600; }
.tz-cir-pub .tz-cir-campo input, .tz-cir-pub .tz-cir-campo select {
  min-height: 40px; padding: 9px 12px; font-size: .9rem; background: var(--color-bg);
  border: 1px solid var(--tz-cir-borde-control); border-radius: 8px; transition: border-color .12s ease;
}
.tz-cir-pub .tz-cir-campo input::placeholder { color: color-mix(in srgb, var(--color-text) 42%, transparent); }
.tz-cir-pub .tz-cir-campo input:hover, .tz-cir-pub .tz-cir-campo select:hover { border-color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.tz-cir-pub .tz-cir-campo input:focus-visible, .tz-cir-pub .tz-cir-campo select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); }
.tz-cir-pub .tz-cir-campo abbr { color: var(--tz-accent-ink); }
.tz-cir-pub .tz-cir-campos-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tz-cir-pub .tz-cir-campos-fila.tz-cir-fila-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tz-cir-pub .tz-cir-ayuda { margin-top: 0; font-size: .76rem; }
.tz-cir-pub .tz-cir-ayuda-fila { margin: -6px 0 0; }

/* Destino */
.tz-cir-pub .tz-cir-zonas { gap: 8px; margin: 0; }
.tz-cir-pub .tz-cir-zona {
  min-height: 34px; padding: 6px 14px; font-size: .82rem; border-color: var(--tz-cir-borde-control);
  transition: border-color .12s ease, background-color .12s ease;
}
.tz-cir-pub .tz-cir-zona:hover { border-color: var(--color-accent); }
.tz-cir-pub .tz-cir-zona:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tz-cir-pub .tz-cir-zona-nacional { border-style: solid; font-weight: 600; }
.tz-cir-pub .tz-cir-zona-activa { background: color-mix(in srgb, var(--color-accent) 16%, transparent); border-color: var(--color-accent); font-weight: 600; }
.tz-cir-pub .tz-cir-ciudades {
  gap: 2px 10px; max-height: 248px; padding: 8px; background: var(--color-bg);
  border: 1px solid var(--tz-cir-borde-control); border-radius: 10px;
}
.tz-cir-pub .tz-cir-ciudad { padding: 6px 8px; border-radius: 6px; font-size: .84rem; }
.tz-cir-pub .tz-cir-ciudad:hover { background: var(--tz-hover); }
.tz-cir-pub .tz-cir-ciudad:has(input:checked) { background: color-mix(in srgb, var(--color-accent) 11%, transparent); }
.tz-cir-pub .tz-cir-ciudad input { width: 16px; height: 16px; accent-color: var(--color-accent); }
.tz-cir-pub .tz-cir-ciudades-inactivas { opacity: .55; }

/* El conteo de destinatarios, ANTES de publicar: un aviso con peso, no una línea gris. Si dice 0 se pone en naranja. */
.tz-cir-pub .tz-cir-destinatarios, .tz-cir-res-callout {
  margin: 0; padding: 12px 14px; border-radius: 10px; font-size: .86rem; font-weight: 600; line-height: 1.4; color: var(--color-text);
  background: color-mix(in srgb, var(--color-accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 60%, transparent);
}
.tz-cir-pub .tz-cir-destinatarios-vacio, .tz-cir-res-callout-vacio {
  color: var(--tz-naranja); border-color: var(--tz-naranja); background: color-mix(in srgb, var(--tz-naranja) 9%, transparent);
}

/* Resumen en vivo */
.tz-cir-resumen {
  position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 18px;
  background: var(--tz-panel); border: 1px solid var(--color-divider); border-radius: 12px;
}
.tz-cir-res-cab { display: flex; align-items: center; gap: 12px; }
.tz-cir-res-cab h2 { margin: 0; font-size: 1rem; font-weight: 650; }
.tz-cir-res-cab p { margin: 2px 0 0; font-size: .8rem; color: var(--tz-text-sec); }
.tz-cir-res-bloque { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--color-divider); font-size: .86rem; }
.tz-cir-res-bloque p { margin: 0; overflow-wrap: anywhere; }
.tz-cir-res-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tz-cir-res-top h3 { margin: 0; font-size: .9rem; font-weight: 650; }
.tz-cir-res-editar { padding: 3px 11px; color: var(--tz-accent-ink); border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); }
.tz-cir-res-vacio { color: var(--tz-text-sec); }
.tz-cir-res-falta { color: var(--tz-naranja); }
.tz-cir-res-bloque .tz-cir-ficha { grid-template-columns: minmax(84px, auto) minmax(0, 1fr); gap: 7px 14px; font-size: .84rem; }
.tz-cir-res-bloque .tz-cir-ficha dd { overflow-wrap: anywhere; }
.tz-cir-res-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tz-cir-res-chips li { padding: 3px 10px; border-radius: 999px; font-size: .78rem; background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.tz-cir-res-chips .tz-cir-res-chip-mas { color: var(--tz-text-sec); background: transparent; border: 1px dashed var(--tz-cir-borde-control); }
.tz-cir-res-destino-principal { font-weight: 650; }

/* Barra de acciones: siempre a la vista al final de la pantalla. */
.tz-cir-pub-acciones {
  grid-column: 1 / -1; position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  padding: 14px 0 6px; background: linear-gradient(to top, var(--color-bg) 72%, transparent);
}
.tz-cir-cancelar { min-height: 40px; padding: 8px 18px; border-radius: 8px; font-size: .86rem; }
.tz-cir-publicar {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 20px; border: 0; border-radius: 8px;
  background: var(--color-accent); color: var(--tz-cir-tinta); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
  transition: filter .12s ease;
}
.tz-cir-publicar:hover { filter: brightness(1.07); }
.tz-cir-publicar:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
.tz-cir-publicar:disabled { opacity: .45; cursor: not-allowed; filter: none; }

@media (max-width: 1040px) {
  .tz-cir-pub-grid { grid-template-columns: minmax(0, 1fr); }
  .tz-cir-resumen { position: static; }
  .tz-cir-archivo-fila { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .tz-cir-pub .tz-cir-campos-fila, .tz-cir-pub .tz-cir-campos-fila.tz-cir-fila-2 { grid-template-columns: minmax(0, 1fr); }
  .tz-cir-pub-cabecera { align-items: flex-start; }
  .tz-cir-pub-icono { width: 44px; height: 44px; }
  .tz-cir-pub .tz-cir-h1 { font-size: 1.4rem; }
  .tz-cir-paso { padding: 16px; }
  .tz-cir-pub-acciones > * { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .tz-cir-zona-archivo, .tz-cir-publicar, .tz-cir-zona, .tz-cir-pub .tz-cir-campo input, .tz-cir-pub .tz-cir-campo select { transition: none; }
}

/* Con el resumen a la vista, el aviso de destinatarios del paso 3 sobra (el del resumen lo anuncia). En pantallas angostas el resumen
   queda debajo, y ahi si se ve el del paso 3. El resumen no crece mas que la pantalla: si hay muchas ciudades, se desplaza por dentro. */
/* El resumen y la barra de acciones se quedan fijos (sticky). Para eso ningun ancestro puede ser contenedor de scroll: .tz-main (hidden) y
   .tz-work (auto) lo son, pero la pagina es la que se desplaza (ambos miden lo mismo que su contenido), asi que en ESTA pantalla se sueltan. */
.tz-main:has(.tz-cir-pub), .tz-work:has(.tz-cir-pub) { overflow: visible; }
/* Deja libre la esquina donde flota el avatar de Pool: si no, tapa el boton «Publicar circular». */
.tz-cir-pub-acciones { padding-right: 84px; }

@media (min-width: 1041px) {
  #cir-paso-destino .tz-cir-destinatarios { display: none; }
  .tz-cir-resumen { max-height: calc(100vh - 120px); overflow-y: auto; }
}

/* ---------------------------------------------------------------------------
   Ver circular (2026-10-03): cabecera con icono, ficha en dos columnas con
   icono por dato y barra del visor con iconos. Solo presentacion: los datos y
   el visor son los de siempre. */

.tz-cir-detalle-head {
  flex-direction: row; align-items: center; gap: 18px;
  padding: 20px 22px; background: var(--tz-panel);
  border: 1px solid var(--color-divider); border-radius: 12px;
}
.tz-cir-det-icono {
  flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 14px;
  background: color-mix(in srgb, var(--color-accent) 12%, var(--tz-panel));
  border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent); color: var(--tz-accent-ink);
}
.tz-cir-det-icono svg { width: 32px; height: 32px; }
.tz-cir-det-titulos { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tz-cir-det-titulos .tz-cir-estado { align-self: flex-start; font-size: .78rem; padding: 3px 10px; }
.tz-cir-detalle-head .tz-cir-h1 { margin: 0; font-size: 1.7rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.15; overflow-wrap: anywhere; }
.tz-cir-detalle-head .tz-cir-sub { font-size: 1rem; color: var(--color-text); }

.tz-cir-detalle-cuerpo { align-items: stretch; }
.tz-cir-ficha-caja {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  background: var(--tz-panel); border: 1px solid var(--color-divider); border-radius: 12px;
}
.tz-cir-ficha-caja > .tz-cir-ficha { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px; }
.tz-cir-ficha-caja > .tz-cir-ficha + .tz-cir-ficha { border-left: 1px solid var(--color-divider); }
.tz-cir-dato { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tz-cir-dato > div { min-width: 0; }
.tz-cir-dato-icono {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  background: var(--tz-row); border: 1px solid var(--color-divider); color: var(--tz-accent-ink);
}
.tz-cir-dato-icono svg { width: 20px; height: 20px; }
.tz-cir-dato dt { font-size: .8rem; color: var(--tz-text-sec); }
.tz-cir-dato dd { margin: 2px 0 0; font-size: 1rem; font-weight: 550; color: var(--color-text); overflow-wrap: anywhere; }

.tz-cir-visor { border-radius: 12px; }
.tz-cir-visor-barra { padding: 10px 14px; gap: 12px; }
.tz-cir-visor-icono {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
  background: var(--tz-panel); border: 1px solid var(--color-divider); color: var(--tz-accent-ink);
}
.tz-cir-visor-icono svg { width: 18px; height: 18px; }
.tz-cir-visor-pagina { font-size: .95rem; font-weight: 550; }
.tz-cir-visor-acciones { gap: 8px; }
.tz-cir-visor-acciones .tz-cir-visor-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; text-decoration: none; }
.tz-cir-visor-acciones .tz-cir-visor-btn svg { width: 16px; height: 16px; flex: none; }
.tz-cir-visor-acciones .tz-cir-visor-cuadro { min-width: 38px; padding: 6px 0; text-align: center; font-size: 1rem; }
.tz-cir-visor-acciones .tz-cir-visor-descargar {
  border-color: var(--color-accent); color: var(--tz-accent-ink);
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

@media (max-width: 760px) {
  .tz-cir-detalle-head { padding: 16px; gap: 14px; }
  .tz-cir-det-icono { width: 52px; height: 52px; border-radius: 12px; }
  .tz-cir-det-icono svg { width: 24px; height: 24px; }
  .tz-cir-detalle-head .tz-cir-h1 { font-size: 1.3rem; }
  .tz-cir-ficha-caja { grid-template-columns: minmax(0, 1fr); }
  .tz-cir-ficha-caja > .tz-cir-ficha + .tz-cir-ficha { border-left: 0; border-top: 1px solid var(--color-divider); }
}

/* ---------------------------------------------------------------------------
   Portada de Circulares y de Gestión Documental (2026-10-03): cabecera con
   icono, tablero con iconos, filtros y tarjetas con aire. Solo presentación;
   los dos módulos comparten estas clases. */

.tz-cir-head-modulo { flex-wrap: nowrap; align-items: center; gap: 18px; }
.tz-cir-head-modulo .tz-cir-det-icono { width: 52px; height: 52px; }
.tz-cir-head-modulo .tz-cir-det-icono svg { width: 24px; height: 24px; }
.tz-cir-head-texto { flex: 1; min-width: 0; }
.tz-cir-head-modulo .tz-cir-h1 { font-size: 1.5rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.1; }
.tz-cir-head-modulo .tz-cir-sub { font-size: .9rem; }
.tz-cir-btn-publicar { flex: none; font-weight: 600; }

/* Tablero: icono grande de color a la izquierda, cifra y etiqueta a la derecha. */
.tz-cir-tablero { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.tz-cir-kpi {
  --kpi: var(--tz-text-sec);
  flex-direction: row; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px;
  border-color: color-mix(in srgb, var(--kpi) 45%, var(--color-divider));
  background: color-mix(in srgb, var(--kpi) 9%, var(--tz-panel));
}
.tz-cir-kpi-ok { --kpi: var(--tz-ok); }
.tz-cir-kpi-aviso { --kpi: var(--tz-naranja); }
.tz-cir-kpi-azul { --kpi: var(--tz-azul); }
.tz-cir-kpi-rojo { --kpi: var(--tz-danger); }
.tz-cir-kpi-icono {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  color: var(--kpi); background: color-mix(in srgb, var(--kpi) 14%, var(--tz-panel));
  border: 1px solid color-mix(in srgb, var(--kpi) 50%, transparent);
}
.tz-cir-kpi-icono svg { width: 20px; height: 20px; }
.tz-cir-kpi-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tz-cir-kpi-valor { font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.tz-cir-kpi-etiqueta { font-size: .8rem; color: var(--color-text); }
.tz-cir-kpi-ok .tz-cir-kpi-valor, .tz-cir-kpi-aviso .tz-cir-kpi-valor,
.tz-cir-kpi-azul .tz-cir-kpi-valor, .tz-cir-kpi-rojo .tz-cir-kpi-valor { color: var(--color-text); }
.tz-cir-kpi-aviso .tz-cir-kpi-etiqueta { color: var(--tz-naranja); }

/* Barra de filtros: una sola caja con los chips a la izquierda y la búsqueda a la derecha. */
.tz-cir-barra, .tz-doc-filtros {
  padding: 12px 14px; background: var(--tz-panel); border: 1px solid var(--color-divider); border-radius: 12px;
}
.tz-doc-filtros { margin: 0; align-items: center; gap: 10px; }
.tz-cir-filtro { padding: 6px 14px; font-size: .82rem; border-radius: 999px; }
.tz-cir-filtro-activo {
  color: var(--tz-accent-ink); background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.tz-cir-buscador, .tz-doc-buscar, .tz-doc-filtros select {
  padding: 8px 12px; border-radius: 8px; font-size: .85rem; background: var(--tz-row);
  border: 1px solid var(--color-divider); color: var(--color-text); font-family: var(--font-app);
}
.tz-cir-buscador { min-width: 240px; }
.tz-cir-conteo, .tz-cir-conteo-doc { font-size: .8rem; font-weight: 550; color: var(--color-text); white-space: nowrap; }
.tz-cir-conteo-doc { margin: 0; text-align: right; }

/* Tarjetas: mismas medidas de siempre (la miniatura es una portada, no un zoom
   de la hoja); solo se suman los iconos del pie y la insignia arriba. */
.tz-cir-card:hover { border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-divider)); }
.tz-cir-card-top { flex-direction: column; align-items: flex-start; gap: 6px; }
.tz-cir-card-top .tz-cir-estado { order: -1; }
.tz-cir-estado-porvencer {
  color: #1d1305; background: var(--tz-naranja); border-color: var(--tz-naranja);
}
.tz-cir-card-pie { justify-content: flex-start; gap: 6px 12px; }
.tz-cir-ambito, .tz-cir-fecha { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; color: var(--tz-text-sec); }
.tz-cir-ambito svg, .tz-cir-fecha svg { width: 14px; height: 14px; flex: none; }
.tz-cir-aviso { font-weight: 600; }

@media (max-width: 760px) {
  .tz-cir-head-modulo { flex-wrap: wrap; gap: 14px; }
  .tz-cir-head-modulo .tz-cir-det-icono { width: 52px; height: 52px; }
  .tz-cir-head-modulo .tz-cir-h1 { font-size: 1.4rem; }
  .tz-cir-btn-publicar { width: 100%; }
  .tz-cir-buscador { min-width: 0; width: 100%; }
  .tz-cir-buscar { width: 100%; }
  .tz-cir-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   Boton principal global (2026-10-03). `.tz-btn` se usaba en 9 botones de
   varios paneles (Publicar circular, Consultar, Guardar clasificacion, Cargar
   caso...) y NUNCA tuvo estilo: salian con el gris del navegador. Un solo
   estilo: acento de la ambientacion con tinta oscura. Las variantes
   (`.tz-cir-publicar`, `.tz-cir-btn-publicar`) se apoyan en esta base. */
.tz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 8px 18px; border: 0; border-radius: 8px;
  background: var(--color-accent); color: color-mix(in srgb, var(--color-accent) 10%, black);
  font: inherit; font-size: .88rem; font-weight: 700; line-height: 1.2; cursor: pointer;
  transition: filter .12s ease, transform .12s ease;
}
.tz-btn:hover { filter: brightness(1.08); }
.tz-btn:active { transform: translateY(1px); }
.tz-btn:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
.tz-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .tz-btn { transition: none; } }

/* ---------------------------------------------------------------------------
   Aviso «Nos estamos actualizando» (actualizacion.js, 2026-10-03). Tarjeta
   fija abajo a la izquierda: la derecha es de Pool. */
.tz-act-aviso {
  position: fixed; left: 16px; bottom: 16px; z-index: 80; max-width: min(380px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--tz-panel); color: var(--color-text);
  border: 1px solid var(--color-accent); border-radius: 12px; box-shadow: var(--shadow-lg);
  font-size: .85rem; line-height: 1.4;
}
.tz-act-aviso[hidden] { display: none; }
.tz-act-aviso-cuerpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tz-act-aviso-cuerpo span { color: var(--tz-text-sec); }
.tz-act-aviso-giro {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--color-accent) 30%, transparent); border-top-color: var(--color-accent);
  animation: tzActGiro .9s linear infinite;
}
.tz-act-aviso-barra { display: block; height: 3px; margin-top: 6px; border-radius: 2px; background: var(--color-divider); overflow: hidden; }
.tz-act-aviso-barra b { display: block; height: 100%; width: 100%; background: var(--color-accent); transform-origin: left; animation: tzActBarra linear forwards; }
@keyframes tzActGiro { to { transform: rotate(360deg); } }
@keyframes tzActBarra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .tz-act-aviso-giro { animation: none; } }

/* ---------------------------------------------------------------------------
   Carpetas de circulares (2026-10-03): una por tipo, con su conteo. */
.tz-cir-carpetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.tz-cir-carpeta {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 14px; text-align: left;
  background: var(--tz-panel); color: var(--color-text); font: inherit; font-size: .86rem; cursor: pointer;
  border: 1px solid var(--color-divider); border-radius: 12px;
  transition: border-color .12s ease, background .12s ease;
}
.tz-cir-carpeta:hover { border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-divider)); }
.tz-cir-carpeta:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tz-cir-carpeta-icono { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--tz-accent-ink); background: var(--tz-row); }
.tz-cir-carpeta-icono svg { width: 18px; height: 18px; }
.tz-cir-carpeta-nombre { flex: 1; min-width: 0; font-weight: 550; line-height: 1.25; overflow-wrap: anywhere; }
.tz-cir-carpeta-cuenta { flex: none; font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--tz-text-sec); padding: 2px 9px; border: 1px solid var(--color-divider); border-radius: 999px; }
.tz-cir-carpeta-activa {
  border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 11%, var(--tz-panel));
}
.tz-cir-carpeta-activa .tz-cir-carpeta-icono { background: color-mix(in srgb, var(--color-accent) 18%, var(--tz-panel)); }
.tz-cir-carpeta-pendiente { border-style: dashed; }
@media (prefers-reduced-motion: reduce) { .tz-cir-carpeta { transition: none; } }

/* ---------------------------------------------------------------------------
   Gestion Documental como carpetas (2026-10-03): la portada son carpetas; la
   lista solo se ve al abrir una o al buscar. */
.tz-doc-carpetero { display: flex; flex-direction: column; gap: 12px; }
.tz-doc-carpetero > .tz-cir-h2 { margin-top: 10px; }
.tz-doc-carpetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.tz-doc-carpeta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; text-align: left;
  background: var(--tz-panel); color: var(--color-text); font: inherit; cursor: pointer;
  border: 1px solid var(--color-divider); border-radius: 12px;
  transition: border-color .12s ease, transform .12s ease;
}
.tz-doc-carpeta:hover { border-color: var(--color-accent); transform: translateY(-1px); }
.tz-doc-carpeta:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.tz-doc-carpeta-icono {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; margin-bottom: 4px;
  color: var(--tz-accent-ink); background: color-mix(in srgb, var(--color-accent) 12%, var(--tz-panel));
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
}
.tz-doc-carpeta-icono svg { width: 24px; height: 24px; }
.tz-doc-carpeta-nombre { font-size: .98rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.tz-doc-carpeta-cuenta { font-size: .8rem; color: var(--tz-text-sec); font-variant-numeric: tabular-nums; }
.tz-doc-carpeta-vacia { opacity: .7; border-style: dashed; }
.tz-doc-carpeta-cabecera { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tz-doc-carpeta-cabecera[hidden], .tz-doc-lista[hidden], .tz-doc-carpetero[hidden] { display: none; }
.tz-doc-lista { display: flex; flex-direction: column; gap: 14px; }
@media (prefers-reduced-motion: reduce) { .tz-doc-carpeta { transition: none; } }

/* ---------------------------------------------------------------------------
   Controles de formulario con identidad (2026-10-03, global)
   ---------------------------------------------------------------------------
   Los <select>, campos de texto, fechas y casillas de todo el sistema salian con
   el aspecto del navegador: la lista desplegable de un <select> se pintaba
   BLANCA con letras claras (ilegible en oscuro) porque el fondo del control era
   translucido y las <option> heredaban solo el color del texto. Esta capa les da
   fondo opaco, borde, foco y acento de TRAZA en TODAS las pantallas.

   Va con :where() (especificidad cero) a proposito: cualquier regla propia de un
   modulo (`.tz-cir-campo select`, `.tz-doc-buscar`...) sigue ganando; esto solo
   cubre lo que no tenia estilo. El control conserva su flecha nativa. */
:where(select, textarea,
       input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="password"],
       input[type="number"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"],
       input[type="datetime-local"], input[type="month"], input[type="week"]) {
  min-height: 38px; padding: 8px 12px;
  background-color: var(--tz-panel); color: var(--color-text);
  border: 1px solid var(--color-divider); border-radius: 8px;
  font: inherit; font-size: .88rem; line-height: 1.3;
  transition: border-color .12s ease, box-shadow .12s ease;
}
:where(textarea) { min-height: 80px; resize: vertical; }
:where(select) { cursor: pointer; }
:where(select, textarea, input):where(:hover:not(:disabled)) {
  border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-divider));
}
:where(select, textarea, input):where(:focus-visible) {
  outline: 2px solid var(--color-accent); outline-offset: 1px;
  border-color: var(--color-accent);
}
:where(select, textarea, input):where(:disabled) { opacity: .5; cursor: not-allowed; }
:where(input)::placeholder, :where(textarea)::placeholder { color: var(--tz-text-sec); opacity: 1; }

/* La lista desplegable: opaca y del color del tema, no la blanca del navegador. */
option, optgroup { background-color: var(--tz-panel); color: var(--color-text); }
option:checked { background-color: color-mix(in srgb, var(--color-accent) 28%, var(--tz-panel)); }
option:disabled { color: var(--tz-text-sec); }

/* Casillas y opciones: con el acento de TRAZA. */
:where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) { accent-color: var(--color-accent); }
:where(input[type="checkbox"], input[type="radio"]) { width: 16px; height: 16px; cursor: pointer; }

/* Boton «Elegir archivo» con la misma identidad que los botones de borde. */
:where(input[type="file"])::file-selector-button {
  margin-right: 10px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: .82rem;
  color: var(--color-text); background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-text) 55%, transparent); border-radius: 6px;
}
:where(input[type="file"])::file-selector-button:hover { background: var(--tz-hover); }
@media (prefers-reduced-motion: reduce) {
  :where(select, textarea, input) { transition: none; }
}

/* ---------------------------------------------------------------------------
   Seguimiento del auditor (2026-10-03): informes en precierre, apertura de la
   CxC y descuentos de nomina. Mismo lenguaje que circulares y documentos. */
.tz-sga { display: flex; flex-direction: column; gap: 18px; }
.tz-sga-tablero { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.tz-sga-kpi {
  --k: var(--tz-azul); display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px;
  background: color-mix(in srgb, var(--k) 9%, var(--tz-panel)); border: 1px solid color-mix(in srgb, var(--k) 45%, var(--color-divider));
}
.tz-sga-kpi-azul { --k: var(--tz-azul); } .tz-sga-kpi-naranja { --k: var(--tz-naranja); }
.tz-sga-kpi-rojo { --k: var(--tz-danger); } .tz-sga-kpi-verde { --k: var(--tz-ok); }
.tz-sga-kpi-icono { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--k);
  background: color-mix(in srgb, var(--k) 14%, var(--tz-panel)); border: 1px solid color-mix(in srgb, var(--k) 50%, transparent); }
.tz-sga-kpi-icono svg { width: 20px; height: 20px; }
.tz-sga-kpi > div { display: flex; flex-direction: column; min-width: 0; }
.tz-sga-kpi-valor { font-size: 1.5rem; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tz-sga-kpi-titulo { font-size: .85rem; font-weight: 550; }
.tz-sga-kpi-nota { font-size: .74rem; color: var(--tz-text-sec); }

.tz-sga-cuerpo { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.tz-sga-lista { display: flex; flex-direction: column; gap: 10px; }
.tz-sga-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; font: inherit; color: var(--color-text); cursor: pointer;
  background: var(--tz-panel); border: 1px solid var(--color-divider); border-radius: 12px;
}
.tz-sga-item:hover { border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-divider)); }
.tz-sga-item-activo { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 9%, var(--tz-panel)); }
.tz-sga-item-icono { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: var(--tz-accent-ink); background: var(--tz-row); border: 1px solid var(--color-divider); }
.tz-sga-item-icono svg { width: 19px; height: 19px; }
.tz-sga-grande { width: 48px; height: 48px; } .tz-sga-grande svg { width: 24px; height: 24px; }
.tz-sga-item-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .8rem; color: var(--tz-text-sec); }
.tz-sga-item-cuerpo strong { color: var(--color-text); font-size: .92rem; overflow-wrap: anywhere; }
.tz-sga-chip { flex: none; font-size: .72rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--color-divider); white-space: nowrap; }
.tz-sga-chip-azul { color: var(--tz-azul); border-color: var(--tz-azul); } .tz-sga-chip-naranja { color: var(--tz-naranja); border-color: var(--tz-naranja); }
.tz-sga-chip-verde { color: var(--tz-ok); border-color: var(--tz-ok); } .tz-sga-chip-gris { color: var(--tz-text-sec); }

.tz-sga-col-detalle { background: var(--tz-panel); border: 1px solid var(--color-divider); border-radius: 12px; min-width: 0; }
.tz-sga-col-detalle:empty { display: none; }
.tz-sga-det-cab { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--color-divider); }
.tz-sga-det-cab > div { flex: 1; min-width: 0; } .tz-sga-det-cab h2 { margin: 0; font-size: 1.15rem; } .tz-sga-det-cab p { margin: 2px 0 0; color: var(--tz-text-sec); font-size: .85rem; }
.tz-sga-tabs { display: flex; gap: 4px; padding: 0 14px; border-bottom: 1px solid var(--color-divider); }
.tz-sga-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 11px 14px; font: inherit; font-size: .88rem; color: var(--tz-text-sec); cursor: pointer; }
.tz-sga-tab-activo { color: var(--tz-accent-ink); border-bottom-color: var(--color-accent); font-weight: 600; }
.tz-sga-panel { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 18px; }
.tz-sga-cond { display: flex; flex-direction: column; gap: 12px; }
.tz-sga-cond-titulo { margin: 0; font-size: 1rem; }

.tz-sga-paso { border: 1px solid var(--color-divider); border-radius: 12px; background: var(--color-bg); }
.tz-sga-paso-cab { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.tz-sga-paso-cab h3 { margin: 0; font-size: .95rem; }
.tz-sga-paso-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: .8rem; font-weight: 700; border: 1px solid var(--color-divider); color: var(--tz-text-sec); }
.tz-sga-paso-cuerpo { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; font-size: .88rem; }
.tz-sga-paso-cuerpo p { margin: 0; line-height: 1.45; }
.tz-sga-paso-activo { border-color: var(--color-accent); }
.tz-sga-paso-activo .tz-sga-paso-num { background: var(--color-accent); border-color: var(--color-accent); color: color-mix(in srgb, var(--color-accent) 10%, black); }
.tz-sga-paso-listo .tz-sga-paso-num { background: var(--tz-ok); border-color: var(--tz-ok); color: #0d1f14; }
.tz-sga-paso-bloqueado { opacity: .65; }
.tz-sga-form { display: flex; flex-direction: column; gap: 12px; }
.tz-sga-form h4 { margin: 4px 0 0; font-size: .9rem; }
.tz-sga-saldo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.tz-sga-saldo div { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--color-divider); border-radius: 10px; background: var(--tz-panel); }
.tz-sga-saldo span { font-size: .74rem; color: var(--tz-text-sec); } .tz-sga-saldo strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.tz-sga-saldo-pend { border-color: color-mix(in srgb, var(--tz-naranja) 55%, var(--color-divider)) !important; }
.tz-sga-barra { height: 6px; border-radius: 3px; background: var(--color-divider); overflow: hidden; } .tz-sga-barra b { display: block; height: 100%; background: var(--tz-ok); }
.tz-sga-cuotas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tz-sga-cuotas li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--color-divider); border-radius: 8px; background: var(--tz-panel); }
.tz-sga-cuota-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .72rem; background: var(--tz-row); }
.tz-sga-cuotas em { color: var(--tz-text-sec); font-size: .8rem; }
.tz-sga-archivo { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--tz-accent-ink); text-decoration: none; }
.tz-sga-archivo:hover { text-decoration: underline; } .tz-sga-archivo svg { width: 16px; height: 16px; flex: none; }
.tz-sga-vacio { padding: 22px; border: 1px dashed var(--color-divider); border-radius: 12px; background: var(--tz-panel); }
.tz-sga-vacio p { margin: 6px 0 0; color: var(--tz-text-sec); font-size: .88rem; line-height: 1.45; }

@media (max-width: 900px) { .tz-sga-cuerpo { grid-template-columns: minmax(0, 1fr); } .tz-sga-saldo { grid-template-columns: 1fr; } }
.tz-cir-error { margin: 0; color: var(--tz-danger); font-size: .82rem; }

/* Aviso de «listo para cierre definitivo» en el detalle del informe (Coordinador/Director). */
.tz-cierre-listo {
  margin-bottom: 12px; padding: 12px 14px; border-radius: 10px; font-size: .88rem; line-height: 1.4;
  color: var(--color-text); background: color-mix(in srgb, var(--tz-ok) 12%, var(--tz-panel));
  border: 1px solid color-mix(in srgb, var(--tz-ok) 55%, var(--color-divider));
}

/* ===== Joyerías de mi equipo (Coordinador, 2026-10-03): zonas, equipo, asignación por auditor y barra de cambios ===== */
.tz-gj{display:flex;flex-direction:column;gap:16px}
.tz-gj-cab{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.tz-gj-cab-texto{display:flex;gap:14px;align-items:center}
.tz-gj-icono{flex:none;width:56px;height:56px;display:grid;place-items:center;border:1px solid var(--color-accent);border-radius:10px;color:var(--color-accent)}
.tz-gj-icono svg{width:30px;height:30px}
.tz-gj-titulo{font-size:26px;font-weight:600;line-height:1.15}
.tz-gj-sub{font-size:14px;opacity:.75;margin-top:4px}
.tz-gj-tip{position:relative;display:flex;gap:12px;align-items:flex-start;max-width:560px;padding:12px 40px 12px 12px;border:1px solid var(--color-divider);border-radius:var(--radius-panel);background:var(--tz-panel)}
.tz-gj-tip[hidden]{display:none}
.tz-gj-tip-img{flex:none;width:64px;height:64px}
.tz-gj-tip p{font-size:13px;opacity:.8;margin-top:2px}
.tz-gj-cerrar{position:absolute;top:4px;right:6px;min-width:32px;min-height:32px;background:transparent;border:0;color:inherit;font-size:22px;line-height:1;cursor:pointer;border-radius:6px}
.tz-gj-cerrar:hover{background:var(--tz-hover)}
.tz-gj-cerrar:focus-visible,.tz-gj-chip:focus-visible,.tz-gj-aud:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.tz-gj-h3{font-size:16px;font-weight:600}
.tz-gj-h3.grande{font-size:20px}
.tz-gj-ayuda{font-size:13px;opacity:.7;margin-top:2px}
.tz-gj-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tz-gj-zonas-cab{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.tz-gj-icono-zona{flex:none;color:var(--color-accent)}
.tz-gj-icono-zona svg{width:28px;height:28px}
.tz-gj-zonas-texto{flex:1;min-width:220px}
.tz-gj-icon-btn{display:inline-flex;align-items:center;gap:8px}
.tz-gj-icon-btn svg{width:16px;height:16px}
.tz-gj-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.tz-gj-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--color-divider);border-radius:10px;background:transparent;color:inherit;font:inherit;font-size:13px}
button.tz-gj-chip{cursor:pointer}
button.tz-gj-chip:hover:not(:disabled){background:var(--tz-hover)}
button.tz-gj-chip:disabled{opacity:.4;cursor:not-allowed}
.tz-gj-chip.is-activa{border-color:var(--tz-ok);background:color-mix(in srgb,var(--tz-ok) 14%,transparent)}
.tz-gj-check{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--tz-ok);color:#fff;font-size:11px;line-height:1}
.tz-gj-zonas-pie{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:14px}
.tz-gj-leyenda{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.tz-gj-punto{width:8px;height:8px;border-radius:50%;background:var(--tz-gris)}
.tz-gj-punto.on{background:var(--tz-ok)}
.tz-gj-zonas-acciones{margin-left:auto;display:flex;gap:8px}
.tz-gj-grid{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:16px;align-items:start}
.tz-gj-buscar{display:block;margin-top:12px}
.tz-gj-lista{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.tz-gj-aud{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--color-divider);border-radius:10px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.tz-gj-aud:hover{background:var(--tz-hover)}
.tz-gj-aud.is-sel{border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 12%,transparent)}
.tz-gj-avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--tz-azul) 45%,transparent);font-weight:600;font-size:13px}
.tz-gj-avatar.grande{width:48px;height:48px;font-size:15px}
.tz-gj-aud-texto{display:flex;flex-direction:column;flex:1;min-width:0}
.tz-gj-aud-texto strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tz-gj-aud-texto span{font-size:12px;opacity:.7}
.tz-gj-contador{flex:none;font-size:12px;padding:3px 10px;border-radius:6px;background:var(--tz-hover);white-space:nowrap}
.tz-gj-det-cab{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.tz-gj-det-nombre{flex:1;min-width:200px}
.tz-gj-filtros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:12px;align-items:end;margin:12px 0}
.tz-gj-filtros .field{margin:0}
.tz-gj-tabla-wrap{overflow-x:auto;border:1px solid var(--color-divider);border-radius:8px}
.tz-gj-tabla{width:100%;border-collapse:collapse;font-size:13px}
.tz-gj-tabla th{text-align:left;font-size:12px;font-weight:500;opacity:.75;padding:8px 10px;border-bottom:1px solid var(--color-divider)}
.tz-gj-tabla td{padding:8px 10px;border-bottom:1px solid var(--color-divider);vertical-align:middle}
.tz-gj-tabla tr:last-child td{border-bottom:0}
.tz-gj-tabla tr.is-marcada{background:color-mix(in srgb,var(--color-accent) 8%,transparent)}
.tz-gj-td-chk{width:36px}
.tz-gj-tabla input[type=checkbox]{width:18px;height:18px;accent-color:var(--color-accent);cursor:pointer}
.tz-gj-ciudad{opacity:.65}
.tz-gj-vacio{text-align:center;padding:24px 10px;opacity:.7}
.tz-gj-estado{display:inline-block;padding:2px 10px;border-radius:6px;font-size:12px}
.tz-gj-estado.ok{color:var(--tz-ok);background:color-mix(in srgb,var(--tz-ok) 14%,transparent)}
.tz-gj-estado.libre{color:var(--tz-gris);background:var(--tz-hover)}
.tz-gj-estado.otro{color:var(--tz-naranja);background:color-mix(in srgb,var(--tz-naranja) 14%,transparent)}
.tz-gj-estado.pend{color:var(--tz-accent-ink);background:color-mix(in srgb,var(--color-accent) 22%,transparent)}
.tz-gj-barra{position:sticky;bottom:12px;z-index:5;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 16px;border:1px solid var(--color-accent);border-radius:10px;background:var(--tz-panel);box-shadow:var(--shadow-md)}
.tz-gj-barra[hidden]{display:none}
.tz-gj-barra-texto{display:flex;flex-direction:column;gap:2px}
.tz-gj-barra-texto span{font-size:13px;opacity:.75}
.tz-gj-barra-acciones{display:flex;gap:8px;flex-wrap:wrap}
.tz-gj-dialogo{width:min(560px,94vw);max-height:86vh;overflow:auto}
.tz-gj-dlg-cuerpo p{margin:6px 0}
.tz-gj-lista-cambios{list-style:none;padding:0;margin:6px 0 10px;display:flex;flex-direction:column;gap:4px;font-size:13px}
.tz-gj-signo{display:inline-block;width:16px;font-weight:700}
.tz-gj-resumen{display:flex;flex-direction:column;gap:4px;margin:0 0 10px}
.tz-gj-resumen div{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.tz-gj-resumen dt{opacity:.7}
.tz-gj-resumen dd{margin:0;font-weight:600}
.tz-gj-resumen-t{font-size:12px;opacity:.7;margin-top:10px}
.tz-gj-aviso{padding:8px 10px;border-radius:6px;background:color-mix(in srgb,var(--tz-naranja) 14%,transparent);font-size:13px}
.tz-gj-hist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;font-size:13px}
.tz-gj-hist li{display:flex;flex-direction:column;gap:2px;padding-bottom:10px;border-bottom:1px solid var(--color-divider)}
.tz-gj-hist li:last-child{border-bottom:0}
@media (max-width:980px){.tz-gj-grid{grid-template-columns:minmax(0,1fr)}.tz-gj-filtros{grid-template-columns:minmax(0,1fr)}}

/* Joyerías de mi equipo — flujo en dos cuadros (activas arriba, buscador para añadir abajo) */
.tz-gj-detalle{display:flex;flex-direction:column;gap:16px;min-width:0}
.tz-gj-buscar .input{width:100%}
.tz-gj-activas{margin-top:10px;max-height:380px;overflow:auto}
.tz-gj-pista{margin-top:12px}
.tz-gj-tabla th:last-child,.tz-gj-tabla td:last-child{min-width:150px}
.tz-user-ini{overflow:hidden}
.tz-user-foto{width:100%;height:100%;object-fit:cover;display:block}

/* ===== Actividades Operativas → Equipo: centro operativo del coordinador (actividades_equipo.js) ===== */
.tz-eq{display:flex;flex-direction:column;gap:14px;min-width:0}
.tz-eq-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tz-eq-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.tz-eq-kpi{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px;text-align:left;font:inherit;color:inherit;background:var(--tz-panel);border:1px solid var(--color-divider);border-radius:12px;border-left:3px solid var(--tz-gris)}
button.tz-eq-kpi:not(:disabled){cursor:pointer}
button.tz-eq-kpi:not(:disabled):hover{background:var(--tz-hover)}
.tz-eq-kpi:disabled{opacity:1;cursor:default}
.tz-eq-kpi:focus-visible,.tz-eq-btn:focus-visible,.tz-eq-abrir:focus-visible,.tz-eq-cerrar:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.tz-eq-kpi-n{font-size:30px;font-weight:600;line-height:1.1}
.tz-eq-kpi-t{font-size:14px;font-weight:500}
.tz-eq-kpi small{font-size:12px;opacity:.7}
.tz-eq-kpi-barra{display:block;width:100%;height:5px;margin-top:8px;border-radius:3px;background:var(--tz-hover);overflow:hidden}
.tz-eq-kpi-barra i{display:block;height:100%;background:currentColor}
.tz-eq-k-equipo{border-left-color:var(--tz-azul)}
.tz-eq-k-op{border-left-color:var(--tz-ok)}.tz-eq-k-op .tz-eq-kpi-barra{color:var(--tz-ok)}
.tz-eq-k-sin{border-left-color:var(--tz-naranja)}.tz-eq-k-sin .tz-eq-kpi-barra{color:var(--tz-naranja)}
.tz-eq-k-pausa{border-left-color:#8e6fd8}.tz-eq-k-pausa .tz-eq-kpi-barra{color:#8e6fd8}
.tz-eq-k-atencion{border-left-color:var(--color-accent)}
.tz-eq-kpi-extra{grid-column:1 / -1;font-size:12px;opacity:.75;margin:0}
.tz-eq-filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px;background:var(--tz-panel);border:1px solid var(--color-divider);border-radius:12px}
.tz-eq-campo{display:block;min-width:150px}
.tz-eq-campo .input{width:100%}
.tz-eq-buscar{flex:1 1 240px}
.tz-eq-leyendas{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;padding:0;margin:0;font-size:12px}
.tz-eq-leyendas li{display:flex;align-items:center;gap:6px}
.tz-eq-leyendas strong{margin-left:auto;font-weight:500}
.tz-eq-leyenda{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
.tz-eq-tabla-wrap{overflow-x:auto;background:var(--tz-panel);border:1px solid var(--color-divider);border-radius:12px}
.tz-eq-tabla{width:100%;min-width:1080px;border-collapse:collapse;font-size:13px}
.tz-eq-tabla th{position:sticky;top:0;text-align:left;font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;opacity:.8;padding:10px 12px;border-bottom:1px solid var(--color-divider);white-space:nowrap}
.tz-eq-tabla td{padding:10px 12px;border-bottom:1px solid var(--color-divider);vertical-align:middle}
.tz-eq-tabla tr:last-child td{border-bottom:0}
.tz-eq-fila:hover{background:var(--tz-hover)}
.tz-eq-tabla td small{display:block;font-size:11.5px;opacity:.7;margin-top:2px}
.tz-eq-tabla td strong{font-weight:500}
.tz-eq-num{text-align:center;white-space:nowrap}
.tz-eq-nd{opacity:.6}
.tz-eq-vacio{text-align:center;padding:28px 12px;opacity:.7}
.tz-eq-aud{display:flex;align-items:center;gap:10px;min-width:170px;background:transparent;border:0;padding:0;font:inherit;color:inherit;text-align:left}
.tz-eq-abrir{cursor:pointer;border-radius:8px}
.tz-eq-nombre{font-size:12.5px;line-height:1.25;font-weight:500}
.tz-eq-avatar{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:color-mix(in srgb,var(--tz-azul) 45%,transparent);font-size:12px;font-weight:600}
.tz-eq-avatar.grande{width:52px;height:52px;font-size:16px}
.tz-eq-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.tz-eq-perfil{display:inline-block;padding:2px 8px;border:1px solid var(--color-divider);border-radius:6px;font-size:11.5px;letter-spacing:.04em}
.tz-eq-estado{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap}
.tz-eq-punto{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.tz-eq-e-op{color:var(--tz-ok);background:color-mix(in srgb,var(--tz-ok) 15%,transparent)}
.tz-eq-e-sin{color:var(--tz-naranja);background:color-mix(in srgb,var(--tz-naranja) 15%,transparent)}
.tz-eq-e-pausa{color:#8e6fd8;background:color-mix(in srgb,#8e6fd8 18%,transparent)}
.tz-eq-e-desp{color:var(--tz-azul);background:color-mix(in srgb,var(--tz-azul) 18%,transparent)}
.tz-eq-e-fin{color:var(--tz-gris);background:var(--tz-hover)}
.tz-eq-e-cierre{color:var(--tz-naranja);background:color-mix(in srgb,var(--tz-naranja) 15%,transparent)}
.tz-eq-dist{display:flex;align-items:center;gap:10px;min-width:210px}
.tz-eq-barra{display:flex;flex:1;height:10px;border-radius:5px;overflow:hidden;background:var(--tz-hover);min-width:110px}
.tz-eq-barra.vacia{background:var(--tz-hover)}
.tz-eq-seg{display:block;height:100%;min-width:3px}
.tz-eq-seg-aud{background:var(--color-accent)}
.tz-eq-seg-des{background:var(--tz-azul)}
.tz-eq-seg-ges{background:var(--tz-ok)}
.tz-eq-seg-pau{background:#8e6fd8}
.tz-eq-seg-pen{background:repeating-linear-gradient(45deg,var(--tz-gris) 0 3px,transparent 3px 6px)}
.tz-eq-tiempo{font-size:12.5px;white-space:nowrap}
.tz-eq-atencion{display:inline-block;min-width:30px;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:600;background:var(--tz-hover)}
.tz-eq-atencion.hay{color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 18%,transparent)}
.tz-eq-acciones{display:flex;gap:6px}
.tz-eq-btn{padding:5px 10px;font:inherit;font-size:12px;color:inherit;background:transparent;border:1px solid var(--color-divider);border-radius:6px;cursor:pointer;white-space:nowrap}
.tz-eq-btn:hover{background:var(--tz-hover)}
.tz-eq-pie{font-size:12px;opacity:.7;margin:0}
.tz-eq-drawer{position:fixed;top:0;right:0;bottom:0;z-index:60;width:min(460px,100vw);padding:18px;overflow:auto;background:var(--tz-panel);border-left:1px solid var(--color-divider);box-shadow:var(--shadow-lg)}
.tz-eq-drawer[hidden]{display:none}
.tz-eq-dr-cab{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.tz-eq-dr-tit{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.tz-eq-dr-tit h3{flex-basis:100%;font-size:17px;font-weight:600;margin:0}
.tz-eq-cerrar{flex:none;width:32px;height:32px;font-size:20px;line-height:1;color:inherit;background:transparent;border:1px solid var(--color-divider);border-radius:8px;cursor:pointer}
.tz-eq-hechos{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:0 0 14px}
.tz-eq-hechos dt{font-size:11.5px;opacity:.7}
.tz-eq-hechos dd{margin:2px 0 0;font-size:13.5px}
.tz-eq-dr-h{font-size:13px;font-weight:600;margin:16px 0 8px}
.tz-eq-nota{font-size:12px;opacity:.7;margin:8px 0 0}
.tz-eq-dr-pie{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
@media (max-width:1180px){.tz-eq-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.tz-eq-sec{display:none}.tz-eq-tabla{min-width:900px}}
@media (max-width:720px){.tz-eq-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.tz-eq-hechos{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){.tz-eq-fila,.tz-eq-kpi{transition:background-color .12s ease}}

/* Submenú «Actividades ▸» (2026-10-06): se abre a la derecha del item, fuera del rail */
.tz-nav-sub-flecha{margin-left:auto;opacity:.55;font-size:16px;line-height:1;flex:none}
.tz-nav-sub-btn[aria-expanded="true"]{background:color-mix(in srgb,var(--color-accent,#b8651b) 12%,transparent)}
.tz-nav-sub{position:fixed;z-index:70;min-width:236px;padding:6px;display:flex;flex-direction:column;gap:2px;border-radius:12px;background:var(--tz-panel,#fff);color:var(--color-text,inherit);
  border:1px solid var(--color-divider,rgba(127,127,127,.3));box-shadow:0 12px 32px rgba(0,0,0,.2)}
.tz-nav-sub[hidden]{display:none}
.tz-nav-sub-item{display:block;width:100%;text-align:left;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:12.5px;cursor:pointer}
.tz-nav-sub-item:hover,.tz-nav-sub-item:focus-visible{background:color-mix(in srgb,var(--color-accent,#b8651b) 14%,transparent);outline:none}
.tz-nav-sub-item.active{font-weight:600;color:var(--color-accent,#b8651b)}
.tz-nav-sub-btn:focus-visible{outline:2px solid var(--color-accent,#b8651b);outline-offset:-2px}