/* ==========================================================================
   status.secyda.eu · hoja única.
   ==========================================================================
   Referencia: `secyda-docs/mockups/cabecera-status/` (14-sep-2026), con los
   tokens de la cabecera de `secyda.eu` medidos. Lo que se apartó del dibujo,
   y por qué, está en `NOTES.md`.

   Reglas que no son de gusto y que conviene no deshacer sin leer el encargo:

     · Guardia Red SÓLO para marca e información crítica.
     · Verde, ámbar y rojo SÓLO para estados operativos. Nunca decorativos.
     · Sin degradados, sin sombras, sin tarjetas flotantes. Filetes de 1 px.
     · Swiza para la marca; Inter para interfaz; IBM Plex Mono SÓLO para
       fechas, cifras y rótulos funcionales.

   Las fuentes NO se traen de un CDN. Esta página se sirve estática desde Cádiz
   y tiene que pintar aunque no haya red hacia fuera, que es precisamente el
   escenario en el que alguien viene a mirarla, y no le cuenta a nadie quién
   consulta el estado de Secyda.

   Y NI UN ESTILO EN LÍNEA. La CSP de `status.secyda.eu` (secyda-infra#138)
   lleva `style-src 'self'` sin `'unsafe-inline'`: un `style=` en el HTML o
   construido desde el pintor no se aplicaría, sin un error visible. El banco
   de `test/pagina.test.mjs` lo busca, y `el()` de `marcado.mjs` lo rechaza.
   ========================================================================== */

/*
   LA MARCA EN SWIZA, Y SOLO LAS SEIS LETRAS QUE LA ESCRIBEN.
   ----------------------------------------------------------
   Hasta el 14-sep-2026 esta hoja declaraba `Swiza` y no la cargaba nunca, asi
   que la marca caia a Inter. `secyda.eu` la lleva entera en `base64` dentro de
   307 kB de CSS en linea; aqui va un SUBCONJUNTO con los glifos de «secyda»
   (s, e, c, y, d, a), sacado con `pyftsubset --text=secyda` de
   `secyda-web/public/fonts/swiza-bold.woff2`, que es la misma fuente, byte a
   byte, que trae el dibujo. 1.920 bytes, 2.560 en `base64`.

   Si alguien cambia la palabra de la marca, las letras nuevas caen a Inter
   sin avisar: hay que volver a sacar el subconjunto.

   Y LA CSP TIENE QUE DECIR `font-src 'self' data:`. Con `default-src 'none'`
   y sin `font-src`, esta fuente queda bloqueada, la marca cae a Inter y en
   pantalla no se ve ningun error. Va en secyda-infra#138.
*/
@font-face {
  font-family: Swiza;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(data:font/woff2;base64,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) format("woff2");
}

:root {
  --bg: #fff;
  --panel: #fcfbfa;
  --calido: #fcf6ee;       /* el fondo de la franja de incidencia */
  --ink: #16150f;          /* Commando Black */
  --ink-2: #54524a;
  --ink-3: #59574f;
  /*
     EL «TENUE» DEL DIBUJO NO PASA AA, y aquí se cambia.
     `#C5C3B9` sobre blanco da 1,77:1, y el dibujo lo usa para TEXTO que lleva
     información («SIN SONDA», «90 DÍAS», «hace 90 días», el pie). WCAG 1.4.3
     pide 4,5:1. `--tenue` es el gris más claro de la misma familia que pasa:
     4,89:1 sobre blanco y 4,56:1 sobre la franja cálida. `--faint` se queda
     sólo para lo que no es texto que se lee: la barra y el punto separador.
  */
  --tenue: #737168;
  --faint: #c5c3b9;
  --hair: #e6e4dd;
  --hair-2: #f0eee8;
  --red: #a6152a;          /* Guardia Red */

  /* Los tonos de estado. Los PUNTOS usan los del dibujo; el TEXTO de estado
     usa `--aviso-texto`, porque el ámbar `#D97706` da 3,19:1 sobre blanco y
     sólo vale para marcas (3:1 de objeto gráfico), no para letra. */
  --ok: #2f6b49;
  --rev: #d97706;
  --draft: #a9a79d;
  --aviso-texto: #8a5510;
  /* «En observación» (16-sep-2026): corregida y sin confirmar. Azul petróleo,
     lejos del rojo de lo abierto, del ámbar de lo que se investiga y del verde
     de lo resuelto. 6,2:1 sobre blanco; sobre su fondo, 5,8:1, y `--tenue` 4,58:1. */
  --obs: #2b6788;
  --obs-fondo: #f4f8fa;

  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --wm: Swiza, Inter, ui-sans-serif, system-ui, sans-serif;

  --max: 1080px;          /* 1400 hasta el 15-sep-2026: «un poquitín más estrecho» (Pablo) */
  --pad: 48px;
  --r: 2px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 15px;
  /* `normal` y no 1.5: el dibujo no fija interlineado, y con 1.5 cada fila de
     servicio salía 6 px más alta que en el marco 01. */
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }

