/* Centro de alertas para fiscalizadores.
 *
 * Principios: el color se reserva para la gravedad (crítica, alta, media) y todo lo demás es neutro; la información
 * va de lo general a lo particular (panorama → partida → capítulo → … → fuente); cada alerta se presenta como un
 * hallazgo (condición, criterio, causa, efecto y acción). Tema oscuro por defecto («sala de monitoreo»), con tema
 * claro; las animaciones se desactivan con «reducir movimiento».
 */
:root {
  --c-fondo: #070a10;
  --c-fondo-2: #0b1019;
  --c-panel: #0f1520;
  --c-panel-2: #141b28;
  --c-panel-3: #1b2434;
  --c-borde: rgba(140, 165, 205, 0.13);
  --c-borde-2: rgba(140, 165, 205, 0.26);
  --c-tinta: #ecf2fb;
  --c-tinta-2: #a9b6ca;
  --c-tinta-3: #7a879e;
  --c-acento: #4cc9f0;
  --c-acento-fondo: rgba(76, 201, 240, 0.12);
  --c-critica: #ff3358;
  --c-critica-fondo: rgba(255, 51, 88, 0.14);
  --c-critica-brillo: rgba(255, 51, 88, 0.5);
  --c-alta: #ff8c3a;
  --c-alta-fondo: rgba(255, 140, 58, 0.13);
  --c-alta-brillo: rgba(255, 140, 58, 0.42);
  --c-media: #f7c948;
  --c-media-fondo: rgba(247, 201, 72, 0.11);
  --c-media-brillo: rgba(247, 201, 72, 0.35);
  --c-baja: #7b93c9;
  --c-ok: #2ecc8f;
  --c-sombra: 0 14px 44px rgba(0, 0, 0, 0.45);
  --c-sombra-chica: 0 4px 16px rgba(0, 0, 0, 0.3);
  --c-vidrio: rgba(9, 13, 20, 0.78);
  --c-rejilla: rgba(120, 150, 200, 0.05);
  --c-radio: 16px;
  --c-radio-chico: 10px;
  --c-fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --c-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
:root[data-theme="light"] {
  --c-fondo: #eef2f7;
  --c-fondo-2: #e5ebf3;
  --c-panel: #ffffff;
  --c-panel-2: #f5f7fb;
  --c-panel-3: #eaeff6;
  --c-borde: rgba(20, 35, 60, 0.1);
  --c-borde-2: rgba(20, 35, 60, 0.2);
  --c-tinta: #0c1525;
  --c-tinta-2: #44516a;
  --c-tinta-3: #66748c;
  --c-acento: #0a7fbf;
  --c-acento-fondo: rgba(10, 127, 191, 0.1);
  --c-critica: #d4163f;
  --c-critica-fondo: rgba(212, 22, 63, 0.09);
  --c-critica-brillo: rgba(212, 22, 63, 0.3);
  --c-alta: #cf5a0c;
  --c-alta-fondo: rgba(207, 90, 12, 0.09);
  --c-alta-brillo: rgba(207, 90, 12, 0.25);
  --c-media: #a77800;
  --c-media-fondo: rgba(196, 146, 0, 0.1);
  --c-media-brillo: rgba(196, 146, 0, 0.22);
  --c-baja: #4d68b0;
  --c-ok: #128a5a;
  --c-sombra: 0 14px 40px rgba(20, 35, 60, 0.12);
  --c-sombra-chica: 0 3px 12px rgba(20, 35, 60, 0.08);
  --c-vidrio: rgba(255, 255, 255, 0.82);
  --c-rejilla: rgba(20, 35, 60, 0.035);
}

/* ---- Base ---------------------------------------------------------------------------------------------------- */
body.cx {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(255, 51, 88, 0.09), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(76, 201, 240, 0.07), transparent 60%),
    var(--c-fondo);
  background-attachment: fixed;
  color: var(--c-tinta);
  font: 15px/1.5 var(--c-fuente);
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="light"] body.cx {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(212, 22, 63, 0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(10, 127, 191, 0.06), transparent 60%),
    var(--c-fondo);
}
body.cx::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--c-rejilla) 1px, transparent 1px), linear-gradient(90deg, var(--c-rejilla) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
  z-index: 0;
}
body.cx.modo-avanzado { background: var(--plano); color: var(--tinta); font: 14px/1.45 var(--fuente); }
body.cx.modo-avanzado::before { display: none; }
.cx-app { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
.cx-app[hidden] { display: none !important; }
.cx-app a { color: inherit; }
.cx-app button { font: inherit; color: inherit; }
.cx-app :focus-visible { outline: 2px solid var(--c-acento); outline-offset: 2px; border-radius: 6px; }
.cx-icono { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cx-visual-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Barra superior --------------------------------------------------------------------------------------------- */
.cx-barra {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 28px;
  background: var(--c-vidrio);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--c-borde);
}
.cx-marca { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.cx-marca__logo { position: relative; width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--c-critica-fondo); color: var(--c-critica); }
.cx-marca__logo .cx-icono { width: 20px; height: 20px; }
.cx-marca__logo::after { content: ""; position: absolute; inset: -3px; border-radius: 12px; border: 1.5px solid var(--c-critica); opacity: 0; animation: cx-onda 2.6s ease-out infinite; }
.cx-marca__textos { display: grid; line-height: 1.2; min-width: 0; }
.cx-marca__nombre { font-weight: 800; letter-spacing: -0.01em; font-size: 15.5px; white-space: nowrap; }
.cx-marca__sub { font-size: 12px; color: var(--c-tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-barra__centro { flex: 1; display: flex; justify-content: center; min-width: 0; }
.cx-barra__acciones { display: flex; align-items: center; gap: 8px; flex: none; }

.cx-buscador { position: relative; width: min(440px, 100%); }
.cx-buscador input {
  width: 100%; height: 38px; border-radius: 12px; border: 1px solid var(--c-borde-2); background: var(--c-panel);
  color: var(--c-tinta); padding: 0 12px 0 38px; font: inherit; font-size: 14px;
}
.cx-buscador input::placeholder { color: var(--c-tinta-3); }
.cx-buscador > .cx-icono { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--c-tinta-3); width: 17px; height: 17px; }
.cx-buscador__lista {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; list-style: none; margin: 0; padding: 6px;
  background: var(--c-panel); border: 1px solid var(--c-borde-2); border-radius: 12px; box-shadow: var(--c-sombra); max-height: 60vh; overflow: auto;
}
.cx-buscador__lista li button {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left;
  border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.cx-buscador__lista li button:hover, .cx-buscador__lista li button[aria-selected="true"] { background: var(--c-panel-3); }
.cx-buscador__nivel { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-tinta-3); font-weight: 700; min-width: 74px; }
.cx-buscador__nombre { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-buscador__nombre small { display: block; color: var(--c-tinta-3); font-size: 11.5px; }
.cx-buscador__vacio { padding: 10px; color: var(--c-tinta-3); font-size: 13px; }

.cx-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--c-borde-2);
  background: var(--c-panel); color: var(--c-tinta); cursor: pointer; text-decoration: none; white-space: nowrap;
  font-weight: 600; font-size: 13.5px; transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.cx-boton:hover { background: var(--c-panel-3); border-color: var(--c-tinta-3); }
.cx-boton:active { transform: translateY(1px); }
.cx-boton .cx-icono { width: 17px; height: 17px; }
.cx-boton--icono { width: 38px; padding: 0; }
.cx-boton--primario { background: var(--c-critica); border-color: transparent; color: #fff; box-shadow: 0 6px 24px var(--c-critica-brillo); }
.cx-boton--primario:hover { background: var(--c-critica); filter: brightness(1.08); border-color: transparent; }
.cx-boton--fantasma { background: transparent; }
.cx-boton--chico { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 9px; }
.cx-select {
  height: 38px; border-radius: 11px; border: 1px solid var(--c-borde-2); background: var(--c-panel); color: var(--c-tinta);
  padding: 0 10px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}

.cx-menu { position: relative; }
.cx-menu__panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 300px; z-index: 40; padding: 6px;
  background: var(--c-panel); border: 1px solid var(--c-borde-2); border-radius: 14px; box-shadow: var(--c-sombra);
}
.cx-menu__panel button, .cx-menu__panel a {
  width: 100%; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 9px 10px; border-radius: 9px;
  cursor: pointer; text-align: left; text-decoration: none; font-size: 13.5px;
}
.cx-menu__panel button:hover, .cx-menu__panel a:hover { background: var(--c-panel-3); }
.cx-menu__panel .cx-icono { width: 17px; height: 17px; color: var(--c-tinta-2); }
.cx-menu__panel small { display: block; color: var(--c-tinta-3); font-size: 11.5px; }
.cx-menu__sep { height: 1px; background: var(--c-borde); margin: 6px 4px; }

/* ---- Cinta de alertas ------------------------------------------------------------------------------------------- */
.cx-cinta {
  position: relative; display: flex; align-items: center; gap: 0; overflow: hidden; height: 38px;
  background: linear-gradient(90deg, var(--c-critica-fondo), transparent 40%), var(--c-fondo-2);
  border-bottom: 1px solid var(--c-borde);
}
.cx-cinta__rotulo {
  position: relative; z-index: 2; flex: none; height: 100%; display: flex; align-items: center; gap: 8px; padding: 0 16px 0 28px;
  background: var(--c-critica); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.cx-cinta__rotulo i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: cx-parpadeo 1.2s ease-in-out infinite; }
.cx-cinta__ventana { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 3%, black 97%, transparent); }
.cx-cinta__pista { display: flex; width: max-content; animation: cx-cinta var(--cx-dur, 90s) linear infinite; }
.cx-cinta:hover .cx-cinta__pista, .cx-cinta:focus-within .cx-cinta__pista { animation-play-state: paused; }
.cx-cinta__item {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 26px; height: 38px; white-space: nowrap; text-decoration: none;
  font-size: 13px; color: var(--c-tinta-2); border-right: 1px solid var(--c-borde);
}
.cx-cinta__item:hover { color: var(--c-tinta); background: var(--c-panel-2); }
.cx-cinta__item strong { color: var(--c-tinta); font-weight: 700; }
.cx-cinta__item b { font-weight: 700; }
.cx-cinta__item--critica b { color: var(--c-critica); }
.cx-cinta__item--alta b { color: var(--c-alta); }

/* ---- Migas ------------------------------------------------------------------------------------------------------ */
.cx-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 14px 28px 0; max-width: 1480px; width: 100%; margin: 0 auto; box-sizing: border-box; font-size: 13px; }
.cx-migas a, .cx-migas span.actual {
  display: inline-grid; line-height: 1.2; padding: 5px 9px; border-radius: 8px; text-decoration: none; color: var(--c-tinta-2); max-width: 280px;
}
.cx-migas a:hover { background: var(--c-panel-2); color: var(--c-tinta); }
.cx-migas small { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-tinta-3); font-weight: 700; }
.cx-migas b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-migas span.actual { color: var(--c-tinta); background: var(--c-panel-2); border: 1px solid var(--c-borde); }
.cx-migas .sep { color: var(--c-tinta-3); }

