/* Hoja de estilos de la pagina de estado. Sin build: se sirve tal cual.
   La marca es la de la landing y no se reinventa: las caras tipograficas, el
   bloque :root y el wordmark se copian de landing/assets/estilos.css. Si la
   landing cambia un token, aca se vuelve a copiar; no hay hoja compartida porque
   los dos sitios se publican por separado y una dependencia cruzada entre
   buckets es peor que treinta lineas repetidas. */

/* [1] Fuentes propias — SIL OFL, ver assets/fonts/LICENSE-*.txt.
   Copiadas de landing/assets/estilos.css [1], donde esta medido el rango de
   peso de Inter (100 900) y por que JetBrains Mono va en 400 a secas. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

/* [2] Tokens — bloque :root copiado verbatim de landing/assets/estilos.css:34-58. */
:root {
  --ink: #0E2233;
  --ink-muted: #4A5C6B;
  --slate-900: #14293D;
  --slate-700: #2B4055;
  --surface: #FFFFFF;
  --surface-muted: #F4F6F8;
  --border: #DCE3EA;
  --accent: #E07A1F;
  --accent-hover: #C4670F;
  --accent-ink: #A85410;
  --link: #0B63A8;
  --ok: #1E7A4D;
  --err: #B3261E;
  /* Los dos grises de texto sobre fondo oscuro. No vienen del export, que los
     escribe sueltos: --ink-claro es el cuerpo y --ink-tenue el secundario, y
     entre los dos suman una veintena de apariciones en esta hoja. Están acá
     porque repetir el literal ya se cobró un error: `.pie-nota` y
     `.eyebrow-tenue` lo escribían por separado, y cuando `.enlace-claro` tomó
     el tenue por error nadie lo vio hasta la revisión. Medidos sobre
     --slate-900: --ink-claro 10,03:1 y --ink-tenue 5,71:1. */
  --ink-claro: #C9D6E1;
  --ink-tenue: #8FA3B5;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* [3] Los tres pares de estado. Van en su propio :root para que el de arriba
   siga siendo copia exacta del de la landing. Medidos el 2026-10-07, texto sobre
   fondo: operativo 4,68:1, degradado 4,79:1, caido 5,62:1. Sin datos usa
   --ink-muted sobre --surface-muted, 6,39:1.
   --accent NO se usa para texto en esta pagina: da 3,01:1 sobre blanco. Si
   aparece es en superficies (la barra de degradado, el punto del logo), donde
   el minimo de WCAG 1.4.11 es 3:1. */
:root {
  --operativo: #1E7A4D;
  --operativo-fondo: #E8F3EC;
  --degradado: #A85410;
  --degradado-fondo: #FDF1E4;
  --caido: #B3261E;
  --caido-fondo: #FBEAE9;
}

/* [4] Base */
*, *::before, *::after { box-sizing: border-box; }

/* El atributo hidden tiene que ganarle a cualquier display de componente: la
   pagina arranca con todo lo que llena estado.js oculto, y sin JavaScript eso
   tiene que seguir oculto aunque la regla del componente diga flex o grid. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surface-muted);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: #08497C; }
/* Mismo anillo de foco de dos tonos que la landing: ahi esta medido contra los
   cuatro fondos. */
:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #0A1826;
}
h1, h2, h3 { font-weight: 600; margin: 0; letter-spacing: -0.015em; }
p { margin: 0; }

