/* ============================================================================
   SM7 · Estado del servicio (estado.eteis.net)
   Teléfono primero, claro y oscuro según el sistema, sin nada de fuera: la
   tipografía viaja con la página (fuentes/, la misma DM Sans del sitio).

   Colores y escalas del sistema de diseño SM7 2.0 (~/sm7-sistema-de-diseno,
   tokens/tokens.json): cada ficha dice de qué token sale. Los cuatro colores
   del estado son los de la app: el verde del acento, el ámbar de los avisos,
   el rojo sólido de colgar y la divisoria para «sin datos».
   ========================================================================= */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fuentes/DMSans-variable.woff2') format('woff2');
}

:root {
  color-scheme: light;
  --fuente: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --c-fondo: #f7f8fa;            /* color.fondo            pizarra.25  */
  --c-superficie: #ffffff;       /* color.superficie       pizarra.0   */
  --c-hundida: #e7ebee;          /* color.superficieHundida pizarra.50 */
  --c-divisoria: #e0e4e8;        /* color.divisoria        pizarra.100 */
  --c-texto: #111b21;            /* color.textoPrincipal   pizarra.925 */
  --c-texto-2: #54656f;          /* color.textoSecundario  pizarra.600 */
  --c-enlace: #0f6fa8;           /* color.enlace           azul.700    */
  --c-foco: #0f6fa8;             /* color.foco             azul.700    */

  --c-bien: #00806a;             /* color.acento           verde.700   */
  --c-lento: #e8b931;            /* barra: ambar.400                   */
  --c-lento-tinta: #8a6100;      /* color.avisoIcono       ambar.700   */
  --c-caido: #e53935;            /* color.peligroSolido    rojo.600    */
  --c-caido-tinta: #b3261e;      /* color.peligro          rojo.750    */
  --c-sin-datos: #e0e4e8;        /* color.divisoria        pizarra.100 */
  --c-neutro-tinta: #54656f;     /* color.textoSecundario  pizarra.600 */
  --c-sobre-tinta: #ffffff;      /* color.sobreAcento      pizarra.0   */
  --c-lento-borde: #8a6100;      /* color.avisoIcono: el ámbar sobre blanco da 1,8:1 y el borde lo sube */

  --c-aviso-fondo: #fff3d6;      /* color.avisoFondo       ambar.50    */
  --c-aviso-texto: #5c4200;      /* color.avisoTexto       ambar.800   */

  --elev-1: 0 1px 3px rgba(11, 20, 26, 0.12);   /* elevacion.e1 */
  --r-md: 12px;                  /* radio.md  */
  --r-sm: 8px;                   /* radio.sm  */
  --r-xs: 4px;                   /* radio.xs  */
  --dur: 200ms;                  /* movimiento.normal */
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --c-fondo: #0b141a;          /* pizarra.950 */
    --c-superficie: #202c33;     /* pizarra.800 */
    --c-hundida: #182229;        /* pizarra.900 */
    --c-divisoria: #222d34;      /* pizarra.750 */
    --c-texto: #ffffff;          /* pizarra.0   */
    --c-texto-2: #8696a0;        /* pizarra.400 */
    --c-enlace: #53bdeb;         /* azul.350    */
    --c-foco: #53bdeb;           /* azul.350    */

    --c-bien: #00a884;           /* verde.400   */
    --c-lento: #e8b931;          /* ambar.400   */
    --c-lento-tinta: #e8b931;    /* ambar.400   */
    --c-caido: #e53935;          /* rojo.600    */
    --c-caido-tinta: #f2b8b5;    /* rojo.100    */
    --c-sin-datos: #2a3942;      /* pizarra.700 (la divisoria oscura no se ve sobre la superficie) */
    --c-neutro-tinta: #8696a0;   /* pizarra.400 */
    --c-sobre-tinta: #0b141a;    /* color.sobreAcento oscuro: pizarra.950 */
    --c-lento-borde: transparent; /* el ámbar sobre la superficie oscura ya da 7,8:1 */

    --c-aviso-fondo: #3b2f13;    /* ambar.950   */
    --c-aviso-texto: #e8d9a8;    /* ambar.200   */
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-texto);
  font: 400 16px/22px var(--fuente);          /* tipo.cuerpo */
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-enlace); text-underline-offset: 2px; }
a:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--c-foco);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.contenedor {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 16px;                              /* espacio.e4 */
}