/* ---- Vista ------------------------------------------------------------------------------------------------------ */
.cx-vista { flex: 1; width: 100%; max-width: 1480px; margin: 0 auto; padding: 18px 28px 40px; box-sizing: border-box; display: grid; gap: 26px; align-content: start; outline: none; }
.cx-vista > * { animation: cx-entrada 0.55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.cx-cargando { display: grid; place-items: center; gap: 14px; min-height: 50vh; color: var(--c-tinta-2); text-align: center; }
.cx-cargando__anillo { width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--c-borde-2); border-top-color: var(--c-critica); animation: girar 0.9s linear infinite; }

.cx-kicker { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-tinta-3); }
.cx-kicker .cx-icono { width: 15px; height: 15px; }
.cx-pulso { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--c-critica); flex: none; margin: 0 5px; }
.cx-pulso::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--c-critica); animation: cx-onda 1.8s ease-out infinite; }
.cx-pulso--alta { background: var(--c-alta); }
.cx-pulso--alta::after { border-color: var(--c-alta); }
.cx-pulso--ok { background: var(--c-ok); }
.cx-pulso--ok::after { border-color: var(--c-ok); }

/* ---- Héroe del panorama -------------------------------------------------------------------------------------- */
.cx-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.cx-hero__estado {
  position: relative; overflow: hidden; display: grid; align-content: start; gap: 18px; padding: 30px 32px;
  border-radius: 22px; border: 1px solid var(--c-borde); background: linear-gradient(160deg, var(--c-panel-2), var(--c-panel));
  box-shadow: var(--c-sombra);
}
.cx-hero__estado::after {
  content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 51, 88, 0.07), transparent);
  animation: cx-barrido 6s ease-in-out infinite;
}
.cx-hero__titulo { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.cx-gigante {
  font-size: clamp(76px, 9vw, 132px); line-height: 0.85; font-weight: 900; letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ff6b84, var(--c-critica) 55%, #b5122f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 28px var(--c-critica-brillo));
}
:root[data-theme="light"] .cx-gigante { background: linear-gradient(180deg, #f0466a, var(--c-critica) 55%, #9e0f30); -webkit-background-clip: text; background-clip: text; filter: none; }
.cx-hero__sub { margin: 0; font-size: 16px; color: var(--c-tinta-2); }
.cx-hero__sub strong { color: var(--c-tinta); }
.cx-sevs { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-sev-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 13.5px; border: 1px solid var(--c-borde-2); background: var(--c-panel); font-variant-numeric: tabular-nums; }
.cx-sev-chip i { width: 9px; height: 9px; border-radius: 50%; }
.cx-sev-chip--critica i { background: var(--c-critica); box-shadow: 0 0 10px var(--c-critica); }
.cx-sev-chip--alta i { background: var(--c-alta); }
.cx-sev-chip--media i { background: var(--c-media); }
.cx-montos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cx-monto { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--c-borde); background: var(--c-panel); min-width: 0; }
.cx-monto span { font-size: 12px; color: var(--c-tinta-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.cx-monto strong { font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-monto small { font-size: 12.5px; color: var(--c-tinta-2); }
.cx-monto--legal strong { color: var(--c-critica); }
.cx-monto--ok strong, .cx-dato--ok > strong { color: var(--c-ok) !important; }
.cx-monto--ejec strong { color: var(--c-alta); }
.cx-reloj {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--c-borde-2); font-size: 14px; color: var(--c-tinta-2);
}
.cx-reloj strong { color: var(--c-tinta); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cx-reloj .cx-icono { width: 22px; height: 22px; color: var(--c-acento); }
.cx-reloj__barra { flex: 1; min-width: 80px; height: 6px; border-radius: 3px; background: var(--c-panel-3); overflow: hidden; }
.cx-reloj__barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--c-acento), var(--c-alta), var(--c-critica)); border-radius: 3px; transform-origin: left; animation: cx-crecer 1.4s cubic-bezier(.2, .8, .2, 1) both; }
.cx-hero__acciones { display: flex; flex-wrap: wrap; gap: 10px; }

/* Foco: la alerta más grave */
.cx-foco {
  position: relative; display: grid; gap: 12px; padding: 24px 26px; border-radius: 22px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c-critica) 45%, transparent);
  background: radial-gradient(600px 300px at 100% 0%, var(--c-critica-fondo), transparent 70%), var(--c-panel);
  box-shadow: var(--c-sombra), 0 0 0 1px rgba(255, 51, 88, 0.05), 0 0 60px -20px var(--c-critica-brillo);
}
.cx-foco--alta { border-color: color-mix(in srgb, var(--c-alta) 45%, transparent); background: radial-gradient(600px 300px at 100% 0%, var(--c-alta-fondo), transparent 70%), var(--c-panel); }
.cx-foco__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cx-foco__titulo { margin: 0; font-size: clamp(21px, 2.1vw, 28px); line-height: 1.2; letter-spacing: -0.015em; font-weight: 800; }
.cx-foco__lugar { margin: 0; color: var(--c-tinta-2); font-size: 14px; }
.cx-foco__mas { display: grid; gap: 6px; margin-top: 4px; }
.cx-foco__siguiente {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--c-borde); background: var(--c-panel-2); text-decoration: none; transition: border-color 0.15s, transform 0.15s;
}
.cx-foco__siguiente:hover { border-color: var(--c-borde-2); transform: translateX(3px); }
.cx-foco__siguiente span:nth-child(2) { display: grid; min-width: 0; }
.cx-foco__siguiente b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-foco__siguiente small { font-size: 12px; color: var(--c-tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-foco__siguiente em { font-style: normal; font-weight: 800; font-size: 13px; color: var(--c-tinta-2); }

/* ---- Secciones ------------------------------------------------------------------------------------------------- */
.cx-seccion { display: grid; gap: 14px; }
.cx-seccion__cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.cx-seccion__cab > div { display: grid; gap: 4px; max-width: 880px; }
.cx-seccion h2 { margin: 0; font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -0.015em; font-weight: 800; line-height: 1.25; }
.cx-seccion h2 em { font-style: normal; color: var(--c-critica); }
.cx-seccion__sub { margin: 0; color: var(--c-tinta-2); font-size: 14px; }
.cx-nota { margin: 0; color: var(--c-tinta-3); font-size: 12.5px; }

/* ---- Mapa de calor ----------------------------------------------------------------------------------------------- */
.cx-calor { display: grid; border-radius: 18px; border: 1px solid var(--c-borde); background: var(--c-panel); overflow: hidden; box-shadow: var(--c-sombra-chica); }
.cx-calor__cab, .cx-calor__fila {
  display: grid; grid-template-columns: 44px minmax(220px, 2.2fr) minmax(170px, 1.3fr) repeat(4, minmax(78px, 0.75fr)) minmax(150px, 1.1fr) 28px;
  align-items: stretch; gap: 0;
}
.cx-calor__cab { background: var(--c-panel-2); border-bottom: 1px solid var(--c-borde); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-tinta-3); }
.cx-calor__cab > div { padding: 11px 10px; display: flex; align-items: center; gap: 6px; }
.cx-calor__cab > div.cx-calor__fam { justify-content: center; text-align: center; flex-direction: column; gap: 3px; }
.cx-calor__cab .cx-icono { width: 16px; height: 16px; color: var(--c-tinta-2); }
.cx-calor__fila { text-decoration: none; border-bottom: 1px solid var(--c-borde); transition: background 0.15s; position: relative; animation: cx-entrada 0.5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--f, 0) * 45ms); }
.cx-calor__fila:last-child { border-bottom: 0; }
.cx-calor__fila:hover { background: var(--c-panel-2); }
.cx-calor__fila:hover .cx-calor__ir { color: var(--c-tinta); transform: translateX(3px); }
.cx-calor__fila > div { padding: 10px; display: flex; align-items: center; min-width: 0; }
.cx-calor__rango { justify-content: center; font-weight: 800; color: var(--c-tinta-3); font-variant-numeric: tabular-nums; font-size: 13px; }
.cx-calor__nombre { display: grid !important; align-content: center; gap: 1px; }
.cx-calor__nombre b { font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-calor__nombre small { font-size: 12px; color: var(--c-tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-calor__grav { display: grid !important; gap: 5px; align-content: center; }
.cx-apilada { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--c-panel-3); }
.cx-apilada span { height: 100%; transform-origin: left; animation: cx-crecer 0.9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--f, 0) * 45ms + 200ms); }
.cx-apilada .critica { background: var(--c-critica); box-shadow: 0 0 8px var(--c-critica-brillo); }
.cx-apilada .alta { background: var(--c-alta); }
.cx-apilada .media { background: var(--c-media); }
.cx-conteos { display: flex; gap: 10px; font-size: 12px; color: var(--c-tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-conteos b { font-weight: 800; }
.cx-conteos .critica b { color: var(--c-critica); }
.cx-conteos .alta b { color: var(--c-alta); }
.cx-conteos .media b { color: var(--c-media); }
.cx-celda { justify-content: center; padding: 6px !important; }
.cx-celda span {
  width: 100%; height: 40px; display: grid; place-items: center; border-radius: 9px; font-weight: 800; font-size: 14px;
  font-variant-numeric: tabular-nums; color: var(--c-tinta-3); background: transparent; border: 1px dashed var(--c-borde);
  animation: cx-calentar 0.6s ease both; animation-delay: calc(var(--f, 0) * 45ms + var(--c, 0) * 90ms + 150ms);
}
.cx-celda--critica span { background: color-mix(in srgb, var(--c-critica) calc(55% + var(--int, 0.5) * 45%), var(--c-panel)); color: #fff; border: 0; box-shadow: 0 0 20px -4px var(--c-critica-brillo); }
.cx-celda--alta span { background: color-mix(in srgb, var(--c-alta) calc(14% + var(--int, 0.5) * 22%), var(--c-panel)); color: var(--c-alta); border: 1px solid color-mix(in srgb, var(--c-alta) 45%, transparent); }
.cx-celda--media span { background: color-mix(in srgb, var(--c-media) calc(5% + var(--int, 0.5) * 9%), var(--c-panel)); color: var(--c-media); border: 1px solid color-mix(in srgb, var(--c-media) 28%, transparent); }
.cx-celda--critica.cx-celda--max span { animation: cx-calentar 0.6s ease both, cx-latido-suave 2.4s ease-in-out 1.2s 2; }
.cx-calor__montos { display: grid !important; gap: 2px; align-content: center; justify-items: end; font-variant-numeric: tabular-nums; }
.cx-calor__montos span { white-space: nowrap; }
.cx-calor__montos b { font-size: 14px; font-weight: 800; color: var(--c-alta); }
.cx-calor__montos small { font-size: 11.5px; color: var(--c-tinta-3); }
.cx-calor__montos .legal { color: var(--c-critica); }
.cx-calor__ir { justify-content: center; color: var(--c-tinta-3); transition: transform 0.15s, color 0.15s; }
.cx-calor__ir .cx-icono { width: 16px; height: 16px; }
.cx-calor__vacia { padding: 14px 16px; color: var(--c-tinta-2); font-size: 13.5px; }
.cx-plegable { border: 1px solid var(--c-borde); border-radius: 14px; background: var(--c-panel); }
.cx-plegable > summary { cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 13.5px; color: var(--c-tinta-2); list-style: none; display: flex; align-items: center; gap: 8px; }
.cx-plegable > summary::-webkit-details-marker { display: none; }
.cx-plegable > summary::before { content: "▸"; transition: transform 0.15s; color: var(--c-tinta-3); }
.cx-plegable[open] > summary::before { transform: rotate(90deg); }
.cx-plegable__cuerpo { padding: 0 16px 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.cx-plegable__cuerpo a { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--c-borde); text-decoration: none; color: var(--c-tinta-2); }
.cx-plegable__cuerpo a:hover { color: var(--c-tinta); border-color: var(--c-borde-2); }

/* ---- Filtros de familia ------------------------------------------------------------------------------------------- */
.cx-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cx-filtro {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--c-borde-2);
  background: var(--c-panel); cursor: pointer; font-weight: 600; font-size: 13px; color: var(--c-tinta-2);
}
.cx-filtro .cx-icono { width: 15px; height: 15px; }
.cx-filtro em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--c-tinta-3); font-weight: 700; }
.cx-filtro[aria-pressed="true"] { background: var(--c-tinta); color: var(--c-fondo); border-color: var(--c-tinta); }
.cx-filtro[aria-pressed="true"] em { color: inherit; opacity: 0.7; }
.cx-filtro:disabled { opacity: 0.4; cursor: default; }
.cx-interruptor { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-tinta-2); cursor: pointer; margin-left: 4px; }
.cx-interruptor input { accent-color: var(--c-critica); width: 16px; height: 16px; }

