/* Estilo del sitio de kaloria.es.
 *
 * Un solo fichero y cero dependencias: son cuatro páginas de texto que Google tiene que poder
 * leer y que un revisor abre una vez. Cargar una fuente externa metería una petición a un tercero
 * en la página que explica que no compartimos datos con terceros.
 *
 * Los colores son los del design system de la app (`app/lib/core/theme/tokens.dart`). Repetidos a
 * mano porque no hay build compartido; el gate `tools/ci/check-web-paleta.mjs` comprueba que no se
 * desvíen — dos verdes distintos entre la web y la ficha se ven en la misma pantalla.
 */

:root {
  --marca: #19744c;
  --marca-oscuro: #2fa771;
  --fondo: #eff3f5;
  --superficie: #ffffff;
  --texto: #14191e;
  --texto-suave: #5e6871;
  --borde: #e1e6eb;
  --aviso: #d98b27;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #10141a;
    --superficie: #1a2027;
    --texto: #f2f5f7;
    --texto-suave: #9aa6b2;
    --borde: #2a323b;
    --marca: #2fa771;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.envoltorio {
  /* 68ch y no un ancho en px: es la medida de línea legible, y se adapta a la fuente del sistema
   * del lector igual que `ContentWidth` en la app. */
  max-width: 68ch;
  margin: 0 auto;
  padding: 2rem 1.25rem 5rem;
}

header a.marca {
  display: inline-block;
  margin-bottom: 2.5rem;
  color: var(--marca);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

h1 {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

h2 {
  font-size: 1.25rem;
  margin: 2.5rem 0 0.75rem;
}

h3 {
  font-size: 1.05rem;
  margin: 1.75rem 0 0.5rem;
}

p,
li {
  color: var(--texto);
}

a {
  color: var(--marca);
}

.entradilla {
  color: var(--texto-suave);
  font-size: 1.1rem;
}

.fecha {
  color: var(--texto-suave);
  font-size: 0.9rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  /* En móvil una tabla de tres columnas no cabe: se desplaza ella, nunca la página. */
  display: block;
  overflow-x: auto;
}

th,
td {
  border-bottom: 1px solid var(--borde);
  padding: 0.6rem 0.75rem 0.6rem 0;
  text-align: left;
  vertical-align: top;
  font-size: 0.95rem;
}

th {
  color: var(--texto-suave);
  font-weight: 600;
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

/* Aviso de borrador. Ámbar, nunca rojo: es el mismo criterio del invariante 05 en la app — no es
 * un error, es información. */
.borrador {
  border-left: 4px solid var(--aviso);
}

.pendiente {
  color: var(--texto-suave);
  font-style: italic;
}

footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--borde);
  color: var(--texto-suave);
  font-size: 0.9rem;
}

footer a {
  margin-right: 1rem;
}