/* ── Cabecera ──────────────────────────────────────────────────────────── */
.cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0 16px;
}
.cabecera img { width: 40px; height: 40px; border-radius: 10px; display: block; }
.cabecera .marca { font: 700 20px/24px var(--fuente); letter-spacing: 0.01em; margin: 0; }
.cabecera .lema { font: 400 14px/20px var(--fuente); color: var(--c-texto-2); margin: 0; }

/* ── Aviso de la página de prueba ─────────────────────────────────────── */
.aviso-prueba {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--c-aviso-fondo);
  color: var(--c-aviso-texto);
  font: 500 14px/20px var(--fuente);
}

/* ── El resumen de arriba ─────────────────────────────────────────────── */
.resumen {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 16px;
  border-radius: var(--r-md);
  background: var(--c-superficie);
  box-shadow: var(--elev-1);
  border-left: 6px solid var(--tono, var(--c-sin-datos));
}
.resumen h1 { font: 600 22px/28px var(--fuente); margin: 0 0 4px; }   /* tipo.titulo */
.resumen p { margin: 0; color: var(--c-texto-2); font: 400 14px/20px var(--fuente); }
.resumen .consejo { margin-top: 8px; color: var(--c-texto); font: 400 16px/22px var(--fuente); }
.resumen .icono { flex: none; width: 32px; height: 32px; }
.resumen .icono circle { fill: var(--tinta, var(--c-neutro-tinta)); }
/* El glifo va en la tinta «sobre acento» del sistema: blanco en claro, casi negro en
   oscuro (el blanco sobre el ámbar o el rosa del tema oscuro no llega a 3:1). */
.resumen .icono .glifo {
  fill: none;
  stroke: var(--c-sobre-tinta);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: none;
}
.resumen[data-tono="bien"] .g-bien,
.resumen[data-tono="lento"] .g-lento,
.resumen[data-tono="caido"] .g-caido,
.resumen[data-tono="neutro"] .g-neutro { display: inline; }

/* El tono lo pone estado.js según el estado: bien | lento | caido | neutro. */
[data-tono="bien"]   { --tono: var(--c-bien);  --tinta: var(--c-bien); }
[data-tono="lento"]  { --tono: var(--c-lento); --tinta: var(--c-lento-tinta); }
[data-tono="caido"]  { --tono: var(--c-caido); --tinta: var(--c-caido-tinta); }
[data-tono="neutro"] { --tono: var(--c-neutro-tinta); --tinta: var(--c-neutro-tinta); }

/* ── Secciones ─────────────────────────────────────────────────────────── */
section.bloque { margin-top: 32px; }
h2 { font: 600 17px/22px var(--fuente); margin: 0 0 12px; }            /* tipo.encabezado */

.tarjeta {
  background: var(--c-superficie);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
}

/* ── Componentes ───────────────────────────────────────────────────────── */
.componentes { list-style: none; margin: 0; padding: 0; }
.componente { padding: 16px; }
.componente + .componente { border-top: 1px solid var(--c-divisoria); }

.componente .cabeza {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.componente .cabeza > div { flex: 1 1 auto; min-width: 0; }
.componente h3 { font: 600 17px/22px var(--fuente); margin: 0; }
.componente .desc { margin: 2px 0 0; color: var(--c-texto-2); font: 400 14px/20px var(--fuente); }

/* La etiqueta del estado puede partirse en dos líneas en un teléfono angosto
   («Sin revisión automática» no cabe junto al nombre en 320 px). */
.insignia {
  flex: 0 0 auto;
  max-width: 55%;
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  margin: 2px 0 0;
  color: var(--tinta);
  font: 600 14px/20px var(--fuente);                                    /* tipo.etiqueta */
  text-align: right;
}
.insignia::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--tono);
  flex: none;
}

.incidente-abierto { margin: 8px 0 0; font: 500 14px/20px var(--fuente); }

/* Las barras de los días: la más vieja a la izquierda, hoy a la derecha. En el
   teléfono caben 45; desde 34rem, las 90. */
