/* Los reportes públicos de SoundCheck CR.
 *
 * Hoja aparte de `app.css` a propósito. La aplicación es una herramienta de
 * trabajo —densa, en sans, veinte filas por pantalla— y esto es lo contrario:
 * una página para leer un texto largo de corrido, que abre alguien que recibió
 * un enlace por WhatsApp y no tiene cuenta ni sabe qué es una alerta.
 *
 * La paleta y la tipografía de título salen tal cual de soundcheckcr.com. No se
 * inventó una identidad nueva: esta página es la continuación del sitio, y lo
 * único que se agrega es la cara con la que se lee.
 *
 * Esa cara es IBM Plex Serif, y es la única decisión propia de acá. La
 * aplicación habla en sans porque es un instrumento; un artículo publicado
 * habla en serif porque es escritura. Es la misma superfamilia que el IBM Plex
 * Sans de la marca, así que es un hermano y no una cara prestada de otro lado.
 *
 * Las fuentes van autoalojadas: la política de seguridad de la aplicación tiene
 * `font-src 'self'` y un enlace a Google Fonts no carga. Sirve también para no
 * contarle a un tercero quién está leyendo qué reporte.
 */

/* Las caras se declaran en `fuentes.css`, que esta hoja y la pantalla de
   escribir cargan por separado. Declaradas en dos lados se separan el día que
   se cambie una. */

/* --- los símbolos ---------------------------------------------------------
 *
 * Los mismos valores de soundcheckcr.com, con los nombres de acá. Copiados y no
 * aproximados: si el sitio cambia el azul, este archivo tiene que cambiar con
 * él, y para eso hay que poder ver que son el mismo número. */

:root {
  --tinta: #0b1c26;
  --tinta-suave: #12303f;
  --tinta-media: #3c5a6b;
  --acero: #6b8494;
  --azul: #15638b;
  --azul-claro: #2a81ae;
  /* La señal de la marca. Acá tiene un solo trabajo y está explicado abajo. */
  --senal: #ef8f06;
  --papel: #fbfcfd;
  --papel-hueco: #edf1f3;
  --linea: #dde5ea;

  /* La medida del texto: entre 65 y 75 caracteres por renglón, que es lo que
     el ojo sigue sin perder el hilo al saltar de renglón. */
  --medida: 34rem;
  --ancho: 60rem;

  --paso-1: 0.5rem;
  --paso-2: 1rem;
  --paso-3: 1.5rem;
  --paso-4: 2.5rem;
  --paso-5: 4rem;
  --paso-6: 6rem;
}

/* --- la base --------------------------------------------------------------
 *
 * Un solo tema, en claro, y pintado explícito. La aplicación tampoco tiene modo
 * oscuro, y media identidad sin la otra se ve peor que una sola bien hecha. */

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Plex Serif", Georgia, "Times New Roman", serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--senal);
  color: var(--tinta);
}

a {
  color: var(--azul);
  text-decoration-color: var(--linea);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--azul-claro);
  text-decoration-color: currentColor;
}

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

/* Para quien navega con teclado y no quiere pasar por el encabezado entero. */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--paso-2);
  background: var(--tinta);
  color: var(--papel);
  z-index: 10;
}

.saltar:focus {
  left: 0;
}

/* --- la etiqueta mono -----------------------------------------------------
 *
 * El recurso firma de la marca, traído tal cual del sitio: versalitas en mono
 * con el tracking muy abierto. Es la voz de instrumento —fechas, redes,
 * cantidades— y por eso se reserva para los datos y nunca para la prosa. */

.mono {
  font-family: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acero);
  font-variant-numeric: tabular-nums;
}

/* La misma voz, en el azul del logo. Se reserva para los rótulos que sostienen
   la estructura —el de la portada y los años del registro—, que son los que le
   dan ritmo a la página. Las fechas y los pies siguen en gris: son dato
   secundario, y si todo fuera azul el azul dejaría de señalar nada. */
.mono--marca {
  color: var(--azul);
}

/* --- el marco -------------------------------------------------------------- */

.marco {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--paso-3);
}

.encabezado {
  padding: var(--paso-4) 0 var(--paso-3);
}

.encabezado__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--paso-3);
  flex-wrap: wrap;
}

