/* =====================================================================================================================
   Gestión de Tenerife Trail — hoja de estilos única.
   Todos los valores salen de los tokens de :root (claro) y de su versión oscura. Los contrastes de los pares de texto
   y fondo están en docs/HISTORIAL.md (spec 010) y los comprueba club/tests_estilo.py: si cambias un color, pásala.
   Colores del club: azul y amarillo del logo, azul océano, negro volcánico, gris basalto y arena; el rojo picón, solo
   para avisos. Los colores de los gráficos y de los tipos de licencia (--serie-*) NO se tocan: paleta validada.
   ===================================================================================================================== */

/* --- Tokens ---------------------------------------------------------------------------------------------------- */
:root {
  --fondo: #f2f2ee;  --tarjeta: #ffffff;  --suave: #f6f6f3;
  --texto: #1b1b1b;  --tenue: #52524e;
  --borde: #dcdcd5;  --control: #8a8a83;
  --acento: #2a6f8f; --acento-texto: #ffffff;
  --enlace: #1f6283; --resalte: #e5eff4;
  --error: #8c2f23;  --error-suave: #f8ebe9; --error-texto: #ffffff;
  --ok: #1f6283;     --ok-suave: #e5eff4;
  --cabecera: #1b1b1b; --cab-texto: #e6e1d6; --cab-tenue: #a8a49a;
  --marca: #0085ca;  --amarillo: #ffd700;

  --letra: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-xs: .75rem; --t-s: .875rem; --t-m: 1rem; --t-l: 1.25rem; --t-xl: 1.625rem;
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px;
  --radio: 10px; --radio-peq: 6px;
  --sombra-1: 0 1px 2px rgb(0 0 0 / .06), 0 1px 3px rgb(0 0 0 / .08);
  --sombra-2: 0 6px 20px rgb(0 0 0 / .18);

  /* Gráficos (validados con validate_palette.py). */
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a;
  --serie-4: #eda100; --serie-5: #e87ba4; --serie-6: #008300;
  --serie-neutra: #9a968c;
  --grafico-rejilla: #e1e0d9; --grafico-eje: #c3c2b7; --grafico-tenue: #6f6d68;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #111213;  --tarjeta: #1b1c1e;  --suave: #222326;
    --texto: #ebe7dd;  --tenue: #aaa69b;
    --borde: #323438;  --control: #6c6e73;
    --acento: #2a6f8f; --acento-texto: #ffffff;
    --enlace: #6cb6e0; --resalte: #1b2c36;
    --error: #ff9a8a;  --error-suave: #3a2220; --error-texto: #1b1b1b;
    --ok: #6cb6e0;     --ok-suave: #1b2c36;
    --cabecera: #000000; --cab-texto: #e6e1d6; --cab-tenue: #a8a49a;
    --sombra-1: none;
    --sombra-2: 0 6px 20px rgb(0 0 0 / .6);

    --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70;
    --serie-4: #c98500; --serie-5: #d55181; --serie-6: #008300;
    --serie-neutra: #7d7a72;
    --grafico-rejilla: #2c2c2a; --grafico-eje: #383835; --grafico-tenue: #98948c;
  }
}

/* --- Base ------------------------------------------------------------------------------------------------------ */
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--letra); font-size: var(--t-m); line-height: 1.5; }
a { color: var(--enlace); }
:focus-visible { outline: 3px solid var(--enlace); outline-offset: 2px; }
main { max-width: 1100px; margin: 0 auto; padding: var(--esp-5) 16px var(--esp-6); }
h1 { font-size: var(--t-xl); font-weight: 700; line-height: 1.25; margin: 0; }
h2 { font-size: var(--t-s); margin: var(--esp-5) 0 var(--esp-2); color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; }
h2:first-child { margin-top: 0; }
.num, td.num, .cifra-valor, time { font-variant-numeric: tabular-nums; }

