/* ============================================================================
   Panel de gestión — Estudiantes Viajeros
   ============================================================================
   Herramienta de trabajo interna, no una web de venta. Manda la densidad: ver
   muchas filas de un vistazo y llegar a lo que se busca en pocos golpes.

   Mismo planteamiento que el ERP de ZN Vasel (menú lateral oscuro, fondo gris
   claro, tarjetas blancas, tablas densas), pero con los colores de Estudiantes
   Viajeros y sin traerse Bootstrap: son unas cuantas piezas contadas, y así el
   panel no depende de que un CDN conteste ni de descargar nada.
   ============================================================================ */

:root {
  /* Los de la marca. El verde azulado ya era el color de la intranet, así que a
     quien lleva años usándola no le cambia el sitio bajo los pies. */
  --ac:        #17aa95;
  --ac-fuerte: #128b7a;
  --ac-suave:  #e2f4f1;
  --amarillo:  #ffbc00;

  --ok:    #1a9c5b;
  --mal:   #d2374c;
  --avisa: #c77700;

  --fondo:      #eef1f6;
  --superficie: #ffffff;
  --lateral:    #10322e;   /* el verde de la marca, muy oscuro */
  --lateral-txt:#a9c6c1;

  --tinta:  #16232b;
  --medio:  #5d6b77;
  --tenue:  #8c98a4;
  --borde:  #e2e8ef;

  --r-g: 14px;
  --r-m: 10px;
  --r-s: 7px;
  --sombra: 0 1px 2px rgba(16,35,43,.04), 0 4px 16px rgba(16,35,43,.05);

  --t-xs: .75rem;
  --t-sm: .84rem;
  --t-md: .94rem;
  --t-lg: 1.1rem;
  --t-xl: 1.5rem;
  --t-2xl: 2.1rem;

  --e1: 4px;  --e2: 8px;  --e3: 12px;
  --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
}

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

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

h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 700; }
h2 { font-size: var(--t-lg); margin: var(--e6) 0 var(--e3); }
p  { margin: 0 0 var(--e3); }
a  { color: var(--ac-fuerte); }

/* Que se vea siempre por dónde va el teclado. Quien pasa el día aquí acaba
   moviéndose con el tabulador. */
:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; border-radius: 3px; }

.saltar {
  position: absolute; left: -9999px;
  background: var(--ac); color: #fff; padding: var(--e3) var(--e4); z-index: 100;
}
.saltar:focus { left: var(--e3); top: var(--e3); }

/* ------------------------------------------------------------- estructura -- */
.panel { display: flex; min-height: 100vh; min-height: 100dvh; }

.lateral {
  flex: none; width: 232px;
  background: var(--lateral); color: var(--lateral-txt);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; height: 100dvh;
}
/* El logo va encima y "Gestión" debajo: la marca es muy apaisada (370x94) y
   puesta al lado de una palabra se quedaría en nada. */
.lateral__marca {
  display: grid; gap: var(--e2); justify-items: start;
  padding: var(--e5) var(--e4);
  border-bottom: 1px solid rgba(255,255,255,.07);
  text-decoration: none;
}
.lateral__marca img { width: 100%; max-width: 168px; height: auto; display: block; }
.lateral__nombre {
  color: var(--lateral-txt);
  font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
}

.lateral__nav { flex: 1; padding: var(--e3) var(--e2); overflow-y: auto; }
.lateral__pie { padding: var(--e2); border-top: 1px solid rgba(255,255,255,.07); }

.lateral__op {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3);
  border-radius: var(--r-s);
  color: inherit; text-decoration: none;
  font-size: var(--t-sm); font-weight: 500;
}
.lateral__op svg { width: 19px; height: 19px; flex: none; }
.lateral__op:hover { background: rgba(255,255,255,.06); color: #fff; }
.lateral__op.es-actual { background: var(--ac); color: #fff; font-weight: 600; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.tope {
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e4) var(--e5);
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 10;
}
.tope__titulo { font-size: var(--t-lg); flex: 1; min-width: 0; }
.tope__quien  { text-align: right; line-height: 1.25; }
.tope__nombre { display: block; font-weight: 600; font-size: var(--t-sm); }
.tope__login  { display: block; font-size: var(--t-xs); color: var(--tenue); }

.tope__menu {
  display: none;
  background: none; border: 1px solid var(--borde); border-radius: var(--r-s);
  padding: var(--e2); cursor: pointer; color: var(--tinta);
}
.tope__menu svg { width: 20px; height: 20px; display: block; }