.encabezado__marca {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.encabezado__marca img {
  height: 26px;
  width: auto;
  display: block;
}

/* La barra del sitio.
 *
 * Estas páginas se sirven en `soundcheckcr.com/reportes`, así que son una
 * sección del sitio y tienen que leerse como tal. Los enlaces van en la voz de
 * instrumento —mono, versalitas, gris— para que la barra no compita con el
 * titular del artículo, que es lo único que se vino a leer.
 *
 * Reemplaza al enlace de «volver a la aplicación», que dejó de tener sentido:
 * la cookie de sesión es de `app.soundcheckcr.com` y no viaja a este dominio,
 * así que acá no hay nunca nadie con sesión a quien ofrecérselo. */
.encabezado__nav {
  display: flex;
  align-items: center;
  gap: var(--paso-3);
  flex-wrap: wrap;
}

/* Una sola acción, y es la del sitio: acá se viene a leer, y a quien termina de
   leer lo que tiene sentido ofrecerle es una conversación. Los enlaces sueltos
   que había al lado —«Reportes», «Análisis», «Método»— eran tres maneras de
   ofrecerle irse a alguien que está leyendo. */
.encabezado__cta {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--linea-fuerte, var(--linea));
  border-radius: 999px;
  font-family: "Plex Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta);
}

.encabezado__cta:hover { border-color: var(--azul); }

/* --- la franja de vista previa --------------------------------------------
 *
 * Lo único que esta página dibuja además del artículo, y solo lo ve quien abre
 * un borrador desde la redacción. Va arriba de todo y en un tono que no se
 * pueda confundir con la página publicada. */

.previa {
  background: var(--tinta);
  color: var(--papel, #fff);
}

.previa__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--paso-3);
  flex-wrap: wrap;
  padding: 0.6rem 0;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.previa__fila a { color: inherit; }

.pie {
  margin-top: var(--paso-6);
  padding: var(--paso-4) 0;
  border-top: 1px solid var(--linea);
}

.pie__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--paso-3);
  flex-wrap: wrap;
}

/* ==========================================================================
 * La portada: un registro, no una cuadrícula de tarjetas
 *
 * Lo que se publica acá es una serie de lecturas a lo largo del tiempo, así
 * que el índice tiene forma de serie: la fecha en mono formando
 * una guía vertical a la izquierda y el año como corte. Una cuadrícula de
 * tarjetas diría que son piezas sueltas e intercambiables, que es justo lo que
 * no son.
 * ========================================================================== */

.portada__intro {
  padding: var(--paso-4) 0 var(--paso-5);
  border-bottom: 1px solid var(--tinta);
}

.portada__titulo {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: var(--paso-2) 0 0;
  text-wrap: balance;
}

.portada__bajada {
  max-width: var(--medida);
  margin: var(--paso-3) 0 0;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--tinta-media);
}

.anno {
  display: flex;
  align-items: center;
  gap: var(--paso-2);
  margin: var(--paso-5) 0 0;
}

.anno::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linea);
}

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

.entrada {
  border-bottom: 1px solid var(--linea);
}

.entrada__enlace {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--paso-3);
  padding: var(--paso-3) 0;
  text-decoration: none;
  color: inherit;
}

.entrada__enlace:hover .entrada__titulo {
  color: var(--azul);
}

.entrada__fecha {
  padding-top: 0.55rem;
}

.entrada__titulo {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  transition: color 0.15s ease;
}

.entrada__bajada {
  margin: var(--paso-1) 0 0;
  color: var(--tinta-media);
  font-size: 1rem;
  line-height: 1.6;
}

/* Lo que había acá —el pie de administración de cada entrada y la píldora de
   borrador— se fue con la portada pública a leer y nada más. Los borradores y
   las cifras viven en `/redaccion`, con la hoja de la aplicación. */

.vacio {
  padding: var(--paso-6) 0;
  text-align: center;
  color: var(--tinta-media);
}

/* ==========================================================================
 * El artículo
 * ========================================================================== */

.articulo {
  max-width: var(--medida);
  margin: 0 auto;
}

.articulo__ficha {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: var(--paso-5) 0 var(--paso-2);
}

.articulo__ficha span[aria-hidden] {
  color: var(--linea);
}

