/* Base de todas las páginas y template "basico": neutro, sin personalidad a propósito.
   Los templates de clientes (public/plantillas/) reescriben variables y detalles encima de esta base. */
:root {
  --fondo: #fafafa;
  --superficie: #ffffff;
  --texto: #1f2328;
  --suave: #5c6670;
  --linea: #d8dde3;
  --acento: #2f5d8a;
  --sobre-acento: #ffffff;
  --radio: .5rem;
  --f-titulos: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-texto: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-family: var(--f-texto);
  color: var(--texto);
  background: var(--fondo);
}
@media (prefers-color-scheme: dark) {
  :root { --fondo: #15181c; --superficie: #1c2025; --texto: #e6e8eb; --suave: #9aa4ae; --linea: #2c3238; --acento: #7fb0e0; --sobre-acento: #10161c; }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; line-height: 1.55; background: var(--fondo); }
main { max-width: 42rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
h1, h2 { font-family: var(--f-titulos); line-height: 1.15; }
h1 { font-size: 1.9rem; margin: 0 0 .5rem; }
h2 { font-size: 1.25rem; margin: 0 0 .75rem; }
a { color: var(--acento); }
.nota, .meta, .aviso { color: var(--suave); }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Barra y portada */
.barra { padding: .5rem 0 1.5rem; }
.marca { font-weight: 600; text-decoration: none; color: var(--texto); }
.portada { padding: 1rem 0 2rem; border-bottom: 1px solid var(--linea); margin-bottom: 2rem; }
.sobretitulo { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; color: var(--suave); margin: 0 0 .5rem; }
.lema, .cuando, .donde { margin: .25rem 0; color: var(--suave); }
.cuando::first-letter { text-transform: uppercase; }
.cuenta { display: inline-block; margin-top: 1rem; font-weight: 600; color: var(--acento); }

/* Línea de vida */
.linea-de-vida, .hitos { list-style: none; padding: 0; margin: 0; }
.anio { margin-bottom: 1.5rem; }
.anio-numero { font-size: 1rem; color: var(--suave); }
.hito a { display: grid; gap: .1rem; padding: .75rem 0; border-top: 1px solid var(--linea); text-decoration: none; color: inherit; }
.hito-clase { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.hito-titulo { font-weight: 600; color: var(--acento); }
.hito-meta { color: var(--suave); font-size: .9rem; }

/* Capítulo */
.bloque { margin: 0 0 2.5rem; }
.num { color: var(--suave); font-size: .8em; }
.invitado { border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; margin-bottom: 2rem; background: var(--superficie); }
.invitado p { margin: 0; }
.invitado-nombre { font-weight: 600; font-size: 1.15rem; }
.invitado-lugares { color: var(--suave); }
.itinerario { list-style: none; padding: 0; margin: 0; }
.itinerario li { display: grid; grid-template-columns: 4.5rem 1fr; gap: .75rem; padding: .5rem 0; border-top: 1px solid var(--linea); }
.hora { font-variant-numeric: tabular-nums; font-weight: 600; }
.tarjeta { border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; background: var(--superficie); }

/* Formularios */
form, .formulario { display: grid; gap: .6rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .5rem; }
legend { font-weight: 600; margin-bottom: .25rem; padding: 0; }
.opciones { grid-template-columns: 1fr 1fr; }
.opcion { display: flex; gap: .5rem; align-items: center; border: 1px solid var(--linea); border-radius: var(--radio); padding: .7rem .8rem; cursor: pointer; background: var(--superficie); }
.opcion:has(input:checked) { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
label { display: block; }
input, select, textarea, button { font: inherit; padding: .6rem .7rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); color: inherit; min-height: 2.75rem; }
textarea { resize: vertical; }
button, .boton { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); cursor: pointer; justify-self: start; font-weight: 600; }
button:disabled { opacity: .5; cursor: default; }
.boton { display: inline-block; padding: .6rem .9rem; border-radius: var(--radio); }
.boton input { display: none; }
.en-linea { grid-template-columns: 1fr; }
.persona { display: grid; gap: .4rem; grid-template-columns: 1fr auto; padding: .6rem 0; border-top: 1px solid var(--linea); }
.persona input:last-child { grid-column: 1 / -1; }
.aviso { min-height: 1.5em; margin: 0; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .4rem; margin-top: .75rem; }
.galeria img, .galeria video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .3rem; background: var(--linea); }

/* Panel */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .4rem .3rem; border-top: 1px solid var(--linea); vertical-align: top; }
.cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .5rem; }
.cifras div { border: 1px solid var(--linea); border-radius: .4rem; padding: .5rem; }
.cifras strong { display: block; font-size: 1.3rem; }
.tabla { overflow-x: auto; }

.pie { text-align: center; color: var(--suave); font-size: .8rem; padding: 0 1rem 2rem; }