.barras {
  display: flex;
  gap: 2px;
  height: 32px;
  margin-top: 12px;
  touch-action: pan-y;
  border-radius: var(--r-xs);
}
.barra {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 2px;
  background: var(--c-sin-datos);
  transition: opacity var(--dur);
}
.barra[data-color="verde"] { background: var(--c-bien); }
.barra[data-color="amarillo"] { background: var(--c-lento); box-shadow: inset 0 0 0 1px var(--c-lento-borde); }
.barra[data-color="rojo"] { background: var(--c-caido); }
.barra.elegida { outline: 2px solid var(--c-texto); outline-offset: 1px; }
.barras:hover .barra:not(:hover):not(.elegida) { opacity: 0.75; }

.barra.vieja { display: none; }
.solo-ancho { display: none; }
@media (min-width: 34rem) {
  .barra.vieja { display: block; }
  .solo-ancho { display: inline; }
  .solo-angosto { display: none; }
}

.barras-pie {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  color: var(--c-texto-2);
  font: 400 12px/16px var(--fuente);                                    /* tipo.meta */
  white-space: nowrap;
}

/* El detalle de las barras: cuánto funcionó, o el día elegido. */
.dia { min-height: 20px; margin: 8px 0 0; font: 500 14px/20px var(--fuente); }
.dia.elegido { font-weight: 400; }
.meta { margin: 4px 0 0; color: var(--c-texto-2); font: 400 12px/16px var(--fuente); }

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: var(--c-texto-2);
  font: 400 12px/16px var(--fuente);
}
.leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.leyenda li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--muestra);
}
.leyenda .verde { --muestra: var(--c-bien); }
.leyenda .amarillo { --muestra: var(--c-lento); }
.leyenda .amarillo::before { box-shadow: inset 0 0 0 1px var(--c-lento-borde); }
.leyenda .rojo { --muestra: var(--c-caido); }
.leyenda .gris { --muestra: var(--c-sin-datos); }

/* ── Incidentes ────────────────────────────────────────────────────────── */
.incidentes { list-style: none; margin: 0; padding: 0; }
.incidente { padding: 16px; scroll-margin-top: 16px; }
.incidente + .incidente { border-top: 1px solid var(--c-divisoria); }
.incidente h3 { font: 600 17px/22px var(--fuente); margin: 0; }
.incidente .datos { margin: 4px 0 0; color: var(--c-texto-2); font: 400 14px/20px var(--fuente); }
.incidente .etiqueta { color: var(--tinta); font-weight: 600; }
.incidente[data-abierto] { border-left: 4px solid var(--c-lento); }

.actualizaciones { list-style: none; margin: 12px 0 0; padding: 0; }
.actualizacion { margin: 0; padding: 0 0 12px 16px; border-left: 2px solid var(--c-divisoria); position: relative; }
.actualizacion:last-child { padding-bottom: 0; }
.actualizacion::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-superficie);
  border: 2px solid var(--c-texto-2);
}
.actualizacion .cuando { margin: 0; font: 600 14px/20px var(--fuente); }
.actualizacion .cuando time { font-weight: 400; color: var(--c-texto-2); }
.actualizacion p.texto { margin: 2px 0 0; }

.vacio { padding: 16px; margin: 0; color: var(--c-texto-2); }

.suscribir { margin: 12px 0 0; font: 400 14px/20px var(--fuente); }

/* ── Cambios detectados ────────────────────────────────────────────────── */
details.cambios { padding: 0; }
details.cambios summary {
  cursor: pointer;
  padding: 16px;
  font: 600 17px/22px var(--fuente);
  list-style-position: inside;
}
details.cambios ul { list-style: none; margin: 0; padding: 0 16px 16px; }
details.cambios li { padding: 8px 0; border-top: 1px solid var(--c-divisoria); font: 400 14px/20px var(--fuente); }
details.cambios li time { color: var(--c-texto-2); }
details.cambios .nota { margin: 0; padding: 0 16px 12px; color: var(--c-texto-2); font: 400 12px/16px var(--fuente); }

/* ── Pie ───────────────────────────────────────────────────────────────── */
.pie {
  margin: 40px 0 0;
  padding: 16px 0 32px;
  border-top: 1px solid var(--c-divisoria);
  color: var(--c-texto-2);
  font: 400 14px/20px var(--fuente);
  text-align: center;
}
.pie p { margin: 0; }

.oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}