/* ═══════════════════════════════════════════════════════════════
   RESET & ROOT
═══════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0;}
:root{
  /* ── La escalera de superficies ────────────────────────────────────────────
     En un tema oscuro la jerarquía se lee por el tono: cuanto más arriba está
     algo, más claro va. Para que se lea, cada peldaño tiene que separarse del
     anterior; si dos coinciden, son dos nombres para un solo color y quien
     escribe la regla elige al azar.

     Había dos coincidencias, medidas: --bg3 y --card2 estaban a 1,02 —un panel
     hundido y una fila encendida se veían igual— y --bg5 y --pop a 1,01, que
     era duplicado mío por no mirar que --bg5 ya existía.

     Ahora los peldaños van de 1,12 a 1,17. Y no suben más porque hay techo: por
     encima de --pop, --text3 baja de 4,5 : 1 y deja de leerse. */
  --bg:#090d13;   /* la página                                   */
  --bg2:#161f2c;  /* tarjeta                                     */
  --bg3:#1d2839;  /* panel hundido dentro de una tarjeta         */
  --card2:#213249;/* algo levantado, o una fila encendida        */
  --bg4:#273a56;  /* el ratón encima de algo ya levantado        */
  --bg5:var(--pop);/* alias: era el mismo color que --pop        */
  --border:rgba(223,235,255,0.14);--border2:rgba(223,235,255,0.21);--border3:rgba(223,235,255,0.26);
  /* ── Contraste: medido, no elegido a ojo ──────────────────────────────────────
     Sobre la superficie más clara donde aparecen (rgb(33,50,73)) hacen falta 4,5:1 para
     texto normal. Se midieron los nueve colores del tema y solo DOS no llegaban:

       --green   #1a9c70 → 3,73    el verde salía apagado, y al lado del rojo (4,92)
                                   parecía que uno de los dos estaba mal impreso
       --text4   #7f93ae → 4,14    el gris de notas, unidades y direcciones

     El verde no se sube "hasta que pase": se sube hasta 4,96, que es lo que mide el rojo.
     Si dos colores dicen cosas opuestas —va bien / va mal— tienen que pesar lo mismo, o
     el que pesa menos parece menos importante. Los otros siete ya cumplían: rojo 4,92,
     acento 5,50, verde vivo 5,11, morado 7,02, turquesa 7,41, ámbar 9,01, text3 6,43. */
  --text:#f7faff;--text1:#f7faff;--text2:#d8e3f4;--text3:#a7b8cf;--text4:#899bb4;
  /* Los fondos teñidos —el color del tema con transparencia sobre el panel— llevan encima
     su propio texto, así que cuanto más tinte, menos contraste. Se calculó el tinte máximo
     con el que el texto sigue pasando 4,5:1 sobre tarjeta y sobre panel hundido: verde
     0,135 (estaba en 0,18 y daba 4,19) y acento 0,175 (estaba en 0,18, justo en 4,48).
     Y el tinte verde usaba todavía el verde viejo, distinto del texto que lleva encima. */
  --accent:#6eaee9;--accent2:#2f8cff;--accent-dim:rgba(110,174,233,0.17);--accent-soft:rgba(110,174,233,.09);
  --green:#1eb582;--green-dim:rgba(30,181,130,0.13);--green-vivid:#0dba6f;--green-vivid-dim:rgba(13,186,111,.18);
  --red:#ff746b;--red-dim:rgba(255,116,107,0.14);
  --amber:#ffd166;--amber-dim:rgba(255,209,102,0.14);
  --teal:#35d9d0;--purple:#c5b4ff;
  --radius:14px;--radius-sm:9px;--radius-xs:6px;
  --font-mono:'DM Mono',monospace;--font:'DM Sans',sans-serif;
  --sidebar:240px;
  /* ── Escala de controles ──────────────────────────────────────────────────
     Tamaños de TODO lo que se pulsa o se escribe, en un solo sitio. Antes cada
     regla llevaba los suyos y cada media query los retocaba por separado: había
     nueve tamaños de letra distintos para controles, y .btn llegaba a hacer
     12 → 13,5 → 12,5 px según el ancho, subiendo y volviendo a bajar. No era una
     escala, eran decisiones sueltas de meses distintos.

     Tres pasos: xs para acciones de fila, sm para secundarias, md para las
     principales y los campos. Al tocarlas aquí cambia toda la aplicación a la vez,
     que es lo que hace que se vea igual en todas las pantallas. */
  /* Los TAMAÑOS de letra son los mismos que los del texto (12 y 14): un boton de 13 px
     entre una etiqueta de 12 y una celda de 14 era un cuarto escalon que nadie distingue
     y que se notaba como desorden. Lo que sigue teniendo tres pasos es la ALTURA, que es
     lo que de verdad separa una accion de fila de un boton principal. */
  --ctl-fs-xs:12px;   --ctl-h-xs:30px;
  --ctl-fs-sm:14px;   --ctl-h-sm:34px;
  --ctl-fs-md:14px;   --ctl-h-md:38px;
  --ctl-fs-in:14px;   /* campos de formulario */

  /* ── Escala de texto ───────────────────────────────────────────────────────
     Lo mismo que arriba pero para lo que se LEE. Había 24 tamaños distintos y
     1.801 de ellos escritos en el style= de cada elemento, con cuatro tamaños de
     letra pequeña —10, 11, 12 y 13— repartidos por la misma pantalla sin criterio.
     Eso es lo que hace que una pantalla se vea inquieta: el ojo lee un salto de
     tamaño como un cambio de importancia, y aquí no lo era.

     Ocho pasos, y cada uno significa algo:
       micro  etiquetas y notas al pie        lg   título de tarjeta
       xs     dato secundario denso            xl   título de sección
       sm     cuerpo secundario                2xl  cifra destacada
       md     cuerpo                           3xl  la cifra de una sola tarjeta

     Al ser variables, el móvil las sube todas a la vez. Antes no podía: un
     font-size en línea gana a cualquier regla de la hoja, así que las 173 reglas
     del bloque móvil no llegaban a aplicarse a casi nada. */
  /* ── La escala de texto ────────────────────────────────────────────────────────
     CINCO escalones, y cada uno con un papel. Ni uno más: ocho tamaños en una página no
     son una jerarquía, son ruido — el mismo dato salía unas veces a 12 px y otras a 13,
     que nadie distingue pero hace que dos cosas iguales no lo parezcan.

     Se llegó aquí en tres pasadas y conviene que quede el porqué:

     · El escalón MÁS USADO de la aplicación —más de mil sitios— valía 11 px, y en móvil
       ese mismo escalón valía 13. El ordenador se leía peor que el teléfono.
     · Arriba se saltaba de 30 a 40, un brinco que desordena la página.
     · Y había tres nombres de sobra: --t-xs pegado a --t-micro, --t-md pegado a --t-sm y
       un --t-3xl que usaban cinco sitios. Se migraron sus 615 usos y se retiraron;
       dejarlos apuntando al mismo valor habría sido la misma redundancia disimulada.

     Móvil lleva los mismos cinco escalones, un punto más arriba en los pequeños —es
     donde peor se lee— y un punto más abajo en la cifra, que 24 px parten una tarjeta en
     un teléfono. Al ser variables, el bloque de móvil las cambia todas de una vez: con
     tamaños escritos en línea eso no se podía, porque un font-size en línea gana a
     cualquier regla de la hoja.

     Cuidado al escribir aquí: dos veces he dejado un párrafo DESPUÉS del cierre del
     comentario, y el analizador de CSS se comió la línea de --t-micro. La batería lo
     vigila ahora, pero mejor no darle trabajo.                                        */
  --t-micro:12px;   /* etiquetas, cabeceras de tabla, distintivos */
  --t-sm:14px;      /* el texto: celdas, notas, subtitulos        */
  --t-lg:17px;      /* titulos de bloque y de tarjeta             */
  --t-xl:20px;      /* titulo de seccion                          */
  --t-2xl:24px;     /* la cifra que se mira de lejos              */
  /* ── Lo que flota por encima de la página ─────────────────────────────────
     Un desplegable tiene que leerse como una hoja puesta ENCIMA, y para eso en un
     tema oscuro hay que subir el tono, no bajarlo. Estaba en --bg2, que es
     exactamente el color de la tarjeta que hay debajo: 1,00 de contraste, o sea
     ninguno. Lo único que lo separaba de la página era un borde al 14 %.

     Peor todavía con la fila de debajo encendida: el resalte del ratón deja la
     fila en #223247 y --bg4 vale #213249 —el mismo tono— así que el menú y el
     encendido de la fila siguiente se fundían en una sola mancha.

     Este tono está 1,54 por encima de la tarjeta y 1,26 por encima de la fila
     encendida, y el texto del menú se sigue leyendo a 7,95 : 1. */
  --pop:#2c4162;
  --pop-borde:rgba(223,235,255,0.30);
  --shadow:0 18px 58px rgba(0,0,0,0.62);
  --shadow-sm:0 8px 26px rgba(0,0,0,0.34);
  --glow-accent:0 0 0 1px rgba(110,174,233,.20);
}
html,body{
  height:100%;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:var(--t-sm);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font-family:var(--font);}
input,select,textarea{min-width:0;}

