/* ============================================================================
   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 -- */
.tarjetas {
  display: grid; gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.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%;
  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);
}
.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); }

/* ------------------------------------------------------------------ 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); }
.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); white-space: nowrap; cursor: pointer;
}
.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); }
.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; }
}