.contenido { padding: var(--e5); flex: 1; }
.entradilla { color: var(--medio); }

/* ---------------------------------------------------------------- avisos --- */
.aviso {
  padding: var(--e3) var(--e4);
  border-radius: var(--r-m);
  border: 1px solid;
  font-size: var(--t-sm);
  margin-bottom: var(--e4);
}
.aviso--ok  { background: #eaf7f0; border-color: #b8e3ca; color: #14603a; }
.aviso--mal { background: #fdeef0; border-color: #f3c2c9; color: #8f1f2e; }

/* --------------------------------------------------------------- tarjetas -- */
/* auto-fill y no auto-fit: con una sola tarjeta en la fila, auto-fit la estira a
   todo lo ancho de la pantalla y una cifra de tres dígitos acaba flotando en
   medio metro de blanco, con pinta de pancarta. Con auto-fill los huecos vacíos
   siguen ahí y la tarjeta se queda de su tamaño. */
.tarjetas {
  display: grid; gap: var(--e4);
  grid-template-columns: repeat(auto-fill, minmax(220px, 320px));
}
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-g);
  padding: var(--e5);
  box-shadow: var(--sombra);
  display: grid; gap: var(--e1); align-content: start;
}
.tarjeta__cifra { font-size: var(--t-2xl); font-weight: 800; line-height: 1; }
.tarjeta__que   { color: var(--medio); font-size: var(--t-sm); }
.tarjeta__pie   { color: var(--tenue); font-size: var(--t-xs); }

/* Lo que pide una acción. El borde de color se reserva para esto: si todas las
   tarjetas gritan, ninguna se oye. */
.tarjeta--atencion { border-color: #f0d08a; background: #fffaf0; }
.tarjeta--atencion .tarjeta__cifra { color: var(--avisa); }

.nota {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-g);
  padding: var(--e5);
  margin-top: var(--e6);
  box-shadow: var(--sombra);
}
.nota h2 { margin-top: 0; }
.nota p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  padding: var(--e3) var(--e5);
  min-height: 42px;
  background: var(--ac); color: #fff;
  border: 1px solid var(--ac);
  border-radius: var(--r-s);
  font: inherit; font-weight: 600; font-size: var(--t-sm);
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--ac-fuerte); border-color: var(--ac-fuerte); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn--bloque { width: 100%; }
.btn--suave  { background: var(--superficie); color: var(--tinta); border-color: var(--borde); }
.btn--suave:hover { background: var(--fondo); color: var(--tinta); border-color: var(--tenue); }
.btn--mal    { background: var(--mal); border-color: var(--mal); }
.btn--mal:hover { background: #b02a3d; border-color: #b02a3d; }

/* --------------------------------------------------------------- campos --- */
.campo { margin-bottom: var(--e4); }
.campo label {
  display: block; margin-bottom: var(--e2);
  font-size: var(--t-sm); font-weight: 600;
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  /* Un <select> se ensancha por su opción más larga aunque tenga width:100%, y
     el ancho mínimo por contenido gana. Con 133 grupos en el desplegable de
     cambiar de grupo, "EV844 · IES CLAVERO FERNÁNDEZ DE CÓRDOBA" sacaba la
     ficha de la pantalla en el móvil. Con 23 grupos no se notaba. */
  min-width: 0;
  max-width: 100%;
  padding: var(--e3);
  min-height: 42px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  font: inherit; color: var(--tinta);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--ac); outline: 2px solid var(--ac-suave); outline-offset: 0;
}
.campo__ayuda { display: block; margin-top: var(--e2); font-size: var(--t-xs); color: var(--tenue); }

/* --------------------------------------------------------------- acceso --- */
body.es-acceso { display: grid; place-items: center; padding: var(--e4); }
.acceso { width: 100%; max-width: 380px; }
.acceso__caja {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-g);
  padding: var(--e6);
  box-shadow: var(--sombra);
}
/* En el acceso el logo va centrado y grande: es lo único que hay que reconocer
   antes de teclear. Sobre fondo blanco, que es para lo que está hecho. */
.acceso__marca {
  display: grid; justify-items: center; gap: var(--e3);
  margin-bottom: var(--e6);
}
.acceso__marca img { width: 100%; max-width: 220px; height: auto; }
.acceso__marca h1 {
  font-size: var(--t-xs); font-weight: 700; color: var(--tenue);
  text-transform: uppercase; letter-spacing: .16em;
}
.acceso__nota { margin: var(--e5) 0 0; font-size: var(--t-xs); color: var(--tenue); }

