/*
 * observatorio.css — La cara pública de los números.
 *
 * Misma paleta y misma tipografía del sistema que la app: cero peticiones a terceros, tampoco
 * aquí. Y ni una sola declaración en línea, porque `style-src 'self'` prohíbe los `style=` del
 * marcado — las barras van en SVG, donde el ancho es un atributo.
 *
 * Esta página es legible sin JavaScript y sin imágenes. Es lo que la hace indexable, y también
 * lo que la hace rápida en la conexión mala que es la conexión real.
 */

:root{
  --fondo:#08080C;
  --tinta:#E8E4F0;
  --tenue:#6C6A78;
  --violeta:#9D4EDD;
  --azul:#3A86FF;
  --linea:rgba(232,228,240,.10);
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:var(--sans); font-size:16px; line-height:1.6;
}
main{max-width:720px; margin:0 auto; padding:34px 20px 80px}

.idiomas{display:flex; gap:14px; justify-content:flex-end; margin-bottom:26px}
.idiomas a{
  color:var(--tenue); text-decoration:none; font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase;
}
.idiomas a.activo{color:var(--tinta)}

h1{
  margin:0 0 14px; font-size:1.62rem; font-weight:500; line-height:1.25;
  letter-spacing:-.01em;
}
h2{
  margin:0 0 14px; font-size:.76rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--tenue);
}
section{margin-top:44px; padding-top:26px; border-top:1px solid var(--linea)}
p{margin:0 0 12px}
.entrada{color:#B9B5C6; font-size:1.02rem}
b{font-weight:500}

/* Las tres cifras grandes. Sin adornos: el número y lo que significa. */
.cifras{display:flex; flex-wrap:wrap; gap:30px}
.cifras p{margin:0; display:flex; flex-direction:column; min-width:120px}
.cifras b{font-size:2.5rem; line-height:1.05; font-weight:400; font-variant-numeric:tabular-nums}
.cifras span{font-size:.78rem; color:var(--tenue); margin-top:4px}

/* Barras horizontales: etiqueta, barra, número. */
.barras{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.barras li{display:grid; grid-template-columns:minmax(88px,26%) 1fr auto; gap:13px; align-items:center}
.etq{font-size:.86rem; color:#B9B5C6}
.barra{width:100%; height:8px; display:block}
.val{font-size:.86rem; color:var(--tenue); font-variant-numeric:tabular-nums; min-width:2ch; text-align:right}

/* El patrón del día como puntos apilados: cada emisión es un punto (`_puntos()` en
   `app/observatorio.py`). El SVG escala con el ancho y los círculos se quedan redondos. */
.puntos{display:block; width:100%; height:auto; margin:4px 0 2px}

/* El pulso del día: 24 barras verticales, una por hora UTC. */
.horas{list-style:none; margin:0; padding:0; display:flex; gap:4px; align-items:flex-end}
.horas li{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px}
.vertical{width:100%; height:52px; display:block}
.horas span{font-size:.56rem; color:var(--tenue); font-variant-numeric:tabular-nums}

.motivos{list-style:none; margin:10px 0 0; padding:0}
.motivos li{color:#B9B5C6; font-size:.92rem; padding:3px 0}
.geo{color:var(--tenue)}
.pie{font-size:.8rem; color:var(--tenue); margin-top:14px}
.vacio{color:var(--tenue)}
.hora .cuenta{color:var(--tinta)}

/* La prensa junto a las almas (`app/prensa.py`). Los continentes vienen plegados: los titulares
   pueden ser duros, y esta página la lee también quien llegó en un mal momento. `<details>`
   funciona sin JavaScript y sigue siendo texto que un buscador lee. */
h3.sub{margin:22px 0 10px; font-size:.92rem; font-weight:500; color:var(--tinta)}
h3.sub small{color:var(--tenue); font-weight:400; font-size:.78rem}
.alma .horas{margin-bottom:6px}
details.cont{border-top:1px solid var(--linea)}
details.cont:first-of-type{border-top:0}
details.cont summary{
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  padding:13px 0; list-style:none;
  font-size:.72rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--tenue);
}
details.cont summary::-webkit-details-marker{display:none}
details.cont summary::after{content:"+"; font-size:1rem; letter-spacing:0; color:var(--tenue)}
details.cont[open] summary::after{content:"\2013"}
details.cont summary:focus-visible{outline:2px solid var(--violeta); outline-offset:2px}
details.cont summary .n{margin-left:auto; margin-right:14px; letter-spacing:0; font-variant-numeric:tabular-nums}
ul.titulares{list-style:none; margin:0; padding:0 0 8px}
.titulares li{padding:9px 0; border-top:1px solid var(--linea)}
.titulares li:first-child{border-top:0}
.tit{display:block; color:var(--tinta); text-decoration:none; font-size:.95rem; line-height:1.4}
.tit:hover, .tit:focus-visible{text-decoration:underline}
.fuente{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:5px;
        font-size:.74rem; color:var(--tenue)}
.fuente b{color:#B9B5C6}
.chip{border:1px solid var(--linea); border-radius:999px; padding:0 8px; font-size:.66rem; letter-spacing:.06em}
.chip.estatal{border-color:rgba(157,78,221,.55); color:#C9A0EE}
.idm{text-transform:uppercase; letter-spacing:.12em; font-size:.62rem}

.ir{margin-top:46px}
.ir a{
  display:inline-block; color:var(--tinta); text-decoration:none;
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid rgba(232,228,240,.22); border-radius:999px; padding:14px 30px;
}
footer{margin-top:40px; font-size:.78rem; color:var(--tenue)}
footer a{color:var(--tenue)}

@media (max-width:480px){
  main{padding:26px 16px 64px}
  h1{font-size:1.36rem}
  .cifras{gap:22px}
  .cifras b{font-size:2.1rem}
  /* Una etiqueta de hora sí y otra no: 24 números de 6 px no se leen en 360, y la forma de la
     curva —que es lo que dice algo— se sigue viendo entera. */
  .horas li:nth-child(even) span{visibility:hidden}
}