/* =====================================================================
   KOCHERAS · WEB DE ORDENADOR
   NO es la app estirada. Es otra interfaz: barra lateral, lista y detalle
   a la vez, tablas densas con filtros, y acciones en lote.

   Los colores son los mismos de la marca (5-marca/3-brand-book) y la ley
   del color es la misma: si es azul se toca; verde, ámbar y rojo solo
   informan; gris para navegar. Lo que cambia es la disposición.
   ===================================================================== */
/* La paleta se GENERA desde 2-aplicacion/diseno/tokens.css con node 2-aplicacion/diseno/generar-tokens.js.
   Lo que se escriba aqui a mano se pierde en la siguiente pasada. */
/* --- TOKENS-INICIO --- */
:root{
  /* superficies · oscuro por defecto */
  --bg:#191713;--card:#221F19;--card2:#2A261F;--line:#38332A;
  /* texto */
  --ink:#F4EFE6;--ink2:#C6BCAB;--mut:#968C7B;
  /* acción */
  --acc:#4D84FF;--acc2:#4D84FF;--accbg:#1A2339;--on-acc:#191713;
  /* estado */
  --ok:#4ECB94;--okbg:#2E4D3A;--bad:#FF7A6E;--badbg:#50322B;
  --warn:#E5A93F;--warnbg:#554323;
  /* borde de un control: 3:1 sobre la tarjeta y sobre la tarjeta 2 */
  --line-control:#786E5C;
  /* color de SERIE: solo para gráficos, ninguno significa estado */
  --serie-1:#4D84FF;--serie-2:#4ECB94;--serie-3:#E5A93F;
  --serie-4:#B47CFF;--serie-5:#FF7A6E;--serie-6:#3ED4E0;
  --lateral:236px;--r:10px;
}
:root[data-tema="claro"]{
  --bg:#F4EFE6;--card:#FFFDF9;--card2:#F9F4EA;--line:#E3DACB;
  --ink:#1A1712;--ink2:#4A4235;--mut:#6E6455;
  --acc:#1E51C8;--acc2:#1E51C8;--accbg:#DCE3F3;--on-acc:#FFFDF9;
  --ok:#0F7A52;--okbg:#E5EFE7;--bad:#C0342F;--badbg:#F7E3DF;
  --warn:#8A5A00;--warnbg:#EAE0CC;
  --line-control:#94897A;
  --serie-1:#1E51C8;--serie-2:#0F7A52;--serie-3:#8A5A00;
  --serie-4:#6C3FA8;--serie-5:#B03A5B;--serie-6:#17707A;
}
/* --- TOKENS-FIN --- */
*{box-sizing:border-box;margin:0;padding:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45;
  display:flex;min-height:100vh}
a{color:var(--acc2);text-decoration:none}

/* ---------------------------------------------------------------------
   LA FRANJA DE SOPORTE (decisión 130)

   Aparece cuando alguien de Kocheras ha entrado en la cuenta de un cliente. Va
   fija arriba del todo, en rojo, y no se puede cerrar: solo se quita saliendo.
   Estar dentro de la cuenta de otro y olvidarlo es como se acaba cancelando la
   reserva de alguien creyendo que es la tuya.
   --------------------------------------------------------------------- */