.articulo__titulo {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.125rem, 6vw, 3.375rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}

.articulo__bajada {
  margin: var(--paso-3) 0 0;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--tinta-media);
  text-wrap: pretty;
}

/* La regla que separa el encabezado del cuerpo. Corta y a la izquierda: una
   regla de ancho completo divide la página en dos, y esto es una sola pieza. */
.articulo__corte {
  width: 3.5rem;
  height: 2px;
  margin: var(--paso-4) 0;
  background: var(--azul);
  border: 0;
}

.articulo__cuerpo > :first-child {
  margin-top: 0;
}

/* Los mismos valores que en la pantalla de escribir. Un título lleva más aire
   arriba que abajo a propósito: queda pegado a lo que encabeza. */
.articulo__cuerpo p {
  margin: 0 0 1.1rem;
  text-wrap: pretty;
}

.articulo__cuerpo h2 {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 2.25rem 0 0.6rem;
  text-wrap: balance;
}

.articulo__cuerpo h3 {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 1.75rem 0 0.6rem;
  text-wrap: balance;
}

/* La raya que separa dos partes de un mismo reporte.
 *
 * Gris y de un píxel, con mucho aire arriba y abajo: lo que separa es el
 * espacio, y la línea solo lo hace visible. En gris y no en el azul de la
 * marca, que ya tiene su trabajo —la regla corta bajo la bajada— y repetirlo
 * acá le quitaría el suyo.
 *
 * No choca con `.articulo__corte`: esa vive fuera del cuerpo. */
.articulo__cuerpo hr {
  height: 0;
  margin: var(--paso-5) 0;
  border: 0;
  border-top: 1px solid var(--linea);
}

.articulo__cuerpo ul {
  margin: 0 0 1.1rem;
  padding-left: 1.1rem;
}

.articulo__cuerpo li {
  margin-bottom: var(--paso-1);
  text-wrap: pretty;
}

/* Sólidos y en tinta: un punto gris claro al lado de texto negro se lee como
   si la lista estuviera desactivada. */
.articulo__cuerpo ul { list-style: disc; }

.articulo__cuerpo li::marker {
  color: var(--tinta);
}

/* --- seguir leyendo -------------------------------------------------------
 *
 * Un enlace que dice «todos los reportes» no hace que nadie lea dos; el título
 * del siguiente sí. Por eso el final del artículo es una pieza de lectura y no
 * una barra de navegación. */

.seguir {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--paso-3) var(--paso-4);
  align-items: end;
}

.seguir__rotulo {
  display: block;
  color: var(--azul);
  margin-bottom: 0.4rem;
}

.seguir__titulo {
  display: block;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--tinta);
  text-decoration: none;
  text-wrap: balance;
}

.seguir__titulo:hover {
  color: var(--azul);
}

.seguir__bajada {
  margin: 0.35rem 0 0;
  max-width: 30rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--tinta-media);
}

.seguir__todos {
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 0.3rem;
}

/* --- el ancho de una imagen ------------------------------------------------
 *
 * Tres y no un número libre. Una captura de pantalla necesita todo el ancho que
 * se le pueda dar y un retrato queda ridículo estirado, pero dejar arrastrar un
 * borde obliga a guardar píxeles —que dependen de la pantalla en la que se
 * arrastró— en vez de una intención que vale en todas.
 *
 * «Ancha» se sale de la medida del texto y se centra contra su contenedor, no
 * contra la columna: así no hay que saber cuánto mide la columna para acertarle
 * al centro, y sigue funcionando si la medida cambia. */
.imagen { margin: 0; }
.imagen img { display: block; width: 100%; height: auto; }

.imagen--chica img { max-width: 20rem; }

.imagen--ancha {
  width: 46rem;
  max-width: 88vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* --- pantallas angostas ---------------------------------------------------- */

@media (max-width: 40rem) {
  body {
    font-size: 1.0625rem;
  }

  .entrada__enlace {
    grid-template-columns: 1fr;
    gap: var(--paso-1);
  }

  .entrada__fecha {
    padding-top: 0;
  }

  .articulo__ficha {
    padding-top: var(--paso-4);
  }

  .seguir { grid-template-columns: 1fr; }
}

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