/* El foco SIEMPRE visible, y con banda para que se vea sobre cualquier fondo. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }

/* Salto al contenido: lo primero que encuentra quien navega con teclado. */
.saltar { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: 12px 18px; z-index: 20; }
.saltar:focus { left: 12px; top: 12px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mono { font-family: var(--mono); }

/*
   `padding-inline` y NUNCA el atajo `padding`. El dibujo pone `.env` y `.cab`
   en el mismo elemento, y el `padding: 52px 0 30px` de `.cab` le quitaba el
   margen lateral al titular: en el lienzo sale 48 px a la izquierda de la marca
   y, a 390 px, pegado al borde de la pantalla. Ver NOTES.md.
*/
.env { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

/* --- Cabecera: la de `secyda.eu`, medida ---------------------------------- */
.top {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--hair);
}
.top .row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 62px; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
}
.brand { display: inline-flex; align-items: baseline; gap: 9px; text-decoration: none; padding-block: 10px; }
.brand .wm { font-family: var(--wm); font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--red); }
.brand .est { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
.navright { display: flex; align-items: center; gap: 22px; }

/* El conmutador. Botones que se leen como el «ES / EN» de `secyda.eu`: el
   activo en tinta y medio punto más de peso, el otro apagado. El objetivo
   táctil es de 44 px de alto aunque la letra sea de 11,5. */
.lang { display: inline-flex; align-items: center; gap: 2px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em; }
.lang button {
  border: 0; background: none; cursor: pointer; font-family: inherit; font-size: inherit; letter-spacing: inherit;
  color: var(--ink-3); padding: 0 5px; min-height: 44px; min-width: 28px;
}
.lang button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.lang button:hover { color: var(--ink); }
.lang .barra-idioma { color: var(--faint); }
.volver { font-size: 14px; color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; }
.volver span { color: var(--ink-3); }
.volver:hover { color: var(--ink); }

/* --- La franja: sólo existe cuando hay algo -------------------------------- */
.franja { border-bottom: 1px solid var(--hair); background: var(--panel); }
.franja.inc { background: var(--calido); }
.franja .env { padding-block: 15px; display: flex; gap: 13px; align-items: flex-start; }
.franja .pt { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; background: var(--draft); }
.franja.inc .pt { background: var(--rev); }
.franja.obs { background: var(--obs-fondo); }
.franja.obs .pt { background: var(--obs); }
.franja.alerta .pt, .franja.demo .pt { background: var(--red); }
.franja-cuerpo { min-width: 0; }
.franja-titulo { font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
.franja p:not(.franja-titulo):not(.cu) { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.franja .cu {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin-left: auto; flex: none; padding-top: 3px; white-space: nowrap;
}

/* --- El titular ------------------------------------------------------------ */
.cab { padding-block: 52px 30px; }
.cab h1 { font-size: 33px; font-weight: 500; letter-spacing: -.024em; line-height: 1.2; display: flex; align-items: center; gap: 13px; }
.pt { display: inline-block; border-radius: 50%; flex: none; }
.cab h1 .pt { width: 11px; height: 11px; }
.t-ok { background: var(--ok); }
.t-aviso { background: var(--rev); }
.t-malo { background: var(--red); }
.t-obs { background: var(--obs); }
.t-neutro { background: var(--draft); }
.cab .meta { margin-top: 9px; font-size: 13.5px; color: var(--ink-3); display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.cab .meta .sep { color: var(--faint); }
/* El conmutador de ventana, con la misma voz que el de idioma. */
.ventanas { margin-top: 18px; display: inline-flex; gap: 6px; }
.ventanas button {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); background: transparent; border: 1px solid var(--hair); border-radius: 3px;
  padding: 7px 12px; min-height: 32px; cursor: pointer;
}
.ventanas button:hover { color: var(--ink); border-color: var(--ink-3); }
.ventanas button[aria-pressed="true"] { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.solo-estrecho { display: none; }

/* --- Los grupos y sus servicios ------------------------------------------- */
.zona { padding-block: 6px 44px; }
.zona.hist { padding-top: 0; }
.grupo { margin-top: 34px; }
.grupo > h2 {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-3); padding-bottom: 9px; border-bottom: 1px solid var(--hair);
}
/*
   La fila de un servicio son DOS alturas: arriba el nombre (y su nota) con la
   cifra a la derecha; debajo, la barra de los 90 días A TODO EL ANCHO. Hasta el
   15-sep-2026 la barra era una columna de 230px al lado del nombre, y con 90
   días dentro cada uno medía 1,3px: se leía como una textura, no como un dato.
   Es el mismo trazado que status.claude.com, que es el que Pablo señaló.
*/
.srv {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 22px; align-items: start;
  padding-block: 16px 18px; border-bottom: 1px solid var(--hair-2);
}
.srv-barra { grid-column: 1 / -1; min-width: 0; }
.srv .nm { font-size: 14.5px; font-weight: 400; }
.srv .nota { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.tx-aviso { color: var(--aviso-texto) !important; }
.tx-malo { color: var(--red) !important; }
.tx-neutro { color: var(--ink-3) !important; }

.barra { display: flex; gap: 3px; height: 34px; align-items: stretch; }
.barra i { flex: 1; min-width: 0; border-radius: 2px; background: var(--ok); }
.barra i.d-degradado { background: var(--rev); }
.barra i.d-caido { background: var(--red); }
.barra i.d-sin-datos { background: var(--hair); }
.pie90 { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--tenue); margin-top: 7px; }

/* La cifra va ARRIBA a la derecha, en la fila del nombre: sin fijarle la celda
   la rejilla la mandaba debajo de la barra, que ocupa las dos columnas. */
.pct { grid-column: 2; grid-row: 1; font-family: var(--mono); font-size: 14px; color: var(--ink); justify-self: end; text-align: right; font-variant-numeric: tabular-nums; margin: 0; }
.pct span { display: block; font-size: 9.5px; letter-spacing: .08em; color: var(--tenue); text-transform: uppercase; margin-top: 2px; }
.pct.sin-sonda { color: var(--tenue); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }

/* --- El historial ---------------------------------------------------------- */
.hist .it {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 20px; align-items: baseline;
  padding-block: 15px; border-bottom: 1px solid var(--hair-2);
}
.hist .f { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; }
.hist .t { font-size: 14px; font-weight: 400; }
.hist .d { font-size: 13px; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }
.hist .r { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 7px; align-items: center; }
.hist .r .pt { width: 7px; height: 7px; }
.vacio { padding-block: 8px 26px; font-size: 13.5px; color: var(--ink-3); }

/* Lo que se ve antes de que corra el script. */
.nota-arranque { padding-block: 52px; color: var(--ink-3); font-size: 13.5px; }

/* --- El pie ---------------------------------------------------------------- */
.pie { border-top: 1px solid var(--hair); background: var(--bg); }
.pie .env { padding-block: 22px; display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-3); flex-wrap: wrap; gap: 12px; }
.pie .mono { font-size: 10.5px; letter-spacing: .06em; color: var(--tenue); }

/* --- Estrecho: el marco 06 del dibujo -------------------------------------- */
@media (max-width: 720px) {
  :root { --pad: 20px; }
  .top .row { height: 54px; }
  .navright { gap: 14px; }

  .franja .env { flex-wrap: wrap; }
  .franja .cu { margin-left: 0; order: 3; width: 100%; padding-left: 21px; margin-top: 6px; white-space: normal; }
  .franja-titulo { font-size: 14px; }

  .cab { padding-block: 26px 18px; }
  .cab h1 { font-size: 22px; letter-spacing: -.02em; }
  .cab .meta { font-size: 12.5px; }
  .solo-ancho { display: none; }
  .solo-estrecho { display: inline; }

  /* La barra SE QUEDA: a todo el ancho, 90 días caben en 350px a 2,5px cada uno.
     Antes se escondía porque era una columna de 230px que en un móvil no cabía. */
  .srv { gap: 8px 12px; }
  .barra { height: 28px; gap: 1.5px; }
  .barra i { border-radius: 1px; }
  .pct { font-size: 12.5px; grid-column: 2; grid-row: 1; }

  .hist .it { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .hist .f { grid-column: 1 / -1; }
  .zona { padding-block: 0 26px; }
}