.saltar {
  position: absolute;
  left: -9999px;
  background: var(--slate-900);
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: 6px;
  z-index: 50;
}
.saltar:focus { left: 16px; top: 16px; }
.saltar:hover { color: #FFFFFF; }

.contenedor {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* [5] Cabecera y wordmark. .logo-punto, .logo-nombre y .logo-tld son las
   reglas de landing/assets/estilos.css [7], copiadas sin cambios. */
.cabecera {
  background: var(--slate-900);
  border-bottom: 4px solid var(--accent);
}
.cabecera-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.logo {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.logo-punto {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--accent);
}
.logo-nombre {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.logo-tld {
  color: var(--ink-tenue);
  font-size: 13px;
  font-family: var(--mono);
}
.cabecera-etiqueta {
  color: var(--ink-claro);
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* [6] Resumen */
.principal { padding-top: 40px; padding-bottom: 64px; }
.resumen {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
}
.resumen-titulo { font-size: 32px; line-height: 1.2; }
.resumen-datos {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.resumen-cifra { font-size: 18px; }
.resumen-cifra strong { font-weight: 600; }
.resumen-nota,
.resumen-actualizado { color: var(--ink-muted); font-size: 14px; }
.resumen-actualizado { margin-top: 8px; }

/* Los avisos: carga, error de lectura, estado atrasado y el <noscript>. Van en
   tinta normal sobre blanco con un filete de color a la izquierda: el color
   acompana, el texto informa. */
.aviso {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--slate-700);
  border-radius: 6px;
  padding: 12px 16px;
}
.aviso-error { border-left-color: var(--caido); }
.aviso-atrasado { border-left-color: var(--accent); margin-top: 8px; }

/* [7] Secciones y filas */
.seccion { margin-bottom: 48px; }
.seccion-titulo { font-size: 22px; margin-bottom: 16px; }

.filas {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.fila {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fila + .fila { border-top: 1px solid var(--border); }
.fila-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
}
.fila-nombre { font-size: 17px; }
.etiqueta-externa {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.fila-detalle { color: var(--ink-muted); font-size: 15px; }
.fila-nota {
  font-size: 14px;
  color: var(--ink-muted);
  border-left: 3px solid var(--border);
  padding-left: 10px;
}

/* La insignia lleva el estado como texto: el color nunca va solo. */
.insignia {
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 12px;
  white-space: nowrap;
  color: var(--ink-muted);
  background: var(--surface-muted);
}
.insignia[data-estado="operativo"],
.insignia[data-estado="resuelto"] { color: var(--operativo); background: var(--operativo-fondo); }
.insignia[data-estado="degradado"],
.insignia[data-estado="investigando"],
.insignia[data-estado="identificado"],
.insignia[data-estado="monitoreando"] { color: var(--degradado); background: var(--degradado-fondo); }
.insignia[data-estado="caido"] { color: var(--caido); background: var(--caido-fondo); }

/* Las 90 barras. Son superficie, no texto: el minimo es 3:1 contra el blanco de
   la tarjeta (WCAG 1.4.11). Operativo 5,32:1, degradado en --accent 3,01:1,
   caido 6,54:1. Sin datos va en --border a proposito: es ausencia de dato y no
   tiene que competir con los tres que si informan. El detalle de cada dia va en
   el title de la barra y el resumen de los 90 en el aria-label del contenedor. */
.barras {
  display: flex;
  gap: 2px;
  height: 34px;
  margin-top: 4px;
}
.barra {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 2px;
  background: var(--border);
}
.barra-operativo { background: var(--operativo); }
.barra-degradado { background: var(--accent); }
.barra-caido { background: var(--caido); }
.barras-eje {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-muted);
}
.eje-30 { display: none; }

.cifras {
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 32px;
  font-size: 14px;
}
.cifras div { display: flex; gap: 6px; }
.cifras dt { color: var(--ink-muted); }
.cifras dt::after { content: ":"; }
.cifras dd { margin: 0; font-weight: 600; }

.leyenda {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font-size: 13px;
  color: var(--ink-muted);
}
.leyenda li { display: flex; align-items: center; gap: 6px; }
.muestra {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.muestra-operativo { background: var(--operativo); }
.muestra-degradado { background: var(--accent); }
.muestra-caido { background: var(--caido); }
.muestra-sin_datos { background: var(--border); }

/* [8] Incidentes */
.vacio { color: var(--ink-muted); }
.incidentes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.incidente {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.incidente-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
}
.incidente-titulo { font-size: 17px; }
.incidente-meta { font-size: 14px; color: var(--ink-muted); }
.actualizaciones {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.actualizacion {
  border-left: 3px solid var(--border);
  padding-left: 12px;
  font-size: 15px;
}
.actualizacion-cuando { display: block; font-size: 13px; color: var(--ink-muted); }

/* [9] Pie */
.pie {
  background: var(--slate-900);
  color: var(--ink-claro);
  border-top: 4px solid var(--accent);
}
.pie-interior {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 40px;
  padding-bottom: 32px;
}
.pie-exclusion { max-width: 52ch; }
.pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 15px;
}
.enlace-claro { color: var(--ink-claro); text-decoration: none; }
.enlace-claro:hover { color: #FFFFFF; text-decoration: underline; }
.pie-legal {
  padding-top: 24px;
  padding-bottom: 40px;
  border-top: 1px solid var(--slate-700);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.pie-nota { font-size: 14px; color: var(--ink-tenue); }

/* [9b] El alta de avisos. Arranca con hidden y la muestra estado.js. El foco
   va con --link, el mismo azul de los enlaces, y no con --accent: el anillo
   tiene que llegar a 3:1 sobre blanco (WCAG 1.4.11) y --accent da 3,01. */
.suscripcion { margin-top: 20px; display: grid; gap: 12px; max-width: 560px; }
.suscripcion-canal {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.suscripcion-canal legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.suscripcion-canal label { display: flex; align-items: center; gap: 6px; }
.suscripcion-rotulo { font-weight: 600; }
.suscripcion-fila { display: flex; flex-wrap: wrap; gap: 8px; }
.suscripcion-campo {
  flex: 1 1 260px;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--ink-muted);
  border-radius: 6px;
  padding: 10px 12px;
}
.suscripcion-boton {
  font: inherit;
  font-weight: 600;
  color: #FFFFFF;
  background: var(--slate-900);
  border: 1px solid var(--slate-900);
  border-radius: 6px;
  padding: 10px 18px;
  cursor: pointer;
}
.suscripcion-boton:hover { background: var(--slate-700); }
.suscripcion-boton:disabled { cursor: progress; opacity: 0.7; }
.suscripcion-campo:focus-visible,
.suscripcion-boton:focus-visible,
.suscripcion-canal input:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.suscripcion-nota { color: var(--ink-muted); font-size: 14px; }

/* [10] Movil. Por debajo de 640 px las 90 barras quedarian en 1,8 px cada una
   a 390 de ventana: se muestran los ultimos 30 dias y el eje lo dice. El
   aria-label sigue resumiendo los 90, que es lo que el dato contiene. */
@media (max-width: 640px) {
  .contenedor { padding: 0 16px; }
  .principal { padding-top: 28px; }
  .resumen-titulo { font-size: 26px; }
  .fila, .incidente { padding: 16px; }
  .barra:nth-child(-n+60) { display: none; }
  .eje-90 { display: none; }
  .eje-30 { display: inline; }
}