/* --- Cabecera: banda negra con dos filas (secciones y pestañas de la sección) ---------------------------------- */
.barra { background: var(--cabecera); color: var(--cab-texto); border-bottom: 3px solid var(--marca); }
.barra-fila { display: flex; align-items: center; gap: var(--esp-5); padding: 0 16px; }
.barra-fila:first-child { min-height: 60px; }
.barra a { color: var(--cab-texto); text-decoration: none; }
.marca { display: flex; align-items: center; gap: var(--esp-3); flex: none; }
.marca img { height: 40px; width: auto; display: block; }
.marca span { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--cab-tenue); }
.menu-principal { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--esp-5); min-width: 0; }
.menu-principal nav { display: flex; gap: var(--esp-1); flex-wrap: wrap; }
.menu-principal nav a { display: inline-flex; align-items: center; gap: 6px; padding: 18px 10px 15px; border-bottom: 3px solid transparent; white-space: nowrap; }
.menu-principal nav a:hover { color: #fff; background: rgb(255 255 255 / .06); }
/* La sección actual se distingue por la barra amarilla y el peso, no solo por el color. */
.menu-principal nav a.activa { color: #fff; font-weight: 600; border-bottom-color: var(--amarillo); }
.icono { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.salir { display: flex; gap: var(--esp-3); align-items: center; font-size: var(--t-s); margin: 0; white-space: nowrap; }
.salir .usuario { color: var(--cab-tenue); text-decoration: none; }
.salir a.usuario:hover, .salir a.usuario:focus-visible { color: #fff; text-decoration: underline; }
.barra .temporada { padding: 2px 10px; border: 1px solid var(--cab-tenue); border-radius: 999px; }
.barra .temporada:hover { color: #fff; border-color: var(--cab-texto); }
button.enlace { background: none; border: 0; color: var(--cab-texto); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
button.enlace:hover { color: #fff; }
/* Sobre la banda negra, el rojo oscuro del tema claro apenas se distingue: las insignias usan el rojo claro. */
.barra .insignia { background: #ff9a8a; color: #1b1b1b; }

/* Segunda fila: pestañas de la sección. Si no caben, se desplazan dentro de su fila (la página no). */
.barra-pestanas { border-top: 1px solid rgb(255 255 255 / .08); }
.pestanas { display: flex; gap: var(--esp-5); overflow-x: auto; white-space: nowrap; scrollbar-width: thin; }
.pestanas a { display: block; padding: 10px 2px 8px; font-size: var(--t-s); color: var(--cab-tenue); border-bottom: 3px solid transparent; }
.pestanas a:hover { color: var(--cab-texto); }
.pestanas a.activa { color: #fff; font-weight: 600; border-bottom-color: var(--amarillo); }

/* Foco en la cabecera: amarillo (el azul apenas se ve sobre negro); en las pestañas, por dentro, porque su fila con
   desplazamiento recortaría un contorno exterior. */
.barra a:focus-visible, .barra button:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.pestanas a:focus-visible { outline-offset: -3px; }

/* Menú plegable del móvil: solo con menu.js (clase «plegable»); sin script todo queda visible. */
.boton-menu, .seccion-actual { display: none; }
@media (max-width: 759px) {
  .barra-fila:first-child { flex-wrap: wrap; gap: var(--esp-3); min-height: 56px; }
  .marca img { height: 32px; }
  .marca span { display: none; }
  .menu-principal { flex-basis: 100%; flex-wrap: wrap; padding-bottom: var(--esp-2); }
  .menu-principal nav a { padding: 10px 8px; }
  .plegable .seccion-actual { display: block; flex: 1; color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .plegable .boton-menu { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; margin-left: auto;
    background: none; color: var(--cab-texto); border: 1px solid var(--cab-tenue); border-radius: var(--radio-peq); font: inherit; cursor: pointer; }
  .plegable .menu-principal { display: none; }
  .plegable.abierto .menu-principal { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 var(--esp-3); }
  .plegable.abierto .menu-principal nav { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .plegable.abierto .menu-principal nav a { min-height: 48px; padding: 0 var(--esp-2); border-bottom: 0; border-left: 3px solid transparent; }
  .plegable.abierto .menu-principal nav a.activa { border-left-color: var(--amarillo); background: rgb(255 255 255 / .06); }
  .plegable.abierto .salir { flex-wrap: wrap; padding: var(--esp-3) var(--esp-2) 0; border-top: 1px solid rgb(255 255 255 / .12); }
  .pestanas { gap: var(--esp-4); }
}

/* --- Página y superficies ------------------------------------------------------------------------------------- */
.cabecera { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-4); margin-bottom: var(--esp-5); flex-wrap: wrap; }
.migas { margin: 0 0 var(--esp-2); font-size: var(--t-s); }
.migas a { text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1); padding: var(--esp-4) var(--esp-5); margin-bottom: var(--esp-4); }
.resumen { color: var(--tenue); margin: 0 0 var(--esp-3); }
.ayuda { margin-left: var(--esp-2); font-size: var(--t-s); }
.tenue { color: var(--tenue); }
.vacio { text-align: center; color: var(--tenue); padding: var(--esp-5); }

/* --- Mensajes y avisos: borde de color, fondo suave y una palabra oculta («Hecho:», «Atención:») --------------- */
.mensajes { list-style: none; padding: 0; margin: 0 0 var(--esp-4); display: grid; gap: var(--esp-2); }
.mensajes li { display: flex; gap: var(--esp-2); align-items: flex-start; padding: var(--esp-3) var(--esp-4); border-radius: var(--radio);
  background: var(--ok-suave); color: var(--texto); border: 1px solid var(--borde); border-left: 4px solid var(--ok); }
.mensajes li.error, .mensajes li.warning { background: var(--error-suave); border-left-color: var(--error); }
.mensajes .icono { margin-top: 3px; color: var(--ok); }
.mensajes li.error .icono, .mensajes li.warning .icono { color: var(--error); }
.error, .errorlist { color: var(--error); list-style: none; padding: 0; margin: var(--esp-1) 0 0; font-size: var(--t-s); }
.aviso { border-color: var(--error); color: var(--error); }
.aviso.tarjeta { background: var(--error-suave); color: var(--texto); border-left: 4px solid var(--error); box-shadow: none; }

/* --- Botones: principal (uno por pantalla), secundario, de texto y de peligro ---------------------------------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 var(--esp-4);
  background: var(--acento); color: var(--acento-texto); border: 1px solid var(--acento); border-radius: var(--radio-peq);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .12s, border-color .12s, color .12s; }
.boton:hover { background: color-mix(in srgb, var(--acento) 85%, #000); border-color: color-mix(in srgb, var(--acento) 85%, #000); }
.boton:active { transform: translateY(1px); }
.boton.secundario { background: var(--tarjeta); color: var(--enlace); border-color: var(--enlace); }
.boton.secundario:hover { background: var(--resalte); }
.boton.texto { background: transparent; color: var(--enlace); border-color: transparent; padding: 0 var(--esp-2); text-decoration: underline; }
.boton.texto:hover { background: var(--resalte); }
.boton.peligro { background: var(--tarjeta); color: var(--error); border-color: var(--error); }
.boton.peligro:hover { background: var(--error-suave); }
.boton:disabled, .boton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.boton.pequeno { min-height: 30px; padding: 0 var(--esp-3); font-size: var(--t-s); font-weight: 500; }

/* --- Campos ----------------------------------------------------------------------------------------------------- */
input[type=text], input[type=search], input[type=email], input[type=date], input[type=password], input[type=number], input[type=file], select, textarea {
  width: 100%; min-height: 40px; padding: var(--esp-2) var(--esp-3); border: 1px solid var(--control); border-radius: var(--radio-peq);
  background: var(--tarjeta); color: var(--texto); font: inherit;
}
input:hover, select:hover, textarea:hover { border-color: var(--tenue); }
.buscador { display: flex; gap: var(--esp-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--esp-4); }
.buscador input[type=search] { flex: 1 1 320px; width: auto; font-size: 1.05rem; }
.check { display: flex; gap: var(--esp-2); align-items: center; white-space: nowrap; }
input[type=checkbox], input[type=radio] { accent-color: var(--acento); }

/* --- Tablas: siempre dentro de .tabla-scroll, que se desplaza en horizontal si no caben (la página no) --------- */
/* position: relative para que los textos ocultos (.sr-only, absolutos) queden dentro y no ensanchen la página. */
.tabla-scroll { position: relative; overflow-x: auto; max-width: 100%; margin-bottom: var(--esp-4); }
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra-1); overflow: hidden; }
.tabla th, .tabla td { text-align: left; padding: 11px var(--esp-3); border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla > :last-child > tr:last-child > * { border-bottom: 0; }
.tabla tfoot td, .tabla tfoot th { border-top: 2px solid var(--borde); font-weight: 600; }
.tabla thead th { background: var(--suave); font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); white-space: nowrap; }
.tabla tbody tr:hover { background: var(--resalte); }
/* Solo las filas que abren algo (doble clic) llevan la mano. */
.tabla tr[data-url] { cursor: pointer; }
.tabla tr.baja td { color: var(--tenue); }
.tabla .num, .tabla th.num { text-align: right; }

/* --- Paginación común (spec 011) -------------------------------------------------------------------------------- */
.paginacion { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3); flex-wrap: wrap;
  margin: var(--esp-3) 0 var(--esp-5); color: var(--tenue); font-size: var(--t-s); }
.paginacion-enlaces { display: flex; align-items: center; gap: var(--esp-3); }

/* --- Etiquetas de estado: siempre con texto; el rojo, solo para avisos ----------------------------------------- */
.etiqueta, .estado { display: inline-block; font-size: var(--t-xs); font-weight: 600; line-height: 1.6; border: 1px solid var(--borde);
  border-radius: 999px; padding: 0 var(--esp-2); color: var(--tenue); background: var(--suave); vertical-align: middle; white-space: nowrap; }
.estado.ok { color: var(--ok); background: var(--ok-suave); border-color: transparent; }
.estado.aviso { color: var(--error); background: var(--error-suave); border-color: var(--error); }
.estado.neutro { color: var(--tenue); background: var(--suave); }
.estado.apagado { color: var(--tenue); background: transparent; }

/* Línea de tiempo */
.historial-scroll { overflow-x: auto; }
.historial { border-collapse: collapse; min-width: 100%; text-align: center; }
.historial th, .historial td { padding: .4rem .5rem; min-width: 3.4rem; }
.historial thead th { font-size: .85rem; color: var(--tenue); font-weight: 600; }
.historial tbody th { text-align: left; font-size: .85rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; padding-right: 1rem; white-space: nowrap; }
.historial tbody tr + tr td, .historial tbody tr + tr th { border-top: 1px solid var(--borde); }
.historial .abierta { background: var(--resalte); }
/* Licencia base y ampliación del mismo año: superpuestas, con un anillo del color del fondo que las separa. */
.chips-juntas { display: inline-flex; white-space: nowrap; }
.chips-juntas .chip + .chip { margin-left: -6px; box-shadow: 0 0 0 2px var(--tarjeta); }
.historial .abierta .chips-juntas .chip + .chip { box-shadow: 0 0 0 2px var(--resalte); }
.historial thead .abierta { color: var(--enlace); font-weight: 700; }
.leyenda { margin: .75rem 0 0; font-size: .85rem; color: var(--tenue); }

.punto { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--enlace); vertical-align: middle; }
.punto.lleno { background: var(--enlace); }
.punto.hueco { background: transparent; border-color: var(--error); }
.chip { --c: var(--tenue); --ct: #0b0b0b; display: inline-block; min-width: 2.2rem; padding: .1rem .5rem; border-radius: 6px; border: 2px solid var(--c); background: var(--c); color: var(--ct); font-weight: 700; font-size: .85rem; text-align: center; line-height: 1.4; margin: 1px; }
/* No tramitada: borde discontinuo del color del tipo y texto normal, para que se lea siempre. */
.chip.pendiente { background: transparent; color: var(--texto); border-style: dashed; }
/* Un color por tipo de licencia, el mismo que en los gráficos. Texto negro porque es lo que mejor se
   lee sobre estos colores (el verde del tipo E es la excepción). */
.chip { --ct: #0b0b0b; }
.tipo-AU { --c: var(--serie-1); } .tipo-A { --c: var(--serie-2); } .tipo-B { --c: var(--serie-3); }
.tipo-C { --c: var(--serie-4); } .tipo-D { --c: var(--serie-5); } .tipo-E { --c: var(--serie-6); --ct: #fff; }

/* Ficha */
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem 1.5rem; margin: 0; }
.datos dt { font-size: .8rem; color: var(--tenue); }
.datos dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* Formulario */
.formulario fieldset { min-width: 0; }
.formulario legend { padding: 0 .4rem; color: var(--tenue); font-weight: 600; }
.rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .9rem 1.25rem; }
.campo { grid-column: span 12; }
@media (min-width: 820px) {
  .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; } .span-9 { grid-column: span 9; }
}
.campo label { display: block; font-size: var(--t-s); font-weight: 500; color: var(--tenue); margin-bottom: var(--esp-1); }
.campo small { color: var(--tenue); font-size: .78rem; }
.campo.con-error input, .campo.con-error select, .campo.con-error textarea { border-color: var(--error); border-width: 2px; }
.acciones { display: flex; gap: var(--esp-3); flex-wrap: wrap; align-items: center; }
/* Página de acceso: tarjeta centrada con el logo; sin menú. */
.acceso { max-width: 360px; margin: var(--esp-6) auto; display: grid; gap: var(--esp-4); padding: var(--esp-6) var(--esp-5); }
.acceso .logo { width: 220px; max-width: 100%; height: auto; margin: 0 auto var(--esp-2); display: block; }
.acceso h1 { font-size: var(--t-l); text-align: center; }
.acceso label { display: grid; gap: var(--esp-1); font-size: var(--t-s); font-weight: 500; color: var(--tenue); }
.acceso .boton { width: 100%; min-height: 44px; margin-top: var(--esp-2); }
/* Verificación en dos pasos (spec 012): código, alta con QR y códigos de respaldo. */
.acceso .ayuda { margin: 0; color: var(--tenue); }
.acceso label.casilla { display: flex; gap: var(--esp-2); align-items: flex-start; font-weight: 400; }
.acceso label.casilla input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; flex: none; }
.acceso.alta, .acceso.codigos { max-width: 480px; }
.pasos-alta { display: grid; gap: var(--esp-4); padding-left: 1.4rem; margin: 0; }
.pasos-alta details { margin-top: var(--esp-2); font-size: var(--t-s); }
.pasos-alta summary { cursor: pointer; color: var(--enlace); }
/* El QR siempre negro sobre blanco: en tema oscuro, invertido, muchas apps no lo leen. */
.qr { background: #fff; padding: var(--esp-3); border-radius: 8px; width: fit-content; max-width: 100%; box-sizing: border-box; margin: var(--esp-3) auto 0; }
.qr svg { display: block; width: 240px; max-width: 100%; height: auto; }
.clave-alta { display: block; font-family: ui-monospace, Consolas, monospace; font-size: var(--t-m); letter-spacing: .05em;
  word-break: break-all; padding: var(--esp-2) var(--esp-3); background: var(--resalte); border-radius: 6px; margin-top: var(--esp-2); }
.codigos-respaldo { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-2) var(--esp-5); margin: 0; padding-left: 1.6rem; }
.codigos-respaldo code { font-family: ui-monospace, Consolas, monospace; font-size: var(--t-m); letter-spacing: .05em; }
.acceso-cancelar { text-align: center; margin-top: calc(-1 * var(--esp-4)); }
@media (max-width: 420px) { .codigos-respaldo { grid-template-columns: 1fr; } }
@media print {
  body * { visibility: hidden; }
  .codigos, .codigos * { visibility: visible; }
  .codigos { position: absolute; inset: 0 auto auto 0; box-shadow: none; border: 0; }
  .codigos .boton { display: none; }
}

.sangria { margin-left: 1.6rem; margin-top: .5rem; }
.pendiente-texto { color: var(--error); }
fieldset.tarjeta { min-width: 0; }
fieldset.tarjeta legend { padding: 0 .4rem; color: var(--tenue); font-weight: 600; }
.check input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--acento); }

/* Botón pequeño y tablas con acciones */
td.accion { width: 1%; white-space: nowrap; text-align: right; }
td.accion form { margin: 0; }
.insignia { display: inline-block; min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--error); color: var(--error-texto); font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.4rem; }

/* Tramitar */
.dato { display: flex; flex-direction: column; min-width: 0; }
.dato-valor { font: inherit; font-weight: 500; text-align: left; padding: .1rem .3rem; margin-left: -.3rem; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--texto); overflow-wrap: anywhere; }
button.dato-valor { cursor: copy; }
button.dato-valor:hover { border-color: var(--borde); background: var(--resalte); }
button.dato-valor.copiado { background: var(--acento); color: var(--acento-texto); }
.dato.falta .dato-valor { color: var(--error); font-weight: 700; }
.vacio-dato { color: var(--tenue); }