/* ---- Tarjeta de hallazgo --------------------------------------------------------------------------------------- */
.cx-hallazgos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); gap: 16px; }
.cx-hallazgo {
  --sev: var(--c-media); --sev-fondo: var(--c-media-fondo); --sev-brillo: var(--c-media-brillo);
  position: relative; display: grid; gap: 12px; padding: 20px 22px 18px 26px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--c-borde); background: linear-gradient(135deg, var(--sev-fondo), transparent 42%), var(--c-panel);
  box-shadow: var(--c-sombra-chica); scroll-margin-top: 140px;
  animation: cx-entrada 0.5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.cx-hallazgo:hover { border-color: color-mix(in srgb, var(--sev) 40%, transparent); box-shadow: var(--c-sombra), 0 0 40px -18px var(--sev-brillo); }
.cx-hallazgo::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--sev); box-shadow: 0 0 18px var(--sev-brillo); }
.cx-hallazgo--critica { --sev: var(--c-critica); --sev-fondo: var(--c-critica-fondo); --sev-brillo: var(--c-critica-brillo); }
.cx-hallazgo--alta { --sev: var(--c-alta); --sev-fondo: var(--c-alta-fondo); --sev-brillo: var(--c-alta-brillo); }
.cx-hallazgo--baja { --sev: var(--c-baja); --sev-fondo: transparent; --sev-brillo: transparent; }
.cx-hallazgo--critica::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.05) 45%, transparent 60%); background-size: 250% 100%;
  animation: cx-brillo 5s ease-in-out 1s infinite;
}
.cx-hallazgo.cx-resaltado { animation: cx-resaltar 1.1s ease-in-out 3; }
.cx-hallazgo__cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cx-sev { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sev); background: var(--sev-fondo); border: 1px solid color-mix(in srgb, var(--sev) 40%, transparent); }
.cx-sev i { width: 8px; height: 8px; border-radius: 50%; background: var(--sev); position: relative; }
.cx-hallazgo--critica .cx-sev i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--sev); animation: cx-onda 1.6s ease-out infinite; }
.cx-tipo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--c-tinta-2); }
.cx-tipo .cx-icono { width: 15px; height: 15px; color: var(--sev); }
.cx-persistencia { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--c-panel-3); color: var(--c-tinta-2); }
.cx-persistencia--nueva { background: var(--c-acento-fondo); color: var(--c-acento); }
.cx-persistencia--nueva::before { content: "●"; font-size: 8px; animation: cx-parpadeo 1.2s ease-in-out infinite; }
.cx-persistencia--persistente::before, .cx-persistencia--reiterada::before { content: "↻"; }
.cx-hallazgo__rango { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--c-tinta-3); font-variant-numeric: tabular-nums; cursor: help; }
.cx-hallazgo__titulo { margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 800; }
.cx-hallazgo__lugar { margin: -6px 0 0; display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; font-size: 13px; color: var(--c-tinta-2); }
.cx-hallazgo__lugar a { text-decoration: none; color: var(--c-tinta-2); border-bottom: 1px dotted var(--c-borde-2); }
.cx-hallazgo__lugar a:hover { color: var(--c-tinta); border-bottom-color: var(--c-tinta-2); }
.cx-hallazgo__lugar .sep { color: var(--c-tinta-3); }
.cx-hallazgo__lugar code { font-family: var(--c-mono); font-size: 12px; color: var(--c-tinta-3); }
.cx-hallazgo__cuerpo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.cx-hallazgo--sin-viz .cx-hallazgo__cuerpo { grid-template-columns: minmax(0, 1fr); }
.cx-elementos { margin: 0; display: grid; gap: 10px; }
.cx-elementos > div { display: grid; gap: 2px; }
.cx-elementos dt { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--c-tinta-3); }
.cx-elementos dd { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--c-tinta); }
.cx-elementos__efecto dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; color: var(--c-tinta-2); }
.cx-en-juego { font-size: 24px; line-height: 1.15; font-weight: 850; letter-spacing: -0.02em; color: var(--sev); font-variant-numeric: tabular-nums; }
.cx-ayuda { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--c-tinta-3); font-size: 10px; font-weight: 800; color: var(--c-tinta-2); cursor: help; letter-spacing: 0; }
.cx-ayuda:hover, .cx-ayuda:focus-visible { background: var(--c-tinta-2); color: var(--c-fondo); }
.cx-factores { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.cx-factores small { font-size: 11.5px; color: var(--c-tinta-3); margin-right: 2px; }
.cx-factor { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--c-acento-fondo); color: var(--c-acento); font-weight: 600; }
.cx-elementos--anchos > div { gap: 3px; }
.cx-hallazgo__accion { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-top: 12px; border-top: 1px solid var(--c-borde); }
.cx-hallazgo__accion > div:last-child { display: flex !important; justify-content: space-between !important; align-items: center; flex-wrap: wrap; }
.cx-hallazgo--ancho { grid-column: 1 / -1; }
.cx-hallazgo--ancho .cx-hallazgo__cuerpo { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.cx-pedir { display: grid; gap: 4px; font-size: 13px; }
.cx-pedir > b { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-tinta-3); }
.cx-pedir ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; color: var(--c-tinta); }
.cx-cuando { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--c-tinta-2); }
.cx-cuando .cx-icono { width: 15px; height: 15px; color: var(--sev); }
.cx-hallazgo__botones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Fila compacta */
.cx-filas { display: grid; gap: 6px; }
.cx-fila {
  --sev: var(--c-media);
  display: grid; grid-template-columns: 12px minmax(0, 1.5fr) minmax(0, 1.6fr) auto 18px; gap: 14px; align-items: center;
  width: 100%; text-align: left; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--c-borde); background: var(--c-panel); cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.cx-fila:hover { background: var(--c-panel-2); border-color: var(--c-borde-2); }