/* ------------------------------------------------------------- estrechas --- */
/* El menú lateral se retira y se saca con el botón. En un portátil de 13" o en
   una tablet, 232px fijos se comen la mitad de una tabla. */
@media (max-width: 900px) {
  .tope__menu { display: block; }
  .lateral {
    position: fixed; inset: 0 auto 0 0; z-index: 30;
    transform: translateX(-100%);
    transition: transform .18s ease;
  }
  .lateral.es-abierto { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.4); }
  .contenido { padding: var(--e4); }
  .tope { padding: var(--e3) var(--e4); }
}

@media (prefers-reduced-motion: reduce) {
  .lateral { transition: none; }
  .btn:active { transform: none; }
}

/* ============================================================================
   Listados y fichas
   ============================================================================ */

.barra-filtros {
  display: flex; flex-wrap: wrap; gap: var(--e3);
  align-items: center; justify-content: space-between;
  margin-bottom: var(--e5);
}
.filtros { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.filtros input, .filtros select {
  padding: var(--e2) var(--e3); min-height: 42px;
  background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--r-s);
  font: inherit; color: var(--tinta);
  /* Un <select> se ensancha por su opción más larga y en un flex el ancho
     mínimo por contenido gana. El de "apuntar a otro grupo" pasó de 23 opciones
     a 133, y "EV844 · IES CLAVERO FERNÁNDEZ DE CÓRDOBA" sacaba la ficha de la
     pantalla en el móvil. Se corta con puntos suspensivos. */
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
}
.filtros input[type=search] { min-width: 15rem; }
.filtros input:focus, .filtros select:focus { border-color: var(--ac); outline: 2px solid var(--ac-suave); }

/* La tabla se desplaza dentro de su caja, nunca la página entera: si desborda el
   documento, se pierde el menú y la cabecera al mirar la última columna. */
.tabla-envoltorio {
  overflow-x: auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-g);
  box-shadow: var(--sombra);
}
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabla th, .tabla td {
  padding: var(--e3) var(--e4);
  text-align: left;
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
}
.tabla thead th {
  position: sticky; top: 0;
  background: var(--fondo);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--medio); font-weight: 700;
  white-space: nowrap;
}
.tabla tbody tr:hover { background: #f7fafc; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tfoot td {
  background: var(--fondo); font-weight: 700;
  border-bottom: 0; border-top: 2px solid var(--borde);
}
.tabla .der    { text-align: right; }
.tabla .nowrap { white-space: nowrap; }
.tabla .fuerte { font-weight: 700; text-decoration: none; }
.tabla .fuerte:hover { text-decoration: underline; }
.tenue  { color: var(--tenue); }
/* Apuntados por encima de las plazas contratadas: no es un error de cuentas,
   es que hay que ampliar el grupo, así que se ve. */
.sobra  { color: var(--avisa); font-weight: 700; }