/* Tramitar: una fila por licencia */
main.ancha { max-width: none; }
.tabla-tramite { overflow: auto; max-height: calc(100vh - 290px); min-height: 12rem; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; }
.tabla-tramite table { border-collapse: separate; border-spacing: 0; font-size: .8rem; width: max-content; min-width: 100%; }
.tabla-tramite th, .tabla-tramite td { padding: .2rem .4rem; border-bottom: 1px solid var(--borde); white-space: nowrap; text-align: left; background: var(--tarjeta); }
.tabla-tramite th { position: sticky; top: 0; z-index: 2; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tenue); background: var(--tarjeta); border-bottom: 2px solid var(--borde); }
.tabla-tramite tbody tr:hover td { background: var(--resalte); }
.tabla-tramite tr.descartada td { opacity: .45; }
.tabla-tramite tr.con-faltas td.fijo1, .tabla-tramite tr.con-faltas td.fijo2 { box-shadow: inset 3px 0 0 var(--error); }
/* Las tres primeras columnas se quedan a la izquierda al desplazar en horizontal. */
.fijo1, .fijo2, .fijo3 { position: sticky; z-index: 1; }
th.fijo1, th.fijo2, th.fijo3 { z-index: 3; }
.fijo1 { left: 0; width: 2rem; }
.fijo2 { left: 2.2rem; }
.fijo3 { left: 5.9rem; border-right: 2px solid var(--borde); }
.tabla-tramite .dato-valor { display: block; max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .1rem .3rem; margin: 0 -.3rem; }
.tabla-tramite .col-nifnie .dato-valor { max-width: 6rem; }
.tabla-tramite .col-doc .dato-valor, .tabla-tramite .col-genero .dato-valor, .tabla-tramite .col-discap .dato-valor { max-width: 4.5rem; }
.tabla-tramite .col-nombre .dato-valor { max-width: 6.5rem; }
.tabla-tramite .col-apellidos .dato-valor { max-width: 8.5rem; }
.tabla-tramite .col-provincia .dato-valor, .tabla-tramite .col-municipio .dato-valor { max-width: 7.5rem; }
.tabla-tramite .col-direccion .dato-valor { max-width: 11rem; }
.tabla-tramite .col-email .dato-valor { max-width: 12rem; }
.tabla-tramite td.falta { background: color-mix(in srgb, var(--error) 12%, var(--tarjeta)); }
.tabla-tramite .chip { min-width: 0; margin: 0; }
.barra-acciones { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; padding: .75rem 0 0; }