.soporte{display:none}
body.con-soporte{padding-top:38px}
body.con-soporte .soporte{display:flex;align-items:center;gap:12px;
  position:fixed;top:0;left:0;right:0;height:38px;padding:0 16px;z-index:60;
  background:var(--bad);color:#fff;font-size:13px;font-weight:600}
body.con-soporte .soporte .q{font-weight:400;opacity:.9}
body.con-soporte .soporte button{margin-left:auto;background:rgba(255,255,255,.18);
  color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:7px;
  padding:4px 12px;font:inherit;font-weight:600;cursor:pointer}
body.con-soporte .soporte button:hover{background:rgba(255,255,255,.3)}
body.con-soporte .lat{height:calc(100vh - 38px);top:38px}

/* ---------------------------------------------------------------------
   BARRA LATERAL · a la izquierda, con secciones. Esto es lo que hace que
   no parezca la app: la navegación no es de pulgar, es de vista general.
   --------------------------------------------------------------------- */
.lat{width:var(--lateral);flex:none;background:var(--card);border-right:1px solid var(--line);
  display:flex;flex-direction:column;height:100vh;position:sticky;top:0;overflow-y:auto}
.lat .marca{padding:20px 18px 14px}
.lat .marca svg{height:24px;width:auto;color:var(--acc)}
.lat .cuenta{padding:0 18px 16px;border-bottom:1px solid var(--line);margin-bottom:10px}
.lat .cuenta .n{font-size:14px;font-weight:600}
.lat .cuenta .t{font-size:11px;color:var(--mut);margin-top:1px}
/* en la consola arriba no va una cuenta, va lo que eres */
.lat .cuenta.consola .n{color:var(--acc2)}
.lat .grupo{font-size:10px;color:var(--mut);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:14px 18px 6px}
.lat a{display:flex;align-items:center;gap:10px;padding:9px 18px;color:var(--ink2);
  font-size:14px;border-left:2px solid transparent}
.lat a:hover{background:var(--card2);color:var(--ink)}
.lat a.on{color:var(--acc2);background:var(--accbg);border-left-color:var(--acc);font-weight:600}
/* Un SVG sin width ni height mide 300x150. No habia regla base para .ico, asi que
   cada sitio le daba tamaño y el que se olvidaba —el aviso del dashboard— pintaba
   un triangulo de alerta de 300 px. El tamaño base va aqui; lo demas lo afina. */
.ico{width:16px;height:16px;flex:none;vertical-align:-3px}
.lat a .ico{width:17px;height:17px;flex:none}
.lat a .n{margin-left:auto;font-size:11px;background:var(--bad);color:var(--bg);
  min-width:18px;height:18px;border-radius:99px;display:flex;align-items:center;
  justify-content:center;font-weight:700;padding:0 5px}
.lat .pie{margin-top:auto;padding:14px 18px;border-top:1px solid var(--line);
  font-size:11px;color:var(--mut)}
.lat .pie .cambia-cuenta{display:block;width:100%;box-sizing:border-box;margin-bottom:10px;
  padding:7px 9px;border-radius:8px;background:transparent;color:var(--ink2);
  border:1px solid var(--line-control);font:inherit;font-size:12px;cursor:pointer}
.lat .pie .pie-acciones{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.lat .pie .pie-acciones .b{flex:1;white-space:nowrap}
.lat .pie .pie-v{color:var(--mut)}

/* ---------------------------------------------------------------------
   ZONA PRINCIPAL
   --------------------------------------------------------------------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.cab{display:flex;align-items:center;gap:14px;padding:11px 22px;height:59px;
  border-bottom:1px solid var(--line);background:var(--card);position:sticky;top:0;z-index:5}
.cab h1{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.cab .sub{font-size:11px;color:var(--mut);line-height:1.3}
.cab .der{margin-left:auto;display:flex;gap:8px;align-items:center}
.cab .der .b{height:30px;padding:0 12px;font-size:12px}
.cab .cont{background:var(--on-acc);color:var(--acc);border-radius:99px;
  padding:0 6px;font-size:11px;font-weight:700;min-width:17px;text-align:center}
.cuerpo{padding:14px 22px 32px;flex:1;min-width:0}

/* lista y detalle a la vez: la diferencia de fondo con la app */
.split{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:18px;align-items:start}
/* Diez tarjetas de estado: en tres columnas caben de un vistazo en 1280 px, que es
   la anchura a la que se mira una pantalla de monitorización. */
.rej3{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px;
  align-items:start}
.rej3 .c{margin:0}
@media (max-width:1100px){ .split{grid-template-columns:1fr} }

/* ---------------------------------------------------------------------
   BARRA DE FILTROS · no existe en la app, y es media web
   --------------------------------------------------------------------- */
.filtros{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.filtros input,.filtros select{width:auto;background:var(--card);
  border:1px solid var(--line-control);color:var(--ink);border-radius:8px;
  padding:0 8px;font-size:13px;height:30px;max-width:190px}
.filtros input[type=search]{width:220px;max-width:none}
.filtros input[type=date]{width:132px}
.filtros .b{height:30px;padding:0 11px;font-size:12px}
.filtros .sep{width:1px;height:20px;background:var(--line);margin:0 2px}
.filtros .cuantos{font-size:12px;color:var(--mut);margin-left:auto;
  font-variant-numeric:tabular-nums}
/* .clave sirve dentro y fuera de las tablas: antes solo existia como
   .tabla td.fuerte, asi que los "<div class=fuerte>" de los paneles salian
   en texto plano */
.clave{color:var(--ink);font-weight:600}
/* fecha con su etiqueta a la vista: dos campos identicos que solo se
   distinguian por el title del raton no valen para teclado ni lector */
.filtros .fl{display:inline-flex;align-items:center;gap:5px;margin:0;
  font-size:11px;color:var(--mut);font-weight:600;text-transform:uppercase;
  letter-spacing:.03em}
.filtros .fl input{margin:0}
/* la misma barra, metida en la cabecera */
.filtros.en-cab{margin:0}

/* ---------------------------------------------------------------------
   TABLAS · densas, ordenables, seleccionables
   --------------------------------------------------------------------- */
/* overflow:hidden creaba un contenedor de scroll propio, asi que el th sticky
   no podia pegarse a nada: al bajar por 48 filas se perdian los nombres de
   columna. Con clip se conserva el radio y el sticky funciona; 46px es la
   altura de la cabecera, para que quede justo debajo. */
.tabla{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);overflow:clip}
.tabla th{text-align:left;font-size:11px;color:var(--mut);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:7px 10px;
  background:var(--card2);border-bottom:1px solid var(--line);white-space:nowrap;
  position:sticky;top:59px;z-index:3;user-select:none}
.tabla th.ord{cursor:pointer}
.tabla th.ord:hover{color:var(--ink2)}
/* la flecha ocupa sitio siempre, para que la fila no baile al ordenar y para
   que se vea que la tabla se puede ordenar */
.tabla th.ord::after{content:"↕";margin-left:5px;opacity:.35;font-size:10px}
.tabla th.orden{color:var(--ink2)}
.tabla th.orden::after{content:"↓";color:var(--acc2);opacity:1}
.tabla th.orden.asc::after{content:"↑"}
.tabla th.no{cursor:default}
.tabla th.no::after{content:""}
.tabla td{padding:6px 10px;border-bottom:1px solid var(--line);color:var(--ink2);
  vertical-align:middle}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla tbody tr:hover{background:var(--card2)}
.tabla tbody tr.sel{background:var(--accbg)}
.tabla tbody tr.tap{cursor:pointer}
.tabla td.n{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.tabla td.clave{color:var(--ink);font-weight:500}
.tabla .sub{font-size:11px;color:var(--mut)}
.tabla td.chk{width:32px}
.tabla th.chk{width:32px}
/* fila de totales: cerrar un mes empieza por saber cuanto suma la columna */
.tabla tfoot td{padding:7px 10px;border-top:1px solid var(--line-control);
  background:var(--card2);color:var(--ink);font-weight:700;font-size:12px}
.tabla tfoot td.n{font-variant-numeric:tabular-nums}
/* casillas: sobre fondo oscuro salian las blancas del sistema */
input[type=checkbox]{width:15px;height:15px;accent-color:var(--acc);cursor:pointer}
/* saldo: un numero con signo se compara de un vistazo, "te deben 423,96 €" no */
.saldo{font-variant-numeric:tabular-nums;font-weight:600}
.saldo.pos{color:var(--ok)}
.saldo.neg{color:var(--bad)}
/* matricula: se lee como matricula, no como texto suelto */
.mat{font-variant-numeric:tabular-nums;letter-spacing:.04em}
/* nombre de vehiculo con su icono de tipo */
.conico{display:inline-flex;align-items:center;gap:7px}
.conico .ico.tipo{width:17px;height:17px;flex:none;color:var(--mut)}
.ficha{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.ficha .ico.tipo{width:30px;height:30px;flex:none;color:var(--acc2)}
/* inicial de la persona, cuando no hay foto (y no la hay: no pedimos fotos) */
.av.grande{width:44px;height:44px;border-radius:50%;background:var(--accbg);
  color:var(--acc2);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:16px;flex:none;letter-spacing:.02em}
/* un permiso: casilla, nombre, y de donde viene */
.chkl.permiso{justify-content:flex-start;gap:10px;padding:5px 0;margin:0;
  border-bottom:1px solid var(--line)}
.chkl.permiso span:first-of-type{flex:1}
.chkl.permiso .p{flex:none}
.acciones{display:flex;gap:8px;margin-top:10px}
.tabla-vacia{padding:38px;text-align:center;color:var(--mut);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r)}

/* tira de avisos: los vencimientos son un aviso, no una tabla */
.tira{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--card);
  border:1px solid var(--line);border-radius:99px;padding:5px 12px 5px 9px;
  font-size:12px;color:var(--ink2);cursor:pointer;font-family:inherit;height:30px}
.chip:hover{border-color:var(--line-control);color:var(--ink)}
.chip .ico{width:15px;height:15px;flex:none;color:var(--mut)}
.chip b{font-weight:700}
/* LA LEY DEL COLOR, tambien aqui. El chip de un vencimiento se pulsa —lleva a la
   ficha del vehiculo— asi que es gris: lo que va en rojo o en ambar es el DATO de
   dentro, que informa. Antes el borde entero se pintaba de rojo y el elemento
   parecia un boton rojo, que es justo lo que la regla prohibe. */
.chip.warn b{color:var(--warn)}
/* un chip que se ha elegido: azul, porque se pulsa y se cambia */
.chip.on{background:var(--accbg);border-color:var(--acc);color:var(--acc2);font-weight:700}
.chip.bad b{color:var(--bad)}

/* acciones en lote: aparecen al seleccionar, no antes */
.lote{display:flex;align-items:center;gap:10px;padding:9px 12px;margin-bottom:10px;
  background:var(--accbg);border:1px solid var(--acc);border-radius:var(--r);font-size:13px}
.lote .n{font-weight:600;color:var(--acc2)}

/* ---------------------------------------------------------------------
   TARJETAS Y MÉTRICAS
   --------------------------------------------------------------------- */
.c{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;
  margin-bottom:12px}
/* el borde de 3px desplazaba el texto 2px respecto a las tarjetas normales */
.c.acc,.c.ok,.c.warn,.c.bad{padding-left:11px}
.c.tap{cursor:pointer}
.c.tap:hover{border-color:var(--line-control)}
.c.acc{border-left:3px solid var(--acc)}
.c.ok{border-left:3px solid var(--ok)}
.c.warn{border-left:3px solid var(--warn)}
.c.bad{border-left:3px solid var(--bad)}
.c h2{font-size:13px;font-weight:600;margin-bottom:9px}
/* fila etiqueta-valor: la app la tenia y la web la usaba sin definirla, asi
   que el panel de persona salia todo apilado en vez de en dos columnas */
.f{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink2)}
.f:last-child{border-bottom:0}
.f .clave,.clave{color:var(--ink);font-weight:600}
.f.tap{cursor:pointer}
.f.tap:hover{color:var(--ink)}
.et{font-size:10px;color:var(--mut);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.txt{font-size:13px;color:var(--ink2);line-height:1.6}
.qs{font-size:12px;color:var(--mut)}

/* Las metricas ocupaban 130px de alto y una de ellas estiraba la fila entera
   por llevar un subtitulo de dos lineas, dejando 35px de aire bajo las otras.
   Ahora el detalle va en el title y la tira mide 62px. */
.mets{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  margin-bottom:12px}
.mets.dos{grid-template-columns:1fr 1fr}
.met{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 13px}
.met .n{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.met .e{font-size:10px;color:var(--mut);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;margin-top:2px}
.met .d{font-size:10px;color:var(--mut);margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ---------------------------------------------------------------------
   BOTONES · pequeños y en fila, no anchos como en el móvil
   --------------------------------------------------------------------- */
.b{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:8px;
  background:var(--acc);color:var(--on-acc);font-weight:600;font-size:13px;
  padding:8px 14px;cursor:pointer;font-family:inherit;height:34px;white-space:nowrap}
.b.sec{background:transparent;color:var(--acc2);border:1px solid var(--acc)}
.b.gh{background:transparent;color:var(--ink2);border:1px solid var(--line-control)}
.b.dan{background:transparent;color:var(--bad);border:1px solid var(--bad)}
.b.sm{height:26px;padding:0 9px;font-size:12px}
a.b{text-decoration:none}
.b:disabled{opacity:.5;cursor:not-allowed}
.b .ico{width:15px;height:15px}

/* píldoras de estado: mismas reglas que en la app, más compactas */
.p{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:99px;white-space:nowrap}
.p.ok{background:var(--okbg);color:var(--ok)}
.p.bad{background:var(--badbg);color:var(--bad)}
.p.warn{background:var(--warnbg);color:var(--warn)}
.p.acc{background:var(--accbg);color:var(--acc2)}
.p.n{background:var(--card2);color:var(--mut)}

.barra{height:6px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:5px}
.barra>div{height:6px;background:var(--ink2);border-radius:99px}

/* ---------------------------------------------------------------------
   PANEL LATERAL DE DETALLE · en la web un formulario no sube desde abajo
   --------------------------------------------------------------------- */
.panel{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:92vw;background:var(--card);
  border-left:1px solid var(--line);z-index:40;display:none;flex-direction:column;
  box-shadow:-14px 0 40px rgba(0,0,0,.28)}
.panel.ver{display:flex}
.panel .ph{display:flex;align-items:center;gap:10px;padding:16px 20px;
  border-bottom:1px solid var(--line)}
.panel .ph h2{font-size:15px;font-weight:600;flex:1}
.panel .pc{padding:18px 20px;overflow-y:auto;flex:1}
.panel .pf{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px}
.velo{position:fixed;inset:0;background:rgba(3,5,10,.45);z-index:35;display:none}
.velo.ver{display:block}

/* Los campos ocupan el ancho completo SOLO dentro de un formulario. Antes
   esta regla venia despues de .filtros input y ganaba, asi que cada filtro se
   comia una fila entera y la barra de filtros medía cinco lineas. */
label{display:block;font-size:12px;color:var(--ink2);font-weight:600;margin:14px 0 5px}
.panel input,.panel select,.panel textarea,
.formulario input,.formulario select,.formulario textarea{width:100%}
input,select,textarea{padding:8px 10px;border:1px solid var(--line-control);
  border-radius:8px;background:var(--card2);color:var(--ink);font-size:13px;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:1px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chkl{display:flex;align-items:center;gap:8px;margin:14px 0 5px;font-size:13px;
  color:var(--ink2);font-weight:500;cursor:pointer}
.chkl input{width:16px;height:16px;margin:0}

/* ---- Flota: barra de vista (Mes/Semana/Día) y navegación ---- */
.fl-barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:14px}
.fl-vistas{display:inline-flex;gap:3px;background:var(--card2);padding:3px;border-radius:10px}
.fl-vistas .b{border:0;background:transparent;box-shadow:none}
.fl-vistas .b.sec{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.fl-nav{display:inline-flex;align-items:center;gap:6px}
.fl-nav .b.nav{min-width:32px;padding:4px 9px;font-size:17px;line-height:1}
.fl-periodo{margin-left:4px;color:var(--ink);font-weight:600;text-transform:capitalize;font-size:14px}

/* rejilla de flota, aquí sí cabe entera */
.flota{overflow-x:auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:14px;user-select:none}
.flota table{border-collapse:separate;border-spacing:4px;width:100%;table-layout:fixed}
.flota thead th{position:sticky;top:0;z-index:1}
.flota th{font-size:10px;color:var(--mut);font-weight:700;text-transform:uppercase;
  padding:2px 4px;white-space:nowrap;background:var(--card);cursor:default;border:0;line-height:1.25}
.flota th .d{display:block;font-size:13px;color:var(--ink2);margin-top:1px}
.flota th.cab-hoy,.flota th.cab-hoy .d{color:var(--acc2)}
.flota th.finde{opacity:.5}
.flota th.coche{text-align:left;font-size:13px;font-weight:600;color:var(--ink);
  text-transform:none;width:180px;position:sticky;left:0;background:var(--card);z-index:3}
.flota td{padding:0;border:0}
/* Un dia libre en la app es buena noticia; en la web de flota es un coche
   parado, que cuesta dinero. El parado se ve suave; el uso es el fondo bueno. */
.flota .celda{height:32px;min-width:0;border-radius:7px;background:transparent;
  border:1px dashed var(--line-control);font-size:10px;color:var(--mut);
  display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;
  padding:0 4px;cursor:pointer;transition:transform .06s,box-shadow .06s}
.flota .celda:hover{border-style:solid;color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.14)}
.flota .celda.ocupada{background:var(--card2);border-style:solid;
  border-color:var(--line-control);color:var(--ink);font-weight:600}
.flota .celda.mia{background:var(--accbg);border-style:solid;border-color:var(--acc);
  color:var(--acc2);font-weight:600}
.flota .celda.tarde{background:var(--badbg);border-color:var(--bad);color:var(--bad);border-style:solid}
.flota .celda.bloqueada{background:var(--line);border-color:var(--line);color:var(--mut);border-style:solid}
.flota .hoy{outline:2px solid var(--acc);outline-offset:1px}
/* lo que se lleva seleccionado al arrastrar para reservar */
.flota .celda.pintando{background:var(--accbg);border:1px solid var(--acc);
  border-style:solid;color:var(--acc2);font-weight:600}
/* MES: muchas columnas, celdas solo color (mapa de calor) */
.flota.mes .celda{height:24px}
/* DÍA por HORAS: columnas estrechas, cada celda una hora */
.flota.horas .celda.h{height:36px}
.flota.horas th{font-variant-numeric:tabular-nums;color:var(--ink2)}
.pista{font-size:12px;color:var(--mut);margin:0 0 10px}
/* selector de columnas de los informes (#4) */
.cols-barra{display:flex;justify-content:flex-end;margin:0 0 8px}
.cols-lista{display:flex;flex-direction:column;gap:2px}
.cols-item{display:flex;align-items:center;gap:9px;padding:8px 6px;border-radius:8px;
  cursor:pointer;font-size:14px}
.cols-item:hover{background:var(--card2)}
.cols-item input{width:16px;height:16px;flex:none}
.leyenda{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.leyenda span{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;
  border:1px solid var(--line-control);color:var(--ink2)}
.leyenda .l-parada{border-style:dashed;color:var(--mut)}
.leyenda .l-ocupada{background:var(--card2);border-color:var(--line-control);color:var(--ink)}
.leyenda .l-tarde{background:var(--badbg);border-color:var(--bad);color:var(--bad)}
.leyenda .l-bloqueada{background:var(--line);border-color:var(--line);color:var(--mut)}

/* registro de actividad */
.reg{font-size:12px}
.reg .cuando{color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.reg .quien{color:var(--ink);font-weight:500}
.reg .que{color:var(--ink2)}
.reg .origen{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--card2);
  color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.reg .cambio{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  background:var(--card2);border:1px solid var(--line);border-radius:6px;padding:7px 9px;
  margin-top:6px;color:var(--ink2);white-space:pre-wrap;word-break:break-word}
.reg .antes{color:var(--bad)}
.reg .despues{color:var(--ok)}

.aviso{position:fixed;top:18px;right:22px;background:var(--ink);color:var(--bg);
  padding:10px 16px;border-radius:9px;font-size:13px;font-weight:600;opacity:0;
  transition:.2s;z-index:60;pointer-events:none}
.aviso.ver{opacity:1}

/* la tecla de atajo, ahora visible en el buscador */
.atajo{font-size:10px;border:1px solid var(--line-control);border-radius:4px;
  padding:1px 5px;color:var(--mut);font-family:ui-monospace,monospace}
.busca{position:relative;display:inline-flex;align-items:center}
.busca .atajo{position:absolute;right:7px;pointer-events:none}
.busca input{padding-right:26px}

/* en un móvil la web avisa de que no es su sitio, en vez de fingir */
.solo-web{display:none}
@media (max-width:760px){
  .lat,.main .cuerpo{display:none}
  .solo-web{display:block;padding:40px 24px;text-align:center;margin:auto}
  .solo-web h1{font-size:20px;margin-bottom:10px}
  .solo-web p{color:var(--ink2);font-size:14px;line-height:1.6;max-width:340px;margin:0 auto 18px}
  body{display:block}
}

/* ---------------------------------------------------------------------
   DASHBOARD
   Lo unico propio de esta pantalla. Todo lo demas —tablas, filtros, metricas,
   chips— es lo que ya usan las otras secciones: si el dashboard tuviera su
   propio lenguaje visual, seria otra aplicacion dentro de la aplicacion.
   --------------------------------------------------------------------- */

/* La comparacion con el periodo anterior. El color NO puede ser el mismo para
   "el gasto sube" que para "los kilometros suben": lo decide quien llama, no la
   direccion de la flecha. */
.dif{font-size:13px;font-weight:700;color:var(--ink2);white-space:nowrap}
.dif.mejor{color:var(--ok)}
.dif.peor{color:var(--bad)}
.dif.igual{color:var(--ink2);font-weight:600}

/* Cabecera de tarjeta: el titulo a la izquierda y los mandos a la derecha, en la
   misma linea, para no gastar una altura entera en cada bloque. */
.cab-c{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:10px}
.cab-c h2{margin:0}

.vacio{color:var(--ink2);font-size:13px;padding:14px 2px;text-align:center}

/* Una tabla de doble entrada con muchas columnas no cabe: se desplaza en
   horizontal y la primera columna se queda fija, que es la que dice de que fila
   estas leyendo. */
.tabla-scroll{overflow-x:auto}
/* Dentro de .tabla-scroll, el contenedor con overflow pasa a ser el scrollport del
   sticky: el "top:59px" de la cabecera general la empujaba 59 px hacia ABAJO dentro
   de la tarjeta, y se pintaba entre la primera y la segunda fila tapando datos. */
.tabla-scroll .tabla thead th{position:static}
/* La regla base ".tabla th" pone sticky con top:59px, y eso alcanzaba tambien a los
   th del CUERPO: en el cruce, la primera columna es un th por fila, asi que la
   etiqueta de la primera fila —"Furgo vieja"— se despegaba y quedaba tapada. Se veia
   una fila con cifras y sin nombre. En el cuerpo el th solo se pega a la izquierda. */
.tabla tbody th{position:static;top:auto}
.tabla.cruce thead th:first-child{text-align:left}
.tabla.cruce tbody th:first-child{position:sticky;left:0;top:auto;
  background:var(--card);text-align:left;font-weight:600;color:var(--ink);z-index:1}
.tabla.cruce td.vacia{color:var(--line-control)}

/* =====================================================================
   GRAFICOS
   ---------------------------------------------------------------------
   Todos los SVG heredan el color del tema con currentColor y variables, asi
   que al cambiar a claro cambian solos. Ninguno lleva color escrito a mano
   salvo la paleta de series, que se pasa desde el JS.
   ===================================================================== */

/* --- las tarjetas de arriba --- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;
  margin-bottom:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 16px 15px;min-width:0}
.kpi .k-e{font-size:11px;color:var(--ink2);text-transform:uppercase;letter-spacing:.4px;
  font-weight:600;margin-bottom:6px}
.kpi .k-n{font-size:30px;font-weight:700;letter-spacing:-.5px;line-height:1.1;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .k-comp{margin-top:7px;font-size:12px;min-height:18px}
.kpi .k-comp-t{color:var(--mut);font-weight:400;margin-left:2px}
.kpi .k-a{font-size:11.5px;color:var(--ink2);margin-top:9px;line-height:1.35}
.grafico{display:block;width:100%}

/* --- los medidores --- */
/* Los medidores: tres en fila y compactos. Ocupaban una franja entera de la pantalla
   para decir tres porcentajes, y el gauge estirado deformaba hasta la tipografia. */
.medidores{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;
  margin-bottom:14px}
.med{display:flex;align-items:center;gap:14px;padding:12px 14px;text-align:left}
.med .qs{line-height:1.35;flex:1;min-width:0}
.gauge{width:104px;height:62px;flex:none}
/* "Sin datos" no cabe a 26 px dentro del arco */
.gauge-n.chico{font-size:14px;fill:var(--mut);font-weight:600}
.gauge-n{font-size:26px;font-weight:700;fill:var(--ink);text-anchor:middle;
  letter-spacing:-.5px}
.gauge-e{font-size:11px;fill:var(--ink2);text-anchor:middle}

/* --- barras --- */
/* el SVG mantiene su proporcion (1200x300, panoramica) y ocupa todo el ancho: sin
   esto se estiraba y las cifras del eje salian deformadas */
.barras{width:100%;height:auto}
.barras .eje{font-size:13px}
.rejilla{stroke:var(--line);stroke-width:1}
.eje{font-size:10px;fill:var(--ink2)}
.eje.n{text-anchor:end}
.eje.c{text-anchor:middle}

/* --- la leyenda de un grafico ---
   Clase propia, "leyenda-g", y no la ".leyenda" de la rejilla de flota: alli las
   pildoras con borde son MUESTRAS del aspecto de una celda y tiene sentido; aqui
   heredaban ese borde redondeado y quedaban identicas a los botones que tienen 40 px
   encima. Una nota al pie con forma de boton es lo primero que alguien pulsa. */
.leyenda-g{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:12px;
  color:var(--ink2)}
.leyenda-g .li{display:inline-flex;align-items:center;gap:6px}
.leyenda-g b{color:var(--ink);font-weight:600}
.punto{width:9px;height:9px;border-radius:3px;flex:none}
.raya{width:14px;height:0;border-top:2px solid var(--mut);flex:none}

/* --- donut con su leyenda al lado --- */
.donut-caja{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.donut{width:190px;height:190px;flex:none}
.donut-n{font-size:20px;font-weight:700;fill:var(--ink);text-anchor:middle}
.donut-e{font-size:10px;fill:var(--ink2);text-anchor:middle;text-transform:uppercase;
  letter-spacing:.5px}
.leyenda-l{flex:1;min-width:180px;display:flex;flex-direction:column;gap:7px}
.leyenda-l .li{display:grid;grid-template-columns:12px 1fr auto auto;gap:9px;
  align-items:center;font-size:13px}
.leyenda-l .l-e{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leyenda-l .l-v{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.leyenda-l .l-p{color:var(--ink2);font-size:11px;min-width:34px;text-align:right}

/* --- ranking en barras horizontales --- */
.barrasH{display:flex;flex-direction:column;gap:8px}
/* "Furgo vieja · Archivado" no cabia en 1,1fr y se leia "Furgo vieja · Arch...":
   justo la palabra que hacia falta. La columna de la etiqueta manda sobre la barra. */
.fila-b{display:grid;grid-template-columns:minmax(150px,1.5fr) 2.4fr auto;gap:10px;
  align-items:center;font-size:13px;border-radius:8px;padding:3px 4px}
.fila-b.tap{cursor:pointer}
.fila-b.tap:hover{background:var(--card2)}
.b-e{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.b-g{background:var(--card2);border-radius:99px;height:12px;overflow:hidden}
.b-r{display:block;height:12px;border-radius:99px}
.b-v{font-variant-numeric:tabular-nums;font-weight:600;text-align:right;min-width:64px}

/* --- mapa de calor: dia de la semana por franja horaria --- */
.calor{display:flex;flex-direction:column;gap:4px;overflow-x:auto}
.c-fila{display:grid;grid-template-columns:52px repeat(7,minmax(46px,1fr));gap:4px}
.c-cab .c-c{background:none;color:var(--ink2);font-size:10px;height:auto;
  text-transform:uppercase;letter-spacing:.3px}
.c-d{font-size:11px;color:var(--ink2);display:flex;align-items:center;
  text-transform:capitalize}
.c-c{height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--ink);font-variant-numeric:tabular-nums}

/* dos graficos uno al lado del otro, y uno debajo del otro cuando no caben */
.dos-graficos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:1100px){ .dos-graficos{grid-template-columns:1fr} }
/* el tramo que aun no ha acabado: la etiqueta tambien lo dice, no solo la opacidad,
   porque el color no se ve en una impresion en blanco y negro */
.eje.curso{fill:var(--ink2);font-style:italic}

/* Un campo con su boton al lado: el boton ocupa lo que mide su texto, no la mitad
   de la fila. Con .dos —dos columnas iguales— "Añadir" media 280 px y parecia otro
   campo de texto. */
.campo-boton{display:flex;gap:8px;align-items:center}
.campo-boton input{flex:1;min-width:0}
.campo-boton .b{flex:none}