/* ===========================================================================
   NexusCorePlus — Panel SaaS · sistema visual replicado de NexusCore Manager
   (paleta, degradados 3D, sombras suaves, filas-tarjeta)
   =========================================================================== */
:root{
  --bg:#FFFFFF; --card:#FFFFFF; --card-soft:#FFFFFF; --line:#E5E7EB;
  --ink:#1F2937; --muted:#6B7280;
  /* Estilo B.smart: blanco + azul limpio (botones azul píldora, activo azul claro) */
  --accent:#2563EB; --accent-2:#1D4ED8; --accent-hover:#1D4ED8; --accent-soft:#E8F1FE; --accent-tint:#F3F8FF; --accent-line:#CFE0F7;
  --ok:#23845B; --ok-soft:#E6F6EE; --off:#9AA7B5;
  --warn:#B7791F; --warn-soft:#FBEFD6; --crit:#B9413A; --crit-soft:#FBE7E5;
  --grad-logo:linear-gradient(135deg,#7DBBFF,#2563EB 55%,#123B8F);
  --grad-icon:linear-gradient(135deg,#FFFFFF,#FAFBFC);
  --grad-accent:linear-gradient(135deg,#4B5563,#374151);
  --primary:#2563EB; --primary-hover:#1D4ED8;
  --grad-fuel:linear-gradient(#A6D5FF,#2F86F6);
  --grad-tank:linear-gradient(#FFFFFF,#EAF2FD 52%,#C8DAF2);
  --shadow-soft:0 1px 3px rgba(15,35,66,.05);
  --shadow-card:0 1px 2px rgba(17,24,39,.04),0 10px 30px rgba(37,99,235,.14);
  --shadow-hover:0 10px 28px rgba(37,99,235,.16);
  --radius:16px;
}
/* ---------- MODO NOCHE ---------- */
:root[data-theme=dark]{
  --bg:#0E141C; --card:#161E29; --card-soft:#1B2531; --line:#28323F;
  --ink:#E6EBF2; --muted:#9AA7B8;
  --accent:#3B82F6; --accent-2:#93C5FD; --accent-hover:#60A5FA; --accent-soft:#1C2C46; --accent-tint:#172131; --accent-line:#2E4569;
  --ok:#34D399; --ok-soft:#15302A; --off:#64748B;
  --warn:#FBBF24; --warn-soft:#332912; --crit:#F87171; --crit-soft:#3A1E1E;
  --shadow-soft:0 1px 3px rgba(0,0,0,.35);
  --shadow-card:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
  --shadow-hover:0 10px 28px rgba(0,0,0,.45);
}
:root[data-theme=dark] .login-wrap{background:linear-gradient(160deg,#0B1118 0%,#0E141C 60%)}
:root[data-theme=dark] .login-form input:focus,:root[data-theme=dark] .login-form select:focus,:root[data-theme=dark] .field input:focus,:root[data-theme=dark] .field select:focus,:root[data-theme=dark] .field textarea:focus,:root[data-theme=dark] .search:focus{background:var(--card-soft)}
:root[data-theme=dark] .tankcard{background:var(--card)}
:root[data-theme=dark] body{background:var(--bg)}
:root[data-theme=dark] ::-webkit-scrollbar-thumb{background:#374151;border-color:var(--card)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Scrollbars finos y discretos (estética premium) */
*{scrollbar-width:thin;scrollbar-color:#CBD5E1 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:8px;border:2px solid #fff}
::-webkit-scrollbar-thumb:hover{background:#94A3B8}
.hidden{display:none!important}
/* Indicador de carga de vistas */
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:60px 20px;color:var(--muted);font-size:13px}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--accent-soft);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.muted{color:var(--muted)}
.err{color:var(--crit);font-size:13px;min-height:18px;margin:4px 0}
.ok-msg{color:var(--ok);font-size:13px;min-height:18px;margin:4px 0}
a.link{color:var(--accent);cursor:pointer;text-decoration:none;font-weight:600}
button{font-family:inherit}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#F7F8FA 0%,#FFFFFF 60%)}
.login-card{background:var(--card);border-radius:20px;box-shadow:0 1px 3px rgba(15,35,66,.06),0 24px 60px rgba(15,35,66,.10);border:1px solid var(--line);width:404px;padding:38px 34px}
.login-brand{text-align:center;margin-bottom:22px}
.brand-mark{width:38px;height:38px;display:block;flex:none}
.brand-mark-lg{width:74px;height:74px;margin:0 auto;display:block;filter:drop-shadow(0 12px 24px rgba(11,60,145,.42))}
.login-brand h1{margin:14px 0 2px;font-size:25px;letter-spacing:-.4px}
.login-brand p{margin:0;color:var(--muted);font-size:13px}
.login-form label{display:block;font-weight:600;font-size:12.5px;color:var(--muted);margin:14px 0 6px}
.login-form input,.login-form select{width:100%;height:44px;border:1.4px solid var(--line);border-radius:10px;padding:0 12px;font-size:14px;background:var(--card-soft)}
.login-form input:focus,.login-form select:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.pwd{position:relative}
.pwd .eye{position:absolute;right:6px;top:6px;height:32px;width:34px;border:0;background:transparent;cursor:pointer;font-size:16px;opacity:.6}
.btn-primary{margin-top:18px;width:100%;height:46px;border:0;border-radius:12px;color:#fff;font-size:15px;font-weight:600;cursor:pointer;background:linear-gradient(135deg,#7FB3F7,#4F93F4);box-shadow:0 6px 16px rgba(59,130,246,.24);transition:transform .15s,box-shadow .15s,filter .15s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(37,99,235,.38);filter:brightness(1.03)}
.login-switch{text-align:center;margin-top:14px;font-size:13px}

/* ---------- APP SHELL ---------- */
.app{display:grid;grid-template-columns:236px 1fr;grid-template-rows:62px 1fr;height:100vh;height:100dvh;grid-template-areas:"side top" "side main"}
.sidebar{grid-area:side;background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto}
.topbar{grid-area:top;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 22px;z-index:5;box-shadow:var(--shadow-soft)}
.main{grid-area:main;overflow-y:auto;padding:26px 30px}

.brand{display:flex;align-items:center;gap:12px;padding:18px 16px 14px}
.brand .name{font-weight:800;letter-spacing:-.3px;font-size:17px}
.brand .name small{display:block;font-weight:600;color:var(--muted);font-size:10px;letter-spacing:1px}

.nav{padding:8px 12px;display:flex;flex-direction:column;gap:3px}
.nav .group{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;padding:16px 10px 6px;opacity:.8}
.nav a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;color:var(--muted);font-weight:600;cursor:pointer;font-size:13.5px;transition:background .12s,color .12s}
.nav a .ic{width:24px;flex:none;display:flex;align-items:center;justify-content:center;font-size:17px;background:transparent;border:0;box-shadow:none;filter:grayscale(.2)}
.nav a:hover{background:var(--accent-tint)}
.nav a.active{background:var(--accent-soft);color:var(--accent-2)}
.nav a.active .ic{filter:none}
.nav a .badge-num{margin-left:auto;background:var(--crit);color:#fff;font-size:11px;font-weight:700;border-radius:20px;padding:1px 7px}

/* ---------- TOPBAR ---------- */
.topbar .pagetitle{font-weight:800;font-size:19px;letter-spacing:-.3px}
.topbar .spacer{flex:1}
.topbar .site-select{height:38px;border:1.3px solid var(--line);border-radius:10px;padding:0 10px;background:var(--card-soft);font-weight:600;color:var(--muted)}
.icon-btn{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:16px;color:var(--muted)}
.icon-btn:hover{background:var(--accent-soft);border-color:var(--accent-line)}
/* Campana de notificaciones */
.bell-wrap{position:relative}
.bell-badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--crit);color:#fff;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--card)}
.bell-panel{position:absolute;top:48px;right:0;width:360px;max-width:88vw;max-height:70vh;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(8,24,52,.22);z-index:50;padding:8px}
.bell-panel h4{margin:6px 10px 8px;font-size:13px;display:flex;align-items:center;gap:8px}
.bell-item{display:flex;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;align-items:flex-start}
.bell-item:hover{background:var(--accent-tint)}
.bell-item .bi-ic{font-size:16px;flex:none;width:22px;text-align:center}
.bell-item .bi-tt{font-weight:700;font-size:12.8px;color:var(--ink)}
.bell-item .bi-dt{font-size:11.5px;color:var(--muted)}
.bell-item.crit{border-left:3px solid var(--crit)} .bell-item.warn{border-left:3px solid var(--warn)}
.bell-empty{padding:24px 12px;text-align:center;color:var(--muted);font-size:13px}
.bell-item.read{opacity:.55}
.bell-item.read .bi-tt{font-weight:600}
.bell-item .bi-ic{position:relative}
.bell-item .bi-dot{position:absolute;top:-2px;left:-2px;width:8px;height:8px;border-radius:50%;background:var(--crit);border:1.5px solid var(--card)}
.bell-item.warn .bi-dot{background:var(--warn)}
.bell-item .bi-chev{flex:none;align-self:center;font-size:20px;line-height:1;color:var(--muted);font-weight:700}
.bell-item:hover .bi-chev{color:var(--accent,#2563eb)}
.bell-panel h4 .bell-allread{margin-left:auto;font-size:11px;font-weight:700;color:var(--accent,#2563eb);background:transparent;border:none;cursor:pointer;padding:0}
.bell-panel h4 .bell-allread:hover{text-decoration:underline}
/* Indicador "lector iButton conectado" (solo visible cuando el agente responde) */
.reader-pill{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:20px;background:var(--ok-soft);color:var(--ok);white-space:nowrap}
.reader-pill.reader-off{background:#fdecea;color:#c0392b}
.live{font-size:12px;font-weight:700;padding:6px 11px;border-radius:20px}
.live.on{background:var(--ok-soft);color:var(--ok)} .live.off{background:var(--crit-soft);color:var(--crit)}
.badge{display:inline-block;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:800;background:var(--accent-soft);color:var(--accent-2);letter-spacing:.3px}
.userchip{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:11px;cursor:pointer}
.userchip:hover{background:var(--accent-soft)}
.userchip .avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent-2);border:1px solid var(--accent-line);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:13px}

/* ---------- VIEW / CARDS ---------- */
.view-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.view-head h1{margin:0;font-size:22px;letter-spacing:-.4px}
.view-head .spacer{flex:1}
/* Cabecera y formulario estilo NexusCore Manager */
.page-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.page-head h1{margin:0 0 2px;font-size:23px;font-weight:800;letter-spacing:-.4px}
.page-head .spacer{flex:1}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:6px 16px;margin-bottom:6px}
.formgrid.cols2{grid-template-columns:repeat(2,1fr)}
.formgrid.cols3{grid-template-columns:repeat(3,1fr)}
.formgrid.cols4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.formgrid.cols2,.formgrid.cols3,.formgrid.cols4{grid-template-columns:repeat(2,1fr)}}
.formgrid .field{margin-bottom:8px}
/* Cabecera de página con subtítulo (estilo NexusCoreManager) */
.pagehead-col{display:flex;flex-direction:column;justify-content:center;min-width:0}
.pagesub{font-size:12px;color:var(--muted);margin-top:1px}
/* Pestañas de instalación (multi-sede) */
.insttabs{display:flex;flex-wrap:wrap;gap:6px;background:#FFFFFF;border:1px solid var(--line);border-radius:10px;padding:6px;margin-bottom:12px}
.insttab{border:1px solid transparent;background:transparent;border-radius:8px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.insttab:hover{background:#ECEEF1}
.insttab.active{background:var(--card);border-color:var(--accent-line);color:var(--ink);box-shadow:var(--shadow-soft)}
.insttab.add{color:var(--accent);font-weight:700}
/* Muestras de color de producto (réplica desktop) */
.swatch{width:28px;height:28px;border-radius:50%;border:2px solid #C7D3E2;cursor:pointer;padding:0}
.swatch:hover{border-color:var(--accent);transform:scale(1.08)}
/* Tarjetas de depósito (Existencias) */
.tankcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.tankimg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
/* Alarma compacta de nivel (Depósitos) — barra fina en una sola línea */
.alarm-mini{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 2px;font-size:12px}
.alarm-mini .am-chk{display:inline-flex;align-items:center;gap:5px;font-weight:600;white-space:nowrap}
.alarm-mini .am-range{width:90px;height:4px;accent-color:var(--accent);margin:0}
.alarm-mini .am-pct{font-weight:800;font-size:12px;min-width:34px}
.alarm-mini .am-sep{flex:0 0 1px;align-self:stretch;background:var(--line);margin:0 4px}
.tankcard{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff;box-shadow:var(--shadow-soft);transition:transform .16s,box-shadow .16s}
.tankcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.tankcard .tk-top{display:flex;align-items:center;gap:8px;font-size:13.5px}
.tankcard .tk-dot{width:12px;height:12px;border-radius:50%;border:1px solid #9FB2CC}
.tankcard .tk-bar{height:10px;border-radius:6px;background:#EEF3F9;margin:10px 0 6px;overflow:hidden}
.tankcard .tk-fill{height:100%;border-radius:6px;transition:width .3s}
.tankcard .tk-meta{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700}
/* Barra de nivel en tablas (con transición y % superpuesto) */
.lvlbar{position:relative;height:18px;border-radius:9px;background:var(--card-soft);border:1px solid var(--line);overflow:hidden}
.lvlbar-fill{position:absolute;left:0;top:0;height:100%;border-radius:9px 0 0 9px;transition:width .6s cubic-bezier(.4,0,.2,1)}
/* Estado de sonda AUTODETECTADO (solo lectura) en el formulario de depósito */
.probe-state{padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--card-soft);font-size:12.5px;min-height:20px;line-height:1.4}
.lvlbar-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--ink);text-shadow:0 0 3px rgba(255,255,255,.7)}
.clickrow.rowsel td{background:var(--accent-soft)}
.clickrow.rowsel td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
/* Imágenes de grupos de vehículos (réplica desktop) */
.vimg-lg{height:240px;max-width:100%;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(15,35,66,.16))}
.vimg-md{height:72px;width:auto;object-fit:contain;vertical-align:middle}
.vimg-sm{height:40px;width:auto;object-fit:contain;vertical-align:middle}
.vimg-xs{height:34px;width:auto;object-fit:contain;vertical-align:middle}
/* Tarjeta de grupo de vehículos con imagen grande y detallada */
.vgcard{border:1px solid var(--line);border-radius:14px;padding:14px 12px 12px;background:var(--card);box-shadow:var(--shadow-soft);text-align:center;transition:transform .16s,box-shadow .16s}
.vgcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.vgcard .vimg-card{height:120px;width:100%;object-fit:contain;display:block;margin:0 auto 10px;filter:drop-shadow(0 6px 14px rgba(15,35,66,.14))}
.vgcard{position:relative}
.vgcard .vg-name{font-weight:700;font-size:14px;color:var(--ink)}
.vgcard .vg-actions{display:flex;gap:6px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.vgcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
/* Visual del surtidor NexusPlus (Dispensadores) */
.np-unit{position:relative;width:150px;height:210px;margin:14px auto 6px;border-radius:20px;background:#F8FBFF;border:3px solid #BFD5FF;box-shadow:var(--shadow-soft)}
.np-display{position:absolute;top:24px;left:50%;transform:translateX(-50%);width:112px;background:#0F1B2D;border-radius:12px;padding:8px 0;text-align:center}
.np-display .np-tot{color:#5BE3A0;font-weight:800;font-size:20px}
.np-display .np-lbl{color:#7FA8D8;font-size:8px;letter-spacing:.5px}
.np-nozzle{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:60px;height:64px;border-radius:8px;background:#EAF2FF;border:2px solid #BFD5FF}
.np-led{position:absolute;top:14px;right:16px;width:14px;height:14px;border-radius:50%;background:#9AA8BC}
.np-led.on{background:#5BE3A0;box-shadow:0 0 8px #5BE3A0}
.np-telemetry{background:#0F1B2D;border-radius:12px;padding:12px;margin-top:6px}
.np-telemetry .np-tlabel{color:#7FA8D8;font-size:10px;font-weight:700}
.np-telemetry #dvTel{color:#DCEBFF;font-size:13px;margin-top:4px}
/* El 2o recuadro (CONFIG REPORTADA) NO tenia color propio: heredaba el texto oscuro de la pagina y los
   valores <b> (Identificacion, Direccion, No productos/mangueras, Conductores) salian oscuros sobre el
   fondo azul oscuro = invisibles (parecia que "no sincronizaba"). Mismo tratamiento claro que #dvTel. */
.np-telemetry #dvReported{color:#DCEBFF;font-size:13px;margin-top:4px}
.np-telemetry #dvReported b{color:#FFFFFF}
.btnrow{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.alarmbox{background:#FFFFFF;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.alarmbox .top{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:13px}
.alarmbox input[type=range]{width:100%;margin-top:10px;accent-color:var(--accent)}
.alarmbox .pct{font-weight:800;font-size:14px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:22px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-card);display:flex;align-items:center;gap:14px;transition:transform .16s,box-shadow .16s}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.kpi .kpi-ic{width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;font-size:21px;border-radius:14px;background:var(--accent-soft);box-shadow:none;border:1px solid var(--accent-line)}
.kpi .lbl{color:var(--muted);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.kpi .val{font-size:25px;font-weight:800;margin-top:3px;letter-spacing:-.5px;line-height:1.1}
.kpi .val small{font-size:14px;font-weight:600;color:var(--muted)}
/* Los números grandes (p.ej. 456.369,60 €) se salían de la tarjeta y quedaban descentrados. min-width:0 deja
   que el bloque de texto se ENCOJA al ancho real de la tarjeta (antes lo empujaba y desbordaba); la @container
   query reduce la fuente SOLO cuando la tarjeta es estrecha, sin recortar dígitos ni poner "…" (dato monetario). */
.kpi{container-type:inline-size}
.kpi>div{min-width:0}
.kpi .val{white-space:nowrap;font-variant-numeric:tabular-nums}
@container (max-width:250px){ .kpi .val{font-size:22px} }
@container (max-width:215px){ .kpi .val{font-size:19px} }
@container (max-width:185px){ .kpi .val{font-size:17px} }

.grid2{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-bottom:18px}
.grid-2eq{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
@media(max-width:1100px){.grid2,.grid-2eq{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-card)}
.panel h2{margin:0 0 16px;font-size:14.5px;display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:-.1px;color:var(--ink)}
.panel h2 small{font-weight:500;color:var(--muted);letter-spacing:0}

.range{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:3px;gap:2px}
.range button{border:0;background:transparent;padding:6px 12px;border-radius:8px;font-weight:600;font-size:12.5px;color:var(--muted);cursor:pointer}
.range button.active{background:var(--accent-soft);color:var(--accent-2)}

/* toolbar */
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.search{flex:1;min-width:200px;height:40px;border:1.3px solid var(--line);border-radius:11px;padding:0 14px;background:var(--card-soft)}
.search:focus{outline:none;border-color:var(--accent);background:#fff}
.btn{height:40px;border:0;border-radius:22px;padding:0 18px;font-weight:600;cursor:pointer;background:linear-gradient(135deg,#7FB3F7,#4F93F4);color:#fff;display:inline-flex;align-items:center;gap:7px;box-shadow:0 4px 12px rgba(59,130,246,.22);transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(37,99,235,.34);filter:brightness(1.03)}
.btn:active{transform:translateY(0);box-shadow:0 3px 9px rgba(37,99,235,.28)}
.btn.ghost{background:var(--card);color:var(--accent-2);border:1px solid var(--accent-line);font-weight:600;box-shadow:none}
.btn.ghost:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-2);transform:translateY(-1px)}
.btn.sm{height:33px;padding:0 12px;font-size:12.5px;font-weight:600;box-shadow:none}
.logout-btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.logout-btn .x{font-weight:800;color:var(--crit)}
.logout-btn:hover{border-color:var(--crit);color:var(--crit);background:var(--crit-soft)}
.toolbar input[type=date]{height:40px;border:1.3px solid var(--line);border-radius:11px;padding:0 12px;background:var(--card-soft)}

/* tablas con filas-tarjeta (estilo NexusCore Manager) */
.table-wrap{overflow:auto;border-radius:var(--radius)}
table{width:100%;border-collapse:separate;border-spacing:0 8px;font-size:13.5px}
thead th{text-align:left;color:var(--muted);font-weight:700;padding:4px 14px 8px;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;border-bottom:1px solid var(--line)}
tbody td{padding:13px 14px;background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .14s,border-color .14s}
tbody td:first-child{border-left:1px solid var(--line);border-radius:12px 0 0 12px}
tbody td:last-child{border-right:1px solid var(--line);border-radius:0 12px 12px 0}
tbody tr{box-shadow:var(--shadow-soft);transition:box-shadow .14s}
tbody tr:hover{box-shadow:var(--shadow-hover)}
tbody tr:hover td{background:var(--accent-tint);border-color:var(--accent-line)}
tfoot td{padding:12px 14px}
.empty{padding:40px;text-align:center;color:var(--muted)}
.pill{display:inline-block;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:700}
.pill.on{background:var(--ok-soft);color:var(--ok)} .pill.off{background:#EEF1F4;color:var(--off)}
.pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.crit{background:var(--crit-soft);color:var(--crit)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:9px;background:var(--accent-soft);font-size:12px;font-weight:600;color:var(--accent-2)}

/* tarjetas de entidad (maestro) */
.entity-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.ecard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-card);cursor:pointer;transition:.14s}
.ecard:hover{border-color:var(--accent-line);box-shadow:0 6px 22px rgba(15,35,66,.14);transform:translateY(-2px)}
.ecard .top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ecard .ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:21px;background:var(--grad-icon);color:var(--accent-2);box-shadow:var(--shadow-soft);border:1px solid var(--line)}
.ecard .title{font-weight:800}
.ecard .meta{font-size:12px;color:var(--muted)}
.ecard .row{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;border-top:1px dashed var(--line)}

/* tanque (shell + combustible con degradado) */
.tankviz{position:relative;width:100%;height:152px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--grad-tank)}
.tankviz .fill{position:absolute;left:0;right:0;bottom:0;background:var(--grad-fuel);transition:height .4s}
.tankviz.crit .fill{background:linear-gradient(#F2A8A4,#B9413A)}
.tankviz.warn .fill{background:linear-gradient(#F4D79A,#B7791F)}
.tankviz .lvl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:27px;color:#16314f;text-shadow:0 1px 2px rgba(255,255,255,.7)}
.tankviz .lvl small{font-size:12px;font-weight:600;color:#33506e}

/* drawer */
.overlay{position:fixed;inset:0;background:rgba(8,24,52,.4);z-index:40;opacity:0;pointer-events:none;transition:.2s}
.overlay.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:480px;max-width:92vw;background:#fff;z-index:41;box-shadow:-12px 0 44px rgba(8,24,52,.22);transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column}
.drawer.show{transform:translateX(0)}
.drawer header{display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid var(--line);background:var(--card-soft)}
.drawer header h3{margin:0;font-size:16px;flex:1;font-weight:800}
.drawer .body{padding:20px;overflow-y:auto;flex:1}
.drawer .foot{padding:14px 20px;padding-bottom:calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:var(--card-soft)}
/* Modal pequeño centrado (configurar mangueras) */
.hmodal-back{position:fixed;inset:0;background:rgba(8,24,52,.4);z-index:60;opacity:0;pointer-events:none;transition:.2s}
.hmodal-back.show{opacity:1;pointer-events:auto}
.hmodal{position:fixed;top:50%;left:50%;transform:translate(-50%,-48%) scale(.98);width:440px;max-width:94vw;max-height:88vh;background:#fff;z-index:61;border-radius:14px;box-shadow:0 18px 60px rgba(8,24,52,.28);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.hmodal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.hmodal header{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line);background:var(--card-soft);border-radius:14px 14px 0 0}
.hmodal header h3{margin:0;font-size:15.5px;flex:1;font-weight:800}
.hmbody{padding:18px;overflow-y:auto;flex:1}
.hmfoot{padding:13px 18px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:var(--card-soft);border-radius:0 0 14px 14px}
.hm-hose{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card-soft,#f7f9fc)}
.hm-htitle{font-weight:800;font-size:13px;margin-bottom:6px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;height:40px;border:1.3px solid var(--line);border-radius:10px;padding:0 11px;font-size:14px;background:var(--card-soft);color:var(--ink)}
.field textarea{height:auto;padding:9px 11px;min-height:70px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.field .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Las casillas no deben heredar el tamaño de los inputs de texto. */
.field input[type=checkbox],.switch input,.oprow input[type=checkbox],.login-form input[type=checkbox]{
  width:18px;height:18px;min-height:0;margin:0;padding:0;accent-color:var(--accent);cursor:pointer;flex:none}
.switch{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);cursor:pointer}
.dtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:-4px -4px 16px;padding:0 4px}
.dtab{border:0;background:transparent;padding:10px 14px;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
.dtab.active{color:var(--accent-2);border-bottom-color:var(--accent)}
.dpane{display:none} .dpane.active{display:block}
.oprow{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);font-size:13.5px}
.oprow:last-child{border-bottom:0}
.oplist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 24px;margin-top:6px}
.oplist .oprow{border-bottom:1px dashed var(--line)}

/* Barra de scroll SIEMPRE visible y moderna en los desplegables multi-selección (listas largas de
   conductores/matrículas): la pista se ve aunque haya pocos elementos (afordancia de "esto tiene scroll")
   y el pulgar se resalta al pasar el ratón. Se usa en #dOps (Conductores) y #gpPlates (Gasóleo profesional). */
.np-scroll{scrollbar-width:thin;scrollbar-color:#b8c4d6 #eef2f7}
.np-scroll::-webkit-scrollbar{width:12px}
.np-scroll::-webkit-scrollbar-track{background:#eef2f7;border-radius:8px;margin:2px}
.np-scroll::-webkit-scrollbar-thumb{background:#b8c4d6;border-radius:8px;border:3px solid #eef2f7;background-clip:content-box;min-height:40px}
.np-scroll::-webkit-scrollbar-thumb:hover{background:var(--brand,#0b74de);background-clip:content-box}

/* ============================================================================
   Controles de formulario MODERNOS y UNIFORMES en TODA la app (ago-2026).
   Los <select>/<input> "sueltos" (toolbars, filtros, cabeceras) salían con el
   estilo NATIVO del navegador (aspecto "de los 90"). Aquí se les da el mismo
   redondeado + FLECHA propia que el resto de la interfaz. Se listan también las
   clases ya estiladas (.field/.toolbar/.topbar/.login) para ganar por ORDEN DE
   FUENTE (van después) sin usar !important y que todos los selects sean iguales.
   Las casillas (input[type=checkbox]) NO se tocan: tienen su propia regla arriba.
   ============================================================================ */
select, .field select, .topbar .site-select, .toolbar select,
input[type=text], input[type=number], input[type=search], input[type=email],
input[type=tel], input[type=url], input[type=password], input[type=date], input[type=time], input:not([type]){
  height:40px; border:1.3px solid var(--line); border-radius:11px; padding:0 13px; font-size:14px;
  background-color:var(--card-soft); color:var(--ink); box-sizing:border-box;
  transition:border-color .13s, box-shadow .13s;
}
select, .field select, .topbar .site-select, .toolbar select, .login-form select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%236B7280' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}
select:hover, .toolbar select:hover, .topbar .site-select:hover,
input[type=text]:hover, input[type=number]:hover, input[type=search]:hover{ border-color:#C4CDDA; }
select:focus, .field select:focus, .topbar .site-select:focus, .toolbar select:focus,
input[type=text]:focus, input[type=number]:focus, input[type=search]:focus, input[type=email]:focus,
input[type=tel]:focus, input[type=url]:focus, input[type=password]:focus, input[type=date]:focus, input[type=time]:focus, input:not([type]):focus{
  outline:none; border-color:var(--accent); background-color:#fff; box-shadow:0 0 0 3px rgba(37,99,235,.14);
}
:root[data-theme=dark] select:focus, :root[data-theme=dark] .field select:focus, :root[data-theme=dark] .toolbar select:focus,
:root[data-theme=dark] input[type=text]:focus, :root[data-theme=dark] input[type=number]:focus, :root[data-theme=dark] input:not([type]):focus{
  background-color:var(--card-soft);
}
/* El login conserva su tamaño propio (input 44 / radio 10) para no desajustar la tarjeta. */
.login-form input, .login-form select{ height:44px; border-radius:10px; }

/* misc */
.btn-mini{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:4px 9px;font-size:12px;font-weight:600;cursor:pointer;color:var(--muted);margin-right:5px}
.btn-mini:hover{background:var(--accent-soft);border-color:var(--accent-line)}
.btn-mini.danger{color:var(--crit);border-color:#F0C8C5}
/* En pantallas TÁCTILES, los botones de acción de fila (25-33 px) son casi imposibles de acertar con
   el dedo: se agrandan al mínimo recomendado de 44 px. En escritorio (ratón) no cambia nada. */
@media(pointer:coarse){
  .btn-mini{min-height:44px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center;margin-right:8px}
  .btn.sm{min-height:44px;height:auto}
}
/* Sesión de SOLO LECTURA: los controles de escritura marcados se ocultan (el backend igualmente los
   rechaza con 403; esto evita que el usuario los pulse y se lleve el error). */
.viewer-mode [data-write]{display:none!important}
.toast{position:fixed;right:20px;bottom:20px;background:#16314f;color:#fff;padding:13px 17px;border-radius:12px;font-size:13.5px;box-shadow:0 14px 34px rgba(8,24,52,.4);opacity:0;transform:translateY(10px);transition:.25s;z-index:60;max-width:360px;pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}
.banner{padding:11px 15px;border-radius:12px;margin-bottom:16px;font-size:13px;display:flex;align-items:center;gap:10px}
.banner.warn{background:var(--warn-soft);color:#8a5a12}
.banner.crit{background:var(--crit-soft);color:var(--crit);border:1px solid var(--crit)}
/* Aviso de mantenimiento GLOBAL (Fabricante -> todos los clientes). Ancho, arriba del panel, se ve al entrar. */
.maint-banner{display:flex;align-items:center;gap:11px;padding:12px 16px;border-radius:12px;margin-bottom:16px;font-size:13.5px;font-weight:600;line-height:1.45;border:1px solid transparent}
.maint-banner .mb-ic{font-size:17px;flex:0 0 auto;line-height:1}
.maint-banner .mb-tx{flex:1;min-width:0;white-space:pre-wrap}
.maint-banner.info{background:var(--accent-soft);color:var(--accent-2);border-color:var(--accent-line)}
.maint-banner.warning{background:var(--warn-soft);color:#8a5a12;border-color:var(--warn)}
.maint-banner.critical{background:var(--crit-soft);color:var(--crit);border-color:var(--crit)}
:root[data-theme=dark] .maint-banner.warning{color:var(--warn)}
.locked-note{padding:44px;text-align:center;color:var(--muted)}
.locked-note .big{font-size:42px;margin-bottom:10px}
.kpi-row,.result{font-size:13.5px}
canvas{max-width:100%}

/* responsive */
.hamb{display:none}
@media(max-width:900px){
  /* minmax(0,1fr): la columna 1fr tiene suelo min-content, y los 12 controles de la barra (varios
     sin encoger) la forzaban a 1187px arrastrando TODO el contenido -> la pagina entera hacia scroll
     lateral. Con minmax(0,...) la columna puede bajar de min-content y se queda en el ancho real de
     pantalla; entonces .table-wrap SI hace su scroll interno. Filas auto para que la barra, al
     envolver, tenga su altura natural en vez de recortarse contra los 62px. */
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"top" "main"}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:236px;z-index:45;transform:translateX(-100%);transition:transform .25s;box-shadow:6px 0 30px rgba(8,24,52,.2)}
  .app.nav-open .sidebar{transform:translateX(0)}
  .hamb{display:inline-flex;align-items:center;justify-content:center}
  .app.nav-open::after{content:"";position:fixed;inset:0;background:rgba(8,24,52,.35);z-index:44}
  /* La barra ENVUELVE (asi su min-content deja de forzar el ancho) y se compacta: fuera el badge de
     plan y el email del usuario, y "Cerrar sesion" queda como una X. Cabe en 375px sin scroll lateral. */
  .topbar{flex-wrap:wrap;padding:8px 14px;gap:8px}
  .topbar .site-select{max-width:150px}
  .topbar .pagehead-col{min-width:0;flex:1 1 auto}
  .topbar #plan,.topbar .userchip #who{display:none}
  .topbar .logout-btn{font-size:0;gap:0;padding:0 12px}
  .topbar .logout-btn .x{font-size:15px}
}
@media print{
  .sidebar,.topbar,.toolbar,.drawer,.overlay,#impersonateBar{display:none!important}
  .app{display:block;height:auto}.main{overflow:visible;padding:0}
  .table-wrap{max-height:none}tbody tr{box-shadow:none}
  body{background:#fff}
}


/* ============================================================================
   SKIN PREMIUM v3 — aspecto de la maqueta (elegante) aplicado al SaaS real.
   SOLO aspecto: redefine variables y afina componentes existentes. Botones
   OSCUROS SUAVIZADOS (charcoal, no negro). Iconos SVG en el menú (via HTML).
   Revertir = quitar este bloque. Ninguna estructura/función cambia.
   ============================================================================ */
:root{
  --bg:#EDF1F6; --card:#FFFFFF; --card-soft:#F6F9FC; --line:#E3E9F1;
  --ink:#151C27; --muted:#6A7686;
  --accent:#2C6BE4; --accent-2:#1E56C4; --accent-hover:#1E56C4;
  --accent-soft:#EAF1FD; --accent-tint:#F4F8FE; --accent-line:#CFE0FA;
  --fuel:#E7962E; --fuel-ink:#B06710; --fuel-bg:#FCF2E1;      /* 2º acento: combustible */
  --ok:#17976A; --ok-soft:#E7F6EF; --off:#94A2B4;
  --warn:#B7791F; --warn-soft:#FAF0DA; --crit:#D93A44; --crit-soft:#FBE9EB;
  --faint:#98A2B2;
  --grad-icon:linear-gradient(180deg,#FFFFFF,#F3F7FC);
  --grad-fuel:linear-gradient(#A9D3FF,#2C6BE4);
  --grad-tank:linear-gradient(#FFFFFF,#EAF2FD 52%,#CBDCF3);
  --shadow-soft:0 1px 2px rgba(16,24,40,.05);
  --shadow-card:0 1px 2px rgba(16,24,40,.04),0 12px 28px -14px rgba(16,24,40,.18);
  --shadow-hover:0 2px 8px rgba(16,24,40,.07),0 22px 46px -18px rgba(16,24,40,.26);
  --radius:16px;
}
:root[data-theme=dark]{
  --bg:#0C121A; --card:#151D28; --card-soft:#1A2432; --line:#27313F;
  --ink:#E7ECF3; --muted:#98A6B8; --faint:#6B7A8D;
  --accent:#4C86F0; --accent-2:#A9CBFF; --accent-soft:#182741; --accent-tint:#141E2C; --accent-line:#2E456A;
  --fuel:#F0A93E; --fuel-ink:#F0B457; --fuel-bg:#2A2110;
  --ok:#34D399; --ok-soft:#12302A; --off:#64748B; --warn:#FBBF24; --warn-soft:#31280F; --crit:#F87171; --crit-soft:#391D1D;
  --shadow-soft:0 1px 2px rgba(0,0,0,.4);
  --shadow-card:0 1px 2px rgba(0,0,0,.3),0 12px 30px -14px rgba(0,0,0,.5);
  --shadow-hover:0 2px 8px rgba(0,0,0,.4),0 22px 46px -18px rgba(0,0,0,.6);
}

/* fondo con dos halos MUY sutiles (azul + ámbar) */
body{
  background:
    radial-gradient(1100px 520px at 88% -12%, rgba(44,107,228,.06), transparent 60%),
    radial-gradient(860px 460px at -6% 112%, rgba(231,150,46,.05), transparent 58%),
    var(--bg);
  letter-spacing:-.1px;
}

/* ---------- SIDEBAR premium: iconos SVG + grupos + activo con barra ---------- */
.sidebar{box-shadow:1px 0 0 var(--line)}
.brand .name{letter-spacing:-.4px}
.nav{gap:2px}
.nav .group{font-size:9.5px;font-weight:800;color:var(--faint);letter-spacing:1.4px;padding:15px 12px 6px;opacity:.9;text-transform:uppercase}
/* más contraste: texto oscuro legible + icono azul-pizarra nítido y distinto del texto */
.nav a{position:relative;font-weight:600;font-size:13.5px;color:#37414F;border-radius:11px;padding:9px 12px;gap:12px}
.nav a svg{width:18.5px;height:18.5px;flex:none;opacity:1;stroke-width:1.8;color:#6C7C97}
.nav a .ic{display:none}
.nav a:hover{background:var(--accent-tint);color:var(--ink)}
.nav a:hover svg{color:var(--accent)}
.nav a.active{background:var(--accent-soft);color:var(--accent-2);font-weight:680}
.nav a.active svg{opacity:1;color:var(--accent)}
.nav .group{color:#8A93A3}
.nav a.active::before{content:"";position:absolute;left:-8px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}

/* ---------- TOPBAR cristal ---------- */
.topbar{background:rgba(255,255,255,.82);backdrop-filter:saturate(1.08) blur(9px);-webkit-backdrop-filter:saturate(1.08) blur(9px)}
:root[data-theme=dark] .topbar{background:rgba(21,29,40,.82)}
.topbar .pagetitle{letter-spacing:-.4px}

/* ---------- KPIs elegantes ---------- */
.kpi{border-color:var(--line);border-radius:var(--radius);padding:17px 18px;box-shadow:var(--shadow-card);gap:15px}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.kpi .kpi-ic{width:44px;height:44px;border-radius:13px;font-size:20px;background:var(--grad-icon);border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.kpi .lbl{font-size:11px;letter-spacing:.5px;color:var(--muted)}
.kpi .val{font-size:28px;font-weight:680;letter-spacing:-1px;line-height:1.05;font-variant-numeric:tabular-nums}
.kpi .val small{font-weight:560;color:var(--muted)}

/* ---------- Paneles / tarjetas ---------- */
.panel{border-color:var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.panel h2{letter-spacing:-.2px;font-weight:700}
.ecard,.tankcard,.vgcard,.alarmbox{border-color:var(--line);box-shadow:var(--shadow-card)}
.ecard:hover,.tankcard:hover,.vgcard:hover{box-shadow:var(--shadow-hover)}

/* ---------- BOTONES: primario oscuro SUAVIZADO (charcoal), ghost claro ---------- */
.btn{background:linear-gradient(180deg,#4B5A72,#39475E);color:#fff;border-radius:12px;box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 2px 4px rgba(16,24,40,.10),0 10px 22px -10px rgba(57,71,94,.55);font-weight:600}
.btn:hover{background:linear-gradient(180deg,#556280,#404E66);box-shadow:0 1px 0 rgba(255,255,255,.11) inset,0 3px 7px rgba(16,24,40,.12),0 14px 28px -10px rgba(57,71,94,.62);transform:translateY(-1px);filter:none}
.btn:active{transform:translateY(0)}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.btn.ghost:hover{background:var(--card-soft);border-color:var(--accent-line);color:var(--accent-2);transform:translateY(-1px)}
.btn.sm{border-radius:10px}
.btn-primary{background:linear-gradient(180deg,#4B5A72,#39475E);box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 10px 22px -8px rgba(57,71,94,.5)}
.btn-primary:hover{background:linear-gradient(180deg,#556280,#404E66)}
.btn-mini:hover{background:var(--accent-soft);border-color:var(--accent-line)}

/* ---------- Tablas ---------- */
thead th{letter-spacing:.6px;font-size:10px;color:var(--muted)}
tbody tr{box-shadow:var(--shadow-soft)}
tbody tr:hover td{background:var(--accent-tint);border-color:var(--accent-line)}
tbody td{border-color:var(--line)}

/* ---------- Pills / chips / acento combustible ---------- */
.chip{background:var(--accent-soft);color:var(--accent-2)}
.pill{letter-spacing:.2px}
.insttab.active{border-color:var(--accent-line);box-shadow:var(--shadow-soft)}

/* ---------- Inputs premium ---------- */
.field input,.field select,.field textarea,.search,.toolbar select,.topbar .site-select,
select,input[type=text],input[type=number],input[type=search],input[type=email],input[type=password],input[type=date],input[type=time]{border-radius:11px}
.field input:focus,.field select:focus,.search:focus,input:focus,select:focus{box-shadow:0 0 0 3px rgba(44,107,228,.13)}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar-thumb{background:#C7D2E0;border-color:var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#A9B6C8}


/* ============================================================================
   PULIDO GRIS FRÍO (panel de diseño) — visibilidad + colocación + jerarquía.
   Solo aspecto. Se aplica encima del skin premium; gana por orden de fuente.
   ============================================================================ */
:root{
  --muted:#586472;                 /* contraste AA en TODO el texto secundario (antes 4,3:1 fallaba) */
  --shadow-card:0 1px 2px rgba(21,28,39,.05),0 6px 16px rgba(21,28,39,.07);   /* sombra neutra 2 capas: la tarjeta "levanta" del fondo */
  --shadow-hover:0 2px 4px rgba(21,28,39,.06),0 16px 34px -12px rgba(21,28,39,.20);
}
/* — COLOCACIÓN / ritmo de espaciado (escala de 4) — */
.main{padding:28px 32px}
.cards,.grid2,.grid-2eq{gap:20px;margin-bottom:24px}
.view-head,.page-head{margin-bottom:20px}
.kpi{padding:18px 20px;gap:16px}
.panel{padding:24px}
/* — SEPARACIÓN tarjeta/fondo + brillo superior premium — */
.kpi,.panel,.ecard,.tankcard,.vgcard,.alarmbox{border-color:#DCE3EE}
.kpi,.panel,.ecard,.tankcard,.vgcard{box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,.55)}
.kpi:hover,.ecard:hover,.tankcard:hover,.vgcard:hover{box-shadow:var(--shadow-hover),inset 0 1px 0 rgba(255,255,255,.55)}
/* — JERARQUÍA tipográfica — */
.page-head h1,.view-head h1{font-size:24px;line-height:1.18;font-weight:800;letter-spacing:-.5px;color:var(--ink)}
.panel h2{font-size:15px;margin:0 0 18px;letter-spacing:-.15px}
.kpi .lbl{font-size:11px;letter-spacing:.6px;line-height:1.3}
.kpi .val small{margin-left:4px;font-size:13px;font-weight:600;letter-spacing:0;color:var(--muted)}
/* — TABLAS: legibles, alineadas y con cifras tabulares (dejan de "bailar") — */
thead th{font-size:11px;color:#4E5866;letter-spacing:.6px;padding:6px 16px 10px}
tbody td,tfoot td{padding:14px 16px;font-variant-numeric:tabular-nums lining-nums}
.tankcard .tk-meta,.alarmbox .pct,.lvlbar-txt,.np-display .np-tot,.kpi .val{font-variant-numeric:tabular-nums lining-nums}
/* — NAV: hover claramente visible — */
.nav a:hover{background:var(--accent-soft);color:var(--ink)}
.nav a:hover svg{color:var(--accent)}
/* — FOCO visible (entrada de datos 8 h/día) — */
.field input:focus,.field select:focus,.field textarea:focus,.search:focus,select:focus,input:focus,.login-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(44,107,228,.26)}
.nav a:focus-visible,.btn:focus-visible,.btn.ghost:focus-visible,.icon-btn:focus-visible,.dtab:focus-visible,.btn-mini:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* — CAMPOS y placeholder mejor delimitados — */
.field input,.field select,.field textarea,.search{border-color:#D7DEEA}
::placeholder{color:#828C9B;opacity:1}
/* — ESTADOS pill/off legibles — */
.pill.off{background:#E7ECF2;color:#5C6874}


/* ============================================================================
   PREMIUM v4 — auditoría de diseño (nivel top-tier: Linear/Stripe/Vercel).
   Una sola fuente de luz, superficies casi planas, botón de precisión, iconos
   monocromos, radios en escala, pesos señoriales. Solo aspecto. Gana por orden.
   ============================================================================ */
/* — tokens: escala de radios + 3ª superficie (campo recesado) — */
:root{ --radius:12px; --card-soft:#EDF1F8; }

/* — tipografía: sin interletrado negativo global + cifras tabulares por defecto — */
body{ letter-spacing:normal; font-variant-numeric:tabular-nums lining-nums; }

/* — SUPERFICIES en reposo casi planas (fuera el brillo interior y el "levitar") — */
.kpi,.panel,.ecard,.tankcard,.vgcard{ box-shadow:0 1px 2px rgba(21,28,39,.04),0 4px 12px rgba(21,28,39,.05) }
.kpi:hover{ transform:none; box-shadow:0 1px 2px rgba(21,28,39,.04),0 4px 12px rgba(21,28,39,.05) }
.ecard:hover,.tankcard:hover,.vgcard:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(21,28,39,.05),0 12px 26px -10px rgba(21,28,39,.16) }
.tankcard,.vgcard{ border-radius:12px }

/* — PLANOS FLOTANTES: una sola temperatura de sombra rgba(21,28,39) — */
.bell-panel{ box-shadow:0 1px 2px rgba(21,28,39,.05),0 16px 40px -12px rgba(21,28,39,.28) }
.drawer{ box-shadow:-1px 0 2px rgba(21,28,39,.05),-28px 0 60px -24px rgba(21,28,39,.30) }
.hmodal{ box-shadow:0 1px 2px rgba(21,28,39,.06),0 28px 64px -16px rgba(21,28,39,.34) }
.toast{ box-shadow:0 2px 6px rgba(21,28,39,.22),0 18px 40px -12px rgba(21,28,39,.45) }
.login-card{ box-shadow:0 1px 3px rgba(21,28,39,.05),0 30px 64px -24px rgba(21,28,39,.22) }

/* — BOTÓN plano de precisión (sin degradado/gloss/halo/salto) — */
.btn,.btn-primary{ background:#39475E; border:1px solid rgba(12,18,28,.14); box-shadow:0 1px 1px rgba(16,24,40,.10),0 1px 3px rgba(16,24,40,.10); filter:none; border-radius:10px }
.btn:hover,.btn-primary:hover{ background:#43526B; transform:none; box-shadow:0 1px 2px rgba(16,24,40,.14),0 2px 6px rgba(16,24,40,.14); filter:none }
.btn:active,.btn-primary:active{ background:#313D4F; transform:none; filter:brightness(.98) }
.btn.ghost{ background:var(--card); box-shadow:none }
.btn.ghost:hover{ transform:none; background:var(--card-soft); border-color:var(--accent-line); color:var(--accent-2) }
.btn.sm{ border-radius:9px }
.btn:disabled,.btn[disabled],.btn-primary:disabled,.btn-primary[disabled],.btn.sm:disabled,.btn-mini:disabled,.btn-mini[disabled]{ opacity:.5;cursor:not-allowed;box-shadow:none;transform:none;filter:saturate(.65) }

/* — TABLA: hover de fila contenido (nada de "botar") — */
tbody tr:hover{ box-shadow:0 1px 2px rgba(21,28,39,.06),0 4px 10px -4px rgba(21,28,39,.12) }

/* — KPI: coin gris frío con icono monocromo (adiós emoji multicolor "de plantilla") — */
.kpi .kpi-ic{ background:#EDF1F8; border:1px solid #DCE3EE; box-shadow:none; filter:grayscale(1); opacity:.9 }
.kpi .val{ font-weight:600; letter-spacing:-.3px }

/* — Iconos de utilidad de la topbar en monocromo (la campana conserva su rojo) — */
#readerBtn,#helpBtn,#themeBtn{ filter:grayscale(1) opacity(.9) }

/* — Radios de control coherentes (superficie 12 / control 10) — */
.btn,.btn-primary,.btn.sm,.search,.field input,.field select,.field textarea,.toolbar input[type=date],.topbar .site-select,
select,input[type=text],input[type=number],input[type=search],input[type=email],input[type=password],input[type=date],input[type=time]{ border-radius:10px }

/* — Pesos señoriales (800 gritón -> 700/600) + pills de estado afilados — */
.page-head h1,.view-head h1,.drawer header h3,.hmodal header h3{ font-weight:700 }
.pill,.badge,.chip{ font-weight:600;border-radius:8px }
.pill{ box-shadow:inset 0 0 0 1px rgba(21,28,39,.06) }
.pill.on{ box-shadow:inset 0 0 0 1px rgba(23,151,106,.22) }
.pill.crit{ box-shadow:inset 0 0 0 1px rgba(217,58,68,.22) }
.pill.warn{ box-shadow:inset 0 0 0 1px rgba(183,121,31,.22) }

/* — Topbar alineada al MISMO eje vertical que el contenido (32px) — */
.topbar{ padding:0 32px }

/* — Extras premium de bajo riesgo — */
.cards{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) }               /* un KPI suelto no se estira a todo el ancho */
.userchip .avatar{ background:var(--accent);color:#fff;border-color:transparent } /* único punto de color de marca en el chrome */
.field input:focus,.field select:focus,.field textarea:focus,.search:focus,select:focus,input:focus,.login-form input:focus{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),0 0 0 4px rgba(44,107,228,.16) }  /* foco doble-ring estilo Stripe */


/* ============================================================================
   v5 BALANCE — reintroducir COLOR (estaba demasiado grisáceo).
   Mantiene la limpieza (superficies planas, una sola luz, radios), pero
   devuelve el azul de marca a iconos y botones para equilibrar el gris.
   ============================================================================ */
/* iconos del KPI: coin azul de marca + emoji a color (fuera el gris) */
.kpi .kpi-ic{ background:var(--accent-soft); border:1px solid var(--accent-line); box-shadow:none; filter:none; opacity:1 }
/* iconos de utilidad de la topbar: color otra vez (la campana ya tenía su rojo) */
#readerBtn,#helpBtn,#themeBtn{ filter:none }

/* BOTÓN PRIMARIO en AZUL DE MARCA (plano, premium, nada de gris/negro) */
.btn,.btn-primary{ background:var(--accent); border:0; color:#fff; box-shadow:0 1px 2px rgba(16,24,40,.10),0 5px 12px -4px rgba(44,107,228,.38); border-radius:10px; filter:none }
.btn:hover,.btn-primary:hover{ background:#2F74EC; transform:none; box-shadow:0 1px 3px rgba(16,24,40,.12),0 7px 16px -4px rgba(44,107,228,.46); filter:none }
.btn:active,.btn-primary:active{ background:var(--accent-2); transform:none; filter:none }
/* botón secundario claro con acento (equilibra sin saturar de azul) */
.btn.ghost{ background:var(--card); color:var(--ink); border:1px solid var(--line); box-shadow:none }
.btn.ghost:hover{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent-2); transform:none }
.btn:disabled,.btn[disabled],.btn-primary:disabled,.btn-primary[disabled]{ opacity:.5;cursor:not-allowed;box-shadow:none;filter:saturate(.6) }


/* ============================================================================
   v6 — botones azules MÁS SUAVES + tarjetas bien montadas (sin solapes ni
   texto que se salga) + todo más amplio y dimensionado. Solo aspecto.
   ============================================================================ */

/* — Botones azules más CLAROS/suaves (estaban muy fuertes) — */
.btn,.btn-primary{ background:#4E86E9; box-shadow:0 1px 2px rgba(16,24,40,.08),0 3px 8px -3px rgba(44,107,228,.26) }
.btn:hover,.btn-primary:hover{ background:#3E79E3; box-shadow:0 1px 3px rgba(16,24,40,.10),0 5px 12px -4px rgba(44,107,228,.32) }
.btn:active,.btn-primary:active{ background:#2C6BE4 }

/* — KPI: el número se ADAPTA al ancho real de la tarjeta y NUNCA se sale — */
.cards{ grid-template-columns:repeat(auto-fill,minmax(224px,1fr)); gap:18px; margin-bottom:22px }
.kpi{ container-type:inline-size; padding:15px 17px; gap:13px; align-items:center }
.kpi>div{ min-width:0 }                                  /* deja que el texto se encoja dentro de la tarjeta */
.kpi .kpi-ic{ width:40px; height:40px; font-size:19px; flex:none }
.kpi .lbl{ overflow-wrap:anywhere; line-height:1.25 }
.kpi .val{ font-size:clamp(15px, 7.4cqi, 23px); letter-spacing:-.5px; max-width:100% }  /* cqi = escala con la tarjeta */

/* — Anti-desborde: el texto no sale de su tarjeta; la página no hace scroll lateral — */
.panel,.ecard,.tankcard,.vgcard,.alarmbox{ overflow-wrap:anywhere }
.ecard>*,.vgcard>*,.tankcard>*,.panel .grid2>*{ min-width:0 }
.ecard .top,.ecard .row,.drv,.prod-dot{ min-width:0 }
.tankcard svg,.ecard svg,.tankimg-grid svg,.vgcard img{ max-width:100% }
img{ max-width:100%; height:auto }
.table-wrap{ overflow-x:auto }
td,th{ overflow-wrap:break-word }
.main{ overflow-x:hidden }                               /* backstop: sin barra horizontal de página */

/* — Amplitud y dimensión consistentes — */
.grid2,.grid-2eq{ gap:20px }
.panel{ padding:22px }
.entity-grid{ gap:18px }


/* ============================================================================
   v7 — MENOS GRIS: fondo y campos mucho más claros (casi blanco, con un toque
   frío para que las tarjetas se separen), sombra un poco más presente para que
   floten sobre el fondo claro. Solo aspecto.
   ============================================================================ */
:root{
  --bg:#F2F6FB;            /* porcelana MUY clara (antes #EDF1F6, se veía gris) */
  --card-soft:#F6F9FD;     /* campos casi blancos (antes grisáceos) */
  --line:#E6ECF4;          /* hairlines más suaves, menos "gris" de línea */
}
/* Tarjetas: un punto más de sombra para que "floten" sobre el fondo más claro */
.kpi,.panel,.ecard,.tankcard,.vgcard,.alarmbox{ border-color:#E6ECF4 }
.kpi,.panel,.ecard,.tankcard,.vgcard{ box-shadow:0 1px 2px rgba(21,28,39,.05),0 8px 20px -8px rgba(21,28,39,.11) }
.kpi:hover{ box-shadow:0 1px 2px rgba(21,28,39,.05),0 8px 20px -8px rgba(21,28,39,.11) }
.ecard:hover,.tankcard:hover,.vgcard:hover{ transform:translateY(-2px); box-shadow:0 2px 6px rgba(21,28,39,.06),0 16px 34px -12px rgba(21,28,39,.18) }
/* Placeholder de gráfica: casi blanco (menos gris) */
.chart-ph{ background:linear-gradient(180deg,#F6F9FD,#FFFFFF) }


/* ============================================================================
   v8 — paleta SLATE (referencia telemática Samsara/Geotab) + más aire.
   Menos gris (fondo slate-50), colores estándar, KPIs grandes, radio 8, H1 27.
   Mantiene el azul de BOTÓN suave (petición del usuario). Solo aspecto.
   ============================================================================ */
:root{
  --bg:#F8FAFC; --card:#FFFFFF; --card-soft:#F1F5F9; --line:#E2E8F0;
  --ink:#0F172A; --muted:#64748B; --faint:#94A3B8;
  --accent:#2563EB; --accent-2:#1D4ED8; --accent-hover:#1D4ED8;
  --accent-soft:#EEF4FE; --accent-tint:#F5F8FE; --accent-line:#D5E2F8;
  --ok:#10B981; --ok-soft:#ECFDF5; --off:#94A3B8;
  --warn:#F59E0B; --warn-soft:#FEF5E7; --crit:#EF4444; --crit-soft:#FEEDED;
  --fuel:#F59E0B; --fuel-ink:#B45309; --fuel-bg:#FEF5E7;
}
/* — Layout con más aire (estilo telemática) — */
.app{ grid-template-columns:252px 1fr; grid-template-rows:66px 1fr }
.main{ padding:30px 34px }
.topbar{ padding:0 34px }

/* — KPIs grandes, número protagonista — */
.cards{ grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px; margin-bottom:24px }
.kpi{ min-height:112px; padding:18px 20px; gap:14px }
.kpi .kpi-ic{ width:42px; height:42px; font-size:20px }
.kpi .lbl{ font-size:11.5px }
.kpi .val{ font-size:clamp(16px, 7.6cqi, 26px); letter-spacing:-.6px }

/* — Jerarquía: H1 con más presencia (27, no 32: seguimos siendo herramienta densa) — */
.page-head h1,.view-head h1{ font-size:27px; line-height:1.15 }

/* — Botones y controles a radio 8 (mantengo el azul suave pedido) — */
.btn,.btn-primary,.btn.sm,.search,.field input,.field select,.field textarea,.topbar .site-select,
select,input[type=text],input[type=number],input[type=search],input[type=email],input[type=password],input[type=date],input[type=time]{ border-radius:8px }

/* — Tarjetas: hairline slate suave, siguen flotando sobre el fondo casi blanco — */
.kpi,.panel,.ecard,.tankcard,.vgcard,.alarmbox{ border-color:#E7EDF4 }
.kpi,.panel,.ecard,.tankcard,.vgcard{ box-shadow:0 1px 2px rgba(15,23,42,.05),0 8px 20px -8px rgba(15,23,42,.10) }
.kpi:hover{ box-shadow:0 1px 2px rgba(15,23,42,.05),0 8px 20px -8px rgba(15,23,42,.10) }
.ecard:hover,.tankcard:hover,.vgcard:hover{ transform:translateY(-2px); box-shadow:0 2px 6px rgba(15,23,42,.06),0 16px 34px -12px rgba(15,23,42,.18) }


/* ============================================================================
   v9 — MÁS BLANCO + MUCHO ESPACIO (menos gris todavía). Fondo casi blanco,
   bordes muy suaves (menos líneas grises), campos blancos, más aire. Solo aspecto.
   ============================================================================ */
:root{
  --bg:#FCFDFF;            /* casi blanco puro (apenas un hilo de tinte para separar tarjetas) */
  --card-soft:#F7FAFD;
  --line:#EAEFF5;          /* hairlines MUY suaves: menos "gris de línea" */
  --faint:#9BA6B4;
}
/* Bordes de tarjeta y tabla más suaves = menos rejilla gris */
.kpi,.panel,.ecard,.tankcard,.vgcard,.alarmbox{ border-color:#E7EDF4 }
tbody td{ border-color:#EEF2F7 }
thead th{ border-bottom-color:#EAEFF5 }
tbody tr:hover td{ border-color:var(--accent-line) }
/* Tarjetas: sombra un pelín más presente para separarse del fondo casi blanco */
.kpi,.panel,.ecard,.tankcard,.vgcard{ box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 26px -10px rgba(15,23,42,.10) }
.kpi:hover{ box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 26px -10px rgba(15,23,42,.10) }
.ecard:hover,.tankcard:hover,.vgcard:hover{ transform:translateY(-2px); box-shadow:0 2px 6px rgba(15,23,42,.05),0 18px 36px -12px rgba(15,23,42,.16) }

/* Campos BLANCOS (no grises) con su borde fino, estilo limpio */
.field input,.field select,.field textarea,.search,.topbar .site-select,
input[type=text],input[type=number],input[type=search],input[type=email],input[type=password],input[type=date]{ background:#FFFFFF }

/* MUCHO ESPACIO EN BLANCO */
.main{ padding:34px 40px }
.cards{ gap:24px; margin-bottom:28px }
.grid2,.grid-2eq{ gap:24px; margin-bottom:24px }
.panel{ padding:26px }
.kpi{ padding:20px 22px; min-height:116px }
.view-head,.page-head{ margin-bottom:24px }
.toolbar{ margin-bottom:22px }
.table-wrap{ margin-top:6px }


/* ============================================================================
   v10 — MENOS GRIS AÚN + campos BLANCOS + texto NÍTIDO + colores CON VIDA.
   Superficies casi blancas, texto secundario más oscuro (legible), azul de
   marca vivo (no apagado), estados vivos. Solo aspecto.
   ============================================================================ */
:root{
  /* superficies: fuera el gris, todo casi blanco */
  --card-soft:#FAFCFE; --line:#E8EEF6;
  /* TEXTO más oscuro y nítido (adiós "neblina gris") */
  --ink:#0B1220; --muted:#4B5768; --faint:#8A94A6;
  /* AZUL DE MARCA con VIDA (vivo, saturado, no apagado) */
  --accent:#2563EB; --accent-2:#1D4FD0; --accent-hover:#1D4FD0;
  --accent-soft:#E7EFFE; --accent-tint:#F4F8FF; --accent-line:#CBDCFB;
  /* estados VIVOS */
  --ok:#10B981; --ok-soft:#E7FAF2; --warn:#F59E0B; --warn-soft:#FEF4E4; --crit:#EF4444; --crit-soft:#FDEBEB;
  --fuel:#F59E0B; --fuel-bg:#FEF4E4;
}
/* render de texto más nítido */
body{ -webkit-font-smoothing:auto; text-rendering:optimizeLegibility }
/* etiquetas y texto secundario: más contraste = se leen sin esfuerzo */
.muted,.kpi .lbl,.pagesub,.field label,.brand .name small{ color:#4B5768 }
thead th{ color:#43506A }

/* CAMPOS BLANCOS (nada de gris) con borde fino y foco vivo */
.field input,.field select,.field textarea,.search,.topbar .site-select,
input[type=text],input[type=number],input[type=search],input[type=email],input[type=password],input[type=date],input[type=time],select{ background:#FFFFFF; border-color:#DCE3EE; color:var(--ink) }
.field input::placeholder,.search::placeholder,input::placeholder{ color:#94A0B2 }
.field input:disabled,.field select:disabled,input:disabled,.field input[disabled]{ background:#F7FAFD; color:#5B6675 }
.field input:focus,.field select:focus,.field textarea:focus,.search:focus,select:focus,input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.18) }

/* BOTÓN azul VIVO (con vida, ni pálido ni negro) */
.btn,.btn-primary{ background:#3B7BF0; box-shadow:0 1px 2px rgba(16,24,40,.08),0 4px 10px -4px rgba(37,99,235,.34) }
.btn:hover,.btn-primary:hover{ background:#2C6BE4; box-shadow:0 1px 3px rgba(16,24,40,.10),0 6px 14px -4px rgba(37,99,235,.42) }
.btn:active,.btn-primary:active{ background:var(--accent-2) }

/* KPI coin con más vida (azul un pelín más saturado) */
.kpi .kpi-ic{ background:#E7EFFE; border-color:#CBDCFB }
/* enlaces y chips más vivos */
a.link{ color:var(--accent) }
.chip{ background:var(--accent-soft); color:var(--accent-2) }