/* Informes */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--esp-3); margin-bottom: var(--esp-5); }
.cifra { display: flex; flex-direction: column; gap: var(--esp-1); padding: var(--esp-3) var(--esp-4); background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1); }
.cifra-etiqueta { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); }
.cifra-valor { font-size: 2rem; font-weight: 700; line-height: 1.15; color: var(--texto); }
.cifra-valor.alerta { color: var(--error); }
.indice-informes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--esp-4); }
.indice-informes a.tarjeta { margin: 0; text-decoration: none; color: var(--texto); }
.indice-informes a.tarjeta { transition: border-color .12s, box-shadow .12s; }
.indice-informes a.tarjeta:hover { border-color: var(--enlace); box-shadow: var(--sombra-2); }
.indice-informes h2, .indice-informes h3 { text-transform: none; letter-spacing: 0; font-size: 1.05rem; color: var(--texto); margin: 0 0 .35rem; }
.indice-informes p { margin: 0; color: var(--tenue); font-size: var(--t-s); }
.tabla-datos .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-datos tr.total td { border-top: 2px solid var(--borde); }
.tabla-twin summary { cursor: pointer; color: var(--enlace); margin-top: .75rem; }

/* Gráficos */
.grafico { width: 100%; height: auto; display: block; }
.g-rejilla { stroke: var(--grafico-rejilla); stroke-width: 1; }
.g-base { stroke: var(--grafico-eje); stroke-width: 1; }
.g-eje { fill: var(--grafico-tenue); font: 11px system-ui, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; }
.g-etiqueta { fill: var(--tenue); font: 12px system-ui, "Segoe UI", sans-serif; }
.g-valor { fill: var(--texto); font: 600 12px system-ui, "Segoe UI", sans-serif; }
.g-hit { fill: transparent; outline: none; }
.g-hit:hover, .g-hit:focus { fill: rgba(128, 128, 128, .10); }
.g-hit:focus-visible { stroke: var(--acento); stroke-width: 2; }
.g-col:hover .g-seg, .g-col:focus-within .g-seg { filter: brightness(1.1); }
.g-leyenda { list-style: none; display: flex; gap: 1.1rem; flex-wrap: wrap; padding: 0; margin: 0 0 .5rem; font-size: .85rem; color: var(--tenue); }
.g-muestra { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; margin-right: .4rem; vertical-align: -1px; }
.g-tip { position: fixed; z-index: 60; pointer-events: none; min-width: 9rem; padding: .45rem .7rem; background: var(--tarjeta); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--radio-peq); box-shadow: var(--sombra-2); font-size: var(--t-s); }
.g-tip[hidden] { display: none; }
.g-tip-titulo { font-weight: 600; margin-bottom: .2rem; }
.g-tip-fila { display: flex; align-items: center; gap: .5rem; }
.g-tip-clave { display: inline-block; width: .9rem; height: 3px; border-radius: 2px; flex: none; }
.g-tip-valor { font-weight: 700; min-width: 2rem; text-align: right; font-variant-numeric: tabular-nums; }
.g-tip-nombre { color: var(--tenue); }