.cx-fila--critica { --sev: var(--c-critica); }
.cx-fila--alta { --sev: var(--c-alta); }
.cx-fila--baja { --sev: var(--c-baja); }
.cx-fila > i { width: 10px; height: 10px; border-radius: 50%; background: var(--sev); }
.cx-fila--critica > i { box-shadow: 0 0 10px var(--c-critica); }
.cx-fila__donde { display: grid; min-width: 0; line-height: 1.3; }
.cx-fila__donde b { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-fila__donde small { font-size: 12px; color: var(--c-tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-fila__titulo { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--sev); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-fila__titulo .cx-icono { width: 15px; height: 15px; flex: none; }
.cx-fila__flecha { color: var(--c-tinta-3); transition: transform 0.15s; }
.cx-fila[aria-expanded="true"] .cx-fila__flecha { transform: rotate(90deg); }
.cx-fila-detalle { margin: 4px 0 8px 24px; }
.cx-mas { display: flex; justify-content: center; gap: 10px; padding-top: 6px; }
.cx-vacio { padding: 26px; border-radius: 16px; border: 1px dashed var(--c-borde-2); text-align: center; color: var(--c-tinta-2); display: grid; gap: 6px; justify-items: center; }
.cx-vacio .cx-pulso { margin-bottom: 4px; }

/* ---- Cabecera de una partida, capítulo, … --------------------------------------------------------------------- */
.cx-cabeza {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: end; padding: 26px 28px;
  border-radius: 22px; border: 1px solid var(--c-borde); background: linear-gradient(160deg, var(--c-panel-2), var(--c-panel)); box-shadow: var(--c-sombra);
  overflow: hidden;
}
.cx-cabeza--critica { border-color: color-mix(in srgb, var(--c-critica) 35%, transparent); background: radial-gradient(700px 260px at 100% 0%, var(--c-critica-fondo), transparent 70%), linear-gradient(160deg, var(--c-panel-2), var(--c-panel)); }
.cx-cabeza--alta { background: radial-gradient(700px 260px at 100% 0%, var(--c-alta-fondo), transparent 70%), linear-gradient(160deg, var(--c-panel-2), var(--c-panel)); }
.cx-cabeza__titulos { display: grid; gap: 8px; min-width: 0; }
.cx-cabeza h1 { margin: 0; font-size: clamp(26px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 850; view-transition-name: cx-titulo; }
.cx-cabeza__sub { margin: 0; color: var(--c-tinta-2); font-size: 14.5px; }
.cx-cabeza__cifras { display: grid; gap: 10px; justify-items: end; }
.cx-cabeza__grande { display: flex; align-items: baseline; gap: 10px; }
.cx-cabeza__grande strong { font-size: 64px; line-height: 0.9; font-weight: 900; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--c-critica); text-shadow: 0 0 30px var(--c-critica-brillo); }
.cx-cabeza__grande strong.alta { color: var(--c-alta); text-shadow: none; }
.cx-cabeza__grande strong.ok { color: var(--c-ok); text-shadow: none; }
.cx-cabeza__grande span { font-size: 15px; font-weight: 700; color: var(--c-tinta-2); max-width: 120px; line-height: 1.2; }
.cx-cabeza__fila { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.cx-dato { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--c-borde); background: var(--c-panel); min-width: 0; }
.cx-dato > span { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-tinta-3); }
.cx-dato > strong { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-dato > small { font-size: 12px; color: var(--c-tinta-2); }
.cx-dato--legal > strong { color: var(--c-critica); }
.cx-dato--ejec > strong { color: var(--c-alta); }
.cx-avance { display: grid; gap: 6px; }
.cx-avance__pista { position: relative; height: 12px; border-radius: 6px; background: var(--c-panel-3); overflow: visible; }
.cx-avance__real { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, var(--c-acento), color-mix(in srgb, var(--c-acento) 70%, white)); transform-origin: left; animation: cx-crecer 1.3s cubic-bezier(.2, .8, .2, 1) both; }
.cx-avance__hueco { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, var(--c-critica) 0 5px, transparent 5px 9px); opacity: 0.6; border-radius: 0 6px 6px 0; animation: cx-aparecer 0.6s 1.1s both; }
.cx-avance__meta { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--c-tinta); border-radius: 1px; }
.cx-avance__leyenda { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--c-tinta-2); }
.cx-avance__leyenda b { color: var(--c-tinta); }