/* ── APP SHELL ── */
.app{display:flex;min-height:100vh;}
.sidebar{
  width:var(--sidebar);flex-shrink:0;
  background:linear-gradient(180deg,#111a25 0%,#0b1119 100%);
  border-right:1px solid var(--border2);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;overflow-y:auto;z-index:50;
}
.main{margin-left:var(--sidebar);flex:1;min-width:0;padding:30px 34px;background:linear-gradient(180deg,#0b1017 0%,var(--bg) 260px);}

/* ── SIDEBAR ── */
.sidebar-logo{padding:14px 14px 12px;border-bottom:1px solid rgba(255,255,255,.10);}
.sidebar-logo>svg{display:none;}
.nowgaia-app-logo{display:flex;align-items:center;gap:10px;padding:8px 6px 10px;}
.nowgaia-app-logo img{width:48px;height:48px;flex:0 0 48px;filter:drop-shadow(0 8px 18px rgba(13,186,111,.22));}
.nowgaia-app-word{line-height:.86;letter-spacing:0;text-transform:uppercase;}
.nowgaia-app-word .now{display:block;font-size:var(--t-lg);font-weight:600;font-style:italic;color:#dce6df;letter-spacing:-.5px;text-transform:lowercase;}
.nowgaia-app-word .gaia{display:block;font-size:var(--t-2xl);font-weight:600;color:#0dba6f;letter-spacing:.5px;}
.nowgaia-app-sub{font-size:var(--t-micro);color:var(--text4);font-weight:400;letter-spacing:.06em;margin-top:7px;}
.nav{padding:10px 8px;flex:1;}
.nav-section{
  font-size:var(--t-micro);font-weight:400;color:#7f93ae;
  letter-spacing:.04em;
  padding:20px 12px 5px;
}
.nav-item{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px 8px 12px;border-radius:var(--radius-sm);
  cursor:pointer;
  color:#a8bad2;
  font-size:var(--t-sm);font-weight:500;
  transition:all .14s;margin-bottom:1px;user-select:none;
  border:1px solid transparent;position:relative;
}
.nav-item:hover{
  background:rgba(119,183,255,.13);
  color:#eef6ff;
  border-color:rgba(119,183,255,.24);
}
.nav-item.active{
  background:linear-gradient(90deg,rgba(119,183,255,.25) 0%,rgba(53,217,208,.08) 100%);
  color:#d7ecff;
  border-color:rgba(119,183,255,.34);
  font-weight:600;
}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:16%;bottom:16%;
  width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#8fd0ff,#35d9d0);
  box-shadow:0 0 10px rgba(53,217,208,.45);
}
.nav-item svg{
  width:16px;height:16px;flex-shrink:0;
  opacity:.55;transition:opacity .14s;
  color:inherit;
}
.nav-item:hover svg{opacity:.85;}
.nav-item.active svg{opacity:1;}
.sidebar-footer{padding:14px;border-top:1px solid rgba(255,255,255,.09);}
.sidebar-user{font-size:var(--t-micro);color:#a7b8cf;margin-bottom:8px;padding:0 2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── PAGE HEADER ── */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:28px;flex-wrap:wrap;}
.page-title{
  font-size:var(--t-xl);font-weight:600;letter-spacing:-.2px;line-height:1.2;color:var(--text);
}
.page-sub{font-size:var(--t-sm);color:var(--text3);margin-top:5px;font-weight:400;letter-spacing:0;}
/* min-width:0 y el tope: como elemento flex de .page-header, el min-width:auto de serie le
   impedía encoger por debajo de su contenido, así que crecía hasta 950 px dentro de una
   cabecera de 775 y se llevaba por delante la pantalla. Sin esto, el max-width:100% de una
   tira de pestañas de dentro no tiene contra qué resolverse. */
.header-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0;max-width:100%;}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 16px;border-radius:var(--radius-sm);border:none;
  cursor:pointer;font-family:var(--font);font-size:var(--ctl-fs-md);font-weight:600;
  min-height:var(--ctl-h-md);
  /* Un botón no se estira porque un vecino sea más alto. Dentro de una barra hecha a mano
     con display:flex y sin align-items, el contenedor estira a todos hasta la altura del
     desplegable de al lado, y el mismo .btn-sm salía a 34 px en un sitio y a 40 en otro.
     Se dice aquí una vez en vez de ir arreglando cada barra. */
  align-self:center;
  transition:all .14s;white-space:nowrap;line-height:1;letter-spacing:.02em;
  /* Aspecto por defecto. Sin esto, un boton con solo class="btn" —o con una variante que
     no existe, como btn-warn— sale con el estilo NATIVO del navegador: fondo blanco y
     texto oscuro en una app oscura. Medido: 8 botones asi, y en contabilidad se notaba.
     Una clase base sin aspecto propio delega en el navegador, y el navegador no sabe que
     esta app es oscura. */
  background:rgba(255,255,255,.055);color:var(--text2);
  border:1px solid var(--border3);
}

/* En pantalla táctil sube TODA la escala a la vez, no control por control. Un dedo
   necesita más blanco que un ratón, y por debajo de 36 px falla — en un camión esto se
   usa de pie y a veces con guantes.

   Redefinir las VARIABLES en lugar de cada regla conserva la proporción entre tamaños:
   lo que era pequeño sigue siéndolo, solo que todo crece junto. Antes cada media query
   retocaba lo suyo por separado y el conjunto acababa descuadrado.

   Además esto va al principio del fichero a propósito. La versión anterior estaba casi
   al final (regla 747 de 752) con la misma especificidad que las de los componentes, así
   que en vez de un suelo actuaba de TECHO: el portal del conductor pedía 52 px y se
   quedaba en 38. El CSS no da error cuando no obedece; simplemente no obedece. */
@media (max-width: 900px) {
  :root{
    /* Mismos dos tamaños que el texto del movil (15 y 18), y las alturas suben a 40/44/46:
       44 px es el minimo con el que un dedo acierta sin pelearse. Los 18 px de los campos
       pasan de sobra el umbral de 16 por debajo del cual iOS hace zoom al enfocar. */
    --ctl-fs-xs:15px;   --ctl-h-xs:40px;
    --ctl-fs-sm:18px;   --ctl-h-sm:44px;
    --ctl-fs-md:18px;   --ctl-h-md:46px;
    --ctl-fs-in:18px;

    /* El movil lleva los mismos cinco escalones que el escritorio, pero TODOS mas grandes:
       15 / 18 / 21 / 24 / 28 frente a 12 / 14 / 17 / 20 / 24. Se lee de pie, con una mano,
       a menudo con mala luz, y a 30 cm de la cara en vez de a 60: lo que en un monitor es
       comodo, en un telefono es entrecerrar los ojos.

       El tope de arriba es 30 px, y no "menos que el escritorio": lo que hay que evitar es
       que una cifra parta la tarjeta a 375 px de ancho, y eso es un tope absoluto. La
       bateria lo comprueba asi desde que el escritorio bajo a 24. */
    --t-micro:15px;  --t-sm:18px;   --t-lg:21px;   --t-xl:24px;  --t-2xl:28px;
  }
  .tp-tab, [role="button"] { min-height: var(--ctl-h-md); }
  .table th, .table td { padding-top: 10px; padding-bottom: 10px; }
}
.btn-primary{
  background:linear-gradient(135deg,#7fc5ff 0%,#2f8cff 100%);
  color:#fff;
  box-shadow:0 4px 16px rgba(47,140,255,.34),inset 0 1px 0 rgba(255,255,255,.22);
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.btn-primary:hover{
  background:linear-gradient(135deg,#9ad3ff 0%,#4aa2ff 100%);
  box-shadow:0 7px 24px rgba(47,140,255,.42);
}
.btn-ghost{
  background:rgba(255,255,255,.055);color:var(--text2);
  border:1px solid var(--border3);
}
.btn-ghost:hover{background:rgba(119,183,255,.12);color:var(--text);border-color:rgba(119,183,255,.34);}
/* Un rojo un punto más claro que el de la paleta, y solo aquí: este botón lleva encima su
   propio fondo rojo atenuado, y cuando además se apoya en un panel levantado el conjunto
   se aclara hasta dejar el texto en 4,08:1. Con #ff877f sube a 4,62 y sobre tarjeta o
   panel sigue dando 7,13 y 6,39, así que no empeora donde ya iba bien. Bajar el tinte en
   su lugar habría dejado el botón casi sin color: el tinte es lo que dice que borra. */
.btn-danger{background:var(--red-dim);color:#ff877f;border:1px solid rgba(255,97,84,.22);}
.btn-danger:hover{background:rgba(255,97,84,.22);border-color:rgba(255,97,84,.38);}
/* El verde de la paleta sobre el fondo atenuado del propio boton daba 3,95 de
   contraste, por debajo del 4,5 que pide la norma: se aclara solo para este caso. El
   rojo del boton de peligro ya daba 5,12 y no se toca. */
.btn-success{background:var(--green-dim);color:rgb(70,215,165);border:1px solid rgba(30,232,150,.22);}
.btn-success:hover{background:rgba(30,232,150,.22);}
.btn-sm{padding:5px 12px;font-size:var(--ctl-fs-sm);min-height:var(--ctl-h-sm);}
.btn-xs{padding:4px 10px;font-size:var(--ctl-fs-xs);min-height:var(--ctl-h-xs);}
.btn:focus-visible{outline:2px solid #6eaee9;outline-offset:2px;box-shadow:0 0 0 4px rgba(110,174,233,.22);}
@media(forced-colors:active){.btn:focus-visible{outline:3px solid ButtonText;}}



/* ── Opciones de un menú de acciones ──────────────────────────────────────────
   Cada opción del desplegable. Estaba escrito en el propio style= de cada botón, y
   por eso el móvil no podía agrandarlas: lo de línea gana. */
.acc-pop{top:calc(100% + 5px);z-index:60;min-width:230px;max-width:calc(100vw - 24px);
  padding:5px;border-radius:10px;background:var(--pop);
  border:1px solid var(--pop-borde);
  /* Dos sombras: la larga da la altura y la corta pega el borde a la página, que es
     lo que hace que se lea como una hoja encima y no como un hueco. */
  box-shadow:var(--shadow), 0 2px 10px rgba(0,0,0,.45);}
.acc-pop .acc-item:hover{background:rgba(255,255,255,.10);}
.acc-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:0;color:var(--text2);font-size:var(--t-sm);padding:7px 12px;
  cursor:pointer;border-radius:7px;line-height:1.35;}
.acc-item:hover{background:rgba(255,255,255,.06);color:var(--text);}
.acc-item:focus-visible{outline:2px solid #6eaee9;outline-offset:-2px;}
.acc-item-ico{width:16px;text-align:center;opacity:.75;flex:0 0 auto;}

/* ── Tarjeta de documento ─────────────────────────────────────────────────────
   Los tres documentos de un servicio —albarán, carta de porte y documento de control—
   se leen en la misma pantalla, uno debajo de otro. Cada uno se había escrito por su
   lado, con sus colores y sus medidas, y el resultado era que tres cosas que se miran
   juntas y significan lo mismo (¿está o no está?) parecían de tres aplicaciones
   distintas. Una sola pieza para los tres: mismo hueco, mismo indicador a la izquierda,
   mismo sitio para los botones. Lo único que cambia es el color del estado.        */
.doc-card{display:flex;gap:13px;align-items:flex-start;background:var(--card2);
  border:1px solid var(--border);border-radius:10px;padding:11px 13px;}
.doc-card.is-ok{border-color:rgba(52,214,142,.32);}
.doc-card.is-warn{border-color:rgba(247,173,42,.32);}
.doc-ico{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:var(--t-sm);position:relative;
  background:var(--card);border:2px solid var(--border);color:var(--text4);}
.doc-card.is-ok .doc-ico{border-color:var(--green);color:var(--green);}
.doc-card.is-warn .doc-ico{border-color:var(--amber);color:var(--amber);}
/* Variante con anillo de progreso: el borde lo pinta el degradado cónico, así que el
   propio borde sobra y estorba —se vería un aro dentro de otro. */
.doc-ico.is-ring{border:none;background:none;}
.doc-ring{position:absolute;inset:0;border-radius:50%;}
.doc-ring>span{position:absolute;inset:3px;border-radius:50%;background:var(--card);
  display:flex;align-items:center;justify-content:center;font-size:var(--t-micro);font-weight:700;}
.doc-body{min-width:0;flex:1;}
.doc-tit{font-size:var(--t-sm);font-weight:600;color:var(--text1);margin-bottom:2px;}
.doc-txt{font-size:var(--t-micro);color:var(--text3);line-height:1.55;}
.doc-acts{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px;}
.doc-acts .der{margin-left:auto;}
.doc-nota{font-size:var(--t-micro);color:var(--text4);line-height:1.5;margin-top:7px;
  border-top:1px solid var(--border);padding-top:6px;}
@media(max-width:900px){
  .doc-ico{flex-basis:38px;width:38px;height:38px;font-size:var(--t-sm);}
  .doc-acts .der{margin-left:0;}
}

/* ── Dato que falta, como pastilla que lleva a su campo ──
   Usa la misma escala que los botones para que en móvil crezca sola hasta el tamaño
   táctil, en vez de quedarse en un objetivo de 20 px imposible de acertar en marcha. */
.chip-falta{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;
  font-size:var(--ctl-fs-xs);min-height:var(--ctl-h-xs);font-family:inherit;cursor:pointer;
  border-radius:999px;border:1px solid rgba(247,173,42,.35);background:rgba(247,173,42,.1);
  color:var(--amber);transition:background .15s,border-color .15s,transform .1s;}
.chip-falta:hover{background:rgba(247,173,42,.2);border-color:rgba(247,173,42,.6);}
.chip-falta:active{transform:scale(.97);}
.chip-falta:focus-visible{outline:2px solid #6eaee9;outline-offset:2px;}
@media(forced-colors:active){.chip-falta{border:1px solid ButtonText;}}

/* El campo al que se ha saltado se señala solo: sin esto, tras el desplazamiento hay que
   buscar con la vista cuál de los campos era. Se respeta a quien pide menos movimiento. */
.campo-destello{animation:campoDestello 1.4s ease-out;}
@keyframes campoDestello{
  0%,100%{box-shadow:0 0 0 0 rgba(110,174,233,0);}
  15%{box-shadow:0 0 0 4px rgba(110,174,233,.45);}
  60%{box-shadow:0 0 0 4px rgba(110,174,233,.25);}
}
@media(prefers-reduced-motion:reduce){
  .campo-destello{animation:none;outline:2px solid #6eaee9;outline-offset:1px;}
  .chip-falta{transition:none;}
}

/* ── GRIDS ── */
.grid-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px;}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px;}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px;}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px;}
@media(max-width:1200px){.grid-kpi{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* minmax(0,1fr) — NO usar "1fr" aquí: equivale a minmax(auto,1fr) e impone un suelo de
   min-content, así que un canvas de gráfica con ancho fijo ensancha la columna y provoca
   scroll horizontal en toda la página en móvil. */
/* 768, no 900: colapsar a UNA columna a 900 dejaba la tablet enseñando las tarjetas de una
   en una —medido: una tarjeta de 775 px por fila a 820 px de ancho—, que es justo el
   desperdicio de pantalla del que se quejaba el usuario. Por debajo de 768 sí: ahí no
   caben dos. Entre 768 y 1200 manda la regla de dos columnas de más arriba. */
@media(max-width:768px){.grid-kpi,.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr);}}
/* Los ítems de grid tienen min-width:auto (suelo de min-content) y desbordan su columna
   aunque la columna sí pueda encogerse. Con min-width:0 se ajustan al ancho disponible. */
.grid-kpi>*,.grid-2>*,.grid-3>*,.grid-4>*,#fnum-rows>*{min-width:0;}

/* ── CARDS ── */
.card{
  background:linear-gradient(180deg,rgba(24,35,50,.98),rgba(20,29,42,.98));
  border:1px solid var(--border2);
  border-radius:var(--radius);padding:22px 24px;
  box-shadow:var(--shadow-sm);
}
/* Un título de tarjeta al tamaño más pequeño del sistema no parece un título: parece una
   nota al pie. Son 153 en la aplicación, y varios encabezan el dashboard. */
/* ── Los párrafos de explicación ──────────────────────────────────────────────
   Son las notas que cuentan por qué un número es lo que es, y solo salen en escritorio
   —en el teléfono se ocultan a propósito—. Estaban todas con el tamaño puesto EN LÍNEA, a
   11 o 12 px: un párrafo al tamaño de una etiqueta. Y en línea gana a la hoja de estilos,
   así que la clase no podía arreglarlo.

   Ahora el tamaño lo pone la clase, se han quitado los de línea, y son texto de leer: 15
   px con interlineado holgado y ancho acotado, porque una línea de 200 caracteres no se
   lee por muy grande que sea la letra. */
.nota-larga{
  font-size:var(--t-sm);line-height:1.65;color:var(--text3);
  max-width:78ch;
}
.card-title{
  font-size:var(--t-lg);font-weight:600;color:#a3bad2;
  letter-spacing:.02em;margin-bottom:16px;
  display:flex;align-items:center;gap:6px;
}
.kpi-card{
  background:linear-gradient(145deg,#151f2c 0%,#101821 100%);
  border:1px solid var(--border2);
  border-radius:var(--radius);padding:18px 20px;
  position:relative;overflow:hidden;
  transition:border-color .2s,box-shadow .2s,transform .15s;
  box-shadow:var(--shadow-sm);
}
.kpi-card:hover{
  border-color:var(--border3);
  box-shadow:var(--shadow),var(--glow-accent);
  transform:translateY(-2px);
}
.kpi-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2.5px;
  background:linear-gradient(90deg,var(--kpi-color,var(--accent)) 0%,transparent 80%);
}
.kpi-card::after{
  content:'';position:absolute;top:0;left:0;bottom:0;width:2.5px;
  background:linear-gradient(180deg,var(--kpi-color,var(--accent)),transparent);opacity:.6;
}
.kpi-label{
  font-size:var(--t-micro);color:#8fa8c2;margin-bottom:9px;
  font-weight:400;letter-spacing:.01em;
}
.kpi-value{
  font-size:var(--t-2xl);font-weight:600;font-family:var(--font-mono);
  letter-spacing:-.5px;line-height:1.15;
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 6px rgba(0,0,0,.40);
}
.kpi-sub{font-size:var(--t-micro);color:var(--text3);margin-top:7px;line-height:1.45;font-weight:500;}
.kpi-delta{
  display:inline-flex;align-items:center;gap:3px;
  font-size:var(--t-micro);font-weight:600;margin-top:6px;
  padding:2px 7px;border-radius:20px;
}
.kpi-pos{color:var(--green);}
.kpi-neg{color:var(--red);}
.kpi-warn{color:var(--amber);}
.kpi-blue{color:var(--accent);}

/* ── CHARTS ── */
.chart-wrap{position:relative;width:100%;}

/* ── FORMS ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px;}
.form-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px;}
/* Igual que las rejillas de datos: un formulario de una sola columna en una tablet de
   815 px obliga a bajar el doble para rellenar lo mismo. */
/* Con !important, como las dos rejillas que SI quieren dos columnas en el movil —las
   horas y las casillas, que lo declaran asi a proposito—. Sin el, dos rejillas del
   formulario de servicio se quedaban en dos columnas desiguales de 108 y 218 px:
   "Horas servicio" en 108 px no se puede ni leer ni rellenar. Medido en el modal. */
@media(max-width:768px){.form-grid,.form-grid-2,.form-grid-3,.form-grid-4{grid-template-columns:minmax(0,1fr)!important;}}
.sv-route-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin-bottom:4px;}
@media(max-width:700px){.sv-route-grid{grid-template-columns:minmax(0,1fr);}}
.sv-route-row{display:flex;align-items:center;gap:5px;margin-bottom:6px;}
.sv-route-del{padding:4px 9px!important;flex-shrink:0;line-height:1;font-size:var(--t-sm)!important;color:var(--text4)!important;min-width:0;border:1px solid var(--border)!important;}
.sv-route-del:hover{color:var(--red)!important;border-color:var(--red)!important;}
.sv-route-add{width:100%;border-style:dashed!important;font-size:var(--t-micro)!important;padding:5px!important;color:var(--text3)!important;margin-top:1px;}
.form-group{display:flex;flex-direction:column;gap:5px;min-width:0;}
.form-group.full{grid-column:1/-1;}
.form-label{
  font-size:var(--t-micro);color:#9db5cc;font-weight:400;
  letter-spacing:.01em;line-height:1.25;
}
.form-input,.form-select{
  background:#111b27;
  border:1px solid rgba(223,235,255,.16);
  border-radius:var(--radius-sm);padding:9px 12px;min-height:var(--ctl-h-md);
  color:var(--text);font-size:var(--ctl-fs-in);line-height:1.35;
  outline:none;transition:border .14s,box-shadow .14s,background .14s;width:100%;
}
input[type="date"].form-input,input[type="month"].form-input,input[type="date"].form-select,input[type="month"].form-select{min-width:10.8em;}
.form-input:focus,.form-select:focus{
  border-color:rgba(119,183,255,.72);background:#17263a;
  box-shadow:0 0 0 3px rgba(119,183,255,.16),inset 0 1px 3px rgba(0,0,0,.20);
}
@media(forced-colors:active){
  .form-input,.form-select{border:1px solid ButtonText;background:Field;color:FieldText;}
  .form-input:focus,.form-select:focus{outline:2px solid Highlight;}
}
.form-input::placeholder{color:#8192a9;}
.form-select option{background:var(--bg3);color:var(--text);}
.form-input[readonly]{opacity:.72;cursor:default;background:#101822;color:#c4d1e2;}
.form-section-title{
  font-size:var(--t-micro);font-weight:500;color:var(--text4);
  letter-spacing:.04em;
  margin:18px 0 12px;padding-top:16px;
  border-top:1px solid var(--border2);
  display:flex;align-items:center;gap:8px;
}
.form-section-title::after{content:'';flex:1;height:1px;background:var(--border);}

/* ── TABLES ── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm);}
thead th{
  padding:10px 13px;text-align:left;
  font-size:var(--t-micro);font-weight:500;color:#8fa8c2;
  letter-spacing:.01em;
  border-bottom:1px solid var(--border2);
  background:linear-gradient(180deg,#1c2a3a 0%,#14202e 100%);
  white-space:nowrap;
  position:sticky;top:0;z-index:2;
}
thead th:first-child{border-radius:var(--radius-sm) 0 0 0;}
thead th:last-child{border-radius:0 var(--radius-sm) 0 0;}
thead th.th-s{cursor:pointer;user-select:none;}
thead th.th-s:hover{color:var(--accent);}
thead th.th-s .si{margin-left:3px;opacity:.35;font-size:var(--t-micro);transition:opacity .15s;}
thead th.th-s.th-sa{color:var(--accent);}
thead th.th-s.th-sa .si{opacity:1;}
th[data-date],td[data-date],
#ci-table th:nth-child(3),#ci-table td:nth-child(3),
#ci-table th:nth-child(4),#ci-table td:nth-child(4),
#fact-table th:nth-child(1),#fact-table td:nth-child(1){
  min-width:96px;white-space:nowrap;
}
/* 7 px, no 10: la fila pasa de 41 a 35 px y en una pantalla caben 24 registros donde
   cabían 20. Este relleno ya existía en .record-table, pero de las decenas de tablas de
   la aplicación esa clase la usaba UNA, así que en la práctica todo se veía alto. Lo que
   era la excepción pasa a ser la norma. */
tbody td{
  padding:7px 13px;border-bottom:1px solid var(--border);
  color:#dce8f5;vertical-align:middle;font-size:var(--t-sm);line-height:1.45;
}
#dash-pnl-table tbody tr:not(.q-sep-row) td,#dash-pnl-table tfoot td{font-size:var(--t-micro);padding:6px 8px;border-bottom:1px solid var(--border2);}
#dash-pnl-table thead th{padding:7px 8px;font-weight:600;}
tbody tr:nth-child(even) td{background:rgba(119,183,255,.03);}
tbody tr:last-child td{border-bottom:none;}
tbody tr{transition:background .12s;}
tbody tr:hover td{background:rgba(119,183,255,.10);color:#f0f6ff;}

/* Lo que no ha cabido. Discreto —no es un error, es una consecuencia del ancho— pero
   visible: recortar columnas sin decirlo es esconder datos, y una cifra que falta no se
   echa de menos, se da por inexistente. */
.tw-recorte{
  margin-top:7px;font-size:var(--t-micro);color:var(--text4);line-height:1.5;
  padding-left:11px;border-left:2px solid var(--border2);
}

/* ── Un borrador no es una factura ────────────────────────────────────────────
   No tiene número, no existe para Hacienda y no se le puede reclamar nada a nadie.
   Mezclado en la lista con las emitidas se leía igual que ellas, y eso es justo lo
   que hace que un borrador se quede meses sin emitir sin que nadie lo note.

   Se marca con una banda a la izquierda y un fondo con un punto de ámbar: lo justo
   para que la fila se distinga al pasar la vista, sin gritar. */
/* Con «tbody tr.ci-borrador» y no con «.ci-borrador» a secas: el rayado de las filas
   pares es «tbody tr:nth-child(even) td» y gana por especificidad, así que la banda
   ámbar solo se veía en las filas impares. Medido: salía rgba(119,183,255,.03), o sea
   el azul del rayado. */
tbody tr.ci-borrador td{ background:rgba(247,173,42,.055); }
tbody tr.ci-borrador td:first-child{ box-shadow:inset 3px 0 0 var(--amber); }
tbody tr.ci-borrador:hover td{ background:rgba(247,173,42,.12); }
tfoot td{
  padding:12px 15px;font-weight:500;color:var(--text);
  border-top:1px solid var(--border2);
  background:linear-gradient(90deg,rgba(119,183,255,.08),rgba(53,217,208,.035));
}
/* Las celdas monoespaciadas llevan fechas, CIF, matrículas e importes: cosas que NO se
   parten. En tablet, con la letra más grande y las columnas más estrechas, "2026-11-27" y
   "1.230,00 €" caían a dos renglones y estiraban la fila de 38 a 73 px. Un importe partido
   en dos líneas además no se lee: se lee mal y se compara peor. */
.td-mono{font-family:var(--font-mono);font-size:var(--t-sm);letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap;}
/* Un nombre de empresa —"Transportes Vega, S.L."— parte en dos renglones en cuanto la
   columna se estrecha, y con eso solo la fila pasaba de 38 a 67 px en tablet. Se deja en
   una línea con puntos suspensivos: el nombre entero está en el title y en la ficha, que
   se abre pulsando la fila. El tope va en ch —anchos de carácter— para que acompañe al
   tamaño de letra en vez de pelearse con él. */
.td-nombre{
  display:block;max-width:24ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.td-bold{font-weight:480;color:#dce8f5;}
.td-r{text-align:right;}
/* Se llamaba "sm" pero usaba --t-micro, el escalón de los rótulos y las cabeceras. Marca
   42 celdas y ninguna es un rótulo: son correos, referencias, fechas, importes, plazos y
   direcciones. Un dato secundario se distingue por el COLOR —más apagado—, no encogiéndolo:
   haciendo las dos cosas a la vez, en la misma fila conviven dos tamaños y parece un error
   de maquetación. En servicios eran la UT y la ruta las que se veían pequeñas. */
.td-sm{font-size:var(--t-sm);color:var(--text3);}

/* El aviso de "esto se ve en un ordenador" solo aparece en el telefono: aqui se
   apaga, y el bloque de 768 px lo enciende. */
.solo-movil{display:none;}

/* ── BADGES ─────────────────────────────────────────────────────────────────────
   Qué dice cada color. Esto no es decoración: es el vocabulario con el que la
   aplicación entera dice en qué estado está algo, y si el mismo concepto sale de dos
   colores distintos deja de significar nada. Se extrajeron los 21 distintivos con
   texto literal y salían así:

     green   está bien, está hecho     aprobada · facturado · completado · exento · ok
     teal    está pasando ahora        en curso
     blue    está previsto, o informa  planificado · l. plazo · viendo
     amber   pide atención             pendiente · aviso · verificar · activo
     red     está mal                  huérfano · infracción · no · c. plazo
     gray    se descartó               rechazada

   La progresión de un trabajo es blue → teal → green, y por eso "en curso" es TEAL y
   no blue: en ausencias iba de azul y en el seguimiento de un lote de turquesa, así
   que el mismo estado se leía de dos maneras. Ahora una.

   Las clases badge-a, badge-g y badge-r NO existen: cinco distintivos las usaban y
   salían sin color, con lo que «Sí» y «No» se veían iguales. La batería lo vigila. */
.badge{
  display:inline-flex;align-items:center;
  padding:2px 9px;border-radius:20px;
  font-size:var(--t-micro);font-weight:500;letter-spacing:.02em;
  white-space:nowrap;
}
.badge-blue{background:rgba(119,183,255,.20);color:#b9dcff;border:1px solid rgba(119,183,255,.36);}
.badge-green{background:rgba(22,132,95,.18);color:#8ee0bf;border:1px solid rgba(22,132,95,.36);}
.badge-amber{background:rgba(255,209,102,.16);color:#ffe199;border:1px solid rgba(255,209,102,.34);}
.badge-red{background:rgba(255,116,107,.16);color:#ffaaa5;border:1px solid rgba(255,116,107,.34);}
.badge-teal{background:rgba(34,211,238,.12);color:var(--teal);border:1px solid rgba(34,211,238,.25);}
.badge-purple{background:rgba(180,158,255,.13);color:var(--purple);border:1px solid rgba(180,158,255,.25);}
.badge-gray{background:rgba(255,255,255,.07);color:var(--text2);border:1px solid var(--border3);}

/* ── TABS ── */
.tabs{
  display:flex;gap:2px;
  background:var(--bg3);border-radius:var(--radius-sm);
  padding:3px;margin-bottom:20px;width:fit-content;
  border:1px solid var(--border2);
  /* Con width:fit-content y sin tope, una tira de pestañas que no cabe se sale de la
     pantalla en vez de deslizarse. Eso no es cosa del móvil —pasaba en tablet a 815 px—
     así que el tope y el deslizamiento van aquí, no dentro de una media query.
     Hace falta min-width:0 además del tope: dentro de un padre flex —.header-actions lo
     es— el min-width:auto que traen los elementos por defecto impide encoger por debajo
     del contenido, y con el max-width solo la tira seguía saliéndose 155 px. */
  max-width:100%;min-width:0;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.tabs::-webkit-scrollbar{display:none;}
.tabs>*{flex:0 0 auto;}
.tab{
  padding:6px 17px;border-radius:var(--radius-xs);cursor:pointer;
  font-size:var(--t-sm);font-weight:600;color:var(--text3);
  transition:all .14s;user-select:none;letter-spacing:.02em;
  /* Esta clase la llevan 29 <div> y 19 <button>. En un div, no declarar fondo da
     transparente; en un botón asoma el gris del sistema —rgb(240,240,240)— y encima con
     el color de texto del tema: 1,77:1 de contraste, ilegible. Solo la pestaña ACTIVA
     declaraba fondo, y por eso el fallo se veía a medias. Un botón trae además borde y
     tipografía propios, así que se resetean los tres. */
  background:transparent;border:none;font-family:inherit;
}
.tab.active{
  background:linear-gradient(135deg,var(--bg4),var(--bg5));
  color:var(--text);
  box-shadow:0 2px 10px rgba(0,0,0,.50);
  font-weight:600;
}
.tab:hover:not(.active){color:var(--text2);background:rgba(119,183,255,.09);}

/* ── MODALS ── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  z-index:220;display:none;align-items:center;justify-content:center;padding:16px;
}
.modal-overlay.open{display:flex;}
.modal{
  background:linear-gradient(155deg,#1a283a 0%,#101821 100%);
  border:1px solid var(--border3);
  border-radius:20px;padding:28px 28px 0;width:520px;
  max-width:100%;max-height:90vh;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-gutter:stable;
  box-shadow:0 40px 90px rgba(0,0,0,.85),0 0 0 1px rgba(107,159,255,.08);
}
.modal-lg{width:880px;}
.modal-title{
  font-size:var(--t-sm);font-weight:600;
  letter-spacing:-.3px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  position:sticky;top:-28px;z-index:5;
  background:#131e2e;
  margin:-28px -28px 22px;
  padding:22px 28px 18px;
  border-radius:20px 20px 0 0;
  border-bottom:1px solid rgba(91,138,255,.09);
}
.modal-title-text{flex:1;}
.modal-close-btn{
  flex-shrink:0;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid var(--border2);
  color:var(--text3);font-size:var(--t-sm);line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .14s;
}
.modal-close-btn:hover{background:var(--red-dim);color:var(--red);border-color:rgba(255,97,84,.35);}
.modal-footer{
  display:flex;gap:8px;justify-content:flex-end;
  position:sticky;bottom:0;z-index:5;
  background:#101821;
  margin:24px -28px 0;
  padding:18px 28px 20px;
  border-top:1px solid var(--border);
  border-radius:0 0 20px 20px;
  box-shadow:0 -12px 24px rgba(16,24,33,.88);
}
.sv-rep-info{padding:11px 14px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid var(--border2);margin-bottom:16px;font-size:var(--t-sm);color:var(--text2);line-height:1.5;}
#sv-route-map{height:280px;border-radius:10px;border:1px solid var(--border);margin-top:12px;background:var(--bg3);}
.geo-link{display:inline-flex;align-items:center;gap:3px;font-size:var(--t-micro);color:var(--teal);text-decoration:none;padding:1px 5px;border-radius:4px;background:rgba(13,186,111,.1);margin-left:5px;white-space:nowrap;}
.geo-link:hover{background:rgba(13,186,111,.2);}
.geo-last-badge{display:inline-flex;align-items:center;gap:3px;font-size:var(--t-micro);font-weight:600;padding:2px 6px;border-radius:4px;background:rgba(79,124,255,.12);color:var(--accent);cursor:default;}
.sv-rep-dates{max-height:200px;overflow-y:auto;margin:8px 0;}
.sv-rep-date-item{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;border-radius:7px;background:var(--bg3);border:1px solid var(--border);margin-bottom:5px;}
.sv-rep-patterns{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px;}

/* ── MAPA OCUPACIÓN ── */
.mapa-nav{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap;padding:11px 16px;background:var(--bg2);border-radius:10px;border:1px solid var(--border2);}
.mapa-nav-label{flex:1;text-align:center;font-size:var(--t-sm);font-weight:600;color:var(--text);min-width:180px;letter-spacing:.01em;}
.mapa-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:14px;}.mapa-controls .form-group{margin:0;}
.mapa-wrap{overflow-x:auto;border:1px solid var(--border2);border-radius:10px;background:var(--bg2);}
.mapa-grid{display:grid;}
.mapa-head-label{font-size:var(--t-micro);font-weight:500;letter-spacing:.01em;color:var(--text3);background:var(--bg3);border-bottom:1px solid var(--border2);border-right:1px solid var(--border);padding:9px 12px;position:sticky;left:0;z-index:3;}
.mapa-day-head{padding:7px 3px;font-size:var(--t-micro);text-align:center;border-bottom:1px solid var(--border2);border-right:1px solid var(--border);background:var(--bg3);color:var(--text3);font-weight:400;line-height:1.3;}
.mapa-day-head.mapa-today{background:rgba(119,183,255,.16);color:var(--accent);border-bottom-color:var(--accent);}
.mapa-day-head.mapa-weekend{background:rgba(255,255,255,.02);color:var(--text4);}
.mapa-day-dow{font-size:var(--t-micro);font-weight:400;letter-spacing:.02em;opacity:.7;}
.mapa-day-num{font-size:var(--t-sm);font-weight:600;color:inherit;line-height:1.1;}
.mapa-day-mon{font-size:var(--t-micro);opacity:.5;margin-top:1px;}
.mapa-row-label{position:sticky;left:0;z-index:2;background:var(--bg3);border-bottom:1px solid var(--border);border-right:1px solid var(--border2);padding:7px 11px;font-size:var(--t-micro);font-weight:600;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;}
.mapa-cell{min-height:50px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:3px 4px;}
.mapa-cell.mapa-weekend{background:rgba(255,255,255,.01);}
.mapa-cell.mapa-today-col{background:rgba(119,183,255,.07);}
.mapa-block{border-radius:5px;padding:3px 7px;font-size:var(--t-micro);font-weight:600;line-height:1.35;cursor:pointer;margin-bottom:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%;transition:filter .12s,transform .1s;}
.mapa-block:hover{filter:brightness(1.18);transform:scale(1.02);}
.mapa-planificado{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);}
.mapa-realizado{background:linear-gradient(135deg,#10b981,#047857);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);}
.mapa-facturado{background:linear-gradient(135deg,#f59e0b,#b45309);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);}
.mapa-conflict{background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);}
.mapa-legend{display:flex;gap:14px;align-items:center;margin-top:12px;font-size:var(--t-micro);color:var(--text3);flex-wrap:wrap;}
.mapa-legend-dot{width:10px;height:10px;border-radius:3px;display:inline-block;vertical-align:middle;margin-right:5px;}
.mapa-empty{text-align:center;color:var(--text3);padding:52px 20px;font-size:var(--t-sm);}

/* ── AUSENCIAS MAP ── */
.aus-map-nav{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap;padding:11px 16px;background:var(--bg2);border-radius:10px;border:1px solid var(--border2);}
.aus-map-nav-label{flex:1;text-align:center;font-size:var(--t-sm);font-weight:600;color:var(--text);min-width:180px;letter-spacing:.01em;}
.aus-map-grid{display:grid;overflow-x:auto;}
.aus-map-head-label{font-size:var(--t-micro);font-weight:500;letter-spacing:.01em;color:var(--text3);background:var(--bg3);border-bottom:1px solid var(--border2);border-right:1px solid var(--border);padding:7px 10px;position:sticky;left:0;z-index:3;white-space:nowrap;}
.aus-map-day-head{padding:5px 2px;font-size:var(--t-micro);text-align:center;border-bottom:1px solid var(--border2);border-right:1px solid var(--border);background:var(--bg3);color:var(--text3);font-weight:400;line-height:1.3;min-width:30px;}
.aus-map-day-head.aus-today{background:rgba(119,183,255,.16);color:var(--accent);border-bottom-color:var(--accent);}
.aus-map-day-head.aus-weekend{background:rgba(255,255,255,.02);color:var(--text4);}
.aus-map-row-label{position:sticky;left:0;z-index:2;background:var(--bg3);border-bottom:1px solid var(--border);border-right:1px solid var(--border2);padding:6px 10px;font-size:var(--t-micro);font-weight:600;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:145px;}
.aus-map-cell{height:30px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);box-sizing:border-box;}
.aus-map-cell.aus-weekend{background:rgba(255,255,255,.01);}
.aus-map-cell.aus-today-col{background:rgba(119,183,255,.07);}
.aus-map-cell.aus-filled{cursor:pointer;opacity:.85;}
.aus-map-cell.aus-filled:hover{opacity:1;filter:brightness(1.18);}

/* ── SECTIONS ── */
.section{display:none;}
.section.active{display:block;}

/* ── ALERTS ── */
.alerts-bar{margin-bottom:0;}
.alert{
  display:flex;align-items:flex-start;gap:10px;
  padding:11px 16px;border-radius:var(--radius-sm);
  margin-bottom:8px;font-size:var(--t-sm);line-height:1.55;font-weight:600;
}
.alert-warn{background:var(--amber-dim);border:1px solid rgba(255,209,102,.34);color:#ffe199;}
.alert-neg{background:var(--red-dim);border:1px solid rgba(255,116,107,.34);color:#ffaaa5;}
.alert-pos{background:var(--green-dim);border:1px solid rgba(22,132,95,.38);color:#8ee0bf;}
.alert-info{background:var(--accent-dim);border:1px solid rgba(119,183,255,.30);color:#b9dcff;}
.alert-icon{font-size:var(--t-sm);flex-shrink:0;margin-top:1px;}

/* ── SCENARIO BAR ── */
.scenario-bar{
  display:flex;align-items:center;gap:10px;
  background:var(--bg3);border:1px solid var(--border2);
  border-radius:var(--radius);padding:10px 16px;margin-bottom:20px;flex-wrap:wrap;
}
.scenario-label{font-size:var(--t-micro);color:var(--text4);letter-spacing:.02em;white-space:nowrap;font-weight:400;}
.scenario-pills{display:flex;gap:5px;flex-wrap:wrap;flex:1;}
.scenario-pill{
  padding:5px 13px;border-radius:20px;border:1px solid var(--border2);
  background:rgba(255,255,255,.03);color:var(--text3);font-size:var(--t-micro);font-weight:600;
  cursor:pointer;transition:all .14s;font-family:var(--font);
}
.scenario-pill.active{background:var(--accent-dim);border-color:rgba(119,183,255,.38);color:var(--accent);font-weight:600;}
.scenario-pill:hover:not(.active){background:rgba(119,183,255,.09);color:var(--text2);}

/* ── MISC ── */
/* ── Cuando todavia no hay nada ────────────────────────────────────────────────
   Esto ocupaba 213 px: 108 solo de relleno, mas un icono grande de adorno con el
   titulo y la explicacion apilados. Doce de estos en la aplicacion son 2.556 px de
   pantalla diciendo que no hay nada. Ahora va en UNA linea —icono, que hace falta, y
   explicacion— y baja a un tercio. Envuelve solo si no cabe, asi que en el movil
   sigue leyendose. Un hueco vacio no se llena con aire: se hace pequeno. */
/* El hueco de una grafica que no dibuja nada. El alto fijo del contenedor suele venir
   escrito a mano en el html, asi que hace falta la fuerza para recogerlo. */
.gr-vacio{
  display:flex;align-items:center;justify-content:center;
  padding:16px 12px;text-align:center;
  color:var(--text3);font-size:var(--t-sm);line-height:1.5;
}
.gr-hueco{height:auto!important;min-height:0!important;}

/* ── Lo necesario en cada momento ──────────────────────────────────────────────
   Gráficos y explicaciones largas, plegados tras un toque (ver graficosPlegar y
   ayudasPlegar). En el teléfono los gráficos no se dibujan nunca, así que sus tarjetas
   y el botón desaparecen del todo: antes quedaban tarjetas con título y nada debajo. */
.graficos-plegados .solo-grafico,
.graficos-plegados .solo-graficos{display:none!important;}
.graficos-toggle{
  display:inline-flex;align-items:center;gap:6px;margin:2px 0 16px;padding:6px 12px;
  background:var(--bg3);border:1px dashed var(--border2);border-radius:var(--radius-sm);
  color:var(--text3);font-family:var(--font);font-size:var(--t-sm);font-weight:600;cursor:pointer;
}
.graficos-toggle:hover{color:var(--text2);background:var(--card2);}
.ayuda-texto{display:none!important;}
.ayuda-texto.ayuda-abierta{display:block!important;}
.ayuda-btn{
  background:none;border:none;padding:0 4px;margin-left:6px;cursor:pointer;
  color:var(--text4);font-family:var(--font);font-size:var(--t-sm);line-height:1;vertical-align:baseline;
}
.ayuda-btn:hover,.ayuda-btn[aria-expanded="true"]{color:var(--accent);}
/* Listas del panel: lo que pasa del tope, tras «Ver N más». */
.intel-lista:not(.intel-abierta) > .intel-mas{display:none;}
.intel-ver{
  align-self:flex-start;background:none;border:none;padding:2px 0;cursor:pointer;
  color:var(--accent);font-family:var(--font);font-size:var(--t-sm);font-weight:600;
}
.intel-ver:hover{text-decoration:underline;}
/* Viajes: la cabecera es un botón de toda la anchura con el resumen dentro. */
.viajes-cab{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;width:100%;
  background:none;border:none;padding:0;cursor:pointer;text-align:left;
  font-family:var(--font);color:inherit;
}
.viajes-resumen{flex:1;min-width:0;font-size:var(--t-sm);color:var(--text3);}
.viajes-flecha{color:var(--text4);font-size:var(--t-sm);}
.viajes-cuerpo{margin-top:12px;}
@media(max-width:768px){
  .solo-grafico,.solo-graficos,.graficos-toggle{display:none!important;}
}

.empty{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:20px 16px;color:var(--text3);text-align:center;
}
.empty-icon{font-size:var(--t-lg);margin:0;opacity:.45;flex:0 0 auto;}
.empty-title{font-size:var(--t-sm);font-weight:600;color:var(--text2);margin:0;}
.empty-sub{font-size:var(--t-sm);color:var(--text3);margin:0;line-height:1.5;}
.prog-bar{height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin-top:6px;}
.prog-fill{height:100%;border-radius:3px;transition:width .4s;}
.divider{height:1px;background:var(--border);margin:20px 0;}
.info-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:var(--t-sm);}
.info-row:last-child{border-bottom:none;}
.info-label{color:var(--text4);font-size:var(--t-micro);font-weight:500;}

/* ── ESTRUCTURA UNIFORME DE SECCIÓN ─────────────────────────────────────────
   Todas las secciones siguen: analytics-block (arriba) → records-block (abajo)
   El analytics-block contiene KPIs + gráficos + resúmenes.
   El records-block contiene formularios, tablas de registros y acciones.
═══════════════════════════════════════════════════════════════════════════ */
.sec-analytics{margin-bottom:28px;}
.sec-records{border-top:1px solid var(--border);padding-top:22px;}
.sec-records-title{
  font-size:var(--t-lg);font-weight:600;color:var(--text3);
  letter-spacing:.03em;
  display:flex;align-items:center;gap:8px;margin-bottom:16px;
}
.sec-records-title::after{content:'';flex:1;height:1px;background:var(--border);}

/* ── GASTOS: la barra de búsqueda y el selector de categoría ──────────────────
   La casilla crece y los dos elementos de al lado no: con cien gastos, buscar es lo
   primero que se hace, así que se le da todo el ancho que sobre. */
.gasto-barra{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;
}
.gasto-barra .form-input{flex:1 1 260px;min-width:0;}
.gasto-barra > span{flex:0 0 auto;}

/* ── Los filtros, encima de lo que filtran ─────────────────────────────────────
   Estaban en la cabecera de cada sección, por encima de las cifras y de hasta cuatro
   gráficos: para cambiar el cliente o el año había que volver arriba del todo. Ahora
   van en esta barra, justo encima de la lista. La cabecera se queda con el título y
   las acciones. Las cifras y los gráficos de arriba siguen el mismo filtro, y su
   etiqueta ya dice el periodo que muestran. */
.filtros-registro{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.filtros-registro .form-select{width:auto;flex:0 0 auto;max-width:260px;}
.filtros-registro input[type="search"],
.filtros-registro .form-input{flex:1 1 220px;min-width:0;}
@media(max-width:768px){
  /* En el teléfono: dos desplegables por fila y el buscador a todo lo ancho. */
  .filtros-registro .form-select{flex:1 1 140px;max-width:100%;}
  .filtros-registro input[type="search"],
  .filtros-registro .form-input{flex:1 1 100%;}
  .filtros-registro > span{flex:1 1 100%;max-width:100%;}
}

/* Las categorías, en tarjetas que se pueden pulsar con el dedo. La rejilla se adapta
   sola: no hay un número de columnas escrito, hay un ancho mínimo por tarjeta. */
.gasto-cat-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:8px;margin-bottom:6px;max-height:52vh;overflow-y:auto;
}
.gasto-cat-btn{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  padding:11px 12px;border-radius:var(--radius-sm);
  background:var(--bg3);border:1px solid var(--border2);
  cursor:pointer;text-align:left;transition:background .13s,border-color .13s;
  font-family:var(--font);
}
.gasto-cat-btn:hover{background:var(--card2);border-color:var(--accent);}
.gasto-cat-n{font-size:var(--t-micro);color:var(--text4);}

/* Las sugerencias de proveedor. Van sobre el formulario, así que por encima de todo lo
   que hay dentro del modal. */
.gasto-sug{
  position:absolute;left:0;right:0;top:100%;z-index:40;
  background:var(--bg2);border:1px solid var(--border2);
  border-radius:var(--radius-sm);box-shadow:0 10px 30px rgba(0,0,0,.55);
  max-height:236px;overflow-y:auto;margin-top:3px;
}
.gasto-sug-i{padding:7px 11px;cursor:pointer;border-bottom:1px solid var(--border);}
.gasto-sug-i:last-child{border-bottom:none;}
.gasto-sug-i:hover{background:var(--card2);}
.gasto-sug-n{font-size:var(--t-sm);color:var(--text);font-weight:600;}
.gasto-sug-d{font-size:var(--t-micro);color:var(--text3);margin-top:1px;}
/* Nota fiscal: base imponible, sin IVA */
.tax-note{
  display:flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:8px;margin-bottom:14px;
  background:rgba(255,209,102,.07);border:1px solid rgba(255,209,102,.16);
  font-size:var(--t-micro);color:var(--amber);
}

/* ── IMPORT PREVIEW MODAL ──────────────────────────────────────────────────── */
.import-preview-table{width:100%;border-collapse:collapse;font-size:var(--t-micro);}
.import-preview-table th{
  background:var(--bg3);color:var(--text3);font-size:var(--t-micro);font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;padding:6px 8px;
  position:sticky;top:0;z-index:2;white-space:nowrap;
}
.import-preview-table td{
  padding:4px 7px;border-bottom:1px solid var(--border);color:var(--text2);
  vertical-align:middle;
}
.import-preview-table tr:hover td{background:var(--bg2);}
.import-preview-table td.cell-edit{
  background:var(--bg2);cursor:text;
  outline:1px solid var(--accent);outline-offset:-1px;
}
.import-preview-table td input.cell-input{
  background:transparent;border:none;outline:none;color:var(--text1);
  font-size:var(--t-micro);width:100%;min-width:60px;font-family:inherit;padding:0;
}
/* Find/replace toolbar */
.import-findreplace{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:8px 10px;background:var(--bg3);border-radius:8px;
  border:1px solid var(--border);margin-bottom:10px;
}
.import-findreplace select.fr-col-sel{width:auto;min-width:140px;flex-shrink:0;}
.import-findreplace input.fr-input{width:100px;font-size:var(--t-micro);}
.import-error-row td{background:rgba(255,116,107,.06);color:var(--red);}
.import-warn-row td{background:rgba(255,209,102,.06);color:var(--amber);}

/* ── CIF VALIDATION FEEDBACK ── */
.cif-hint{font-size:var(--t-micro);color:var(--text4);margin-top:3px;}
.cif-hint.ok{color:var(--green);}
.cif-hint.warn{color:var(--amber);}

/* ── MOBILE: import preview modal ── */
@media(max-width:768px){
  #modal-csv-preview .modal{border-radius:18px 18px 0 0;max-height:96vh;padding:16px 12px 0;}
  .import-findreplace{flex-direction:column;align-items:stretch;}
  .import-findreplace select.fr-col-sel{width:100%;}
  .import-findreplace input.fr-input{width:100%;}
  .import-preview-table{font-size:var(--t-micro);}
  .import-preview-table th{font-size:var(--t-micro);padding:5px 6px;}
  .import-preview-table td{padding:4px 6px;font-size:var(--t-micro);}
}

/* ── FUEL SUMMARY ── */
.fuel-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px;}
.fuel-sum-item{
  background:linear-gradient(145deg,var(--bg3),var(--bg2));
  border-radius:var(--radius-sm);padding:13px 15px;
  border:1px solid var(--border2);
}
.fuel-sum-label{font-size:var(--t-micro);color:var(--text3);font-weight:400;letter-spacing:.01em;}
.fuel-sum-val{font-size:var(--t-lg);font-weight:600;font-family:var(--font-mono);margin-top:5px;letter-spacing:-.5px;color:var(--text);}

/* ── COST BOX ── */
.cost-box{
  background:var(--bg3);border:1px solid var(--border2);
  border-radius:var(--radius);padding:15px 20px;
  display:flex;gap:24px;align-items:center;flex-wrap:wrap;
  margin-top:14px;
}
.cost-box-item .cost-box-label{font-size:var(--t-micro);color:var(--text3);margin-bottom:3px;font-weight:400;letter-spacing:.01em;}
.cost-box-item .cost-box-val{font-size:var(--t-xl);font-weight:600;font-family:var(--font-mono);letter-spacing:-.8px;}
.sv-time-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end;}
.sv-time-grid .form-label span{font-weight:400;opacity:.55;font-size:var(--t-micro);}

/* ── PAGINATION ── */
.pagination{display:flex;align-items:center;gap:5px;margin-top:14px;justify-content:flex-end;}
.page-btn{
  padding:5px 10px;border-radius:var(--radius-xs);border:1px solid var(--border2);
  background:rgba(255,255,255,.04);color:var(--text2);font-size:var(--t-micro);font-weight:600;cursor:pointer;
  font-family:var(--font);transition:all .12s;letter-spacing:.01em;
}
.page-btn.active{background:var(--accent-dim);border-color:rgba(119,183,255,.38);color:var(--accent);font-weight:600;}
.page-btn:hover:not(.active):not(:disabled){background:rgba(119,183,255,.11);color:var(--text);border-color:var(--border3);}
.page-btn:disabled{opacity:.20;cursor:default;}
.page-info{font-size:var(--t-micro);color:var(--text4);margin:0 5px;}

/* ── ARRASTRAR PARA REASIGNAR (Mapa de ocupación) ── */
.plan-cell-over{background:var(--accent-dim);outline:2px dashed rgba(110,174,233,.55);outline-offset:-2px;}
.plan-dragging{opacity:.35;}
.mapa-block[draggable="true"]{cursor:grab;}
.mapa-block[draggable="true"]:active{cursor:grabbing;}

/* ── EXPORT BAR ── */
.export-bar{display:flex;gap:8px;align-items:center;margin-bottom:4px;}

/* ── SCENARIO CARDS ── */
.sc-card{
  background:var(--bg2);border:1px solid var(--border2);
  border-radius:var(--radius);padding:18px;position:relative;
  transition:all .2s;box-shadow:var(--shadow-sm);
}
.sc-card.positive{border-top:3px solid var(--green);}
.sc-card.negative{border-top:3px solid var(--red);}
.sc-card.neutral{border-top:3px solid var(--accent);}
.sc-card.active{border-color:rgba(119,183,255,.42);box-shadow:0 0 0 1px rgba(119,183,255,.16),var(--shadow);}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:rgba(255,255,255,.02);}
::-webkit-scrollbar-thumb{background:rgba(119,183,255,.26);border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:rgba(119,183,255,.46);}

/* ── STAT INLINE ── */
.stat-inline{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);}
.stat-inline:last-child{border-bottom:none;}
.stat-key{font-size:var(--t-micro);color:var(--text3);font-weight:500;}
.stat-val{font-size:var(--t-micro);font-family:var(--font-mono);font-weight:600;color:var(--text);letter-spacing:-.2px;}

/* ── CLIENT DETAIL CARD ── */
.client-card{
  background:rgba(119,183,255,.11);border:1px solid rgba(119,183,255,.28);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:18px;
}

/* ── LOGIN ── */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(ellipse at 50% 50%,rgba(119,183,255,.16) 0%,transparent 65%),var(--bg);
}
.login-box{
  background:linear-gradient(155deg,#1a283a 0%,#101821 100%);
  border:1px solid var(--border3);
  border-radius:22px;padding:38px;width:390px;max-width:100%;
  box-shadow:0 40px 100px rgba(0,0,0,.75),0 0 0 1px rgba(119,183,255,.12);
}
.login-box input{text-align:center;font-size:var(--t-sm);}
.login-brand{font-size:var(--t-micro);color:var(--text4);text-align:center;margin-top:20px;letter-spacing:.08em;}

/* ── PUBLIC HOME ── */
.public-home{
  align-items:center;justify-content:flex-start;flex-direction:column;padding:0;
  background:
    linear-gradient(155deg,rgba(3,7,18,.98),rgba(6,14,28,.95) 50%,rgba(9,16,26,.97)),
    radial-gradient(ellipse at 12% 18%,rgba(47,140,255,.24),transparent 34%),
    radial-gradient(ellipse at 88% 6%,rgba(110,174,233,.08),transparent 26%),
    radial-gradient(ellipse at 50% 92%,rgba(79,124,255,.09),transparent 38%),
    var(--bg);
}
.public-nav{
  width:min(1220px,100%);display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:14px;margin-bottom:0;position:relative;padding:22px 28px;
}
.public-wordmark{
  justify-self:start;display:inline-flex;align-items:center;gap:10px;
  width:auto;max-width:58vw;line-height:1;padding:7px 14px;border-radius:14px;
  background:rgba(79,124,255,.06);border:1px solid rgba(79,124,255,.26);
  box-shadow:0 0 0 1px rgba(79,124,255,.06);
  transition:box-shadow .22s,transform .22s,background .22s;
}
.public-wordmark:hover{background:rgba(79,124,255,.10);box-shadow:0 0 0 1px rgba(79,124,255,.44),0 8px 32px rgba(79,124,255,.18);transform:translateY(-1px);}
.public-wordmark img{display:block;}
.benedic-nav-logo{height:42px;width:auto;filter:drop-shadow(0 2px 12px rgba(110,174,233,.45)) drop-shadow(0 0 20px rgba(53,217,208,.16));}
.public-nav-center{justify-self:center;font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.16em;color:#8ba8ff;font-weight:600;white-space:nowrap;}
.public-nav-right{justify-self:end;display:flex;gap:9px;align-items:center;flex-wrap:wrap;}
.public-shell{width:min(1220px,100%);display:block;padding:44px 28px 0;}

/* ── HERO full-bleed ── */
.public-hero{
  position:relative;overflow:hidden;
  min-height:720px;width:100%;
  display:flex;align-items:center;
}
/* Viñeta izquierda: texto legible, red visible a la derecha */
.public-hero::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(3,6,16,1) 0%,
    rgba(3,6,16,.96) 22%,
    rgba(3,6,16,.72) 44%,
    rgba(3,6,16,.22) 62%,
    transparent 78%
  );
}
/* Fade inferior — transición suave a planes */
.public-hero::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:140px;
  z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(3,6,16,.88));
}
/* Red: ocupa todo el hero */
.hero-net-col{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
/* Wrap del texto: centrado con max-width */
.hero-text-wrap{
  position:relative;z-index:2;
  width:100%;max-width:1220px;
  margin:0 auto;padding:72px 28px 96px;
}
.hero-text-col{max-width:560px;padding-bottom:0;}
.public-brand{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.22em;color:var(--accent);font-weight:600;margin-bottom:16px;opacity:.85;display:flex;align-items:center;gap:8px;}
.public-brand::before{content:'';width:28px;height:2px;border-radius:4px;background:var(--accent);opacity:.7;}
.public-title{
  font-size:clamp(42px,4.8vw,68px);line-height:.94;font-weight:600;letter-spacing:-.025em;
  margin-bottom:20px;color:#ffffff;
  text-shadow:0 2px 80px rgba(79,124,255,.20);
}
.public-title em{font-style:normal;color:var(--accent);}
.public-copy{font-size:var(--t-sm);color:#b8d0e8;line-height:1.65;margin-bottom:24px;font-weight:400;max-width:500px;}
/* Stats — compactos */
.hero-stats{display:flex;gap:24px;margin:0 0 26px;flex-wrap:wrap;align-items:flex-end;}
.hero-stat{display:flex;flex-direction:column;gap:1px;}
.hero-stat-value{font-size:var(--t-2xl);font-weight:600;color:var(--accent);line-height:1;font-family:var(--font-mono);letter-spacing:-.5px;}
.hero-stat-label{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.14em;color:#7fa0b8;font-weight:600;}
.hero-stat-divider{width:1px;height:30px;background:rgba(223,235,255,.12);margin-bottom:3px;}
.public-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;}
/* Seguridad trust strip */
.hero-security{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:32px;
  padding:10px 14px;border-radius:10px;
  background:rgba(79,124,255,.05);border:1px solid rgba(79,124,255,.14);
}
.hero-security span{font-size:var(--t-micro);color:var(--text3);font-weight:600;display:flex;align-items:center;gap:5px;}
.hero-security span svg{opacity:.7;}
.hero-security-sep{width:1px;height:12px;background:rgba(110,174,233,.2);}
/* ── Features grid — 2×2 compacto ── */
.features-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 28px;}
.feature-card{
  border:1px solid rgba(223,235,255,.09);border-radius:10px;padding:11px 12px;
  background:linear-gradient(145deg,rgba(19,30,46,.75),rgba(8,13,22,.75));
  display:flex;align-items:flex-start;gap:9px;transition:border-color .18s,background .18s;
}
.feature-card:hover{border-color:rgba(79,124,255,.32);background:linear-gradient(145deg,rgba(22,38,62,.80),rgba(10,17,28,.80));}
.feature-icon{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(10,13,30,.7);border-radius:8px;border:1px solid rgba(79,124,255,.22);padding:3px;box-shadow:0 2px 10px rgba(79,124,255,.15);}
.feature-body{display:flex;flex-direction:column;gap:2px;}
.feature-body strong{font-size:var(--t-micro);font-weight:500;color:var(--text2);display:block;line-height:1.3;}
.feature-body span{font-size:var(--t-micro);color:var(--text4);line-height:1.4;}
/* ── Pricing plans ───────────────────────────────── */
.plans-section{margin:0 0 36px;}
.plans-head{text-align:center;margin-bottom:28px;}
.plans-tag{display:inline-block;font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.14em;color:var(--accent);font-weight:600;margin-bottom:12px;padding:5px 14px;border:1px solid rgba(79,124,255,.28);border-radius:20px;background:rgba(79,124,255,.06);}
.plans-title{font-size:var(--t-2xl);font-weight:600;letter-spacing:-.02em;color:var(--text);margin-bottom:0;}
.plans-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.plan-card{border:1px solid rgba(223,235,255,.12);border-radius:16px;padding:24px 20px;background:linear-gradient(155deg,rgba(18,30,46,.92),rgba(8,13,22,.94));display:flex;flex-direction:column;gap:10px;position:relative;transition:border-color .18s,transform .18s,box-shadow .18s;}
.plan-card:hover{border-color:rgba(79,124,255,.42);transform:translateY(-3px);box-shadow:0 20px 60px rgba(0,0,0,.45),0 0 0 1px rgba(79,124,255,.18);}
.plan-card-featured{border-color:rgba(79,124,255,.52);background:linear-gradient(155deg,rgba(20,40,90,.92),rgba(8,14,38,.96));box-shadow:0 0 56px rgba(79,124,255,.16),0 0 0 1px rgba(79,124,255,.22);}
.plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,var(--accent),#2f8cff);color:#fff;font-size:var(--t-micro);font-weight:600;text-transform:uppercase;letter-spacing:.10em;padding:4px 14px;border-radius:20px;white-space:nowrap;}
.plan-name{font-size:var(--t-micro);font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--text3);}
.plan-price{font-family:var(--font-mono);line-height:1;}
.plan-amount{font-size:var(--t-2xl);font-weight:600;color:var(--text);letter-spacing:-.03em;}
.plan-currency{font-size:var(--t-lg);color:var(--text3);font-weight:500;vertical-align:top;padding-top:10px;}
.plan-currency small{display:block;font-size:var(--t-micro);}
.plan-price-custom{font-size:var(--t-2xl);font-weight:600;color:var(--accent);padding:10px 0 4px;font-family:var(--font);}
.plan-desc{font-size:var(--t-sm);color:var(--text3);line-height:1.5;margin-bottom:4px;}
.plan-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;flex:1;}
.plan-features li{font-size:var(--t-sm);color:var(--text3);display:flex;align-items:flex-start;gap:7px;line-height:1.4;}
.plan-features li::before{content:'✓';color:var(--accent);font-weight:600;font-size:var(--t-micro);flex-shrink:0;margin-top:1px;}
.pf-no{color:var(--text4)!important;}
.pf-no::before{content:'–'!important;color:var(--text4)!important;}
.plan-cta{width:100%;justify-content:center;margin-top:8px;}
/* ── Commercial / competitive ─────────────────────── */
.commercial-line{
  display:inline-flex;align-items:center;gap:11px;margin:0 0 16px;
  color:#f0f7ff;font-size:var(--t-lg);font-weight:600;letter-spacing:-.01em;
}
.commercial-line::before{
  content:'';width:38px;height:3.5px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(90deg,var(--accent),#2f8cff);
  box-shadow:0 0 22px rgba(79,124,255,.50);
}
.freight-hub{
  position:absolute;left:7%;bottom:145px;display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:34px;border-radius:9px;border:1px solid rgba(13,186,111,.70);
  background:rgba(4,15,18,.86);color:#c8ffe8;font-family:var(--font-mono);
  font-weight:600;letter-spacing:.12em;box-shadow:0 0 26px rgba(13,186,111,.32);
}
.freight-label{
  position:absolute;padding:5px 7px;border-radius:7px;border:1px solid rgba(223,235,255,.18);
  background:rgba(9,15,22,.72);color:#e8f1ff;font-family:var(--font-mono);
  font-size:var(--t-micro);font-weight:600;letter-spacing:.08em;
}
.freight-label.l1{left:31%;bottom:165px}.freight-label.l2{left:58%;bottom:143px}.freight-label.l3{right:6%;bottom:174px}
.freight-service-panel{
  position:absolute;right:18px;bottom:18px;display:grid;grid-template-columns:repeat(3,auto);gap:7px;
}
.freight-service-panel span{
  border:1px solid rgba(223,235,255,.15);border-radius:7px;padding:6px 8px;
  background:rgba(255,255,255,.06);color:#dce8f7;font-size:var(--t-micro);font-weight:600;text-transform:uppercase;letter-spacing:.08em;
}
.truck-mark{
  position:absolute;left:39%;bottom:82px;width:214px;height:72px;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.52));
}
.truck-mark::after{
  content:'';position:absolute;left:4px;right:2px;bottom:-2px;height:9px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.42),transparent 68%);
  transform:skewX(-12deg);
}
.truck-box{
  position:absolute;left:0;bottom:20px;width:138px;height:42px;border-radius:5px 2px 3px 5px;
  background:
    linear-gradient(90deg,transparent 0 87%,rgba(55,70,88,.24) 87% 88%,transparent 88%),
    repeating-linear-gradient(90deg,rgba(37,50,68,.08) 0 1px,transparent 1px 22px),
    linear-gradient(180deg,#f5f8fb 0%,#c8d4df 58%,#9aaabc 100%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:inset 0 -10px 20px rgba(18,32,44,.20),inset 0 1px 0 rgba(255,255,255,.92);
}
.truck-box::before{
  content:'NOWGAIA';position:absolute;left:14px;top:13px;font-size:var(--t-micro);font-weight:600;
  color:#253244;letter-spacing:.16em;
}
.truck-box::after{
  content:'';position:absolute;left:0;right:0;bottom:8px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(37,50,68,.32),transparent);
}
.truck-rear{
  position:absolute;left:132px;bottom:21px;width:9px;height:40px;border-radius:0 2px 2px 0;
  background:linear-gradient(180deg,#b6c2cf,#75869a);
  border-left:1px solid rgba(37,50,68,.34);
}
.truck-rear::before,.truck-rear::after{content:'';position:absolute;right:2px;width:3px;height:5px;border-radius:1px;background:#ff746b;}
.truck-rear::before{top:5px}.truck-rear::after{bottom:5px;background:#ffd166;}
.truck-cab{
  position:absolute;right:5px;bottom:20px;width:64px;height:46px;
  background:linear-gradient(145deg,#2f8cff 0%,#1e5fa7 58%,#15334e 100%);
  clip-path:polygon(0 21%,49% 21%,68% 0,100% 0,100% 100%,0 100%);
  border-radius:4px 7px 4px 2px;
  box-shadow:inset -8px -10px 18px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.28);
}
.truck-cab::before{
  content:'';position:absolute;right:18px;top:7px;width:24px;height:17px;
  background:linear-gradient(145deg,#d7efff,#70addd);clip-path:polygon(0 100%,0 24%,58% 24%,100% 0,100% 100%);
  border:1px solid rgba(255,255,255,.42);
}
.truck-cab::after{
  content:'';position:absolute;right:4px;bottom:11px;width:6px;height:6px;border-radius:2px;
  background:#ffd166;box-shadow:-50px 2px 0 rgba(255,116,107,.86);
}
.truck-mirror{
  position:absolute;right:51px;bottom:48px;width:13px;height:8px;border:2px solid #0c1823;
  border-right:none;border-radius:5px 0 0 5px;transform:rotate(-8deg);
}
.truck-grille{
  position:absolute;right:7px;bottom:24px;width:12px;height:22px;border-radius:2px;
  background:repeating-linear-gradient(180deg,#d7e3ef 0 2px,#18324d 2px 4px);
  opacity:.9;
}
.truck-tank{
  position:absolute;right:72px;bottom:12px;width:34px;height:13px;border-radius:9px;
  background:linear-gradient(180deg,#d9e3ed,#738499);
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.24);
}
.truck-guard{
  position:absolute;left:26px;bottom:10px;width:78px;height:7px;
  border-top:2px solid rgba(210,222,235,.62);border-bottom:2px solid rgba(37,50,68,.66);
}
.truck-chassis{
  position:absolute;left:8px;right:8px;bottom:15px;height:8px;border-radius:3px;
  background:linear-gradient(180deg,#2b3645,#121a24);
}
.truck-wheel{
  position:absolute;bottom:2px;width:23px;height:23px;border-radius:50%;
  background:radial-gradient(circle at center,#aebccc 0 18%,#1a2431 19% 48%,#060a0f 49% 100%);
  border:3px solid #263241;box-shadow:0 2px 0 rgba(255,255,255,.08);
}
.truck-wheel.w1{left:20px}.truck-wheel.w2{left:104px}.truck-wheel.w3{right:18px}
.freight-caption{position:absolute;left:18px;top:18px;font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.13em;color:#bcd0e7;font-weight:600;}
.freight-metric{
  position:absolute;right:18px;top:18px;display:grid;gap:7px;text-align:right;
  font-family:var(--font-mono);font-size:var(--t-micro);color:#dce8f7;
}
.freight-metric strong{font-size:var(--t-xl);color:var(--accent);line-height:1;}
.nowgaia-gift{
  min-height:540px;overflow:hidden;position:relative;
  background:
    radial-gradient(ellipse 60% 50% at 45% 35%,rgba(79,124,255,.13),transparent 70%),
    radial-gradient(ellipse 40% 35% at 75% 65%,rgba(13,186,111,.07),transparent 60%),
    linear-gradient(170deg,rgba(3,6,16,.98) 0%,rgba(6,11,22,.95) 55%,rgba(8,15,26,.97) 100%);
}
.gift-caption{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.18em;color:rgba(110,174,233,.45);font-weight:600;
  white-space:nowrap;pointer-events:none;
}
/* ── RED LOGÍSTICA ─────────────────────────────── */
#net-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.net-map{position:absolute;inset:0;width:100%;height:100%;}
.np{animation:nPulse 3.2s ease-out infinite;transform-box:fill-box;transform-origin:center;}
@keyframes nPulse{0%{transform:scale(1);opacity:.55}60%{opacity:.15}100%{transform:scale(6);opacity:0}}
@media(prefers-reduced-motion:reduce){.np{animation:none!important;}}
.nowgaia-gift{min-height:unset;overflow:visible;position:static;background:none;}
.public-login{
  display:none;position:fixed;right:28px;top:96px;z-index:260;
  width:min(390px,calc(100vw - 32px));
}
.public-login.open{display:block;}
.public-login>div>svg{display:none!important;}
.public-login .login-box{border-radius:14px;padding:24px;background:rgba(9,15,22,.96);box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 0 1px rgba(79,124,255,.28);}
.public-footer{
  width:min(1180px,100%);display:flex;justify-content:space-between;gap:20px;align-items:center;
  border-top:1px solid rgba(13,186,111,.22);margin-top:40px;padding-top:24px;
  color:#d8e3f4;font-size:var(--t-sm);flex-wrap:wrap;
}
.public-footer-logo-wrap{
  display:inline-flex;align-items:center;
  padding:10px 16px;border-radius:12px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(0,192,80,.30);
  box-shadow:0 0 0 1px rgba(0,192,80,.08),0 6px 24px rgba(0,0,0,.28),0 0 16px rgba(0,192,80,.07);
  transition:transform .2s,box-shadow .2s,border-color .2s;
  text-decoration:none;
}
.public-footer-logo-wrap:hover{
  transform:translateY(-2px);
  border-color:rgba(0,192,80,.55);
  box-shadow:0 0 0 1px rgba(0,192,80,.18),0 10px 32px rgba(0,0,0,.32),0 0 24px rgba(0,192,80,.14);
}
.public-footer a:not(.public-footer-logo-wrap){color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
/* La altura de fila era FIJA en 52 px, independientemente del texto que llevara. Eso era
   lo que de verdad limitaba cuántos registros caben en pantalla, más que el tamaño de la
   letra: medido, la fila pasa a 37 px y en una pantalla de 900 px entran 24 filas donde
   antes cabían 17.

   La altura la marca ahora el relleno de las celdas y no un número fijo, así que una fila
   con un nombre de cliente largo crece en vez de recortarse. (Un min-height sobre el <tr>
   no sirve: una fila de tabla no lo respeta, y lo comprobé midiendo.) */
/* El relleno de 7 px que esta clase traía ya es el de todas las tablas: se quita de aquí
   para que no haya dos sitios donde tocarlo. Se queda la altura automática y los estilos
   propios de sus celdas. */
.record-table tbody tr{height:auto;}
.record-table .record-main{font-weight:600;color:var(--text);}
.record-table .record-sub{font-size:var(--t-micro);color:var(--text3);margin-top:2px;}
.status-dot{display:inline-flex;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--green);}
.status-dot.off{background:var(--text4);}
.cs-vs{font-size:var(--t-micro);color:var(--text4);margin-top:3px;}
.cs-vs strong{color:var(--amber);font-weight:600;}
/* ── Typewriter hero ─────────────────────────────────────── */
.hero-typed{
  display:block;
  min-height:130px;        /* 2 líneas × (70px × 0.93) — evita layout shift */
  color:var(--accent);}
/* Cursor inline — sigue al último carácter, no al bloque entero */
.hero-typed::after{
  content:'';
  display:inline-block;
  width:3px;
  height:.85em;
  background:var(--accent);
  vertical-align:middle;
  margin-left:4px;
  animation:blink .75s step-end infinite;}
@keyframes blink{50%{opacity:0;}}
/* ── Trust band ──────────────────────────────────────────── */
.trust-band{
  display:flex;gap:18px;align-items:center;margin:0 0 26px;flex-wrap:wrap;
}
.trust-item{display:flex;align-items:center;gap:7px;font-size:var(--t-micro);color:var(--text3);}
.trust-icon{width:24px;height:24px;border-radius:6px;background:rgba(11,14,30,.8);border:1px solid rgba(79,124,255,.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:3px;}
.trust-item strong{color:var(--text2);}
@media(max-width:980px){
  .public-nav{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .public-wordmark,.public-nav-center,.public-nav-right{justify-self:center;}
  .public-nav-center{display:none;}
  .public-login{right:16px;top:130px;}
  .public-login.open{display:flex;align-items:center;justify-content:center;inset:0;width:100%;top:0;right:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:16px;z-index:400;}
  .public-login.open #acceso-privado{max-width:420px;width:100%;margin:0;}
  /* Hero full-bleed: en tablet la viñeta cubre más */
  .public-hero::before{background:linear-gradient(180deg,rgba(3,6,16,.96) 0%,rgba(3,6,16,.82) 60%,rgba(3,6,16,.65) 100%);}
  .hero-text-wrap{padding:52px 20px 80px;}
  .hero-text-col{max-width:100%;}
  .public-title{font-size:clamp(34px,6vw,52px);}
  .hero-typed{min-height:80px;}
  .hero-stats{gap:20px;}
  .features-grid{grid-template-columns:1fr 1fr;}
  .plans-grid{grid-template-columns:1fr;}
}
@media(max-width:620px){
  .public-home{padding:0;}
  .public-nav{padding:16px;}
  .public-hero{min-height:600px;}
  .public-hero::before{background:linear-gradient(180deg,rgba(3,6,16,.97) 0%,rgba(3,6,16,.88) 55%,rgba(3,6,16,.72) 100%);}
  .hero-text-wrap{padding:40px 18px 80px;}
  .public-title{font-size:clamp(28px,8vw,36px);letter-spacing:-.01em;}
  .hero-typed{min-height:64px;}
  .public-copy{font-size:var(--t-sm);line-height:1.62;}
  .commercial-line{font-size:var(--t-sm);line-height:1.42;margin-bottom:16px;}
  .public-wordmark{max-width:80vw;}
  .hero-stats{gap:14px;}
  .trust-band{gap:10px;}
  .features-grid{grid-template-columns:1fr;}
  .plans-grid{grid-template-columns:1fr;}
  .trust-item{font-size:var(--t-micro);}
  .freight-label.l1{left:33%;bottom:151px}
  .freight-label.l2{left:58%;bottom:137px}
  .freight-label.l3{right:5%;bottom:164px}
  .freight-service-panel{right:16px;bottom:14px;gap:5px;}
  .freight-service-panel span{font-size:var(--t-micro);padding:6px 7px;}
  .truck-mark{left:27%;bottom:82px;transform:scale(.78);transform-origin:left bottom;}
  .pulse-bars{gap:7px;}
}

/* ── MOBILE TOP BAR ── */
.mob-topbar{
  display:none;position:fixed;top:0;left:0;right:0;height:50px;
  background:var(--bg2);border-bottom:1px solid var(--border2);
  padding:0 14px;z-index:160;align-items:center;gap:10px;
}
/* 44 px, no 36: es el control de navegación más usado en el móvil y era el blanco más
   pequeño de toda la pantalla. No lleva la clase .btn, así que el mínimo general para el
   dedo no le llegaba y nadie se dio cuenta. */
.mob-ham{
  width:44px;height:44px;border-radius:var(--radius-xs);
  background:rgba(255,255,255,.05);border:1px solid var(--border2);
  color:var(--text2);cursor:pointer;font-size:var(--t-lg);line-height:1;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .15s,color .15s;
}
.mob-ham:hover{background:rgba(255,255,255,.10);color:var(--text);}
.mob-brand{font-size:var(--t-sm);font-weight:600;color:var(--text);flex:1;letter-spacing:-.2px;}
.mob-brand-logo{height:32px;width:auto;flex:0 0 auto;filter:drop-shadow(0 0 9px rgba(110,174,233,.5));}
/* Brillo de marca: realza el logo con un halo azul suave y una animación de aparición sutil */
.brand-logo-img{filter:drop-shadow(0 2px 10px rgba(110,174,233,.42)) drop-shadow(0 0 22px rgba(53,217,208,.18));transition:filter .3s;}
.brand-logo-img:hover{filter:drop-shadow(0 2px 14px rgba(110,174,233,.6)) drop-shadow(0 0 28px rgba(53,217,208,.32));}
.mob-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.70);
  z-index:250;-webkit-tap-highlight-color:transparent;
}
.mob-overlay.open{display:block;}

/* ── TABLET (769-1100px) ── */
@media(min-width:901px) and (max-width:1100px){
  :root{--sidebar:208px;}
  .main{padding:22px 20px;}
  .kpi-value{font-size:var(--t-xl);}
  .grid-kpi{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ── EL MENÚ SE PLIEGA A 900, NO A 768 ────────────────────────────────────────
   Una tablet en vertical mide 768-834 px y caía justo en el hueco: la escala de
   letra le cambiaba a 900 pero el menú lateral seguía fijo hasta 768, comiéndose
   208 px. Le quedaban ~600 px de contenido con maquetado de escritorio, y por eso
   se salían de la pantalla las cabeceras de nóminas, las pestañas de tesorería,
   inversiones y contabilidad, y una tarjeta del simulador. Medido a 815 px.

   Se pliega el MENÚ, y solo el menú. Las tablas y las rejillas de varias columnas
   siguen en el bloque de 768: una tablet tiene sitio de sobra para ellas y no
   necesita la versión de teléfono. Cromo de móvil, contenido de escritorio. */
@media(max-width:900px){
  .mob-topbar{display:flex;}
  .sidebar{transform:translateX(-100%);transition:transform .25s ease;z-index:300;}
  .sidebar.mob-open{transform:translateX(0);box-shadow:8px 0 40px rgba(0,0,0,.65);}
  .main{margin-left:0;padding:62px 20px 28px;}
}

/* ── MOBILE (≤768px) ── */
@media(max-width:768px){
  html,body{font-size:var(--t-sm);}
  .main{padding:62px 14px 28px;}
  .page-title{font-size:var(--t-xl);letter-spacing:-.3px;}
  .page-sub{font-size:var(--t-sm);}
  .page-header{margin-bottom:14px;}
  .header-actions{gap:5px;}
  /* Aquí había tres anulaciones que aplanaban la escala justo donde más falta hace que
     se note: el título de tarjeta bajaba de --t-lg a --t-sm —del mismo tamaño que el
     texto que titula— y la etiqueta y el subtítulo del KPI SUBÍAN de --t-micro a --t-sm,
     con lo que rótulo y dato acababan pesando igual. Se quitan: valen las de base. */
  .grid-kpi{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  /* La cifra sí baja un escalón, y esta sí es a propósito: de 400 a 768 px la rejilla es
     de dos columnas, así que cada tarjeta ronda los 180 px y un importe largo a 28 px se
     sale. Por debajo de 400 vuelve a una columna y sobraría sitio, pero no merece un
     séptimo corte: sigue siendo uno de los cinco escalones. */
  .kpi-value{font-size:var(--t-xl);letter-spacing:-.5px;}
  .kpi-delta{font-size:var(--t-micro);}
  .kpi-card{padding:13px 14px;}
  .fuel-sum{grid-template-columns:1fr 1fr!important;}
  .form-checks-grid{grid-template-columns:1fr 1fr!important;}
  .sv-time-grid{grid-template-columns:1fr 1fr!important;}
  .sv-route-grid{grid-template-columns:1fr!important;}
  .form-label{font-size:var(--t-sm);}
  /* Los tamaños de botones y campos los gobierna la escala de :root — aquí solo queda
     lo que no es tamaño. Antes había aquí un juego propio (13,5 / 12 / 16 px) que se
     descuadraba con el de los otros anchos. */
  .form-input,.form-select{padding:10px 12px;}
  .card{padding:13px;}
  .modal-overlay{align-items:flex-end;padding:0;}
  .modal,.modal-lg{width:100%;max-width:100%;border-radius:18px 18px 0 0;max-height:92vh;padding:20px 16px 0;}
  .modal-title{font-size:var(--t-lg);margin:-20px -16px 18px;padding:16px 16px 14px;border-radius:18px 18px 0 0;top:-20px;}
  .modal-footer{margin:20px -16px 0;padding:14px 16px 18px;border-radius:0;bottom:0;flex-wrap:wrap;}
  .modal-footer .btn{flex:1 1 130px;justify-content:center;}
  table{font-size:var(--t-sm);min-width:760px;}
  thead th{padding:8px 9px;font-size:var(--t-micro);}
  tbody td{padding:7px 9px;font-size:var(--t-sm);}
  #ci-table table{min-width:680px;}
  #ci-table th:nth-child(5),#ci-table td:nth-child(5),
  #ci-table th:nth-child(6),#ci-table td:nth-child(6),
  #ci-table th:nth-child(8),#ci-table td:nth-child(8){display:none;}
  #sv-table table{min-width:0;width:100%;}
  .mob-hide{display:none;}
  .pagination{justify-content:center;flex-wrap:wrap;gap:4px;}
  .page-info{width:100%;text-align:center;order:-1;margin:0;}
  .header-actions{flex-wrap:wrap;}
  .cost-box{gap:14px;}
  .cost-box-item .cost-box-val{font-size:var(--t-xl);}
  .scenario-bar{padding:8px 12px;gap:8px;}
  .tabs{overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch;}
  #dash-ejecutivo-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #dash-ejecutivo-acciones>div{grid-template-columns:1fr!important;}
  #dash-transport-command>div{grid-template-columns:1fr!important;}
  #dash-transport-command>div>div:nth-child(2){grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .dash-group-hdr{padding:12px 14px;gap:8px;}
  .dg-sub{display:none;}
}

/* ── VERY SMALL (≤400px) ── */
@media(max-width:400px){
  .main{padding:62px 10px 20px;}
  .grid-kpi{grid-template-columns:1fr!important;}
  .kpi-value{font-size:var(--t-lg);}
  .btn{padding:8px 12px;}   /* solo el hueco: el tamaño lo pone la escala */
  .modal-footer .btn{flex-basis:100%;}
  #dash-ejecutivo-kpis{grid-template-columns:1fr!important;}
  #dash-transport-command>div>div:nth-child(2){grid-template-columns:1fr!important;}
  .flujo-tab-bar-wrap{gap:4px;}
}
/* ── TOUCH TARGETS móvil ── */
@media(max-width:768px){
  .tab{min-height:38px;}
  #flujo-main-tabs .tab{padding:7px 10px;font-size:var(--t-micro);}
  /* TODO canvas (no solo .chart-wrap): Chart.js fija un ancho en px al canvas y ese ancho
     actúa como min-content de su columna de grid, ensanchando la rejilla y provocando
     scroll horizontal en toda la página. Con max-width deja de imponer suelo. */
  canvas{max-width:100%;}
}
/* ── TABLET (769–1100px): sidebar más estrecho para ganar área de contenido ── */
/* 901, no 769: por debajo de 900 el menú ya está plegado y hay una barra fija de 50 px
   arriba, así que el padding de 22 px de este bloque le quitaba al contenido el hueco que
   la barra ocupa. Hoy no se veía porque encima del título hay otros 119 px de contenido,
   pero la regla que debía garantizarlo no estaba en vigor: dependía de la suerte. */
@media(min-width:901px) and (max-width:1100px){
  :root{--sidebar:196px;}
  .main{padding:22px 20px;}
  .nav-item{font-size:var(--t-sm);padding:7px 9px 7px 11px;}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ══ MEJORAS MÓVIL / TABLET — FORMATO DE DATOS Y USABILIDAD ══════════
   Columnas ocultas en tablas, scroll de filtros, densidad visual
   ════════════════════════════════════════════════════════════════════ */

/* Tablet (769-1100px): densidad de tabla mejorada */
@media(min-width:769px) and (max-width:1100px){
  table{font-size:var(--t-sm);}
  thead th{padding:9px 11px;}
  /* 7 px como en el escritorio: este 10 dejaba la fila de la tablet en 73 px cuando la
     del escritorio media 38. La altura de fila se decidio una vez; aqui solo cambia el
     relleno LATERAL, que si depende del ancho de la pantalla. */
  tbody td{padding:7px 11px;}
  .badge{font-size:var(--t-micro);padding:2px 7px;}
  .kpi-value{font-size:var(--t-xl);}
  .card{padding:16px;}
}

/* ── TABLAS: ocultación de columnas secundarias en móvil ── */
@media(max-width:768px){

  /* SERVICIOS: botones de acción secundarios ocultos; solo editar */
  #sv-table td:last-child .btn-primary.btn-xs{display:none;}  /* Fact.→ */
  #sv-table td:last-child .btn-danger.btn-xs{display:none;}   /* ✕ borrar */
  #sv-table td:last-child{gap:3px;}

  /* FACTURAS A CLIENTES: ocultar Fecha + reducir anchura mínima */
  #ci-table table{min-width:480px;}
  #ci-table th:nth-child(3),#ci-table td:nth-child(3){display:none;} /* Fecha */

  /* FACTURAS OPERATIVAS: solo Fecha·Tipo·Proveedor·Concepto·Total·Acción */
  #fact-table table{min-width:0;}
  #fact-table th:nth-child(5),#fact-table td:nth-child(5),  /* Cliente */
  #fact-table th:nth-child(6),#fact-table td:nth-child(6),  /* Vehículo */
  #fact-table th:nth-child(7),#fact-table td:nth-child(7),  /* Adj. */
  #fact-table th:nth-child(9),#fact-table td:nth-child(9){display:none;}  /* Neto s/IVA */

  /* GASTOS ADMIN: solo Fecha·Cat.·Proveedor·Total·Acción */
  #admin-table table{min-width:0;}
  #admin-table th:nth-child(4),#admin-table td:nth-child(4),  /* Ref. */
  #admin-table th:nth-child(5),#admin-table td:nth-child(5),  /* Cliente */
  #admin-table th:nth-child(6),#admin-table td:nth-child(6),  /* Unidad */
  #admin-table th:nth-child(7),#admin-table td:nth-child(7),  /* Docs */
  #admin-table th:nth-child(9),#admin-table td:nth-child(9){display:none;}  /* Neto */

  /* CONDUCTORES: solo Conductor·Estado·Contrato·Coste·Salario·Acción */
  #drivers-table table{min-width:0;}
  #drivers-table th:nth-child(2),#drivers-table td:nth-child(2),  /* NIF */
  #drivers-table th:nth-child(4),#drivers-table td:nth-child(4),  /* Cat. */
  #drivers-table th:nth-child(6),#drivers-table td:nth-child(6),  /* Alta/Baja */
  #drivers-table th:nth-child(9),#drivers-table td:nth-child(9),  /* % plantilla */
  #drivers-table th:nth-child(10),#drivers-table td:nth-child(10){display:none;}  /* Docs */

  /* NÓMINAS: solo Mes·Empleado·Bruto·SS emp·Coste empresa·Acción */
  #nom-table table{min-width:0;}
  #nom-table th:nth-child(2),#nom-table td:nth-child(2),   /* Puesto */
  #nom-table th:nth-child(6),#nom-table td:nth-child(6),   /* SS trab. */
  #nom-table th:nth-child(7),#nom-table td:nth-child(7),   /* IRPF */
  #nom-table th:nth-child(8),#nom-table td:nth-child(8),   /* Extras */
  #nom-table th:nth-child(10),#nom-table td:nth-child(10){display:none;}  /* Líquido */

  /* AUSENCIAS: ocultar Fin y Notas */
  #aus-table table{min-width:0;}
  #aus-table th:nth-child(4),#aus-table td:nth-child(4),  /* Fin */
  #aus-table th:nth-child(7),#aus-table td:nth-child(7){display:none;}  /* Notas */

  /* COMBUSTIBLE: quitar min-width forzado */
  #fuel-table table{min-width:0;}

  /* VENTAS/PREFACTURAS: mostrar Cliente·Período·Tipo·Importe·Acción */
  #sales-table table{min-width:0;}
  #sales-table th:nth-child(4),#sales-table td:nth-child(4),  /* Ref. */
  #sales-table th:nth-child(5),#sales-table td:nth-child(5),  /* Alcance */
  #sales-table th:nth-child(6),#sales-table td:nth-child(6),  /* Docs */
  #sales-table th:nth-child(8),#sales-table td:nth-child(8){display:none;}  /* Detalle */

  /* CLIENTES: adaptación completa */
  #cli-table table{min-width:0;}

  /* INVENTARIO TALLER: mostrar Categoría·Nombre·Cantidad·Coste·Valor·Acción */
  #tinv-table table{min-width:0;}
  #tinv-table th:nth-child(1),#tinv-table td:nth-child(1),  /* Ref. */
  #tinv-table th:nth-child(7),#tinv-table td:nth-child(7),  /* Ubicación */
  #tinv-table th:nth-child(8),#tinv-table td:nth-child(8){display:none;}  /* Últ. revisión */

  /* FINANCIACIÓN — contratos: mostrar Tipo·Concepto·Cuota·TIN·Estado */
  #fin-table table{min-width:0;}
  #fin-table th:nth-child(2),#fin-table td:nth-child(2),    /* Entidad */
  #fin-table th:nth-child(4),#fin-table td:nth-child(4),    /* Capital */
  #fin-table th:nth-child(6),#fin-table td:nth-child(6),    /* Plazo */
  #fin-table th:nth-child(8),#fin-table td:nth-child(8),    /* Inicio */
  #fin-table th:nth-child(10),#fin-table td:nth-child(10),  /* C/L plazo */
  #fin-table th:nth-child(11),#fin-table td:nth-child(11){display:none;}  /* Gtos.fin. */

  /* FINANCIACIÓN — amortización: mostrar Tipo·Contrato·Cuota·Capital·Saldo */
  #fin-amort-table table{min-width:0;}
  #fin-amort-table th:nth-child(5),#fin-amort-table td:nth-child(5){display:none;}  /* Intereses */

  /* PROYECCIONES */
  #proj-table table{min-width:0;}

  /* Padding reducido en tablas de lista */
  #drivers-table th,#drivers-table td,
  
  /* Badges: no partir en móvil */
  .badge{white-space:nowrap;}
}

/* ── FILTROS Y CABECERAS: scroll horizontal en lugar de wrap ── */
@media(max-width:768px){
  /* Scroll horizontal en header-actions para no perder espacio vertical */
  .header-actions{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;
    padding-bottom:3px;
    scrollbar-width:none;
  }
  .header-actions::-webkit-scrollbar{display:none;}

  /* Secciones con pocas acciones: seguir wrapeando normalmente */
  #sec-ventas .header-actions,
  #sec-contabilidad .header-actions,
  #sec-flujo .header-actions{
    flex-wrap:wrap;
    overflow-x:visible;
  }

  /* Filtros dentro del header-actions: tamaño mínimo para no truncar */
  .header-actions .form-select,
  .header-actions input[type="month"]{min-width:0;flex-shrink:0;}

  /* Tabs: ocultar scrollbar pero mantener scroll táctil */
  .tabs::-webkit-scrollbar{display:none;}
  .tabs{scrollbar-width:none;-webkit-overflow-scrolling:touch;}

  /* Escenarios/pills de análisis */
  .scenario-pill{font-size:var(--t-micro);padding:5px 10px;white-space:nowrap;}

  /* Paginación: botones más grandes para toque */
  .page-btn{min-height:36px;min-width:32px;padding:5px 9px;font-size:var(--t-micro);}
  .page-info{font-size:var(--t-micro);}
}

/* ── GRÁFICOS Y CARDS: altura y espacio en móvil ── */
@media(max-width:768px){
  /* Reducir altura de gráficos secundarios para ver más contenido */
  #sec-nominas .chart-wrap,
  #sec-ausencias .chart-wrap,
  #sec-flujo .chart-wrap{height:150px!important;}

  /* Salud financiera: 2 gráficos en fila, tercero a ancho completo */
  #sec-financiacion .grid-3{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
  }
  #sec-financiacion .grid-3>*:last-child{grid-column:1/-1;}

  /* Sección financiación: gráficos KPI de cuotas/intereses más compactos */
  #sec-financiacion .chart-wrap{height:150px!important;}

  /* KPI sub: menos espacio */
  .kpi-sub{font-size:var(--t-micro);margin-top:3px;}

  /* Reducir espacio superior de sección */
  .section{padding-top:2px;}

  /* Page header más compacto */
  .page-header{margin-bottom:12px;gap:8px;}
  .page-sub{font-size:var(--t-sm);margin-top:2px;}

  /* Esconder subtítulos de sección en secciones ricas en datos */
  #sec-nominas .page-sub,
  #sec-financiacion .page-sub,
  #sec-facturas .page-sub,
  #sec-flujo .page-sub,
  #sec-contabilidad .page-sub,
  #sec-ausencias .page-sub,
  #sec-proyecciones .page-sub{display:none;}
}

/* ── MÓVIL MUY PEQUEÑO (≤480px) ── */
@media(max-width:480px){
  /* Tablas más compactas */
  table{font-size:var(--t-micro);}
  thead th{font-size:var(--t-micro);padding:5px 6px;}
  tbody td{font-size:var(--t-micro);padding:7px 7px;}

  /* KPI ultra-compacto */
  .kpi-card{padding:10px 11px;}
  .kpi-value{font-size:var(--t-lg);}
  .kpi-label{font-size:var(--t-micro);margin-bottom:6px;}
  .kpi-sub{font-size:var(--t-micro);}

  /* Cards */
  .card{padding:10px;}
  .card-title{font-size:var(--t-micro);}

  /* Título de página */
  .page-title{font-size:var(--t-lg);}

  /* Botones xs más pequeños */

  /* Salud financiera en móvil: apilar todos los gráficos */
  #sec-financiacion .grid-3{grid-template-columns:minmax(0,1fr);}
  #sec-financiacion .grid-3>*:last-child{grid-column:auto;}
}

/* ── PIZARRA DE EVENTOS ───────────────────────────────────────────── */
.pizarra-section{margin-bottom:28px;}
.pizarra-section-title{font-size:var(--t-sm);font-weight:600;letter-spacing:.3px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.pizarra-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;}
.pizarra-card{border-left:3px solid;border-radius:8px;padding:11px 13px;background:var(--card2);display:flex;flex-direction:column;gap:4px;transition:box-shadow .15s;}
.pizarra-card:hover{box-shadow:0 2px 12px rgba(0,0,0,.22);}
.pc-header{display:flex;align-items:center;justify-content:space-between;font-size:var(--t-micro);gap:6px;}
.pc-concept{font-size:var(--t-micro);font-weight:600;color:var(--text1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3;}
.pc-amount{font-size:var(--t-sm);font-weight:600;letter-spacing:-.3px;}
.pc-date{font-size:var(--t-micro);color:var(--text4);font-family:var(--font-mono);}
.pizarra-rec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;}
.pizarra-rec-card{border-left:3px solid;border-radius:8px;padding:11px 13px;background:var(--card2);}
@media(max-width:600px){
  .pizarra-grid,.pizarra-rec-grid{grid-template-columns:1fr 1fr;}
}

/* ── ALMACÉN LOGÍSTICO — productos y scanner ── */
.alm-prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;}
.alm-prod-card{background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:10px;font-size:var(--t-micro);}
.alm-prod-card .alm-prod-barcode{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--text4);margin-bottom:3px;word-break:break-all;}
.alm-prod-card .alm-prod-nombre{font-weight:600;color:var(--text);margin-bottom:3px;}
.alm-prod-card .alm-prod-meta{font-size:var(--t-micro);color:var(--text3);}
.alm-prod-card .alm-prod-srv{font-size:var(--t-micro);color:var(--accent);margin-top:3px;}
.alm-scan-reticle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.alm-scan-reticle::after{content:'';display:block;width:62%;height:32%;border:2px solid rgba(79,124,255,.75);border-radius:6px;box-shadow:0 0 0 9999px rgba(0,0,0,.32);}
@media(max-width:768px){.alm-prod-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}}
@media(max-width:400px){.alm-prod-grid{grid-template-columns:1fr 1fr;}}

/* ── PORTAL CONDUCTOR — mobile-first ── */
.cp-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 18px;font-size:var(--t-sm);margin-bottom:14px;}
.cp-steps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.cp-step{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:8px 12px;border-radius:8px;flex:1;min-width:140px;}
.cp-step-btn{width:100%;min-height:48px;padding:12px 16px;font-size:var(--t-sm);font-weight:600;border-radius:10px;cursor:pointer;}
.cp-step-done{display:flex;align-items:center;gap:7px;font-size:var(--t-sm);color:var(--green);margin-top:4px;}
.cp-step-pending{font-size:var(--t-sm);color:var(--text4);margin-top:4px;}
.cp-section{border-top:1px solid var(--border);padding-top:14px;margin-top:6px;}
.cp-section-title{font-size:var(--t-micro);font-weight:600;color:var(--text3);margin-bottom:10px;text-transform:uppercase;letter-spacing:.06em;}
.cp-msg-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;}
.cp-msg-area{resize:none;flex:1;min-width:180px;font-size:var(--t-sm);}
.cp-send-btn{white-space:nowrap;min-height:44px;padding:0 18px;}
.cp-photo-btn{cursor:pointer;white-space:nowrap;min-height:44px;padding:0 18px;}
/* ── Incidencias conductor ───────────────────────────────── */
.cp-inc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.cp-inc-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 6px;border-radius:8px;border:2px solid var(--border2);background:var(--bg3);cursor:pointer;font-size:var(--t-micro);text-align:center;color:var(--text2);transition:border-color .15s,background .15s;line-height:1.3;min-height:60px;-webkit-tap-highlight-color:transparent;user-select:none;}
.cp-inc-chip.selected{border-color:var(--amber);background:rgba(255,160,0,.12);color:var(--amber);font-weight:600;}
.cp-inc-chip:active{transform:scale(.96);}
.cp-inc-hist{font-size:var(--t-micro);padding:7px 10px;background:rgba(255,140,0,.07);border:1px solid rgba(255,140,0,.22);border-radius:7px;margin-bottom:6px;}
/* Portal del conductor en móvil: se maneja de pie, con prisa y a veces con guantes, así
   que todo lo que se toca es más grande que en el escritorio. */
@media(max-width:680px){
  .cp-info-grid{font-size:var(--t-sm);gap:10px 14px;}
  .cp-steps{flex-direction:column;gap:10px;}
  .cp-step{flex:none;width:100%;min-width:0;padding:12px 14px;}
  .cp-step-btn{min-height:56px;font-size:var(--t-sm);padding:14px 18px;}
  .cp-step-done{font-size:var(--t-sm);}
  .cp-step-done svg{width:15px;height:15px;}
  .cp-step-pending{font-size:var(--t-sm);}
  .cp-section{padding-top:18px;}
  .cp-section-title{font-size:var(--t-sm);margin-bottom:12px;}
  .cp-msg-row{flex-direction:column;}
  .cp-msg-area{min-height:72px;font-size:var(--t-sm);width:100%;}
  .cp-send-btn{min-height:52px;font-size:var(--t-sm);width:100%;}
  .cp-photo-btn{min-height:52px;font-size:var(--t-sm);width:100%;}
  .cp-inc-grid{gap:6px;}
  .cp-inc-chip{font-size:var(--t-micro);padding:8px 4px;min-height:54px;}
}
/* ── Upload progress ─────────────────────────────────────── */
.upload-prog-wrap{margin:8px 0;border-radius:8px;border:1px solid var(--border);background:var(--bg3);padding:10px 12px;font-size:var(--t-micro);}
.upload-prog-bar{height:6px;background:var(--bg2);border-radius:4px;overflow:hidden;margin-bottom:6px;}
.upload-prog-fill{height:100%;background:var(--accent);border-radius:4px;transition:width .25s ease;min-width:4px;}
.upload-prog-name{color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;display:inline-block;vertical-align:middle;}
.upload-prog-pct{color:var(--accent);font-family:var(--font-mono);margin-left:6px;font-weight:600;}
.upload-prog-status{color:var(--text3);font-size:var(--t-micro);margin-top:2px;}
.upload-prog-wrap.done{border-color:var(--green);opacity:.75;}
.upload-drop-zone{border:2px dashed var(--border);border-radius:10px;padding:22px 16px;text-align:center;cursor:pointer;transition:border-color .18s,background .18s;color:var(--text3);font-size:var(--t-sm);}
.upload-drop-zone.drag-over{border-color:var(--accent);background:rgba(91,138,255,.07);}
.upload-drop-zone:hover{border-color:var(--text2);}
/* ── Document archive ────────────────────────────────────── */
.doc-archive-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-bottom:1px solid var(--border);font-size:var(--t-sm);}
.doc-archive-row:last-child{border-bottom:none;}
.doc-archive-row:hover{background:var(--card2);}
.doc-archive-icon{font-size:var(--t-sm);flex-shrink:0;}
.doc-archive-info{flex:1;min-width:0;}
.doc-archive-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}
.doc-archive-name:hover{color:var(--accent);}
.doc-archive-meta{font-size:var(--t-micro);color:var(--text3);}
/* ── Attachment card grid ───────────────────────────────── */
.att-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:4px;}
.att-card{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg3);cursor:pointer;transition:border-color .18s,transform .15s;}
.att-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.att-card-thumb{width:100%;height:80px;object-fit:cover;display:block;background:var(--bg4);}
.att-card-pdf{width:100%;height:80px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#1a0a00,#2d1500);font-size:var(--t-2xl);}
.att-card-body{padding:6px 8px;display:flex;align-items:center;gap:6px;}
.att-card-name{flex:1;font-size:var(--t-micro);font-weight:600;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.att-card-actions{display:flex;gap:4px;flex-shrink:0;}
/* ── Storage panel ─────────────────────────────────────── */
.storage-bar-track{height:8px;background:var(--bg4);border-radius:6px;overflow:hidden;margin:6px 0;}
.storage-bar-fill{height:100%;border-radius:6px;transition:width .4s ease;}
.storage-orphan-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:7px;font-size:var(--t-micro);font-weight:600;background:var(--amber-dim);color:var(--amber);border:1px solid rgba(255,209,102,.28);}
/* ── Simulador de costes visual ───────────────────────── */
.sim-res-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.sim-res-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 12px;background:var(--card);border:2px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color .18s,background .18s,transform .15s;min-width:80px;max-width:110px;user-select:none;}
.sim-res-card:hover{border-color:rgba(79,124,255,.5);background:rgba(79,124,255,.06);}
.sim-res-card.selected{border-color:var(--accent);background:rgba(79,124,255,.14);box-shadow:0 0 0 3px rgba(79,124,255,.18);}
.sim-res-card.selected .sim-res-icon{filter:drop-shadow(0 0 6px rgba(79,124,255,.6));}
.sim-res-icon{font-size:var(--t-2xl);line-height:1;}
.sim-res-name{font-size:var(--t-micro);font-weight:600;color:var(--text2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96px;}
.sim-res-cost{font-size:var(--t-micro);color:var(--text3);text-align:center;}
.sim-route-vis{position:relative;background:linear-gradient(135deg,rgba(15,18,32,.6) 0%,rgba(22,28,48,.6) 100%);border:1px solid var(--border);border-radius:12px;padding:20px 24px;overflow:hidden;}
.sim-route-road{position:relative;height:48px;display:flex;align-items:center;}
.sim-route-line{flex:1;height:3px;background:repeating-linear-gradient(90deg,var(--accent) 0,var(--accent) 14px,transparent 14px,transparent 24px);margin:0 16px;opacity:.5;border-radius:2px;}
.sim-route-city{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:80px;}
.sim-route-city-pin{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--t-sm);border:2px solid var(--accent);background:rgba(79,124,255,.18);}
.sim-route-city-name{font-size:var(--t-micro);font-weight:600;color:var(--text);text-align:center;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sim-truck-wrap{position:absolute;top:50%;transform:translateY(-50%);transition:left .6s cubic-bezier(.34,1.56,.64,1);pointer-events:none;}
.sim-kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px;}
.sim-kpi{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:9px;padding:10px 12px;text-align:center;}
.sim-kpi-val{font-size:var(--t-lg);font-weight:600;font-family:var(--font-mono);letter-spacing:-.5px;}
.sim-kpi-lbl{font-size:var(--t-micro);color:var(--text3);margin-top:2px;text-transform:uppercase;letter-spacing:.06em;}
.sim-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.sim-bar-track{flex:1;height:8px;background:rgba(255,255,255,.07);border-radius:6px;overflow:hidden;}
.sim-bar-fill{height:100%;border-radius:6px;transition:width .5s ease;}
.sim-proj-marker{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;margin-bottom:6px;}
.sim-proj-badge{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:var(--t-sm);font-weight:600;flex-shrink:0;}
.sim-section-label{font-size:var(--t-micro);font-weight:400;letter-spacing:.01em;color:var(--text3);margin-bottom:8px;}
@media(max-width:768px){.sim-kpi-strip{grid-template-columns:1fr 1fr;}.sim-res-card{min-width:70px;padding:8px 9px;}}

/* ── DASHBOARD GROUPS ─────────────────────────────────────────────── */
.dash-group{border:1px solid var(--border2);border-radius:var(--radius);overflow:hidden;margin-bottom:18px;box-shadow:var(--shadow-sm);}
.dash-group-hdr{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;user-select:none;background:linear-gradient(90deg,var(--dg-color-dim,rgba(110,174,233,.08)) 0%,rgba(18,25,35,.97) 60%);border-bottom:1px solid var(--border2);transition:background .18s;}
.dash-group-hdr:hover{background:linear-gradient(90deg,var(--dg-color-dim,rgba(110,174,233,.15)) 0%,rgba(22,32,46,.98) 60%);}
.dg-num{width:28px;height:28px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:var(--t-micro);font-weight:600;font-family:var(--font-mono);background:var(--dg-color-dim,rgba(110,174,233,.15));color:var(--dg-color,var(--accent));border:1px solid var(--dg-color-border,rgba(110,174,233,.25));}
.dg-title-block{flex:1;min-width:0;}
.dg-title{font-size:var(--t-micro);font-weight:600;letter-spacing:.01em;color:var(--text);line-height:1;}
.dg-sub{font-size:var(--t-micro);color:var(--text4);margin-top:3px;letter-spacing:.01em;}
.dg-meta{display:flex;gap:6px;align-items:center;flex-shrink:0;}
.dg-badge{font-size:var(--t-micro);font-weight:500;letter-spacing:.01em;padding:3px 8px;border-radius:6px;background:var(--dg-color-dim,rgba(110,174,233,.10));color:var(--dg-color,var(--accent));border:1px solid var(--dg-color-border,rgba(110,174,233,.22));white-space:nowrap;}
.dg-chevron{color:var(--text4);font-size:var(--t-micro);transition:transform .22s;flex-shrink:0;margin-left:4px;}
.dash-group.collapsed .dg-chevron{transform:rotate(-90deg);}
.dash-group-body{padding:20px;background:var(--bg);}
.dash-group.collapsed .dash-group-body{display:none;}
.dg-1{--dg-color:#0dba6f;--dg-color-dim:rgba(13,186,111,.10);--dg-color-border:rgba(13,186,111,.24);}
.dg-2{--dg-color:var(--accent);--dg-color-dim:rgba(110,174,233,.10);--dg-color-border:rgba(110,174,233,.24);}
.dg-3{--dg-color:var(--amber);--dg-color-dim:rgba(255,209,102,.10);--dg-color-border:rgba(255,209,102,.24);}
.dg-4{--dg-color:var(--teal);--dg-color-dim:rgba(53,217,208,.10);--dg-color-border:rgba(53,217,208,.24);}
.dg-5{--dg-color:var(--purple);--dg-color-dim:rgba(197,180,255,.10);--dg-color-border:rgba(197,180,255,.24);}
.dg-6{--dg-color:var(--red);--dg-color-dim:rgba(255,116,107,.10);--dg-color-border:rgba(255,116,107,.24);}
.dg-7{--dg-color:#2f8cff;--dg-color-dim:rgba(47,140,255,.10);--dg-color-border:rgba(47,140,255,.24);}
.dg-progress{width:64px;height:5px;background:rgba(255,255,255,.10);border-radius:3px;overflow:hidden;flex-shrink:0;}
.dg-progress-fill{height:100%;border-radius:3px;background:var(--dg-color,var(--accent));transition:width .4s;}
.q-sep-row td{font-size:var(--t-micro);font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:7px 8px!important;background:rgba(110,174,233,.07)!important;color:var(--accent)!important;font-family:var(--font-mono);border-top:2px solid rgba(110,174,233,.28)!important;border-bottom:1px solid rgba(110,174,233,.15)!important;}
.q-sep-row td:first-child{border-left:3px solid rgba(110,174,233,.5)!important;}

/* ── TIME PILLARS (Pasado · Presente · Futuro) ────────────────────── */
.time-pillar{margin-bottom:36px;}
/* La cabecera es el mando para plegar su pilar: tiene que parecerlo. */
.tp-header{cursor:pointer;}
.tp-header:hover{border-color:var(--tp-color,var(--accent));}
.tp-header:focus-visible{outline:2px solid #6eaee9;outline-offset:-2px;}
.tp-chevron{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;margin-left:auto;flex:0 0 auto;
  border-radius:8px;border:1px solid var(--border);
  color:var(--text3);font-size:var(--t-sm);line-height:1;
  background:rgba(255,255,255,.04);
}
.tp-header:hover .tp-chevron{color:var(--text1);border-color:var(--border2);}
/* Plegado, la cabecera deja de ser una cabecera y pasa a ser una fila: si conserva las
   esquinas de arriba parece que le falta el cuerpo, en vez de estar cerrada. */
.tp-header[aria-expanded="false"]{border-radius:var(--radius);border-bottom:1px solid var(--tp-border,var(--border2));}

.tp-header{
  display:flex;align-items:center;gap:18px;padding:22px 26px;
  border-radius:var(--radius) var(--radius) 0 0;
  border:1px solid var(--tp-border,var(--border2));border-bottom:1px solid rgba(255,255,255,.05);
  background:var(--tp-bg,var(--bg2));
  position:relative;overflow:hidden;
}
.tp-header::before{
  content:attr(data-era);position:absolute;right:26px;top:50%;transform:translateY(-50%);
  font-size:var(--t-2xl);font-weight:600;text-transform:uppercase;letter-spacing:-.02em;
  color:var(--tp-color,var(--accent));opacity:.055;pointer-events:none;
  font-family:var(--font);line-height:1;
}
.tp-header::after{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--tp-color,var(--accent));border-radius:3px 0 0 3px;}
.tp-block{flex:1;min-width:0;}
.tp-era{font-size:var(--t-micro);font-weight:500;letter-spacing:.08em;color:var(--tp-color,var(--accent));margin-bottom:4px;}
.tp-title{font-size:var(--t-lg);font-weight:600;letter-spacing:-.25px;color:var(--text);line-height:1.15;}
.tp-tagline{font-size:var(--t-micro);color:var(--text4);margin-top:5px;font-weight:400;}
.tp-badges{display:flex;gap:7px;align-items:center;flex-shrink:0;flex-wrap:wrap;}
.tp-badge{
  font-size:var(--t-micro);font-weight:500;letter-spacing:.02em;
  padding:4px 11px;border-radius:7px;
  background:var(--tp-color-dim,rgba(110,174,233,.10));
  color:var(--tp-color,var(--accent));
  border:1px solid var(--tp-border-badge,rgba(110,174,233,.22));
  white-space:nowrap;
}
.tp-progress-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;}
.tp-progress-track{width:56px;height:5px;background:rgba(255,255,255,.10);border-radius:3px;overflow:hidden;}
.tp-progress-fill{height:100%;border-radius:3px;background:var(--tp-color,var(--accent));transition:width .4s;}
.tp-progress-label{font-size:var(--t-micro);color:var(--tp-color,var(--accent));font-weight:600;letter-spacing:.03em;}
.tp-body{
  border:1px solid var(--tp-border,var(--border2));border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  padding:22px;background:var(--bg);
}
.tp-section{margin-bottom:22px;}
.tp-section:last-child{margin-bottom:0;}
.tp-section-hdr{
  display:flex;align-items:center;gap:10px;
  font-size:var(--t-micro);font-weight:400;
  letter-spacing:.03em;color:var(--text4);
  margin-bottom:14px;
}
.tp-section-hdr::before,.tp-section-hdr::after{content:'';flex:1;height:1px;background:var(--border2);}
/* Pillar color tokens */
.tp-pasado{--tp-color:#b8a4ff;--tp-color-dim:rgba(184,164,255,.10);--tp-border:rgba(184,164,255,.20);--tp-border-badge:rgba(184,164,255,.28);--tp-bg:linear-gradient(135deg,rgba(184,164,255,.07) 0%,var(--bg2) 55%);}
.tp-presente{--tp-color:#ffd166;--tp-color-dim:rgba(255,209,102,.10);--tp-border:rgba(255,209,102,.20);--tp-border-badge:rgba(255,209,102,.28);--tp-bg:linear-gradient(135deg,rgba(255,209,102,.07) 0%,var(--bg2) 55%);}
.tp-futuro{--tp-color:#0dba6f;--tp-color-dim:rgba(13,186,111,.10);--tp-border:rgba(13,186,111,.20);--tp-border-badge:rgba(13,186,111,.28);--tp-bg:linear-gradient(135deg,rgba(13,186,111,.07) 0%,var(--bg2) 55%);}
@media(max-width:900px){.tp-header{padding:14px 16px;gap:10px;}.tp-header::before{font-size:var(--t-2xl);right:14px;}.tp-title{font-size:var(--t-sm);}.tp-tagline{display:none;}.tp-body{padding:14px;}}
@media(max-width:600px){.tp-badges{display:none;}.tp-header{padding:12px 14px;}.tp-progress-wrap{display:none;}}
@media(max-width:768px){.tacho-chart-grid{grid-template-columns:1fr!important;}}
/* Diagnóstico financiero: las cifras y conceptos clave (en <strong>) destacan por brillo,
   no por bold pesado — texto de apoyo en gris tenue, dato en blanco a peso 600 */
.fin-diag-row strong{color:var(--text);font-weight:600;letter-spacing:.01em;}
/* ── Accesibilidad: texto grande y zonas de toque ──────────────────────────────
   La app usa estilos en línea con tamaños en píxeles, así que una regla normal de CSS
   no puede agrandarlos: la única forma de vencer un style="" es !important sobre un
   selector de atributo. Es feo, pero es lo que permite ofrecer texto grande sin
   reescribir cientos de estilos incrustados y sin cambiarle la densidad a quien no lo
   necesita.                                                                          */
body.txt-grande [style*="font-size:9"],
body.txt-grande [style*="font-size: 9"],
body.txt-grande [style*="font-size:10"],
body.txt-grande [style*="font-size: 10"],
body.txt-grande [style*="font-size:11"],
body.txt-grande [style*="font-size: 11"]  { font-size:var(--t-sm) !important; line-height: 1.5 !important; }
body.txt-grande [style*="font-size:12"],
body.txt-grande [style*="font-size: 12"]  { font-size:var(--t-sm) !important; line-height: 1.5 !important; }
body.txt-grande [style*="font-size:13"],
body.txt-grande [style*="font-size: 13"]  { font-size:var(--t-sm) !important; }
/* ── El botón de texto grande, funcionando de verdad ──────────────────────────
   Las reglas de aquí arriba buscan un font-size ESCRITO EN PÍXELES dentro del atributo
   style. Cuando se escribieron, la aplicación estaba llena de ellos. Ya no: quedan 140
   frente a 1.805 que usan las variables de la escala, así que el botón movía el 4 % del
   texto y parecía que no hacía nada.

   Subiendo las VARIABLES se mueven los 1.805 de golpe, que es para lo que están. Las
   reglas de píxeles literales se quedan por los 140 que faltan por convertir.

   Los valores son la escala normal con un escalón de más: no es una lupa, es la misma
   página con el texto cómodo para quien lo necesita. */
body.txt-grande{
  --t-micro:14px;  --t-sm:16px;   --t-lg:20px;   --t-xl:23px;  --t-2xl:27px;
}
body.txt-grande { font-size:var(--t-sm); }
body.txt-grande .table, body.txt-grande .form-input, body.txt-grande .form-select,
body.txt-grande .form-label, body.txt-grande .btn { font-size:var(--t-sm); }
body.txt-grande .kpi-label, body.txt-grande .kpi-sub { font-size:var(--t-sm) !important; }
body.txt-grande .badge { font-size:var(--t-sm) !important; padding: 3px 9px; }
/* Con letra grande, lo que se cortaba con puntos suspensivos pasa a dos líneas: es
   preferible ocupar más alto a no poder leer de qué cliente se trata. */
body.txt-grande [style*="text-overflow:ellipsis"],
body.txt-grande [style*="text-overflow: ellipsis"] { white-space: normal !important; text-overflow: clip !important; }

/* Impresión del informe de cumplimiento.
   Sin esto, "imprimir" saca la aplicación entera con su menú y sus colores oscuros: papel
   negro, veinte páginas y el informe perdido en medio. Se imprime SOLO el informe, en
   blanco sobre negro y sin los botones, que en papel no sirven para nada.
   Es el documento que se lleva a un asesor: tiene que salir presentable a la primera. */
@media print{
  body{background:#fff!important;}
  body > *:not(#modal-cumplimiento){display:none!important;}
  #modal-cumplimiento{position:static!important;display:block!important;background:#fff!important;
    padding:0!important;overflow:visible!important;}
  #modal-cumplimiento .modal{max-width:none!important;width:auto!important;background:#fff!important;
    box-shadow:none!important;border:none!important;padding:0!important;max-height:none!important;}
  #cumplimiento-cuerpo{max-height:none!important;overflow:visible!important;}
  #modal-cumplimiento .no-imprimir{display:none!important;}
  /* El tema oscuro no se lleva bien con el papel: se fuerza texto legible */
  #modal-cumplimiento, #modal-cumplimiento *{color:#111!important;}
  #modal-cumplimiento pre{background:#f6f8fa!important;border:1px solid #d6dde5!important;
    color:#1a2330!important;white-space:pre-wrap!important;}
  /* En papel no hay nada que desplegar: el código se ve entero */
  #modal-cumplimiento details{display:block!important;}
  #modal-cumplimiento details > summary{display:none!important;}
  /* Que un punto no se parta entre dos hojas */
  #cumplimiento-cuerpo > div > div > div{break-inside:avoid;}
}

/* Quien pida menos animación en su sistema, que no la tenga. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Foco visible siempre: quien navega con teclado tiene que saber dónde está. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── En un teléfono ────────────────────────────────────────────────────────────
   Una tabla de dieciocho columnas no cabe en 375 px, y encogerla no es la respuesta: un
   móvil no necesita todo lo que hace un escritorio, necesita ver lo importante y poder
   tocarlo. Cada fila pasa a ser una ficha con pocos datos y letra grande.

   REGLA DE ORO: se esconde solo lo que está MARCADO como secundario, nunca por no llevar
   marca. La versión anterior hacía lo contrario y por eso la lista salía en blanco —
   rectángulos vacíos— cuando el marcado no llegaba a ejecutarse. Si el JavaScript falla,
   esto enseña de más; nunca de menos. */
@media(max-width:768px){
  .table-wrap.tw-ficha{overflow-x:visible;}
  .table-wrap.tw-ficha table{min-width:0!important;width:100%;display:block;}
  .table-wrap.tw-ficha thead{display:none;}
  .table-wrap.tw-ficha tbody{display:block;}

  /* La ficha: una tarjeta por registro, con aire para el dedo. */
  .table-wrap.tw-ficha tbody tr{
    display:flex;flex-wrap:wrap;gap:4px 16px;align-items:flex-start;
    margin-bottom:9px;padding:11px 13px;
    background:var(--bg3);border:1px solid var(--border);border-radius:11px;}
  .table-wrap.tw-ficha tbody tr:last-child{margin-bottom:0;}

  /* Cada dato: la etiqueta pequeña encima y el valor GRANDE debajo. En un móvil se lee el
     valor y solo se mira la etiqueta si hace falta, así que el peso va en el valor. */
  .table-wrap.tw-ficha tbody td{
    display:flex;flex-direction:column;align-items:flex-start;gap:0;
    flex:0 1 auto;min-width:0;max-width:100%;padding:3px 0;
    border:none;text-align:left!important;white-space:normal;
    font-size:var(--t-sm);line-height:1.3;color:var(--text1);}
  .table-wrap.tw-ficha tbody td::before{
    content:attr(data-col);
    font-size:var(--t-micro);line-height:1.4;letter-spacing:.02em;
    color:var(--text3);font-weight:500;max-width:none;}
  .table-wrap.tw-ficha tbody td:empty{display:none;}

  /* El primero identifica el registro: ocupa la línea entera y manda. */
  /* El dato principal va PRIMERO y a lo ancho. El orden visual lo decide el DOM, no la
     lista de declaracion, asi que hay que forzarlo. */
  .table-wrap.tw-ficha tbody td[data-jefe]{
    flex:1 0 100%;order:-1;font-size:var(--t-lg);font-weight:600;color:var(--text1);
    line-height:1.3;padding-bottom:5px;}

  /* Lo secundario. Marcado, no deducido: sin la marca se ve, que es el fallo seguro. */
  .table-wrap.tw-ficha tbody tr:not(.tw-abierta) td[data-oculta]{display:none;}
  .table-wrap.tw-ficha tbody tr.tw-abierta td[data-oculta]{
    flex:1 0 100%;flex-direction:row;justify-content:space-between;align-items:baseline;
    gap:14px;padding:6px 0;border-top:1px dashed var(--border);}
  .table-wrap.tw-ficha tbody tr.tw-abierta td[data-oculta]::before{
    font-size:var(--t-sm);color:var(--text3);flex:0 0 auto;}

  /* Que se sepa que hay más. Con sitio para el dedo, no un enlace de diez píxeles. */
  .table-wrap.tw-ficha tbody tr[data-mas]{cursor:pointer;}
  .table-wrap.tw-ficha tbody tr[data-mas]::after{
    content:'Ver ' attr(data-mas) ' datos más';
    flex:1 0 100%;order:98;margin-top:8px;padding:9px 0 2px;
    border-top:1px solid var(--border);
    font-size:var(--t-sm);font-weight:500;color:var(--accent);}
  .table-wrap.tw-ficha tbody tr.tw-abierta[data-mas]::after{
    content:'Ocultar';color:var(--text3);}

  /* Los botones, abajo del todo, en fila y grandes: es lo que se toca. */
  .table-wrap.tw-ficha tbody td[data-acciones]{
    flex:1 0 100%;order:100;flex-direction:row;flex-wrap:wrap;
    justify-content:flex-start;align-items:center;gap:8px;
    margin-top:9px;padding-top:11px;border-top:1px solid var(--border);}
  .table-wrap.tw-ficha tbody td[data-acciones]::before{content:none;}
  .table-wrap.tw-ficha tbody td[data-acciones] > div{
    display:flex;flex-wrap:wrap;gap:8px;width:100%;}
  .table-wrap.tw-ficha tbody td[data-acciones] .btn{
    font-size:var(--t-sm);min-height:42px;padding:0 14px;}
  /* El desplegable «Más» sale de dentro de esa misma celda, y sus opciones se quedaban
     en 31 px al lado de botones de 42: se fallaba al pulsarlas. Aquí y en cualquier
     otro menú de la aplicación, porque el dedo es el mismo en toda ella. */
  .acc-item{font-size:var(--t-sm);min-height:46px;padding:10px 14px;}
  .acc-item-ico{width:20px;font-size:var(--t-sm);}
  .acc-pop{min-width:250px;}

  /* El pie sigue siendo una línea: son totales, no fichas. */
  .table-wrap.tw-ficha tfoot{display:block;border-top:2px solid var(--border);margin-top:10px;}
  .table-wrap.tw-ficha tfoot tr{display:flex;flex-wrap:wrap;gap:10px;padding:10px 13px;font-size:var(--t-sm);}
  .table-wrap.tw-ficha tfoot td{border:none;padding:0;}

  /* ── Los párrafos de explicación ─────────────────────────────────────────────
     En un escritorio acompañan; en un teléfono ocupan la pantalla entera y hunden los
     datos. El detalle legal se mira en un ordenador, que es donde se cierra una nómina. */
  .nota-larga{display:none!important;}

  /* ── Lo que no se hace en un telefono ──────────────────────────────────────────
     Nadie abre una hoja de calculo en el movil, ni sube un CSV desde el. Esos botones
     solo ocupan la barra de acciones justo donde menos sitio hay. El PDF NO se esconde:
     un PDF se mira y se manda desde el movil, que es media razon de llevar la
     aplicacion encima. */
  .solo-escritorio{display:none!important;}

  /* ── El análisis financiero, en el ordenador ──────────────────────────────────
     Medido en un teléfono de 640 px de alto: proyecciones 9,1 pantallas; escenarios
     7,8; presupuesto y financiación 6,7. Lo que ocupa no son los datos, son los
     paneles de análisis: la P&L editable (2.532 px), el seguimiento del presupuesto
     (2.174), la salud financiera y la elasticidad de costes (1.200 cada una). Nada
     de eso se decide de pie en un muelle, y todo sigue estando en el escritorio.
     Se conservan las cifras de cabecera y las listas de registros. */
  .card:has(#fin-salud), .card:has(#fin-elasticidad), .card:has(#fin-amort-table),
  .card:has(#proj-table), .card:has(#proj-nucleo-be),
  .card:has(#pres-month-track), .card:has(#pres-table),
  .card:has(#cont-pyg-table),
  #scenarios-grid,
  .time-pillar{display:none!important;}

  /* Una seccion que se queda sin su unico contenido no puede quedarse en blanco: hay
     que decir por que, o parece rota. */
  .solo-movil{display:block;}
  .aviso-escritorio{
    background:var(--bg3);border:1px dashed var(--border2);border-radius:var(--radius-sm);
    padding:16px;color:var(--text3);font-size:var(--t-sm);line-height:1.6;
  }


  /* ── Los gráficos ─────────────────────────────────────────────────────────────
     Mismo criterio, y medido: en un teléfono de 375 px los gráficos ocupan entre el
     6 % y el 28 % de la altura de la página. Proyecciones tiene NUEVE, 1940 px de
     alto sobre una pantalla de 812: más de dos pantallas enteras de dibujo antes de
     llegar a un dato. Y a 375 px de ancho una serie de doce meses no se lee, así que
     ese espacio no compra nada.

     No se pierde ningún dato: se comprobó sección por sección que todas las que
     llevan gráficos llevan además sus cifras y su tabla —proyecciones, la que más,
     tiene 8 cifras y una tabla de 12 filas—. El teléfono da los números; el análisis
     visual se mira en un ordenador, que es donde se hace.

     Solo en el teléfono. La tablet los conserva: a 815 px sí se leen. */
  .chart-wrap,
  .section canvas{display:none!important;}
}

/* Un dia libre del calendario de ausencias es pulsable: abre el formulario ya relleno con
   ese trabajador y ese dia. Se dice al pasar por encima, sin ensuciar la vista en reposo:
   un calendario de treinta dias por conductor lleno de marcas no se lee. */
.aus-map-cell.aus-libre{cursor:pointer;}
.aus-map-cell.aus-libre:hover{
  background:rgba(110,174,233,.16);
  box-shadow:inset 0 0 0 1px rgba(110,174,233,.45);}
.aus-map-cell.aus-libre:focus-visible{
  outline:2px solid var(--accent);outline-offset:-2px;}

/* Columnas que solo enseñan un símbolo: ✓, ✗, un contador. Medido en la tabla de
   servicios, el relleno se llevaba 468 px —el 29% del ancho— y cinco de estas columnas
   se comían 234 px entre las cinco. No sobraba información: sobraba hueco a los lados de
   un carácter. Lo que se libera va a las columnas de texto, que son las que se truncaban. */
.td-marca{
  text-align:center;
  padding-left:5px;padding-right:5px;
  width:1%;                 /* que la columna se encoja a su contenido */
  white-space:nowrap;
}

/* ── La columna de acciones, siempre a la vista ────────────────────────────────
   Es la última, así que en cuanto la tabla no cabe es lo primero que se va por la
   derecha. Medido con contenido real —un nombre de cliente y una ruta largos— la tabla
   de servicios pide 1.403 px: a 1.440 se ven los cinco botones, a 1.280 solo dos, y a
   1.100 ninguno. Había que arrastrar de lado a ciegas para llegar a editar o borrar.

   Anclada a la derecha se queda pegada al borde mientras el resto se desplaza por debajo.
   Necesita fondo propio: sin él se transparenta lo que pasa por detrás y no se lee. */
.table-wrap table td:last-child:not([data-col]),
.table-wrap table th:last-child{
  position:sticky;right:0;z-index:1;
}
.table-wrap table td:last-child:not([data-col]){
  background:linear-gradient(180deg,rgba(24,35,50,.98),rgba(20,29,42,.98));
  box-shadow:-6px 0 8px -6px rgba(0,0,0,.45);
}
.table-wrap table tbody tr:hover td:last-child:not([data-col]){
  background:var(--bg4);
}

/* ── Lo que va anclado JUNTO a los botones ────────────────────────────────────
   Anclar la columna de acciones resolvió que los botones se quedaran fuera de la
   pantalla, y creó otro problema: lo que se desplaza por debajo desaparece, y lo
   primero que pasa por debajo son las columnas de al lado. En servicios esas son
   albarán, facturado y enviado —el estado del porte de un vistazo—: medido, a
   1.275 px «Env.» quedaba tapada del todo y «Fact.» al 39 %, y a 1.150 las tres.

   Se anclan también, pegadas a la izquierda de los botones. Necesitan ancho fijo
   porque el anclaje se calcula sumando lo que hay a su derecha, y necesitan fondo
   propio por lo mismo que la de acciones: sin él se transparenta lo que pasa por
   detrás. Se usa la variable para no repartir la aritmética por la hoja. */
/* El ancho de la columna de acciones NO se puede escribir aquí a mano: depende de qué
   botones lleve la fila —«Fact. →» solo sale si el porte no está facturado— y ponerlo a
   ojo deja las marcas ancladas por debajo de los botones, que es el problema de partida.
   Lo mide svAjustarAnclaje() al pintar y lo escribe en el contenedor. Este valor es el de
   arranque, para que no baile antes de la primera medida. */
:root{ --td-acc-w:104px; --td-fija-w:40px; }
/* Sin max-width: en una tabla de reparto automático el navegador lo ignora igualmente, y
   dejarlo escrito hace creer que la celda no puede crecer cuando sí crece. El ancho de
   verdad lo pone svAjustarAnclaje(), que suma los botones. */
.td-acc-sv{ width:var(--td-acc-w); min-width:var(--td-acc-w); }
.table-wrap table td.td-fija,
.table-wrap table th.td-fija{
  position:sticky;z-index:1;
  width:var(--td-fija-w);min-width:var(--td-fija-w);max-width:var(--td-fija-w);
}
.table-wrap table td.td-fija-1,.table-wrap table th.td-fija-1{ right:var(--td-acc-w); }
.table-wrap table td.td-fija-2,.table-wrap table th.td-fija-2{ right:calc(var(--td-acc-w) + var(--td-fija-w)); }
.table-wrap table td.td-fija-3,.table-wrap table th.td-fija-3{ right:calc(var(--td-acc-w) + var(--td-fija-w) * 2); }
.table-wrap table td.td-fija{
  background:linear-gradient(180deg,rgba(24,35,50,.98),rgba(20,29,42,.98));
}
.table-wrap table tbody tr:hover td.td-fija{ background:var(--bg4); }
/* La cabecera ya se ancla arriba con z-index 2: aquí se le suma el anclaje lateral
   y tiene que quedar por encima de las celdas, no debajo. */
.table-wrap table th.td-fija{ z-index:3; }
/* En el móvil la ficha ocupa su propia línea y no hay nada que anclar. */
@media(max-width:768px){
  .table-wrap.tw-ficha table td.td-fija,
  .table-wrap.tw-ficha table th.td-fija{
    position:static;width:auto;min-width:0;max-width:none;background:none;}
  .td-acc-sv{width:auto;min-width:0;}
}
/* En la ficha de móvil no se ancla nada: allí la celda ya ocupa su propia línea. */
@media(max-width:768px){
  .table-wrap.tw-ficha table td:last-child,
  .table-wrap.tw-ficha table th:last-child{position:static;box-shadow:none;}
}