/* =============================================================================
   Reunión 45 Aniversario · Liceo Javier · Promoción XXII (1981)
   Hoja de estilos única — estilos.css
   ---------------------------------------------------------------------------
   Los colores están al principio, en :root. Cambia esos valores y todo el
   sitio cambia con ellos.
   ========================================================================== */

:root {
  /* --- Paleta ------------------------------------------------------------ */
  --azul-900: #0d1f3c;   /* fondo oscuro / encabezado */
  --azul-800: #14305c;
  --azul-700: #1c4278;
  --azul-100: #e8eef7;
  --oro-500:  #c8a24a;   /* acento */
  --oro-400:  #dcbb6b;
  --oro-100:  #f7f0dd;

  --tinta:    #16202f;   /* texto principal */
  --tinta-60: #5a6675;   /* texto secundario */
  --linea:    #dfe4ec;
  --papel:    #ffffff;
  --papel-2:  #f6f7fa;

  --exito:    #1d7a4c;
  --exito-bg: #e6f4ec;
  --aviso:    #9a6a11;
  --aviso-bg: #fdf3dd;
  --error:    #b3261e;
  --error-bg: #fbe9e7;

  --radio:    14px;
  --radio-sm: 9px;
  --sombra:   0 1px 2px rgba(13,31,60,.06), 0 8px 24px rgba(13,31,60,.08);
  --sombra-alta: 0 2px 4px rgba(13,31,60,.08), 0 18px 48px rgba(13,31,60,.14);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--azul-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--azul-900); }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.1rem); }
h3 { font-size: 1.2rem; font-family: var(--sans); font-weight: 700; }
p  { margin: 0 0 1em; }

.contenedor { width: min(1080px, 92vw); margin-inline: auto; }
.estrecho   { width: min(720px, 92vw); margin-inline: auto; }