/* Diagnóstico del servicio (ficha) */
.cx-diagnostico {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 22px; padding: 24px 26px; border-radius: 20px;
  border: 1px solid var(--c-borde); background: var(--c-panel); box-shadow: var(--c-sombra-chica);
}
.cx-diagnostico__relato { display: grid; gap: 12px; align-content: start; }
.cx-diagnostico__relato .relato { margin: 0; font-size: 17px; line-height: 1.6; color: var(--c-tinta); max-width: none; }
.cx-diagnostico__relato .relato strong { color: var(--c-critica); }
.cx-prioridad { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--c-panel-2); border: 1px solid var(--c-borde); width: fit-content; }
.cx-prioridad strong { font-size: 28px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; }
.cx-prioridad span { font-size: 12.5px; color: var(--c-tinta-2); line-height: 1.25; }
.cx-senales { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-senal { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; border: 1px solid var(--c-borde-2); background: var(--c-panel-2); cursor: help; }
.cx-senal i { width: 8px; height: 8px; border-radius: 50%; }
.cx-senal--critico i { background: var(--c-critica); }
.cx-senal--alto i { background: var(--c-alta); }
.cx-senal--medio i { background: var(--c-media); }
.cx-plan { display: grid; gap: 10px; align-content: start; }
.cx-plan h3 { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-tinta-3); }
.cx-plan ol { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; gap: 10px; }
.cx-plan li { counter-increment: paso; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--c-borde); background: var(--c-panel-2); }
.cx-plan li::before { content: counter(paso); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--c-panel-3); color: var(--c-tinta); }
.cx-plan li.critico::before { background: var(--c-critica); color: #fff; }
.cx-plan li.alto::before { background: var(--c-alta); color: #fff; }
.cx-plan li > div { display: grid; gap: 4px; min-width: 0; }
.cx-plan li b { font-size: 14px; line-height: 1.4; }
.cx-plan li p { margin: 0; font-size: 12.5px; color: var(--c-tinta-2); line-height: 1.45; }
.cx-plan li a { font-size: 12.5px; font-weight: 700; color: var(--c-acento); text-decoration: none; }

/* ---- Fuente ----------------------------------------------------------------------------------------------------- */
.cx-cabeza--fuente h1 { font-size: clamp(24px, 2.6vw, 34px); }
.cx-fuente { display: grid; gap: 16px; padding: 24px 26px; border-radius: 20px; border: 1px solid var(--c-borde); background: var(--c-panel); box-shadow: var(--c-sombra-chica); }
.cx-fuente h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.cx-fuente h2 .cx-icono { width: 22px; height: 22px; color: var(--c-acento); }
.cx-fuente__grafico .cx-viz__svg { width: 100%; height: auto; display: block; overflow: visible; }
.cx-tabla-envoltura { overflow-x: auto; border-radius: 12px; border: 1px solid var(--c-borde); }
.cx-tabla { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.cx-tabla th { text-align: right; padding: 9px 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-tinta-3); background: var(--c-panel-2); border-bottom: 1px solid var(--c-borde); white-space: nowrap; }
.cx-tabla th:first-child, .cx-tabla td:first-child { text-align: left; }
.cx-tabla td { text-align: right; padding: 8px 12px; border-bottom: 1px solid var(--c-borde); white-space: nowrap; font-family: var(--c-mono); font-size: 12.5px; }
.cx-tabla td:first-child { font-family: var(--c-fuente); font-weight: 600; }
.cx-tabla tr:last-child td { border-bottom: 0; }
.cx-tabla tr.cx-tabla--actual td { background: var(--c-acento-fondo); }
.cx-tabla td.cx-tabla--sobre { color: var(--c-critica); font-weight: 800; }
.cx-tabla td.cx-tabla--neg { color: var(--c-alta); }
.cx-archivos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.cx-archivo { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--c-borde-2); background: var(--c-panel-2); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.cx-archivo:hover { border-color: var(--c-acento); transform: translateY(-2px); }
.cx-archivo__icono { width: 44px; height: 52px; border-radius: 8px; display: grid; place-items: center; background: var(--c-acento-fondo); color: var(--c-acento); font-size: 10px; font-weight: 900; letter-spacing: 0.05em; position: relative; }
.cx-archivo__icono .cx-icono { width: 24px; height: 24px; }
.cx-archivo__icono b { position: absolute; bottom: 5px; }
.cx-archivo > span:last-child { display: grid; gap: 3px; min-width: 0; }
.cx-archivo strong { font-size: 13.5px; line-height: 1.35; }
.cx-archivo small { font-size: 12px; color: var(--c-tinta-2); }
.cx-archivo em { font-style: normal; font-size: 12px; color: var(--c-acento); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.cx-archivo em .cx-icono { width: 13px; height: 13px; }
.cx-localizador { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-loc { display: grid; gap: 1px; padding: 7px 11px; border-radius: 10px; border: 1px solid var(--c-borde-2); background: var(--c-panel-2); min-width: 74px; }
.cx-loc small { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-tinta-3); }
.cx-loc b { font-family: var(--c-mono); font-size: 15px; font-weight: 700; }
.cx-loc span { font-size: 11px; color: var(--c-tinta-2); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-pasos { margin: 0; padding-left: 20px; display: grid; gap: 5px; font-size: 13.5px; color: var(--c-tinta-2); }
.cx-pasos b, .cx-pasos code { color: var(--c-tinta); }
.cx-pasos code { font-family: var(--c-mono); font-size: 12.5px; background: var(--c-panel-3); padding: 1px 6px; border-radius: 5px; }
.cx-aviso { padding: 12px 14px; border-radius: 12px; border-left: 4px solid var(--c-media); background: var(--c-media-fondo); font-size: 13.5px; color: var(--c-tinta); }
.cx-meses-fuente { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; padding-top: 8px; }
.cx-meses-fuente a { font-size: 12.5px; color: var(--c-acento); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.cx-meses-fuente a:hover { text-decoration: underline; }
.cx-reglas { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-app .insignia-regla { background: var(--c-panel-2); color: var(--c-tinta-2); border-color: var(--c-tinta-3); }
.cx-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* ---- Visualizaciones de las alertas --------------------------------------------------------------------------- */
.cx-viz { min-height: 90px; }
.cx-viz--espera { opacity: 0.0; }
.cx-viz__svg { width: 100%; height: auto; display: block; overflow: visible; }
.cx-viz__etq { font-size: 11px; fill: var(--c-tinta-2); font-family: var(--c-fuente); }
.cx-viz__etq--sec { fill: var(--c-tinta-3); }
.cx-viz__etq--marcado { fill: var(--c-critica); font-weight: 800; }
.cx-viz__cifra { font-size: 13px; font-weight: 800; fill: var(--c-tinta); font-family: var(--c-fuente); font-variant-numeric: tabular-nums; }
.cx-viz__cifra--critica { fill: var(--c-critica); }
.cx-viz__cifra--alta { fill: var(--c-alta); }
.cx-viz__cifra--media { fill: var(--c-media); }
.cx-viz__pista { fill: var(--c-panel-3); }
.cx-viz__relleno { fill: var(--c-acento); }
.cx-viz__contorno { fill: transparent; stroke: var(--c-tinta-3); stroke-width: 1.5; stroke-dasharray: 4 3; }
.cx-viz__limite { stroke: var(--c-tinta); stroke-width: 2.5; }
.cx-viz__limite--critico { stroke: var(--c-tinta); }
.cx-viz__golpe line { animation: cx-golpe 0.5s ease-out 2; }
.cx-viz__meta { stroke: var(--c-tinta-3); stroke-width: 1.2; stroke-dasharray: 3 4; }
.cx-viz__umbral { stroke: var(--c-alta); stroke-width: 1.2; stroke-dasharray: 5 4; opacity: 0.8; }
.cx-viz__base { stroke: var(--c-borde-2); stroke-width: 1.2; }
.cx-viz__grilla line { stroke: var(--c-borde); }
.cx-viz__esperada { fill: none; stroke: var(--c-tinta-3); stroke-width: 2; stroke-dasharray: 6 5; }
.cx-viz__real { fill: none; stroke: var(--c-acento); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cx-viz__area { fill: var(--c-acento-fondo); }
.cx-viz__vigente { fill: none; stroke: var(--c-tinta); stroke-width: 2; opacity: 0.7; }
.cx-viz__proyeccion { fill: none; stroke: var(--c-critica); stroke-width: 2.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.cx-viz__punto { fill: var(--c-acento); stroke: var(--c-panel); stroke-width: 2; }
.cx-viz__punto--critico { fill: var(--c-critica); }
.cx-viz__barra { fill: var(--c-tinta-3); opacity: 0.55; }
.cx-viz__barra--marcada { fill: var(--c-critica); }
.cx-viz__barra--alta { fill: var(--c-alta); }
.cx-viz__barra--media { fill: var(--c-media); opacity: 0.8; }
.cx-viz__zona { fill: var(--c-alta-fondo); }
.cx-viz__par { fill: var(--c-tinta-3); }
.cx-viz__onda { fill: none; stroke: var(--c-critica); stroke-width: 2; opacity: 0; }
.cx-viz__latido .cx-viz__onda, .cx-viz__latido.cx-viz__onda { animation: cx-onda-svg 1.6s ease-out 3; }
rect.cx-viz__latido { animation: cx-latido-barra 0.9s ease-in-out 3; transform-box: fill-box; transform-origin: bottom; }
.cx-viz__flecha { fill: none; stroke: var(--c-alta); stroke-width: 2.5; stroke-linecap: round; }
.cx-viz__guia { stroke: var(--c-tinta-3); stroke-dasharray: 2 3; }
.cx-viz__leyenda line { stroke-width: 2.5; }

/* ---- Pie -------------------------------------------------------------------------------------------------------- */
.cx-pie { position: relative; z-index: 1; padding: 24px 28px 34px; border-top: 1px solid var(--c-borde); color: var(--c-tinta-3); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; }
.cx-pie p { margin: 0; max-width: 820px; }
.cx-pie nav { display: flex; gap: 14px; flex-wrap: wrap; }
.cx-pie a, .cx-pie button { color: var(--c-tinta-3); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--c-borde-2); text-underline-offset: 3px; font-size: 12.5px; }
.cx-pie a:hover, .cx-pie button:hover { color: var(--c-tinta-2); }

/* ---- Modo avanzado (tercer plano) ---------------------------------------------------------------------------- */
.avanzado__aviso { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 24px; background: var(--superficie-2); border-bottom: 1px solid var(--borde); font-size: 13px; color: var(--tinta-2); }
.avanzado__aviso a { font-weight: 700; color: var(--acento); text-decoration: none; }

/* ---- Presentación ---------------------------------------------------------------------------------------------- */
.cx-pres {
  position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: var(--c-tinta);
  background: radial-gradient(1000px 600px at 80% 0%, rgba(255, 51, 88, 0.16), transparent 60%), radial-gradient(900px 600px at 0% 100%, rgba(76, 201, 240, 0.1), transparent 60%), #05070c;
  font: 16px/1.5 var(--c-fuente);
}
:root[data-theme="light"] .cx-pres { --c-tinta: #ecf2fb; --c-tinta-2: #a9b6ca; --c-tinta-3: #7a879e; --c-panel: #0f1520; --c-panel-2: #141b28; --c-panel-3: #1b2434; --c-borde: rgba(140, 165, 205, 0.13); --c-borde-2: rgba(140, 165, 205, 0.26); --c-critica: #ff3358; --c-alta: #ff8c3a; --c-media: #f7c948; --c-acento: #4cc9f0; --c-acento-fondo: rgba(76, 201, 240, 0.12); --c-critica-fondo: rgba(255, 51, 88, 0.14); --c-alta-fondo: rgba(255, 140, 58, 0.13); --c-media-fondo: rgba(247, 201, 72, 0.11); --c-critica-brillo: rgba(255, 51, 88, 0.5); }
.cx-pres[hidden] { display: none; }
.cx-pres__cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 32px; }
.cx-pres__progreso { display: flex; gap: 6px; flex: 1; max-width: 640px; }
.cx-pres__progreso span { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.cx-pres__progreso span i { display: block; height: 100%; width: 0; background: #fff; }
.cx-pres__progreso span.hecho i { width: 100%; }
.cx-pres__progreso span.actual i { animation: cx-progreso var(--dur, 9s) linear forwards; }
.cx-pres--pausa .cx-pres__progreso span.actual i { animation-play-state: paused; }
.cx-pres__escena { position: relative; overflow: hidden; display: grid; place-items: center; padding: 0 6vw; }
.cx-pres__lamina { width: min(1280px, 100%); display: grid; gap: 22px; animation: cx-lamina 0.7s cubic-bezier(.2, .8, .2, 1) both; }
.cx-pres__lamina--intro { text-align: center; justify-items: center; }
.cx-pres__lamina--intro .cx-gigante { font-size: clamp(120px, 18vw, 240px); }
.cx-pres__lamina h2 { margin: 0; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 850; }
.cx-pres__lamina .cx-pres__lugar { margin: 0; font-size: clamp(16px, 1.4vw, 21px); color: var(--c-tinta-2); }
.cx-pres__cuerpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 34px; align-items: center; }
.cx-pres__cuerpo .cx-elementos dd { font-size: clamp(14px, 1.15vw, 17px); }
.cx-pres__cuerpo .cx-elementos dt { font-size: 11.5px; }
.cx-pres__subtitulos { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); max-width: min(980px, 90vw); text-align: center; font-size: 16px; color: #fff; background: rgba(0, 0, 0, 0.55); padding: 8px 16px; border-radius: 10px; line-height: 1.4; }
.cx-pres__subtitulos:empty { display: none; }
.cx-pres__pie { display: flex; justify-content: center; gap: 10px; padding: 16px 24px 24px; }
.cx-pres__pie .cx-boton { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: #fff; }
.cx-pres__pie .cx-boton:hover { background: rgba(255, 255, 255, 0.12); }
.cx-pres__pie .cx-boton[aria-pressed="true"] { background: #fff; color: #05070c; }
.cx-pres__accion { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; padding: 16px 20px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 15px; }
.cx-pres__accion b { color: var(--c-tinta-3); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---- Animaciones ------------------------------------------------------------------------------------------------ */
@keyframes cx-entrada { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cx-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes cx-onda { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes cx-onda-svg { 0% { opacity: 0.9; r: 6; } 100% { opacity: 0; r: 26; } }
@keyframes cx-parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes cx-cinta { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cx-barrido { 0% { transform: translateY(0); } 100% { transform: translateY(380%); } }
@keyframes cx-crecer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cx-calentar { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes cx-latido-suave { 0%, 100% { transform: none; } 50% { transform: scale(1.06); filter: brightness(1.2); } }
@keyframes cx-brillo { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
@keyframes cx-resaltar { 0%, 100% { box-shadow: var(--c-sombra-chica); } 50% { box-shadow: 0 0 0 3px var(--sev), 0 0 50px var(--sev-brillo); } }
@keyframes cx-golpe { 0%, 100% { transform: none; } 30% { transform: translateX(-2px); } 60% { transform: translateX(2px); } }
@keyframes cx-latido-barra { 0%, 100% { transform: none; } 50% { transform: scaleY(1.08); filter: brightness(1.25); } }
@keyframes cx-progreso { from { width: 0; } to { width: 100%; } }
@keyframes cx-lamina { from { opacity: 0; transform: translateY(24px) scale(0.985); } to { opacity: 1; transform: none; } }

/* Transiciones entre vistas (View Transitions API) */
::view-transition-old(root) { animation: 0.28s cubic-bezier(.4, 0, 1, 1) both cx-salida; }
::view-transition-new(root) { animation: 0.42s cubic-bezier(0, 0, .2, 1) both cx-llegada; }
::view-transition-group(cx-titulo) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
@keyframes cx-salida { to { opacity: 0; transform: scale(0.985); filter: blur(2px); } }
@keyframes cx-llegada { from { opacity: 0; transform: scale(1.015); } }

/* ---- Responsivo ------------------------------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .cx-hero { grid-template-columns: minmax(0, 1fr); }
  .cx-calor__cab, .cx-calor__fila { grid-template-columns: 36px minmax(180px, 2fr) minmax(140px, 1.2fr) repeat(4, minmax(60px, 0.7fr)) 28px; }
  .cx-calor__montos-col { display: none !important; }
  .cx-diagnostico { grid-template-columns: minmax(0, 1fr); }
  .cx-hallazgo__cuerpo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .cx-barra { padding: 10px 16px; flex-wrap: wrap; }
  .cx-barra__centro { order: 3; flex-basis: 100%; }
  .cx-marca__sub { display: none; }
  .cx-migas, .cx-vista { padding-left: 16px; padding-right: 16px; }
  .cx-cinta__rotulo { padding-left: 16px; }
  .cx-calor { overflow-x: auto; }
  .cx-calor__cab, .cx-calor__fila { grid-template-columns: 30px minmax(150px, 1.6fr) repeat(4, minmax(46px, 0.6fr)) 22px; min-width: 480px; }
  .cx-calor__grav-col { display: none !important; }
  .cx-calor__cab { font-size: 9px; letter-spacing: 0.02em; }
  .cx-calor__cab > div { padding: 9px 4px; }
  .cx-cabeza { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .cx-cabeza__cifras { justify-items: start; }
  .cx-hero__estado, .cx-foco { padding: 22px 20px; }
  .cx-montos { grid-template-columns: minmax(0, 1fr); }
  .cx-fila { grid-template-columns: 10px minmax(0, 1fr) 14px; }
  .cx-fila > .cx-persistencia, .cx-fila > span:empty { display: none; }
  .cx-fila__titulo { grid-column: 2; grid-row: 2; white-space: normal; }
  .cx-fila__flecha { grid-row: 1 / span 2; grid-column: 3; }
  .cx-hallazgo { padding: 18px 16px 16px 20px; }
  .cx-hallazgo__accion { grid-template-columns: minmax(0, 1fr); }
  .cx-hallazgo__botones { justify-content: flex-start; }
  .cx-elementos > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cx-dos { grid-template-columns: minmax(0, 1fr); }
  .cx-pres__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .cx-pres__cab { padding: 14px 16px; }
  .cx-pie { padding: 20px 16px 28px; }
}
@media (max-width: 520px) {
  .cx-barra__acciones .cx-boton span.cx-etq-larga { display: none; }
  .cx-gigante { font-size: 84px; }
  .cx-migas a:not(:nth-last-child(-n + 3)), .cx-migas .sep:not(:nth-last-child(-n + 4)) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-app *, .cx-app *::before, .cx-app *::after, .cx-pres * { animation: none !important; transition: none !important; }
  .cx-cinta__ventana { overflow-x: auto; mask-image: none; }
  .cx-cinta__pista { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(cx-titulo) { animation: none; }
}

/* ---- Impresión --------------------------------------------------------------------------------------------------- */
@media print {
  :root, :root[data-theme="dark"] { --c-fondo: #fff; --c-panel: #fff; --c-panel-2: #f6f6f6; --c-panel-3: #eee; --c-tinta: #000; --c-tinta-2: #333; --c-tinta-3: #555; --c-borde: #ccc; --c-borde-2: #999; --c-critica: #c00; --c-alta: #c60; --c-media: #a70; }
  body.cx { background: #fff; }
  body.cx::before, .cx-barra, .cx-cinta, .cx-pie nav, .cx-hero__acciones, .cx-hallazgo__botones, .cx-filtros, .cx-mas, .cx-fila__flecha, .cx-pres, .tooltip { display: none !important; }
  .cx-vista > *, .cx-hallazgo, .cx-calor__fila { animation: none !important; box-shadow: none !important; }
  .cx-hallazgo, .cx-fuente, .cx-cabeza, .cx-diagnostico, .cx-calor { break-inside: avoid; border-color: #bbb; }
  .cx-gigante { color: #c00; background: none; filter: none; -webkit-text-fill-color: #c00; }
}