/* Tablas de cifras: el ancho lo manda el contenido, no la pantalla. */
.tabla-compacta { width: auto; min-width: 0; }
.tabla-compacta th, .tabla-compacta td { padding: var(--esp-2) var(--esp-4); white-space: nowrap; }

/* Rejilla de precios de licencias por temporada */
.tabla-precios td { white-space: nowrap; vertical-align: top; }
.tabla-precios input[type="text"] { width: 5.5rem; text-align: right; }
.tabla-precios label { display: block; font-size: .8rem; margin-top: .25rem; }
.tabla-precios td.con-error input[type="text"] { border-color: var(--error); }
.tabla-datos td.num { white-space: nowrap; }  /* «143,00 €» en una línea; las tablas anchas hacen scroll */

/* Bloque «A cobrar» de la pantalla de alta */
.importe-alta h2 { margin-top: 0; }
.importe-lineas { list-style: none; margin: 0 0 .5rem; padding: 0; }
.importe-lineas li { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
.importe-lineas .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.importe-total { font-size: 1.15rem; font-weight: 700; margin: .5rem 0 .25rem; padding-top: .5rem; border-top: 2px solid var(--borde); }
.aviso-precio { color: var(--error); margin: .25rem 0; }

/* Movimientos del banco */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cifra-valor small { font-size: 1rem; font-weight: 500; color: var(--tenue); }
.g-linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.g-punto { stroke: var(--tarjeta); stroke-width: 2; }
.fila-form { display: flex; gap: .75rem 1rem; align-items: flex-end; flex-wrap: wrap; padding: .6rem 0; border-top: 1px solid var(--borde); margin: 0; }
.fila-form:first-of-type { border-top: 0; }
.fila-form.inactiva { opacity: .75; }
.fila-form .campo { grid-column: auto; min-width: 12rem; }
.fila-form .check { padding-bottom: .5rem; }
.cifra-valor.texto { font-size: 1.15rem; line-height: 2.2rem; }

.en-linea { display: inline-flex; gap: var(--esp-2); align-items: center; margin: 0; }
/* Marca «a revisar» (spec 011): un botón con bandera; marcado = rellena en rojo de aviso, sin marcar = contorno gris.
   Se distinguen por la forma (relleno), no solo por el color. */
.marca-revisar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: var(--radio-peq); color: var(--tenue); cursor: pointer; }
.marca-revisar .icono { width: 20px; height: 20px; }
.marca-revisar:hover { background: var(--resalte); border-color: var(--borde); }
.marca-revisar[aria-pressed="true"] { color: var(--error); }
.marca-revisar[aria-pressed="true"] .icono { fill: currentColor; }
@media (max-width: 759px) { .marca-revisar { width: 44px; height: 44px; } }
/* Cifras del banco: la de «a revisar» es estrecha y no cambia el ancho de las otras cuatro. */
.cifras.con-compacta { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
.cifra.compacta { min-width: 96px; }
@media (max-width: 759px) { .cifras.con-compacta { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }

/* Material: filas de las entradas y ventas masivas */
.filas-masivas td { vertical-align: top; }
.filas-masivas td input[type=text] { min-width: 13rem; }
.filas-masivas td input[type=number] { min-width: 5rem; max-width: 8rem; text-align: right; }
.filas-masivas td select { min-width: 9rem; }
.filas-masivas td select[name$="-almacen"] { min-width: 13rem; }
.filas-masivas td.con-error input, .filas-masivas td.con-error select { border-color: var(--error); }
.formulario .tabla-scroll + .acciones { margin-top: var(--esp-4); }
/* Mi cuenta (spec 012) */
.cuenta-nota { font-size: var(--t-s); margin-top: var(--esp-3); }
.formulario-cuenta { margin-top: var(--esp-2); }
.formulario-cuenta .errorlist { font-weight: 400; }
.ayuda-contrasena { font-size: var(--t-s); color: var(--tenue); }
.ayuda-contrasena summary { cursor: pointer; color: var(--enlace); }
.ayuda-contrasena ul { margin: var(--esp-2) 0 0; padding-left: 1.2rem; }
.acceso .olvido { margin: 0; text-align: center; font-size: var(--t-s); }