.seccion { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.seccion--gris { background: var(--papel-2); border-block: 1px solid var(--linea); }

.centro { text-align: center; }
.silencio { color: var(--tinta-60); }
.pequeno { font-size: .9rem; }
.oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Barra de navegación --------------------------------------------------- */
.barra {
  position: sticky; top: 0; z-index: 40;
  background: rgba(13,31,60,.96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid rgba(200,162,74,.28);
}
.barra__caja {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 64px; flex-wrap: wrap;
}
.barra__marca {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--serif); font-size: 1.05rem; color: #fff;
  text-decoration: none; margin-right: auto; line-height: 1.25;
}
/* Sobre el azul oscuro, el color de hover general (azul-900) dejaba el
   nombre ilegible. Aquí el enlace conserva su color; sigue siendo enlace,
   solo que sin cambiar de tono. */
.barra__marca:hover,
.barra__marca:focus { color: #fff; }
.barra__marca:hover .barra__marca-texto span,
.barra__marca:focus .barra__marca-texto span { color: var(--oro-400); }

.barra__escudo { height: 38px; width: auto; flex: none; }
.barra__marca-texto { display: block; }
.barra__marca-texto span { display: block; font-family: var(--sans); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--oro-400); }
.barra__nav { display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center; }
.barra__nav a {
  color: #cfd9ea; text-decoration: none; font-size: .93rem; padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
.barra__nav a:hover { color: #fff; }
.barra__nav a.activa { color: #fff; border-bottom-color: var(--oro-500); }

/* El botón dentro del menú: la regla de arriba le quitaba el relleno lateral
   (padding: .35rem 0) y la palabra quedaba pegada a los bordes de la píldora.
   Esta regla es más específica y le devuelve su espacio. */
.barra__nav a.boton {
  padding: .55rem 1.5rem;
  border-bottom: 0;
  line-height: 1.2;
}
/* Y por lo mismo se le iba el color del texto: el gris claro del menú ganaba
   sobre el oscuro del botón, y la palabra se perdía sobre el dorado. */
.barra__nav a.boton--oro,
.barra__nav a.boton--oro:hover,
.barra__nav a.boton--oro:focus { color: #1a1405; }

/* --- Portada --------------------------------------------------------------- */
.portada {
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(200,162,74,.22), transparent 62%),
    linear-gradient(170deg, var(--azul-900), var(--azul-800) 55%, #0a1830);
  color: #fff;
  padding: clamp(1.25rem, 3vw, 2.25rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.portada__escudo {
  display: block; height: clamp(91px, 13.2vw, 125px); width: auto;
  margin: 0 auto 1rem;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
/* "Aparta el 24 de octubre": banda inclinada en la esquina superior
   izquierda, montada sobre la portada. Sale del flujo, así que el lema
   queda pegado al titular. */
.portada { position: relative; overflow: hidden; }
.portada > .contenedor { position: relative; z-index: 2; }

.portada__aparta {
  position: absolute;
  z-index: 1;
  /* Se ancla al borde IZQUIERDO DE LA VENTANA, no al contenedor centrado,
     para no depender del ancho de la columna de texto. Queda completo, a un
     poco del filo, y el ancho se calcula para frenar antes de la píldora:
     de la mitad de la ventana se descuenta el espacio que ocupan la píldora
     y el escudo. */
  left: calc((100% - 100vw) / 2 + 1.25rem);
  top: 3.5rem;
  width: min(680px, calc(50vw - 17rem));
  height: auto;
  transform: rotate(-8deg);
  transform-origin: center;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .45));
  pointer-events: none;
}

/* Caja de video de la portada: al otro lado del brochazo, espejo suyo.
   Fuera del flujo, así que no empuja el titular ni la cuenta regresiva.
   El alto lo pone el propio archivo: con  aspect-ratio: auto 16/9  se usa la
   proporción real del mp4 en cuanto el navegador la conoce, y el 16/9 solo
   sirve de reserva mientras carga. Así no hay que configurar medidas. */
.portada__video {
  position: absolute;
  z-index: 1;
  right: calc((100% - 100vw) / 2 + 1.25rem);
  top: 1.25rem;
  width: min(520px, calc(46vw - 17rem));
  margin: 0;
}
.portada__video video {
  display: block; width: 100%; height: auto;
  aspect-ratio: auto 16 / 9;
  background: #000;
  border-radius: var(--radio);
  border: 1px solid rgba(200, 162, 74, .35);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}

/* Por debajo de 1200 px el hueco lateral ya no da para un video mirable:
   baja al flujo, centrado y grande, después de los botones. */
@media (max-width: 1199px) {
  .portada__video {
    position: static;
    width: min(680px, 92%);
    margin: 2.2rem auto 0;
  }
}

/* En pantallas de poca altura (portátiles de 1280x720 y parecidos) la
   portada se compacta para que la cuenta regresiva siga entrando sin
   desplazar. En monitores altos no cambia nada. */
@media (min-width: 901px) and (max-height: 800px) {
  .portada { padding-top: .5rem; }
  .portada__escudo { height: clamp(70px, 9vw, 88px); margin-bottom: .6rem; }
  .portada__sello { margin-bottom: 1rem; }
  .portada__numero { font-size: clamp(3.5rem, 10vw, 6rem); }
  .portada__lema { font-size: clamp(1.6rem, 3.4vw, 2.05rem); margin: .4rem auto 1.4rem; }
  .portada__datos { margin-bottom: 1.4rem; }
  .cuenta { margin-bottom: 1.6rem; }
  .portada__aparta { top: 3.25rem; }
  /* La portada compacta sube el lema, así que el video también se achica y
     se pega más arriba para no montarse sobre las palabras. */
  .portada__video { top: .75rem; width: min(430px, calc(42vw - 17rem)); }
}

/* En pantallas angostas estorbaría al titular: vuelve al flujo, centrada
   y derecha. */
@media (max-width: 900px) {
  .portada { overflow: visible; }
  .portada__aparta {
    position: static;
    width: min(420px, 82%);
    margin: 1.6rem auto 2rem;
    transform: none;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
  }
}
/* Bloque de dos columnas: video a la izquierda, texto y botón a la derecha.
   Se usa en "¿Nos acompañas?". Si no hay video configurado, el texto queda
   solo y centrado, igual que antes. */
.bloque-video {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem); flex-wrap: wrap;
}
.bloque-video__texto { flex: 1 1 320px; max-width: 560px; }

.caja-video { flex: 0 0 auto; width: min(520px, 42vw); margin: 0; }
.caja-video video {
  display: block; width: 100%; height: auto;
  aspect-ratio: auto 16 / 9;
  background: #000;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-alta);
}
/* En pantallas angostas las dos columnas se apilan solas (flex-wrap) y el
   video pasa a ancho completo. */
@media (max-width: 800px) {
  .caja-video { width: min(560px, 100%); }
}

/* Marca de la promoción — solo sobre fondo claro, que es rojo sobre blanco */
.marca-promo {
  display: block; width: min(680px, 92%); height: auto;
  margin: 0 auto 1.8rem;
}
.logo-liceo {
  display: block; height: clamp(52px, 9vw, 68px); width: auto;
  margin: 0 auto 1.6rem;
}
.portada__sello {
  display: inline-block; font-size: .74rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--oro-400);
  border: 1px solid rgba(200,162,74,.5); border-radius: 999px;
  padding: .45rem 1.1rem; margin-bottom: 1.6rem;
}
.portada h1 { color: #fff; margin-bottom: .3rem; }
.portada__numero {
  display: block; font-family: var(--serif);
  font-size: clamp(4.5rem, 16vw, 9rem); line-height: .9;
  color: var(--oro-500); letter-spacing: -.03em; margin-bottom: .2rem;
}
/* Al quitar "años de habernos graduado", el lema pasa a ser el titular:
   misma tipografía que tenía esa línea, al doble de tamaño y sin cursiva. */
.portada__lema {
  font-family: var(--serif); font-style: normal; font-weight: 600;
  font-size: clamp(2.1rem, 4.8vw, 2.7rem); line-height: 1.2;
  color: #fff; max-width: 32ch; margin: .6rem auto 2.2rem;
}
.portada__datos {
  display: flex; justify-content: center; gap: clamp(1.2rem, 4vw, 3rem);
  flex-wrap: wrap; margin-bottom: 2.4rem;
}
.portada__dato { min-width: 140px; }
.portada__dato dt {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro-400); margin-bottom: .3rem;
}
.portada__dato dd { margin: 0; font-size: 1.05rem; color: #fff; }

/* --- Cuenta regresiva ------------------------------------------------------ */
.cuenta { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.cuenta__caja {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(200,162,74,.3);
  border-radius: var(--radio-sm);
  padding: .8rem 1rem; min-width: 84px;
}
.cuenta__num {
  display: block; font-family: var(--serif); font-size: 2rem; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
}
.cuenta__eti {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--oro-400);
}

/* --- Botones --------------------------------------------------------------- */
.boton {
  display: inline-block; border: 0; cursor: pointer; white-space: nowrap;
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  padding: .95rem 2rem; border-radius: 999px; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); }
.boton:focus-visible { outline: 3px solid var(--oro-400); outline-offset: 3px; }

.boton--oro { background: var(--oro-500); color: #1a1405; box-shadow: 0 6px 18px rgba(200,162,74,.32); }
.boton--oro:hover { background: var(--oro-400); color: #1a1405; }

.boton--azul { background: var(--azul-700); color: #fff; }
.boton--azul:hover { background: var(--azul-800); color: #fff; }

.boton--linea { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.boton--linea:hover { background: rgba(255,255,255,.1); color: #fff; }

.boton--chico { padding: .5rem 1.1rem; font-size: .88rem; }

.boton--verde { background: var(--exito); color: #fff; }
.boton--verde:hover { background: #16613c; color: #fff; }

.boton--rojo { background: var(--error); color: #fff; }
.boton--rojo:hover { background: #8e1e17; color: #fff; }

/* Cajita que hay que abrir a propósito para hacer algo que no tiene vuelta
   atrás (borrar el comprobante). Sin ventanas emergentes: se despliega y ya. */
.peligro { margin-top: 1.2rem; border-top: 1px solid var(--linea); padding-top: .9rem; }
.peligro > summary {
  cursor: pointer; color: var(--error); font-size: .9rem; font-weight: 600;
  list-style: none; display: inline-flex; align-items: center; gap: .4rem;
}
.peligro > summary::-webkit-details-marker { display: none; }
.peligro > summary::before { content: "\2715"; font-size: .8em; }
.peligro > summary:hover { text-decoration: underline; }
.peligro[open] > summary { margin-bottom: .2rem; }

.boton--suave { background: #eceef2; color: var(--tinta-60); }
.boton--suave:hover { background: #e0e3ea; color: var(--tinta); }

/* Formularios de una sola acción dentro de la tabla del panel */
.accion-rapida { margin: 0; display: inline-block; }

/* --- Tarjetas -------------------------------------------------------------- */
.rejilla { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Variante para la fila de tarjetas del evento: caben las cuatro en una
   sola línea en pantalla ancha, y bajan solas a 2 y luego a 1 en móvil. */
.rejilla--evento { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.tarjeta {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 1.6rem; box-shadow: var(--sombra);
}
.tarjeta h3 { margin-bottom: .35rem; }
.tarjeta__icono {
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: .9rem;
  background: var(--oro-100); color: var(--azul-800);
  display: grid; place-items: center; font-size: 1.15rem;
}

/* --- Programa -------------------------------------------------------------- */
.programa { list-style: none; margin: 0; padding: 0; }
.programa li {
  display: grid; grid-template-columns: 130px 1fr; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--linea); align-items: baseline;
}
.programa li:last-child { border-bottom: 0; }
.programa__hora { font-weight: 700; color: var(--azul-700); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .programa li { grid-template-columns: 1fr; gap: .15rem; }
}

/* --- Formulario ------------------------------------------------------------ */
.formulario { display: grid; gap: 1.35rem; }

.campo { display: grid; gap: .4rem; }
.campo > label, .grupo > legend {
  font-weight: 600; font-size: .95rem; color: var(--tinta);
}
.campo .ayuda { font-size: .84rem; color: var(--tinta-60); }
.req { color: var(--error); }

input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=date], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--tinta);
  padding: .72rem .85rem; background: var(--papel);
  border: 1px solid #c4ccd9; border-radius: var(--radio-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--azul-700);
  box-shadow: 0 0 0 3px rgba(28,66,120,.16);
}
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] {
  border-color: var(--error); box-shadow: 0 0 0 3px rgba(179,38,30,.13);
}

/* Campo de archivo — el nativo se ve fuera de lugar junto a los demás */
/* --- Subir archivo ---------------------------------------------------------
   El control de archivo que dibuja el navegador trae su propio texto
   ("Choose File / No file chosen" si está en inglés) y ese texto no se puede
   traducir desde la página. Así que el input va escondido y encima ponemos
   nuestro botón y nuestro texto, en español. El input sigue siendo el mismo:
   el formulario, el teclado y el lector de pantalla funcionan igual. */
.archivo {
  display: flex; align-items: center; gap: .85rem;
  width: 100%; padding: .6rem .7rem; background: var(--papel);
  border: 1px dashed #b9c3d3; border-radius: var(--radio-sm);
  cursor: pointer; font-weight: 400;
}
.archivo:hover { border-color: var(--azul-700); background: var(--azul-100); }
.archivo__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.archivo__boton {
  font-size: .9rem; font-weight: 600; padding: .45rem 1.1rem;
  border-radius: 999px; background: var(--azul-800); color: #fff;
  white-space: nowrap; flex: none;
}
.archivo:hover .archivo__boton { background: var(--azul-700); }
.archivo__nombre { font-size: .95rem; color: var(--tinta-60); overflow-wrap: anywhere; }
.archivo__input:focus-visible + .archivo__boton {
  outline: 3px solid rgba(28,66,120,.35); outline-offset: 2px;
}
/* La caja es un <label> dentro de .campo, y allí los label van en negrita:
   aquí no la queremos. */
.campo > label.archivo { font-weight: 400; font-size: 1rem; }

.grupo { border: 0; padding: 0; margin: 0; display: grid; gap: .55rem; }
.grupo > legend { padding: 0; margin-bottom: .2rem; }

.opcion {
  display: flex; gap: .7rem; align-items: flex-start;
  border: 1px solid var(--linea); border-radius: var(--radio-sm);
  padding: .8rem .95rem; cursor: pointer; background: var(--papel);
  transition: border-color .12s ease, background-color .12s ease;
}
.opcion:hover { border-color: var(--azul-700); background: var(--azul-100); }
.opcion input { margin-top: .25rem; flex: none; width: 18px; height: 18px; accent-color: var(--azul-700); }
.opcion span b { display: block; }
.opcion span small { color: var(--tinta-60); }

.fila { display: grid; gap: 1.35rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .fila { grid-template-columns: 1fr; } }

.bloque {
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1.5rem; background: var(--papel-2);
}
.bloque > h3 { margin-top: 0; }

/* --- Cuentas bancarias ----------------------------------------------------- */
/* Tarjeta por cuenta (portada). Con una sola cuenta ocupa el ancho; con dos o
   tres se acomodan solas y bajan a una columna en el celular. */
.bancos {
  display: grid; gap: 1rem; margin-top: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.banco {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio-sm); padding: 1rem 1.1rem;
}
.banco__nombre {
  margin: 0 0 .6rem; font-weight: 700; font-size: 1rem;
  color: var(--azul-800); letter-spacing: .01em; line-height: 1.3;
  padding-bottom: .5rem; border-bottom: 1px solid var(--linea);
}
/* Etiqueta arriba y dato abajo: así un titular largo no queda desflecado
   contra el borde derecho de la tarjeta. */
.banco__datos { margin: 0; font-size: .93rem; }
.banco__datos > div { padding: .4rem 0 0; }
.banco__datos dt {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-60); line-height: 1.4;
}
.banco__datos dd { margin: 0; font-weight: 600; line-height: 1.35; }
.banco__numero {
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  font-weight: 700; white-space: nowrap;
}
.bancos__cuota { margin: 1.1rem 0 0; }

/* Versión compacta (formulario y página de gracias) */
.bancos-caja { margin-top: 1.25rem; }
.bancos-caja__titulo {
  margin: 0 0 .5rem; font-size: .88rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-60);
}
.bancos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bancos-lista li {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio-sm); padding: .6rem .8rem;
  font-size: .93rem; line-height: 1.45;
}
.aviso .bancos-lista li { background: rgba(255,255,255,.65); border-color: rgba(0,0,0,.08); }

/* --- Avisos ---------------------------------------------------------------- */
.aviso {
  border-radius: var(--radio-sm); padding: 1rem 1.15rem;
  border: 1px solid; margin-bottom: 1.5rem;
}
.aviso--error  { background: var(--error-bg); border-color: #f0c3bf; color: #7d1a15; }
.aviso--exito  { background: var(--exito-bg); border-color: #b9dfca; color: #125634; }
.aviso--nota   { background: var(--aviso-bg); border-color: #e8d5a4; color: var(--aviso); }
.aviso ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.aviso p:last-child, .aviso ul:last-child { margin-bottom: 0; }

/* --- Lista de confirmados -------------------------------------------------- */
.confirmados { list-style: none; margin: 0; padding: 0;
  display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.confirmados li {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio-sm); padding: .8rem .95rem;
  display: flex; flex-direction: column; gap: .3rem; align-items: flex-start;
}
.confirmados b { font-weight: 600; }
.confirmados small { color: var(--tinta-60); }
.confirmados .etiqueta { margin-top: .15rem; white-space: normal; }

/* --- In memoriam ----------------------------------------------------------- */
.memoriam { background: var(--azul-900); color: #cdd7e8; text-align: center; }
.memoriam h2 { color: #fff; }
.memoriam ul { list-style: none; padding: 0; margin: 1.5rem 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.6rem; }
.memoriam li { font-family: var(--serif); font-size: 1.1rem; color: var(--oro-400); }

/* --- Pie ------------------------------------------------------------------- */
.pie {
  background: var(--azul-900); color: #9fb0c9;
  padding: 3rem 0 2.2rem; font-size: .92rem;
}
.pie a { color: var(--oro-400); }
/* Mismo caso que en la barra: sobre fondo oscuro, el hover general los
   apagaba. Conservan el dorado. */
.pie a:hover, .pie a:focus { color: var(--oro-400); }
.pie__marca { font-family: var(--serif); font-size: 1.2rem; color: #fff; margin-bottom: .4rem; }
.pie__linea { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2rem; padding-top: 1.2rem;
  text-align: center; }

/* --- Tablas del panel ------------------------------------------------------ */
.tabla-caja { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
table.datos { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.datos th, table.datos td { padding: .7rem .8rem; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; }
table.datos thead th {
  background: var(--papel-2); font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-60); white-space: nowrap;
}
table.datos tbody tr:hover { background: var(--azul-100); }
table.datos td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.datos td.fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }

.etiqueta {
  display: inline-block; font-size: .74rem; font-weight: 700; white-space: nowrap;
  padding: .2rem .6rem; border-radius: 999px;
}
.etiqueta--si    { background: var(--exito-bg); color: var(--exito); }
.etiqueta--talvez{ background: var(--aviso-bg); color: var(--aviso); }
.etiqueta--no    { background: #eceef2; color: var(--tinta-60); }
.etiqueta--pend  { background: #eceef2; color: var(--tinta-60); }
.etiqueta--rep   { background: var(--aviso-bg); color: var(--aviso); }
.etiqueta--conf  { background: var(--exito-bg); color: var(--exito); }
.etiqueta--exo   { background: var(--azul-100); color: var(--azul-700); }

/* --- Tarjetas de totales (panel) ------------------------------------------- */
.totales { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1.8rem; }
.total {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 1.1rem 1.2rem;
}
.total__num { font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--azul-800); font-variant-numeric: tabular-nums; }
.total__eti { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-60); margin-top: .35rem; }
.total__pie { font-size: .78rem; color: var(--tinta-60); margin-top: .5rem; }

/* --- Estadísticas de uso ---------------------------------------------------
   Barras dibujadas con puro CSS: una columna por día, dos barritas por
   columna (visitas y clics). Sin librerías ni JavaScript. */
.delta { font-weight: 600; }
.delta--sube { color: var(--exito); }
.delta--baja { color: var(--error); }

.leyenda { display: inline-flex; align-items: center; gap: .35rem; margin-right: 1rem; }
.leyenda__color { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.leyenda__color--azul { background: var(--azul-700); }
.leyenda__color--oro  { background: var(--oro-500); }

.grafico {
  display: flex; align-items: flex-end; gap: 3px;
  height: 190px; padding: .4rem .1rem 0;
  border-bottom: 1px solid var(--linea);
}
.grafico__col { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; min-width: 4px; }
.grafico__par { display: flex; align-items: flex-end; gap: 1px; width: 100%; height: 100%; }
.grafico__barra { flex: 1 1 0; border-radius: 3px 3px 0 0; min-height: 0; }
.grafico__barra--azul { background: var(--azul-700); }
.grafico__barra--oro  { background: var(--oro-500); }
.grafico__col:hover .grafico__barra--azul { background: var(--azul-900); }
.grafico__col:hover .grafico__barra--oro  { background: #b08b32; }
.grafico__pie { display: flex; justify-content: space-between; margin-top: .4rem; }

/* Botón de contorno para fondos claros (el .boton--linea es para el fondo
   azul de la portada y ahí el texto va en blanco). */
.boton--borde {
  background: var(--papel); color: var(--azul-800);
  box-shadow: inset 0 0 0 1px #c4ccd9;
}
.boton--borde:hover { background: var(--azul-100); color: var(--azul-900); }

/* --- Acceso al panel ------------------------------------------------------- */
.acceso {
  min-height: 100vh; display: grid; place-items: center;
  background: linear-gradient(170deg, var(--azul-900), #0a1830); padding: 2rem;
}
.acceso__caja {
  width: min(400px, 100%); background: var(--papel);
  border-radius: var(--radio); padding: 2.2rem; box-shadow: var(--sombra-alta);
}

/* --- Impresión ------------------------------------------------------------- */
@media print {
  .barra, .pie, .no-imprimir { display: none !important; }
  body { font-size: 12px; }
  .tabla-caja { border: 0; }
}