/* Paleta en tokens, para que el tema oscuro sea un cambio de valores y no otra
   hoja de estilos. Se define la clara entera y solo se redefinen los tokens. */
:root {
  --fondo: #fbfaf8;
  --fondo-alt: #ffffff;
  --texto: #1b1a17;
  --tenue: #6b6862;
  --borde: #e4e0d8;
  --acento: #a4262c;
  --bien: #2e7d4f;
  --mal: #b3261e;
  --espera: #9a8f80;
  --sombra: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 12px rgba(0, 0, 0, .04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #14130f;
    --fondo-alt: #1d1b17;
    --texto: #f0ece4;
    --tenue: #9e988c;
    --borde: #2f2c26;
    --acento: #e8646a;
    --bien: #6cc08b;
    --mal: #ef6b62;
    --espera: #7d746a;
    --sombra: none;
  }
}

* { box-sizing: border-box; }

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

.contenido {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* -- cabecera ------------------------------------------------------------- */

.cabecera {
  background: var(--fondo-alt);
  border-bottom: 1px solid var(--borde);
  padding: 3rem 0 2.25rem;
}

h1 {
  margin: 0;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  letter-spacing: -.02em;
  line-height: 1.1;
}

.lema {
  max-width: 44rem;
  margin: .9rem 0 0;
  color: var(--tenue);
  font-size: 1.05rem;
}

.estado {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 1.5rem 0 0;
  padding: .4rem .85rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--fondo);
  font-size: .9rem;
  color: var(--tenue);
}

.punto {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--espera);
  flex: none;
}

.punto--bien { background: var(--bien); }
.punto--mal { background: var(--mal); }

/* -- cifras --------------------------------------------------------------- */

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1px;
  margin: 2.5rem 0;
  background: var(--borde);
  border: 1px solid var(--borde);
  border-radius: .6rem;
  overflow: hidden;
  box-shadow: var(--sombra);
}

.cifra {
  background: var(--fondo-alt);
  padding: 1.35rem 1.1rem;
  text-align: center;
}

.cifra strong {
  display: block;
  font-size: 1.85rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.cifra span {
  display: block;
  margin-top: .25rem;
  color: var(--tenue);
  font-size: .82rem;
}

/* -- secciones ------------------------------------------------------------ */

section { margin: 3rem 0; }

h2 {
  margin: 0 0 .4rem;
  font-size: 1.3rem;
  letter-spacing: -.01em;
}

.apunte {
  margin: 0 0 1.2rem;
  color: var(--tenue);
  font-size: .92rem;
  max-width: 44rem;
}

/* La tabla se desborda dentro de su caja, nunca la pagina. */
.tabla-envoltorio {
  overflow-x: auto;
  border: 1px solid var(--borde);
  border-radius: .6rem;
  background: var(--fondo-alt);
  box-shadow: var(--sombra);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
}

th, td {
  padding: .7rem .9rem;
  text-align: left;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}

th {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tenue);
  font-weight: 600;
}

tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.cargando, .vacio { color: var(--tenue); text-align: center; padding: 2rem; }

.linea {
  display: inline-block;
  min-width: 2.6rem;
  padding: .15rem .45rem;
  border-radius: .3rem;
  background: var(--acento);
  color: #fff;
  font-weight: 600;
  font-size: .82rem;
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  .linea { color: #14130f; }
}

.enlaces { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.5rem; }

a { color: var(--acento); }
a:hover { text-decoration: none; }

/* -- pie ------------------------------------------------------------------ */

footer {
  margin: 4rem 0 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--borde);
  font-size: .88rem;
  color: var(--tenue);
}

.tenue { color: var(--tenue); }
footer p { margin: .4rem 0; }

.migas { margin: 0 0 .8rem; font-size: .88rem; color: var(--tenue); }
.migas a { color: var(--tenue); }
.enlaces--cabecera { margin-top: 1rem; font-weight: 600; }