.marca {
  display: inline-block;
  padding: 2px 9px; border-radius: 99px;
  font-size: var(--t-xs); font-weight: 700; white-space: nowrap;
}
.marca--activo  { background: var(--ac-suave); color: #0e6d5f; }
.marca--cerrado { background: #e8edf3; color: var(--medio); }
.marca--borrado { background: #f1e7e9; color: #8a5560; }
.marca--avisa   { background: #fff2d9; color: var(--avisa); }

/* Lo que acompaña a una marca sin competir con ella: quién revisó, cuándo, o
   por qué se rechazó. Va en su propia línea porque en la columna de revisión
   pueden juntarse tres. */
.apunte {
  display: block;
  margin-top: 3px;
  font-size: var(--t-xs);
  color: var(--tenue);
  white-space: normal;
}
/* Un botón que no parece un botón, para deshacer: la acción existe pero no
   compite con "dar por bueno", que es a lo que se viene. */
.enlace-suave {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: var(--t-xs);
  color: var(--tenue); text-decoration: underline; cursor: pointer;
}
.enlace-suave:hover { color: var(--medio); }

/* ------------------------------------------------------------------ ficha -- */
.migas { font-size: var(--t-sm); color: var(--tenue); margin-bottom: var(--e4); }
.migas a { text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.migas span { margin: 0 var(--e2); }

.ficha {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-g);
  padding: var(--e5);
  box-shadow: var(--sombra);
  margin-top: var(--e5);
}
.ficha__rejilla {
  display: grid; gap: 0 var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.acciones {
  display: flex; flex-wrap: wrap; gap: var(--e3);
  margin-top: var(--e5); padding-top: var(--e5);
  border-top: 1px solid var(--borde);
}

.tarjetas--apretadas {
  margin-bottom: var(--e5);
  grid-template-columns: repeat(auto-fill, minmax(200px, 300px));
}
.tarjetas--apretadas .tarjeta { padding: var(--e4); }
.tarjetas--apretadas .tarjeta__cifra { font-size: var(--t-xl); }

.nota--peligro { border-color: #f0c9cf; }
.nota--peligro h2 { color: #8f1f2e; }

/* ------------------------------------------------------------- viajeros --- */
.casilla {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-size: var(--t-sm); cursor: pointer;
}
/* Sin partir mientras quepa, pero partiendo cuando no: la etiqueta era de una
   sola palabra ("Sólo menores") y se puso el nowrap sin pensar en las largas.
   Una frase entera se salía de la pantalla en el móvil. */
.casilla { white-space: nowrap; }
.casilla--larga, .casilla:has(> span) { white-space: normal; align-items: flex-start; }
.casilla:has(> span) input { margin-top: 2px; flex: none; }
.casilla input { width: 17px; height: 17px; accent-color: var(--ac); }

/* Los menores en rojo, como en la intranet: de esta cifra depende que haya que
   reclamarles la autorización firmada de sus padres. */
.menor { color: var(--mal); font-weight: 700; }

/* Un viaje de un viajero, con sus pagos, sus seguros y sus documentos. */
.bloque {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-g);
  padding: var(--e5);
  box-shadow: var(--sombra);
  margin-bottom: var(--e5);
}
.bloque__tope { margin-bottom: var(--e4); }

/* Campos en dos columnas cuando hay sitio: son datos cortos (un teléfono, un
   código postal) y en una sola columna la pantalla queda medio vacía y hay que
   bajar mucho para verlos todos. */
.rejilla-campos { display: grid; gap: var(--e3) var(--e4); }
@media (min-width: 720px) { .rejilla-campos { grid-template-columns: repeat(2, 1fr); } }
.bloque__tope h2 { margin: 0 0 var(--e1); font-size: var(--t-lg); }
.bloque__meta  { font-size: var(--t-sm); color: var(--medio); }
.bloque h3 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .05em;
             color: var(--medio); margin: var(--e5) 0 var(--e3); }
.bloque h3:first-child { margin-top: 0; }

.columnas { display: grid; gap: var(--e5); }
@media (min-width: 800px) { .columnas { grid-template-columns: 1fr 1fr; } }

.listilla { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.listilla li {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3);
  padding: var(--e3);
  border: 1px solid var(--borde); border-radius: var(--r-s);
  font-size: var(--t-sm);
}
.listilla__txt   { flex: 1 1 12ch; min-width: 0; display: grid; gap: 2px; }
.listilla__txt .tenue { font-size: var(--t-xs); }
.listilla__cifra { font-weight: 700; white-space: nowrap; }

.apretado { margin-top: var(--e5); }

/* ---------------------------------------------------------------- pestañas -- */
.pestanas {
  display: flex; flex-wrap: wrap; gap: var(--e1);
  border-bottom: 1px solid var(--borde);
  margin-bottom: var(--e5);
}
.pestana {
  padding: var(--e3) var(--e4);
  color: var(--medio); text-decoration: none;
  font-size: var(--t-sm); font-weight: 600;
  border-bottom: 3px solid transparent;
  display: inline-flex; align-items: center; gap: var(--e2);
}
.pestana:hover { color: var(--tinta); }
.pestana.es-actual { color: var(--ac-fuerte); border-bottom-color: var(--ac); }
.pestana__n {
  background: var(--fondo); color: var(--medio);
  padding: 1px 8px; border-radius: 99px;
  font-size: var(--t-xs); font-weight: 700;
}
/* Sólo se pinta el contador de lo que está esperando a alguien. */
.pestana__n.es-avisa { background: #fff2d9; color: var(--avisa); }

/* --------------------------------------------------- acciones en la fila --- */
/* Las dos decisiones van en la propia fila y no en una ficha aparte: en
   temporada llegan decenas de justificantes al día y abrir uno por uno para
   darle a un botón es media mañana. */
.acciones-fila { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: flex-start; }

.mini {
  display: inline-block;
  padding: 6px 12px; min-height: 34px;
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--borde); border-radius: var(--r-s);
  font: inherit; font-size: var(--t-xs); font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.mini:hover     { border-color: var(--tenue); }
.mini--ok       { background: var(--ac); border-color: var(--ac); color: #fff; }
.mini--ok:hover { background: var(--ac-fuerte); border-color: var(--ac-fuerte); }
.mini--mal      { color: var(--mal); border-color: #f0c9cf; }
.mini--mal:hover{ background: #fdeef0; border-color: var(--mal); }

/* El motivo del rechazo se despliega en la fila. Sin JavaScript: <details> lo
   hace solo, y así funciona aunque falle cualquier script de la página. */
.desplegable { position: relative; }
.desplegable > summary { list-style: none; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable__caja {
  position: absolute; z-index: 20; right: 0; margin-top: var(--e2);
  width: 300px; padding: var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borde); border-radius: var(--r-m);
  box-shadow: 0 8px 30px rgba(16,35,43,.16);
}
.desplegable__caja label {
  display: block; margin-bottom: var(--e2);
  font-size: var(--t-xs); font-weight: 600; color: var(--medio);
}
.desplegable__caja textarea {
  width: 100%; padding: var(--e2);
  border: 1px solid var(--borde); border-radius: var(--r-s);
  font: inherit; font-size: var(--t-sm);
  margin-bottom: var(--e3);
}
/* En pantallas estrechas no cabe flotando: pasa a ocupar el ancho de la fila. */
@media (max-width: 700px) {
  .desplegable__caja { position: static; width: 100%; }
}

/* --------------------------------------------------------- respuestas --- */
/* Lo que ya se le ha contestado, para no repetirse ni contradecirse cuando la
   misma persona vuelve a escribir semanas después. */
.respuesta {
  padding: var(--e4);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--ac);
  border-radius: var(--r-s);
  margin-bottom: var(--e3);
  font-size: var(--t-sm);
}
.respuesta__tope {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3);
  justify-content: space-between; align-items: baseline;
  margin-bottom: var(--e3);
}
.respuesta__tope .tenue { font-size: var(--t-xs); }

/* Tarjeta que además lleva a algún sitio */
a.tarjeta { text-decoration: none; color: inherit; }
a.tarjeta:hover { border-color: var(--ac); }

/* --------------------------------------------------------- la temporada --- */
/* Arriba y siempre a la vista: todo lo que hay debajo es de esta campaña y sólo
   de ésta. Si no se viera, en septiembre se empezaría a trabajar sobre los datos
   del año pasado sin darse cuenta. */
.tope__temporada select {
  padding: var(--e2) var(--e3); min-height: 38px;
  background: var(--ac-suave); color: #0e6d5f;
  border: 1px solid transparent; border-radius: var(--r-s);
  font: inherit; font-size: var(--t-sm); font-weight: 700;
  cursor: pointer;
}
.tope__temporada select:hover { border-color: var(--ac); }
.tope__temporada--sola a {
  display: inline-block;
  padding: 6px var(--e3);
  background: var(--ac-suave); color: #0e6d5f;
  border-radius: var(--r-s);
  font-size: var(--t-sm); font-weight: 700; text-decoration: none;
}
@media (max-width: 700px) {
  /* En estrecho, el nombre de quien ha entrado estorba más de lo que aporta */
  .tope__quien { display: none; }
}

/* ---------------------------------------------------- ordenar y paginar --- */
/* La cabecera es un enlace, pero no tiene que parecer un enlace suelto: se ve
   que se puede pulsar al pasar por encima, y la que ordena lleva su flecha. */
.tabla th .orden {
  display: inline-flex; align-items: center; gap: 6px;
  color: inherit; text-decoration: none;
  font: inherit; font-weight: inherit;
}
.tabla th .orden:hover { color: var(--ac-fuerte); }
.tabla th.es-orden { color: var(--tinta); }
.orden__flecha { font-size: .8em; color: var(--ac); }

.paginacion {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e3);
  margin-top: var(--e4);
  font-size: var(--t-sm);
}
.paginacion__cuenta  { color: var(--medio); }
.paginacion__botones { display: flex; flex-wrap: wrap; gap: var(--e1); }

.pagina {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 34px; padding: 0 var(--e2);
  border: 1px solid var(--borde); border-radius: var(--r-s);
  background: var(--superficie); color: var(--tinta);
  text-decoration: none;
}
.pagina:hover { border-color: var(--tenue); color: var(--tinta); }
.pagina--activa { background: var(--ac); border-color: var(--ac); color: #fff; font-weight: 600; }
/* El anterior de la primera página se queda a la vista pero apagado: si
   desapareciera, los botones bailarían de sitio al cambiar de página. */
.pagina--muerta { color: var(--tenue); background: var(--fondo); cursor: default; }
.pagina--puntos { border: 0; background: none; color: var(--tenue); min-width: 18px; }