/* El Pulso de Apatzingán.
 *
 * Una página con un número, un renglón de clima y una lista. Cinco reglas:
 *
 *   1. El número manda: nada compite con él en la primera pantalla.
 *   2. Ningún adorno. Al lado de una cifra de muertos, un adorno es una falta de
 *      respeto.
 *   3. Todo lo que se toca mide 44 píxeles o más, y se siente al tocarlo.
 *   4. Sin fuentes de fuera, sin librerías, sin imágenes. Abre con datos malos.
 *   5. Lo que se ve, se ve sin JavaScript; el JavaScript solo agrega lo que se
 *      toca.
 *
 * Los números van en cifras de ancho fijo (tabular-nums): si no, al cambiar la
 * temperatura la línea entera se mueve y la página parece temblar. */

:root {
  /* Fondo y tinta. En un teléfono, el fondo oscuro gasta menos batería. */
  --fondo: #0a0a0b;
  --tinta: #f4f4f5;
  --tinta-media: #9a9aa2;
  --tinta-baja: #6b6b73;
  --linea: #232327;
  --acento: #e8c547;

  /* El calor. Colores apagados a propósito: en Apatzingán la mitad del año está
     en naranja, y si el naranja grita, deja de avisar. */
  --fresco: #7cc4e8;
  --calor: #ddc257;
  --fuerte: #dc9a55;
  --muy-fuerte: #d97a5c;
  --extremo: #e0655f;

  --ancho: 34rem;
  --margen: 1.25rem;

  /* Las dos letras de la página, cada una con su papel.
     · La de título es una serif de las que trae el aparato: mayúsculas, apretada. Se
       lee como una lápida o como un expediente, que es el registro que busca esto. No
       se baja ninguna letra de internet: una página anónima no le pide nada a nadie, y
       eso incluye las letras.
     · La de máquina es un monoespaciado, para lo que es dato: cifras, fechas, conteos. */
  --letra-titulo: "Bitter", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --letra-maquina: "Bitter", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* La página es oscura siempre, en cualquier aparato y con cualquier tema.
 *
 * Aquí hubo un bloque que respondía al modo claro del sistema y pintaba la página en
 * blanco. No se usaba —cada tema pisa esos valores— y era una trampa: el día que a un
 * tema se le olvidara un color, la página amanecería en blanco. Un contador de muertos
 * no se ve en blanco, y no es un gusto: el blanco es el color con el que se archiva lo
 * que ya no pasa.
 */
* { box-sizing: border-box; }

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

:root { --vh: 100dvh; }

body {
  margin: 0;
  max-width: none;
  padding: 0;
  min-height: var(--vh);
  background: var(--fondo);
  color: var(--tinta);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* Cifras de ancho fijo para todo lo que cambia en vivo. */
.cifra, .clima-temp, .dias, .mes-conteo, .mes-dias {
  font-family: var(--letra-maquina);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

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

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Aviso mientras los datos sean de mentiras --- */

.aviso {
  margin: 1.1rem 0 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--tinta-baja);
}
.aviso strong { color: var(--tinta-media); font-weight: 600; }

/* --- El número --- */

.hoja { min-height: 100dvh; display: flex; flex-direction: column; }

/* La portada: la cifra y el clima. En el teléfono van uno debajo del otro; en
   pantalla ancha, el clima se pasa al lado. */


@media (min-width: 44rem) {
    }

/* El mes, en letras grandes y de colores, hasta abajo de la cabeza. Cada letra
   cambia de color: es lo único de la página que se permite ser vistoso, y es a
   propósito — la página es una protesta, no un tablero. */
.mes-etiqueta {
  margin: clamp(1.25rem, 4vh, 2rem) 0 0;
}

.mes-grande {
  display: block;
  font-size: clamp(1.9rem, 11vw, 3.1rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
}

.mes-grande .letra { display: inline-block; }
.mes-grande .c1 { color: #4285f4; }
.mes-grande .c2 { color: #ea4335; }
.mes-grande .c3 { color: #fbbc05; }
.mes-grande .c4 { color: #34a853; }

.cifra-boton {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cifra {
  display: block;
  margin: 0 auto;
  font-size: clamp(6.5rem, 42vw, 13rem);
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: -0.055em;
  -webkit-tap-highlight-color: transparent;
}

/* Cuando el JavaScript alcanza a poner el número como botón, se siente. */
.cifra-boton:active .cifra { transform: scale(0.985); }

.cifra-boton { margin-bottom: 0.6rem; }

/* Cuando el mes no trae noticias —un mes cerrado, del que sólo hay número—, la
   cifra no es un botón: se ve igual, pero no invita a tocar nada. */
.cifra-sin-noticias { cursor: default; }
.cifra-sin-noticias:active .cifra { transform: none; }
.cifra-sin-noticias[aria-expanded="true"] .cifra { box-shadow: none; }

.mes-pie {
  margin: 0.6rem 0 0;
  font-size: 1rem;
  color: var(--tinta-media);
}
.dias { color: var(--tinta-baja); }

/* Las noticias se abren tocando la cifra: no hay botón que las anuncie. Cuando
   están abiertas, la cifra se marca con una raya corta debajo. */
.cifra-boton[aria-expanded="true"] .cifra {
  box-shadow: 0 0.06em 0 0 var(--acento);
}

/* --- El clima: cada dato en su renglón --- */

.clima {
  margin-top: clamp(1.5rem, 5vh, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
  text-align: center;
}

.clima p { margin: 0; }

.clima-temp {
  font-size: clamp(2rem, 10vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  color: var(--tinta);
}

.clima-sensacion {
  margin-top: 0.3rem;
  font-size: 1.05rem;
  color: var(--tinta-media);
  font-weight: 600;
}

.clima-etiqueta {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-baja);
  font-weight: 500;
}

/* El clima se queda en la temperatura y la sensación: dos números y nada más. */


/* --- Las notas --- */

.notas { margin-top: clamp(1.25rem, 4vh, 2.25rem); }

.lista { list-style: none; margin: 0; padding: 0; }
.lista[hidden] { display: none; }

.titular {
  padding: 1rem 0;
  border-top: 1px solid var(--linea);
}
.titular:first-child { border-top: 0; padding-top: 0; }
.titular[hidden] { display: none; }

.titular-cabeza {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  margin-bottom: 0.3rem;
}

.titular-fecha {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-baja);
  white-space: nowrap;
}

.titular-medio {
  font-size: 0.85rem;
  color: var(--tinta-baja);
  margin-left: auto;
}

.titular-texto {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* El titular entero es el blanco del dedo: se toca para abrir la nota. */
.titular-texto a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration-color: var(--linea);
  text-underline-offset: 4px;
}
.titular-texto a:hover { text-decoration-color: var(--tinta-baja); }

.mas {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 1.25rem;
  padding: 0.7rem 0;
  border: 1px solid var(--linea);
  border-radius: 0;
  background: none;
  color: var(--tinta-media);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mas:hover { color: var(--tinta); border-color: var(--tinta-baja); }
.mas[hidden] { display: none; }

/* --- La línea del tiempo --- */

.tiempo {
  margin-top: clamp(1.75rem, 6vh, 3rem);
  border-top: 1px solid var(--linea);
  padding-top: 1.5rem;
}

.tiempo-titulo {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-baja);
  font-weight: 600;
}

.meses { list-style: none; margin: 0; padding: 0; }

.mes-fila {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.75rem;
  align-items: baseline;
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0 0.7rem 0.75rem;
  border: 0;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--linea);
  background: none;
  color: var(--tinta-media);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mes-fila:hover { color: var(--tinta); }
.mes-fila:last-child { border-bottom: 0; }

.mes-nombre { font-size: 1rem; }
.mes-anio { color: var(--tinta-baja); font-size: 0.85em; }
.mes-conteo { font-size: 1.1rem; font-weight: 600; color: var(--tinta); }
.mes-dias { font-size: 0.85rem; color: var(--tinta-baja); letter-spacing: 0.04em; }

.mes-fila[aria-current="true"] {
  border-left-color: var(--acento);
  color: var(--tinta);
}

/* Los meses de los que sólo se guarda el número: no se pueden abrir, así que no
   se ofrecen como si tuvieran notas. Se marcan con el número en gris. */
.mes-solo-numero { cursor: default; }
.mes-solo-numero .mes-conteo { color: var(--tinta-media); }
.mes-solo-numero:hover { color: var(--tinta-media); }

@media (prefers-reduced-motion: no-preference) {
  .cifra { animation: entra 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  @keyframes entra {
    from { opacity: 0; transform: translateY(0.06em); }
    to { opacity: 1; transform: none; }
  }
}

@media (min-width: 30rem) {
  body { font-size: 18px; --margen: 1.75rem; }
  .titular-texto { font-size: 1.12rem; }
}


/* La letra de la página: Bitter, servida desde este mismo sitio.
 *
 * Va recortada a los signos que la página usa (29 kB) y no se le pide a ningún
 * servidor ajeno: quien abre la página no contacta a nadie más que a este sitio, y eso
 * incluye la letra. La licencia y la explicación están en `assets/letras/`.
 *
 * Es una slab serif: palo seco con remates cuadrados. Se lee como un sello o como un
 * membrete de registro —que es lo que esto es— y no como la letra de cualquier
 * plantilla. */
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("letras/bitter.woff2") format("woff2");
}

/* ==========================================================================
   Los temas del mes
   ==========================================================================

   Cada mes puede traer su tema (ver datos/temas.json). El tema cambia cómo se ve
   la página, nunca lo que dice: los números y las palabras son los mismos.

   La línea que no se cruza: nada de sangre, nada de imágenes de hechos, nada que
   convierta la muerte en espectáculo. Un tema puede ser oscuro, seco, de mal
   agüero; lo que no puede es ser morboso. */

.mes-marca { display: none; }

/* --- Expediente: octubre de 2026 ---
   El mes con tramos tachados, como un documento al que le borraron lo que no
   debía leerse. Es exactamente lo que esta página hace con los nombres. */

[data-tema="expediente"] {
  --fondo: #0c0b0a;
  --fondo-alto: #14120f;
  --tinta: #ece7dd;
  --tinta-media: #a49c8e;
  --tinta-baja: #6e675c;
  --linea: #262320;
  --acento: #d8a13a;
}

/* La luz viene de abajo, como una lámpara de oficina a media noche: es lo único
   que ilumina la página, y el número es lo que queda más cerca de ella. */
[data-tema="expediente"] body {
  background-image: radial-gradient(
    120% 70% at 50% 118%, #d8a13a1f 0%, #d8a13a0a 38%, transparent 72%
  );
  background-attachment: fixed;
}

[data-tema="expediente"] .cifra {
  color: #ffffff;
  font-weight: 800;
}

[data-tema="expediente"] .mes-pie,
[data-tema="expediente"] .clima,
[data-tema="expediente"] .mes-fila {
  font-family: var(--letra-maquina);
  letter-spacing: 0.01em;
}

/* El tachón: dos tramos negros encima del mes, uno más corto que el otro. */
[data-tema="expediente"] .mes-grande { position: relative; }

[data-tema="expediente"] .mes-grande::before,
[data-tema="expediente"] .mes-grande::after {
  content: "";
  position: absolute;
  left: 0;
  height: 0.2em;
  background: #070605;
  box-shadow: 0 0 0 1px #ffffff08;
}

[data-tema="expediente"] .mes-grande::before { top: 0.3em; width: 62%; }
[data-tema="expediente"] .mes-grande::after { bottom: 0.22em; left: 34%; width: 38%; }

[data-tema="expediente"] .clima-temp { color: var(--acento); }
[data-tema="expediente"] .clima-sensacion { color: #e0d6c4; }

/* --- Cinta: sobre la banda amarilla y negra, corrida un grado --- */

[data-tema="cinta"] 
/* El único rayado de la hoja, y es a propósito: la cinta amarilla y negra de
   «no pasar» del tema Cinta. El detector de diseño lo marca como patrón repetido;
   aquí el patrón es el dibujo, no un adorno. */
[data-tema="cinta"] .mes-grande::before {
  content: "";
  position: absolute;
  left: -50vw;
  right: -50vw;
  top: 50%;
  height: 0.55em;
  transform: translateY(-50%) rotate(-1deg);
  background: repeating-linear-gradient(135deg, #d8a13a 0 14px, #14120f 14px 28px);
  opacity: 0.85;
  z-index: -1;
}

[data-tema="cinta"] .mes-grande { position: relative; z-index: 1; }
[data-tema="cinta"] .mes-grande .letra { color: #14120f; }

/* --- Luto: sin un solo color --- */

[data-tema="luto"] {
  --tinta: #e8e8e8;
  --tinta-media: #9c9c9c;
  --tinta-baja: #6a6a6a;
  --acento: #cfcfcf;
}

[data-tema="luto"] .mes-grande .letra { color: #e8e8e8; }
[data-tema="luto"] .clima-temp,
[data-tema="luto"] .clima-sensacion { color: #e8e8e8; }
[data-tema="luto"] .cabeza::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  margin: 0 auto 1.25rem;
  background: #e8e8e8;
}

/* --- Luz: el número iluminado desde abajo --- */

[data-tema="luz"] {
  --fondo: #050506;
  --tinta: #ffffff;
  --tinta-media: #8f8f96;
  --tinta-baja: #5c5c63;
}

[data-tema="luz"] .mes-grande .letra { color: #ffffff; }
[data-tema="luz"] .cifra { color: #ffffff; }

[data-tema="luz"] body {
  background-image: radial-gradient(
    100% 60% at 50% 112%, #ffd76a2b 0%, #ffd76a0d 40%, transparent 70%
  );
  background-attachment: fixed;
}
[data-tema="luz"] .clima-temp { color: #ffd76a; }
[data-tema="luz"] .clima-sensacion { color: #ffffff; }


/* ==========================================================================
   Tema Rojo: el que trae octubre
   ========================================================================== */

[data-tema="sangre"] {
  --fondo: #17110f;
  --fondo-alto: #221917;
  --tinta: #f7f2e9;
  --tinta-media: #b6a89d;
  --tinta-baja: #7d726a;
  --linea: #ffffff1f;
  --acento: #f7f2e9;
}

[data-tema="sangre"] body { background: var(--fondo); }

/* El único color de la página, y va en un solo lugar: el escalón. */
[data-tema="sangre"] { --trazo: #d94f3d; }

/* El clima va en el pie de la portada, sin bordes ni cajas: dos números. */

/* El lugar, en letras enormes: es lo primero que se lee. */
.titulo-lugar {
  margin: 0;
  font-size: clamp(2.4rem, 15vw, 6rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.total-etiqueta {
  margin: 1.5rem 0 0.2rem;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

/* El total del registro: el número que de verdad importa. */
.total-cifra {
  margin: 0;
  font-family: var(--letra-maquina);
  font-variant-numeric: tabular-nums;
  font-size: clamp(5rem, 30vw, 11rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.05em;
}

.total-pie {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  color: var(--tinta-media);
}

/* --- Las bajas del mes, en su marcador --- */

.mes {
  margin-top: clamp(2rem, 6vh, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
}

.mes-etiqueta { margin: 0 0 0.6rem; }
.mes-fecha { margin: 0.5rem 0 0; font-size: 0.95rem; color: var(--tinta-media); }

.reloj {
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  gap: 0.11em;
  font-family: var(--letra-maquina);
  font-variant-numeric: tabular-nums;
}

.digito {
  display: inline-block;
  min-width: 0.66em;
  padding: 0.05em 0.06em;
  border-radius: 0.07em;
  /* La ventanilla del contador: fondo rojo, un filo de luz arriba y sombra abajo, como
     el hueco de una máquina de fichas. El rojo se queda hondo a propósito —el rojo vivo
     con letra blanca encima es de lo que peor se lee— y así el número se lleva el ojo. */
  background: linear-gradient(180deg, #b8382a 0%, #7d2114 100%);
  box-shadow: inset 0 1px 0 #ffffff26, inset 0 -1px 0 #00000059, 0 3px 14px #0000008f;
  /* El tamaño lo pone la cifra entera, no el dígito: así el marcador crece y encoge
     de una pieza. */
  font-size: 1em;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.digito-cara { display: block; color: #ffffff; }
.digito-coma { font-size: 1em; font-weight: 800; align-self: flex-end; color: var(--tinta); }

/* El volteo: el dígito que entra empuja al que estaba, como en un marcador de
   aeropuerto. Es sólo cuando la cifra cambia; la primera vez no se mueve. */
@media (prefers-reduced-motion: no-preference) {
  .digito { position: relative; overflow: hidden; }
  .digito-cara { animation: ninguna 1ms; }
  .digito[data-voltea] .digito-cara { animation: aplasta 340ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  @keyframes aplasta {
    0% { transform: translateY(-108%) scaleY(1.35); }
    55% { transform: translateY(6%) scaleY(0.9); }
    100% { transform: translateY(0) scaleY(1); }
  }
}

/* --- La línea del tiempo del registro --- */

.avance-total {
  margin: 0 0 1.5rem;
  font-family: var(--letra-maquina);
  font-size: clamp(2.6rem, 16vw, 4.5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
}

.avance-total-pie {
  display: block;
  margin-top: 0.4rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--tinta-media);
}

.avance { list-style: none; margin: 0; padding: 0; }

.avance-mes {
  display: grid;
  grid-template-columns: 3.6rem 1fr 2.4rem 3.2rem;
  gap: 0.6rem;
  align-items: center;
  padding: 0.55rem 0;
  border-top: 1px solid var(--linea);
  font-size: 0.95rem;
}
.avance-mes:first-child { border-top: 0; }

.avance-nombre {
  font-family: var(--letra-maquina);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--tinta-media);
  white-space: nowrap;
}

.avance-barra {
  display: block;
  height: 0.55rem;
  background: #00000033;
  border-radius: 999px;
  overflow: hidden;
}
.avance-barra > span {
  display: block;
  height: 100%;
  background: #ffffff;
  border-radius: 999px;
  opacity: 0.85;
}

.avance-cifra {
  font-family: var(--letra-maquina);
  font-weight: 700;
  text-align: right;
}

.avance-acumulado {
  font-family: var(--letra-maquina);
  font-size: 0.85rem;
  text-align: right;
  color: var(--tinta-media);
}
.avance-acumulado::before { content: "= "; opacity: 0.7; }

.avance-en-curso .avance-nombre { color: var(--tinta); }
.avance-en-curso .avance-cifra { color: var(--tinta); }


/* ==========================================================================
   La portada: el marcador y nada más
   ==========================================================================

   Todo cabe en la pantalla, sin bajar. La jerarquía es una sola: el número. El
   nombre del lugar va detrás, fundido con el rojo, como una marca de agua; el
   clima es un pie de página diminuto; y las noticias no existen hasta que se
   piden. Si algo compite con el número, está mal. */

.hoja { min-height: var(--vh); }

/* Seis renglones: las esquinas, el nombre, la fecha, el contador que se estira para
   quedar al centro, el bloque del mes y el trazo del año hasta abajo. El orden importa:
   si el contador no es el que se estira, el hueco se abre donde no va.
 *
 * La altura es un mínimo, no un tope: en una pantalla donde no quepa todo —un nombre
 * de lado a lado ocupa mucho— la página se recorre. Recortar sería peor: lo que no se
 * ve, no existe. */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto auto;
  min-height: var(--vh);
  /* Ancho de casi toda la ventana: el nombre tiene que leerse de lado a lado, y para
     eso el hero no puede quedarse en una columna angosta. El `width: 100%` es lo que
     hace que se estire: con `margin: auto` a secas, el hero se encoge al tamaño de su
     contenido y el nombre se queda chico en una pantalla ancha. */
  width: 100%;
  max-width: min(100%, 84rem);
  margin: 0 auto;
  padding: 0 var(--margen);
}

/* El estado, de fondo: la silueta de Michoacán con un punto en Apatzingán.
 *
 * Es una marca de agua: está para decir de dónde es la cifra, no para que se lea. Por
 * eso va en una línea de un pelo, muy por debajo del nombre en contraste, no recibe
 * toques y no la anuncia el lector de pantalla. El punto sí va en el rojo del tema:
 * son tres píxeles y es lo único que tiene que encontrar el ojo.
 *
 * Va absoluta dentro del hero —que ya es `position: relative`— para no meterse en la
 * cuadrícula: no empuja nada, no le quita aire a nadie. */
.estado {
  position: absolute;
  top: clamp(0.1rem, 1vh, 1rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(52vw, 13rem);
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}
.estado-linea {
  fill: none;
  stroke: var(--tinta-baja);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.estado-punto {
  fill: var(--trazo, #d94f3d);
  /* Un filo del color del fondo: así el punto se lee aunque caiga encima de una letra
     del nombre. Es la única cosa del fondo que tiene que encontrar el ojo. */
  stroke: var(--fondo);
  stroke-width: 2.2;
  paint-order: stroke fill;
}

/* El nombre del lugar: lo más grande de la página, de lado a lado de la pantalla. Va
   dibujado, así que se estira sin recortarse nunca. */
.lugar {
  display: block;
  /* El dibujo se deja salir un poco por las orillas: si la letra del aparato es un
     pelo más ancha de lo que se midió, se corta la primera o la última letra, y un
     recorte se ve como un error. */
  overflow: visible;
  width: calc(100% + 2 * var(--margen));
  margin-inline: calc(-1 * var(--margen));
  height: auto;
  margin-top: clamp(0.1rem, 1vh, 0.8rem);
  margin-bottom: 0;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* La fecha del día, debajo del nombre: el número de arriba es de hoy y eso se dice. */
.fecha {
  margin: clamp(0.1rem, 0.8vh, 0.5rem) 0 0;
  font-family: var(--letra-titulo);
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-baja);
  text-align: center;
}

/* El nombre del lugar va en blanco roto y es lo único dibujado de la página. */
/* La caja del dibujo es exactamente del tamaño del texto (403×86, medido), así que
   el nombre llena el ancho de la pantalla sin recortarse nunca, en cualquier
   aparato. Va arriba y es lo más grande de la página. */
.lugar text {
  /* Va detrás del número: por eso el tono apagado y la sombra. La letra no compite,
     da profundidad: se ve que está atrás, en la pared. */
  fill: #f7f2e9a8;
  font-family: var(--letra-titulo);
  font-size: 66px;
  font-weight: 700;
}

/* El marcador: el número, y debajo el mes. Ocupa el centro de la pantalla. */
.marcador {
  position: relative;
  z-index: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.4rem, 1.5vh, 1.05rem);
  padding: 0.25rem 0;
  text-align: center;
}

/* El número: cifras de ancho fijo, mucho más grandes que cualquier letra de la
   página, y blancas. Es lo primero que ve el ojo y lo único que pesa. */
.total-cifra {
  margin: 0;
  font-family: var(--letra-maquina);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.06em;
  /* El tamaño se ajusta a la pantalla: que quepa sin scroll en un teléfono
     bajito y que se estire en uno grande. */
  font-size: min(30vh, 30vw, 13rem);
  color: var(--tinta);
}

/* El mes: se toca y se abren las noticias. Es lo único más que hay. */
/* El bloque del mes va aparte del contador, con aire de por medio: el número es una
   cosa y el mes que se puede abrir es otra. */
.mes-bloque {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(1.1rem, 4.5vh, 2.6rem);
  padding-top: clamp(0.8rem, 3vh, 1.8rem);
  text-align: center;
}

/* El mes descansa solo en su renglón, como el nombre del lugar: es el mes del que
   se está hablando, y no va pegado al link que abre las notas. */
.mes-solo {
  margin: 0;
  font-family: var(--letra-titulo);
  font-size: clamp(1.4rem, 6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--trazo, #d94f3d);
  line-height: 1;
}

/* El link que abre las notas: se ve como lo que es, un link. */
.mes-boton {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: clamp(0.1rem, 0.8vh, 0.5rem);
  padding: 0.5rem 0.2rem;
  border: 0;
  background: none;
  color: var(--tinta-media);
  font: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--tinta-baja);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mes-boton:hover { color: var(--tinta); text-decoration-color: var(--tinta-media); }
.mes-boton[aria-expanded="true"] { color: var(--tinta); }

body.con-cajon .hero { overflow: hidden; }

/* Un halo suave alrededor del número, como si el resto de la página se hundiera:
   es lo que hace que el ojo no tenga a dónde irse más que al número. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 45% at 50% 42%, #ffffff14 0%, transparent 70%);
  pointer-events: none;
}

/* Las esquinas del hero: el clima arriba a la izquierda, la pregunta del año arriba
   a la derecha. Van pegadas a los bordes y en chico porque son lo único que puede
   convivir con el número sin quitarle el ojo. */
.esquinas {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  padding-top: clamp(0.5rem, 1.8vh, 1.3rem);
}

/* El clima: dos números en un renglón, en chico y en la esquina. */
.clima {
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--tinta-baja);
  text-align: left;
}

/* La frase del clima va entera o no va: partida en dos renglones no se entiende. */
.clima-texto { white-space: nowrap; }

/* Sin lectura no hay renglón: antes de que conteste Open-Meteo se veía
   «— · sensación térmica de —», que es ruido. */
.clima[hidden] { display: none; }

.clima-dato { margin: 0; display: flex; align-items: baseline; gap: 0.35rem; }

.clima-temp {
  font-family: var(--letra-maquina);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--tinta-media);
}

.clima-sensacion {
  font-family: var(--letra-maquina);
  font-size: 0.95rem;
  color: var(--tinta-baja);
}

/* --- El cajón de las noticias ---
   No es parte de la página: sale cuando se pide y se va cuando se cierra. */

.telon {
  position: fixed;
  inset: 0;
  background: #00000073;
  z-index: 40;
}

.cajon {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  max-height: 86dvh;
  overflow: auto;
  padding: 1rem var(--margen) calc(1.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea);
  background: var(--fondo-alto);
  box-shadow: 0 -1.5rem 3rem #00000059;
  animation: sube 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sube {
  from { transform: translateY(100%); }
  to { transform: none; }
}

.cajon[hidden], .telon[hidden] { display: none; }

.cajon-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.cajon-titulo {
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

.cajon-cerrar {
  min-height: 44px;
  padding: 0 0.5rem;
  border: 0;
  background: none;
  color: var(--tinta);
  font: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .cajon { animation: sube 260ms cubic-bezier(0.22, 1, 0.36, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
  .cajon { animation: none; }
}

@media (min-width: 44rem) {
  .cajon {
    left: 50%;
    right: auto;
    width: min(40rem, 92vw);
    transform: translateX(-50%);
    border: 1px solid var(--linea);
    border-bottom: 0;
    border-radius: 1rem 1rem 0 0;
  }
}


/* ==========================================================================
   Las gráficas
   ==========================================================================

   Dos, y cada una dice algo que el número solo no dice: la serie de meses dice
   que la cosa va subiendo, y el pulso del mes dice que no son un promedio, son
   días sueltos con nombres. Van dibujadas a mano en SVG: pesan nada, se ven sin
   JavaScript y no hay librería que las rompa. */

.grafica {
  margin: clamp(1rem, 3vh, 1.75rem) 0 0;
  width: min(22rem, 100%);
  z-index: 1;
}

.grafica svg { display: block; width: 100%; height: auto; overflow: visible; }

.g-barra {
  fill: #0000003d;
  transition: fill 200ms ease;
}

.g-barra.g-actual { fill: #ffffff; }

.g-valor {
  fill: var(--tinta-media);
  font: 600 9px var(--letra-maquina);
  text-anchor: middle;
}

.g-actual + .g-valor { fill: #ffffff; }

.g-mes {
  fill: var(--tinta-media);
  font: 500 8px ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-anchor: middle;
}

.g-mes-actual { fill: #ffffff; font-weight: 700; }

.grafica-publicado { width: min(26rem, 100%); }

.g-nuestra { fill: #ffffff; }
.g-publicada { fill: #ffffff4d; }
.g-valor-publicado { fill: var(--tinta-baja); }

.grafica-publicado .grafica-pie { text-align: left; }
.grafica-publicado b { color: #ffffff; font-weight: 700; }

.grafica-nota {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.92em;
  color: var(--tinta-baja);
}

.grafica-pie {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--tinta-media);
}

/* El pulso del mes: una marca por día con bajas, más alta cuando hubo más de una. */
.cajon-pulso { display: block; flex: 0 0 auto; }
.pulso { display: block; width: 7rem; height: auto; }
.g-dia { fill: #ffffff; }
.g-diapunto { fill: #ffffff40; }
.g-base { stroke: var(--linea); stroke-width: 1; }

@media (max-width: 30rem) {
  .cajon-pulso { display: none; }
}

@media (min-width: 44rem) {
  .grafica { width: min(26rem, 100%); }
}


/* ==========================================================================
   La tasa, el corte y el escalón
   ==========================================================================

   La tasa es lo que hace que el número se sienta: «uno cada dos días» quiere decir
   que en dos días cualquiera de aquí se topa con uno, y eso no se redondea. El
   escalón es la misma verdad vista de lado: la pendiente es el argumento, y por eso
   no lleva ejes, ni cuadrícula, ni leyenda, ni barras —una gráfica de barras por mes
   se lee como tablero, y un tablero no indigna. */

.tasa {
  margin: 0;
  font-family: var(--letra-maquina);
  font-size: clamp(0.85rem, 3.4vw, 1rem);
  letter-spacing: 0.02em;
  color: var(--tinta-media);
  text-align: center;
}




/* El punto del final va dentro de la caja: el dibujo se estira a lo ancho y, sin
   esto, el punto se sale por la orilla en pantalla grande. */
}


/* El clima se sube un poco para no quedar encima del escalón. */


/* --- La tarjeta que se reenvía y el mensaje listo --- */

.comparte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0.5rem;
}

.boton-tarjeta, .boton-copiar {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0.6rem 1rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: none;
  color: var(--tinta-media);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.boton-tarjeta { border-color: var(--trazo, #d94f3d); color: var(--tinta); }
.boton-tarjeta:hover, .boton-copiar:hover { background: #ffffff0f; }

.aviso-copiado {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 60;
  margin: 0;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--fondo);
  font-size: 0.9rem;
}


/* ==========================================================================
   Los ajustes que pidió el dueño (6 oct)
   ========================================================================== */

/* «asesinatos» debajo del número: dice qué es la cifra en un renglón que se lee
   derecho, sin girar la cabeza. Va en chico y espaciada para que no le compita al
   número: el que manda sigue siendo el número. */
.total-linea {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.3rem, 1.2vh, 0.7rem);
  margin: 0;
}

.total-periodo {
  font-family: var(--letra-maquina);
  font-size: clamp(0.85rem, 3.2vw, 1rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-baja);
}

.total-palabra {
  font-size: clamp(0.95rem, 3.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

/* El calendario del mes: una casilla por día, con su número.
 *
 * Antes era una tira de rayitas y no se entendía —parecían dos palitos sueltos—.
 * Un calendario lo lee cualquiera de un golpe: los días con asesinatos van encendidos,
 * los que no, apagados, y el día de hoy va marcado. De paso dice en qué día vamos.
 */
.calendario {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  width: min(23rem, 100%);
  margin: clamp(0.6rem, 2.4vh, 1.3rem) auto 0;
}

.dia,
.dia-vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Los días que se pueden tocar necesitan dedo, no ratón: la casilla crece hasta
     donde el número sigue mandando en la pantalla. */
  height: clamp(2.75rem, 8vw, 2.75rem);
  border-radius: 3px;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* El número, blanco en los días que no hubo nada y rojo en los que sí: el color es el
   dato, y se lee desde lejos. Debajo, la marca crece con lo que pasó:
     · uno        → el número en rojo y una barra abajo
     · dos o tres → la casilla se tiñe de rojo
     · cuatro o más → se tiñe más y el número se agranda */
.dia { background: #ffffff0d; color: #ffffff; }

.dia-con-baja {
  background: #ffffff0d;
  color: var(--trazo, #d94f3d);
  font-weight: 700;
  box-shadow: inset 0 -0.22rem 0 var(--trazo, #d94f3d);
}
.dia-grave {
  background: rgba(217, 79, 61, 0.22);
}
.dia-peor {
  background: rgba(217, 79, 61, 0.4);
  font-size: 0.95rem;
}
.dia-hoy { outline: 1px solid var(--tinta); outline-offset: -1px; }
/* Los días con hechos se pueden tocar: son botones, y no deben parecer otra cosa. */
.dia-boton {
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 120ms ease;
}
.dia-boton:hover { background: rgba(217, 79, 61, 0.16); }
.dia-boton:focus-visible { outline: 2px solid var(--trazo, #d94f3d); outline-offset: 1px; }
/* Los días que todavía no llegan van más apagados que los que ya pasaron. */
.dia-futuro { background: none; color: #ffffff26; }

/* Los hechos de un día suelto: se abren al tocar un día del calendario.
   Mismo orden que el expediente —lugar, cuántas personas, qué pasó, de dónde salió—,
   porque es la misma información contada en la misma voz. */
/* Ojo: un bloque con display propio se ríe del atributo hidden, así que cada uno de
   los que se esconden al abrir un día lo declara aquí. */
.comparativo[hidden],
.grafica[hidden],
.cajon-hoja[hidden],
.dia-cajon[hidden] { display: none; }

.dia-cajon { margin: 0.4rem 0 1rem; }
.dia-cajon-titulo {
  margin: 0 0 0.7rem;
  font-family: var(--letra-titulo);
  font-size: 1.05rem;
  color: var(--tinta);
}
.dia-lista { list-style: none; margin: 0; padding: 0; }
.dia-hecho {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linea);
}
.dia-hecho:last-child { border-bottom: 0; }
.dia-hecho-cabeza {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.95rem;
  color: var(--tinta);
}
.dia-hecho-lugar { flex: 1; }
.dia-hecho-personas {
  font-family: var(--letra-maquina);
  color: var(--trazo, #d94f3d);
  font-weight: 700;
}
.dia-hecho-resumen {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: var(--tinta-media);
  line-height: 1.45;
}
.dia-hecho-fuentes {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--tinta-baja);
}
.dia-hecho-fuentes a { color: var(--tinta-baja); text-decoration-color: var(--linea); }
.dia-hecho-fuentes a:hover { color: var(--tinta-media); }
.dia-volver {
  margin-top: 0.9rem;
  padding: 0.4rem 0;
  border: 0;
  background: none;
  color: var(--tinta-baja);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--linea);
  text-underline-offset: 3px;
}
.dia-volver:hover { color: var(--tinta); }

/* ==========================================================================
   El archivo: los meses anteriores
   --------------------------------------------------------------------------
   Vive aparte de la portada, con su propia liga. Misma letra, mismos colores y la
   misma regla: el número primero y nada encimado. Un mes por hoja.
   ========================================================================== */

.ar {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--letra-maquina);
  margin: 0;
  padding: clamp(1.5rem, 5vw, 3.5rem) var(--margen) 4rem;
}
.ar-hoja { max-width: 34rem; margin: 0 auto; }

.ar-volver {
  margin: 0 0 1.6rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.ar-volver a { color: var(--tinta-baja); text-decoration: none; border-bottom: 1px solid var(--linea); }
.ar-volver a:hover { color: var(--tinta); }

.ar-titulo {
  margin: 0;
  font-family: var(--letra-titulo);
  font-size: clamp(1.5rem, 7vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ar-cifra {
  margin: 0.5rem 0 0.2rem;
  font-family: var(--letra-titulo);
  font-size: clamp(2.6rem, 13vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--trazo, #d94f3d);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.ar-cifra-palabra {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

.ar-resumen { margin: 0.4rem 0 0; color: var(--tinta-media); font-size: 0.92rem; }
.ar-nota { margin: 0.2rem 0 0; color: var(--tinta-baja); font-size: 0.85rem; }

.ar-meses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin: 1.4rem 0 0;
  padding: 0.7rem 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ar-mes { color: var(--tinta-baja); text-decoration: none; }
.ar-mes:hover { color: var(--tinta); }
.ar-mes-aqui { color: var(--trazo, #d94f3d); font-weight: 700; }

.ar-calendario { margin-top: 1.4rem; }
.ar-calendario .dia-boton { color: var(--trazo, #d94f3d); text-decoration: none; }

.ar-dias { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.ar-dia { margin: 0 0 1.6rem; scroll-margin-top: 1rem; }
.ar-dia-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--linea);
  font-family: var(--letra-titulo);
  font-size: 1rem;
  font-weight: 700;
}
.ar-dia-cuenta {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--trazo, #d94f3d);
  white-space: nowrap;
}
.ar-hechos { list-style: none; margin: 0; padding: 0; }

.ar-filas { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.ar-fila {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linea);
}
.ar-fila-mes {
  flex: 1;
  color: var(--tinta);
  text-decoration: none;
  font-family: var(--letra-titulo);
  font-size: 1.05rem;
  text-transform: capitalize;
}
.ar-fila-mes:hover { color: var(--trazo, #d94f3d); }
.ar-fila-anio { color: var(--tinta-baja); font-size: 0.85rem; }
.ar-fila-cuenta {
  font-family: var(--letra-titulo);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.ar-fila-dias { color: var(--tinta-baja); font-size: 0.8rem; white-space: nowrap; }

.ar-pie {
  margin: 2.4rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
  color: var(--tinta-baja);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Las semanas del mes, en cuatro o cinco columnas: el calendario dice qué días, esto
   dice si hubo racha. Va arriba de los días, chico y en el rojo del tema. */
.ar-semanas { margin: 1.6rem 0 0; }
.ar-semanas-cols {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 5.5rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--linea);
}
.ar-semana {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: 0.2rem;
}
.ar-semana-num {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--tinta-media);
  font-variant-numeric: tabular-nums;
}
.ar-semana-barra {
  display: block;
  width: 100%;
  min-height: 2px;
  background: var(--trazo, #d94f3d);
  border-radius: 1.5px 1.5px 0 0;
}
.ar-semana-pie {
  flex: 0 0 auto;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-baja);
}
.ar-semanas-pie {
  margin: 0.35rem 0 1.4rem;
  font-size: 0.78rem;
  color: var(--tinta-baja);
}

/* La hoja del método: las reglas, las fuentes y los datos abiertos.
   Misma piel que el archivo, y el mismo criterio: número primero, lo demás en su lugar. */
.me-titulo {
  margin: 2.2rem 0 0.7rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--linea);
  font-family: var(--letra-titulo);
  font-size: 1.05rem;
  font-weight: 700;
}
.me-parrafo { margin: 0 0 0.7rem; color: var(--tinta-media); font-size: 0.92rem; line-height: 1.55; }
.me-lista { margin: 0 0 0.7rem; padding-left: 1.1rem; color: var(--tinta-media); font-size: 0.92rem; }
.me-lista li { margin: 0.35rem 0; line-height: 1.5; }
.me-lista b { color: var(--tinta); font-weight: 700; }

.me-fuentes { list-style: none; margin: 0 0 0.7rem; padding: 0; }
.me-fuente {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--linea);
}
.me-fuente-nombre { flex: 1; color: var(--tinta); text-decoration: none; font-size: 0.92rem; }
.me-fuente-nombre:hover { color: var(--trazo, #d94f3d); }
.me-fuente-cuenta {
  font-family: var(--letra-titulo);
  font-weight: 700;
  color: var(--tinta-media);
  font-variant-numeric: tabular-nums;
}

.me-correcciones { list-style: none; margin: 0 0 0.7rem; padding: 0; }
.me-correccion { padding: 0.55rem 0; border-bottom: 1px solid var(--linea); }
.me-correccion-cabeza {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinta-baja);
}
.me-correccion-que { color: var(--trazo, #d94f3d); font-weight: 700; }
.me-correccion-hecho { margin-left: auto; }
.me-correccion-texto { margin: 0.3rem 0 0; color: var(--tinta-media); font-size: 0.88rem; line-height: 1.5; }

.me-descargas { list-style: none; margin: 0 0 0.7rem; padding: 0; }
.me-descargas li { padding: 0.45rem 0; border-bottom: 1px solid var(--linea); color: var(--tinta-baja); font-size: 0.88rem; }
.me-descargas a { color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--linea); }
.me-descargas a:hover { color: var(--trazo, #d94f3d); }

/* Las semanas del año, en barras.
 *
 * Una barra por semana, del arranque del registro a hoy. Lo alto es lo que cayó esa
 * semana; la más alta se queda encendida y su cuenta se escribe en el pie, y una línea
 * punteada marca el promedio. Así un pico se lee contra lo que es normal aquí, que es lo
 * único que hace que un pico signifique algo.
 */
.semanas {
  margin: 0;
}
.s-cols {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: clamp(2.2rem, 7vw, 3rem);
  border-bottom: 1px solid var(--linea);
}
.s-semana {
  flex: 1 1 0;
  display: flex;
  align-items: flex-end;
  height: 100%;
}
.s-semana i {
  display: block;
  width: 100%;
  background: var(--trazo, #d94f3d);
  opacity: 0.5;
  border-radius: 1px 1px 0 0;
}
.s-semana.s-peor i { opacity: 1; }
/* El promedio: una raya que dice dónde está lo normal. Sin ella, la barra más alta es
   sólo la más alta. */
.s-promedio {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed #ffffff2e;
  pointer-events: none;
}
.s-pie {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.35rem;
  font-family: var(--letra-maquina);
  font-size: 0.86rem;
  color: var(--tinta-baja);
}
/* La calaverita, parada sobre la peor semana. Chica y sin sombra: es una marca, no una
   figura. */
.s-calaverita {
  position: absolute;
  top: 0;
  width: clamp(0.9rem, 3.4vw, 1.1rem);
  height: clamp(0.9rem, 3.4vw, 1.1rem);
  margin-left: calc(-0.5 * clamp(0.9rem, 3.4vw, 1.1rem));
  pointer-events: none;
}
.s-calaverita svg { display: block; width: 100%; height: 100%; }
.e-hueso { fill: var(--tinta-media); }
.e-ojo { fill: var(--fondo); }

.s-pie span:last-child { color: var(--trazo, #d94f3d); }

/* Las gráficas, más abajo: no compiten con el número. */
.grafica { margin-top: clamp(1.5rem, 6vh, 3rem); }

/* La gráfica de meses, en rojo. */
/* Cada mes con su color, para que la gráfica se lea de un golpe. El mes en curso
   va en rojo y más alto, que es el que importa. */
.g-barra { fill: #8fa8c8; }
.g-barra:nth-of-type(5n+2) { fill: #c8a05a; }
.g-barra:nth-of-type(5n+3) { fill: #7fb08a; }
.g-barra:nth-of-type(5n+4) { fill: #b98fb0; }
.g-barra:nth-of-type(5n+5) { fill: #d98a6a; }
.g-barra.g-actual { fill: var(--trazo, #d94f3d); }
.g-valor { fill: var(--tinta-media); }
.g-actual + .g-valor { fill: var(--trazo, #d94f3d); font-weight: 700; }
.g-mes { fill: var(--tinta-baja); }
.g-mes-actual { fill: var(--trazo, #d94f3d); }

/* El deslizador: cubre todo el trazo para poder agarrarlo en cualquier parte y
   arrastrarlo, como cuando uno mira el precio de una criptomoneda. El pulgar del







/* El pie de la gráfica ya no lleva el total: ese número ya está arriba. */
.grafica-pie { color: var(--tinta-baja); }


/* ==========================================================================
   El comparativo y la tira de días
   ========================================================================== */

/* El comparativo va debajo del número, en letra de máquina de escribir y chico:
   dice de dónde sale la cifra y contra qué se puede contrastar. Es una línea, no
   un párrafo, y es lo que vuelve el número una prueba en lugar de una afirmación. */
.comparativo {
  display: grid;
  gap: 0.15rem;
  margin: clamp(0.25rem, 1.5vh, 0.6rem) 0 0;
  font-family: var(--letra-maquina);
  font-size: clamp(0.86rem, 2.9vw, 1rem);
  color: var(--tinta-media);
  text-align: center;
}

.comp-linea { display: flex; justify-content: center; gap: 0.5rem; }
.comp-etiqueta { color: var(--tinta-baja); }
.comp-linea b { color: var(--tinta); font-weight: 700; font-variant-numeric: tabular-nums; }

.comp-dif {
  font-weight: 700;
  color: var(--trazo, #d94f3d);
  letter-spacing: 0.02em;
}

/* «en los 4 meses con balance publicado» no es letra chica: es lo que dice contra
   qué se está comparando. Va del mismo tamaño que el resto y con tinta legible. */
.comp-pie { font-size: 1em; color: var(--tinta-media); }


/* La hoja del mes, en el cajón: discreta, al final, como lo que es —el archivo—. */
.cajon-hoja {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.85rem;
}
.cajon-hoja a {
  color: var(--tinta-baja);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cajon-hoja a:hover { color: var(--tinta-media); }