/* ==========================================================================
   El Camino DT — la bitácora (la otra página que lee Google)
   --------------------------------------------------------------------------
   Nació el 4/9/2026 porque un jugador preguntó en X si había algún sitio donde
   se contaran estas cosas, y no lo había. Es una página de LECTURA: entradas
   largas, una atrás de otra, sin nada que tocar.

   ES PRIMA DE `clubes.css` Y NO SU HERMANA. Comparte con ella lo que la hace
   indexable —tokens del sistema, ancho de lectura, sin `camino.css`— y no
   comparte la grilla: allá el contenido son 1.634 escudos y acá son párrafos.
   Por eso los nombres son propios (`bt-`) en vez de reusar `cl-`: dos páginas
   que se van a mover por motivos distintos no comparten clases, o el día que
   una cambie hay que ir a mirar la otra.

   EL ANCHO ES 68ch, igual que en las de clubes, y por el mismo motivo: un
   renglón de sesenta caracteres se lee y uno de ciento sesenta se saltea. Lo
   único que sale de ese ancho es el bloque de números, que es una tabla chica
   y se lee de un vistazo.
   ========================================================================== */

.pagina-bitacora {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  /* El zoom del sitio, igual que en las páginas de clubes: quien lo tenga en
     110 % no encuentra acá una isla en 100 %. */
  zoom: var(--escala-sitio, 1);
}

.pagina-bitacora a { color: var(--accent-texto, var(--accent)); }
.pagina-bitacora a:hover { color: var(--accent-strong, var(--accent)); }

/* --------------------------------------------------------------------------
   CABECERA
   -------------------------------------------------------------------------- */
.bt-cabecera {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-5) var(--sp-5);
}

.bt-cabecera > * { max-width: 68ch; }

.bt-miga {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: var(--tracking-label);
}

.bt-titulo {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.bt-bajada {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.bt-bajada strong { color: var(--text-primary); font-weight: 600; }

/* --------------------------------------------------------------------------
   EL CUERPO Y LAS ENTRADAS
   --------------------------------------------------------------------------
   Cada entrada es un `<article>` con su fecha, su título y su cuerpo. La línea
   de arriba separa una de otra: es más liviana que una caja y aguanta mejor la
   entrada número cuarenta, que es a lo que esto va.
   -------------------------------------------------------------------------- */
.bt-cuerpo {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--sp-5) var(--sp-7);
}

.bt-entrada {
  max-width: 68ch;
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--line-hairline);
}

.bt-entrada__fecha {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.bt-entrada__titulo {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.bt-entrada p { margin: 0 0 var(--sp-4); }
.bt-entrada p:last-child { margin-bottom: 0; }
.bt-entrada strong { color: var(--text-primary); font-weight: 600; }

/* --------------------------------------------------------------------------
   EL BLOQUE DE NÚMEROS
   --------------------------------------------------------------------------
   Lo que la entrada afirma, medido. Va en monoespaciada porque son columnas y
   una proporcional las desalinea; el juego no tiene token de monoespaciada
   —no la usa en ninguna pantalla— así que la pila va escrita acá y no en
   `tokens.css`: un token que usa un solo archivo es un token de mentira.

   `overflow-x: auto` porque en un teléfono de 360px una fila de cuatro
   columnas no entra, y lo que no entra tiene que poder correrse: la página no
   se desplaza de costado nunca.
   -------------------------------------------------------------------------- */
.bt-medido {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4);
  overflow-x: auto;
  background: var(--bg-raised);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
  white-space: pre;
}
.bt-medido b { color: var(--text-primary); font-weight: 600; }

/* --------------------------------------------------------------------------
   EL CIERRE Y EL PIE
   -------------------------------------------------------------------------- */
.bt-cierre {
  max-width: 68ch;
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.bt-cierre h2 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}
.bt-cierre p { margin: 0 0 var(--sp-4); color: var(--text-secondary); }

/* El botón: mismo trato que el de las páginas de clubes —44px de alto, que es
   la medida del dedo— y se escribe con el padre delante para ganarle a la
   regla general de los enlaces de arriba. */
.pagina-bitacora .bt-boton {
  display: inline-block;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-5);
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: var(--r-pill);
  font-weight: 600;
  text-decoration: none;
}
.pagina-bitacora .bt-boton:hover {
  background: var(--accent-strong);
  color: var(--text-on-accent);
}

.bt-pie {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-7);
  border-top: 1px solid var(--line-hairline);
}
.bt-pie__marca {
  max-width: 68ch;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}