/* =========================================================
   Sistema de diseño — Control de Baterías y Luces
   Tema: herramienta industrial real, no dashboard SaaS.
   Color: grafito cálido (carcasa de batería) + papel (formulario
   físico) + ámbar de peligro (etiquetas de advertencia reales).
   Tipografía: Big Shoulders Stencil (marcaje de almacén, con
   moderación) + IBM Plex Sans/Mono (sistema técnico deliberado).
   Firma: la celda de batería — badges, KPIs, loader y barra de
   progreso tienen la silueta de una pila real (cuerpo + terminal).
   Modo claro = default (se usa al sol, junto a un vehículo).
   ========================================================= */

:root {
  /* Paleta Zoho moderna */
  /* Oscuros */
  --graphite-950: #0F172A;
  --graphite-900: #1E293B;
  --graphite-800: #334155;
  --graphite-700: #475569;

  /* Claros */
  --paper-100: #FFFFFF;
  --paper-200: #F4F7FB;
  --paper-300: #E8EEF7;

  /* Texto */
  --ink-900: #1E293B;
  --ink-700: #334155;
  --ink-500: #64748B;
  --ink-300: #94A3B8;

  /* Color principal del sistema */
  /* Color azul principal */
  --hazard:#2563EB;
  /* Azul más oscuro para hover */
  --hazard-strong:#1D4ED8;
  --hazard-ink: #FFFFFF;
   /* Azul transparente utilizado en botones activos */
  --hazard-soft:rgba(37,99,235,.18);

  /* Lenguaje de estado (gauge de carga real) */
  --st-almacen: #2F7D5A;
  --st-almacen-bg: rgba(47, 125, 90, 0.14);
  --st-retirada: var(--hazard);
  --st-retirada-bg: var(--hazard-soft);
  --st-produccion: #3E6E92;
  --st-produccion-bg: rgba(62, 110, 146, 0.14);
  --st-tienda: #7A5C99;
  --st-tienda-bg: rgba(122, 92, 153, 0.14);
  --st-vehicular: #B5562A;
  --st-vehicular-bg: rgba(181, 86, 42, 0.14);
  --st-extraviada: #B23B30;
  --st-extraviada-bg: rgba(178, 59, 48, 0.13);
  --st-baja: #6B6255;
  --st-baja-bg: rgba(107, 98, 85, 0.14);

  /* Alias de compatibilidad: algunos componentes referencian estas variables directamente
     en estilos inline (style={{ color: 'var(--estado-retirada)' }}). */
  --estado-almacen: var(--st-almacen);
  --estado-retirada: var(--st-retirada);
  --estado-produccion: var(--st-produccion);
  --estado-tienda: var(--st-tienda);
  --estado-extraviada: var(--st-extraviada);
  --estado-baja: var(--st-baja);

  --bg-app:#EEF3FA;
  --bg-surface:#FFFFFF;
  --bg-surface-2:#F7F9FC;
  --border:#D9E2EC;
  --text-primary:#1E293B;
  --text-secondary:#64748B;

  --accent: var(--hazard);
  --accent-dark: var(--hazard-strong);
  --accent-soft: var(--hazard-soft);
  --accent-ink: var(--hazard-ink);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow-sm:0 2px 6px rgba(15,23,42,.05);
  --shadow-md:0 8px 22px rgba(15,23,42,.08);
  --shadow-lg:0 20px 45px rgba(15,23,42,.12);

  --font-display: 'Inter', sans-serif;
  --font-ui: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --sidebar-w: 244px;
  --topbar-h: 62px;
  /* ===== SIDEBAR ===== */

  --sidebar-bg:
  linear-gradient(180deg,#1E3A8A 0%,#1E40AF 100%);

  --sidebar-text:#F8FAFC;

  --sidebar-hover:rgba(255,255,255,.12);

  --sidebar-active-bg:#FFFFFF;

  --sidebar-active-text:#1E40AF;

  --sidebar-border:rgba(255,255,255,.08);

  --sidebar-shadow:0 25px 40px rgba(0,0,0,.12);

  --sidebar-section:rgba(255,255,255,.55);

  --sidebar-footer-border:rgba(255,255,255,.12);

  --sidebar-avatar-bg:#FFFFFF;

  --sidebar-avatar-text:#2563EB;
}

[data-theme='dark'] {
  /* Fondo principal de toda la aplicación */
  --bg-app:#0F172A;
  /* Fondo de tarjetas, tablas, formularios y paneles */
  --bg-surface:#1E293B;
  /* Fondo de elementos secundarios (inputs, filtros, encabezados, etc.) */
  --bg-surface-2:#273449;
  /* Color de todos los bordes */
  --border:#334155;
  /* Texto principal */
  --text-primary:#F8FAFC;
  /* Texto secundario */
  --text-secondary:#CBD5E1;
  /* ===== KPI ===== */
  --kpi-tab-top:#94A3B8;
  --kpi-tab-bottom:#64748B;
  /* Sidebar Dark */
  --graphite-950:#111827;    
  --graphite-900:#1B2535;
  --graphite-800:#253247;
  --graphite-700:#334155;
  /* Sombras */
  --shadow-sm:0 2px 6px rgba(0,0,0,.20);
  /* Sombra utilizada en tarjetas y ventanas */
  --shadow-md:0 10px 25px rgba(0,0,0,.45);
  --shadow-lg:0 18px 40px rgba(0,0,0,.45);
  /* ===== SIDEBAR DARK ===== */
  --sidebar-bg:linear-gradient(180deg,#111827 0%,#1F2937 100%);
  --sidebar-text:#F8FAFC;
  --sidebar-hover:rgba(255,255,255,.05);
  --sidebar-active-bg:#334155;
  --sidebar-active-text:#FFFFFF;
  --sidebar-border:rgba(255,255,255,.06);
  --sidebar-shadow:none;
  --sidebar-section:rgba(255,255,255,.45);
  --sidebar-footer-border:rgba(255,255,255,.08);
  --sidebar-avatar-bg:#475569;
  --sidebar-avatar-text:#FFFFFF;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg-app);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
}

#root { min-height: 100vh; }
code, .mono { font-family: var(--font-mono); }
button, input, select, textarea { font-family: inherit; }
a { color: inherit; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible {
  outline: 2px solid var(--hazard);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Firma: la celda de batería (badge/loader/KPI) ---------- */
.cell-nub {
  content: '';
  position: absolute;
  top: -7px;
  width: 22px;
  height: 7px;
  border-radius: 2px 2px 0 0;
  background: var(--hazard);
}

/* ---------- Boot loader: una celda "cargando" ---------- */
.boot-loader {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--paper-300);
  background: var(--graphite-950);
}
.boot-loader__mark {
  position: relative;
  width: 46px; height: 74px;
  border: 2.5px solid var(--paper-200);
  border-radius: 4px;
  overflow: hidden;
}
.boot-loader__mark::before {
  content: ''; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 8px; background: var(--paper-200); border-radius: 2px 2px 0 0;
}
.boot-loader__mark::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--hazard);
  animation: charging 1.5s ease-in-out infinite;
}
@keyframes charging { 0% { height: 10%; } 50% { height: 92%; } 100% { height: 10%; } }
.boot-loader p { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-300); }

/* ---------- Login ---------- */
.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--graphite-950);
}
@media (max-width: 860px) { .login-screen { grid-template-columns: 1fr; } }

.login-hero {
  position: relative;
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--graphite-950);
  color: var(--paper-100);
  overflow: hidden;
  border-right: 6px solid var(--hazard);
}
@media (max-width: 860px) { .login-hero { display: none; } }
.login-hero::before {
  /* franja de peligro sutil, como cinta de piso de almacén */
  content: ''; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px;
  background: repeating-linear-gradient(45deg, var(--hazard) 0 14px, transparent 14px 28px);
  opacity: .09;
}

.login-hero__brand { position: absolute; top: 56px; left: 56px; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; color: var(--hazard); }
.login-hero__title {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 52px; font-weight: 600; line-height: .98; max-width: 480px; margin: 0 0 14px 0;
  letter-spacing: .01em;
}
.login-hero__subtitle { color: var(--ink-300); max-width: 420px; line-height: 1.6; font-size: 15px; }
.login-hero__footer {
  position: absolute;
  bottom: 40px;
  left: 56px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-300);
  letter-spacing: .04em;
  opacity: .85;
}

.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: var(--bg-app);
  position: relative;
}
.login-footer-mobile {
  display: none;
}
@media (max-width: 860px) {
  .login-footer-mobile {
    display: block;
    position: absolute;
    bottom: 20px;
    left: 24px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-secondary);
    letter-spacing: .03em;
    opacity: .85;
  }
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 36px 32px;
}
.login-card h1 { font-size: 26px; margin: 0 0 6px; }
.login-card p.hint { color: var(--text-secondary); margin: 0 0 28px; font-size: 14px; font-family: var(--font-ui); text-transform: none; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 14.5px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--hazard);
  box-shadow: 0 0 0 3px var(--hazard-soft);
  outline: none;
}
.field-error { color: var(--st-extraviada); font-size: 12.5px; margin-top: 4px; }

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 18px;
  border:1px solid transparent;
  border-radius:12px;
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  cursor:pointer;
  transition:
      background .25s ease,
      color .25s ease,
      border-color .25s ease,
      box-shadow .25s ease,
      transform .20s ease;
}
.btn:active { transform:scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { 
  background:var(--hazard);
  color:white;
  border-color:transparent;
  box-shadow:0 8px 20px rgba(37,99,235,.20); 
}
.btn-primary:hover:not(:disabled) { 
  background:var(--hazard-strong);
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(37,99,235,.30);
 }
.btn-block { width: 100%; }
.btn-ghost { 
  background:transparent;
  color:var(--text-primary);
  border:1px solid var(--border); 
}
.btn-ghost:hover:not(:disabled) { 
  background:var(--bg-surface-2);
  border-color:var(--hazard);
  color:var(--hazard); 
}
.btn-danger { 
  background:var(--st-extraviada);
  color:white;
  box-shadow:0 8px 20px rgba(178,59,48,.18); 
}
.btn-sm { 
  padding:8px 14px;
  font-size:12px;
  border-radius:10px; 
}
.login-error {
  background: var(--st-extraviada-bg);
  color: var(--st-extraviada);
  border-left: 3px solid var(--st-extraviada);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 12px;
  font-size: 13.5px;
  margin-bottom: 16px;
  font-family: var(--font-ui);
}


/* ---------- App shell ---------- */
/* =========================================================
   ESTRUCTURA PRINCIPAL
   El sidebar ocupa la altura de la pantalla.
   El contenido derecho tiene su propio scroll vertical.
   ========================================================= */
.app-shell {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}
.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    align-self: flex-start;
    border-right: 1px solid var(--sidebar-border);
    box-shadow: var(--sidebar-shadow);
    transition: all .25s ease;
}
.sidebar__nav,
.sidebar > nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 45;
}
.sidebar__brand {
    display:flex;
    align-items:center;
    gap:14px;
    padding:22px 22px 18px;
    font-family:var(--font-ui);
    font-size:20px;
    font-weight:700;
    letter-spacing:-0.02em;
    color:white;
    flex-shrink: 0;
}
.sidebar__brand .badge-dot { width: 9px; height: 12px; border-radius: 1.5px; background: var(--hazard); position: relative; flex-shrink: 0; }
.sidebar__brand .badge-dot::before { content:''; position:absolute; top:-3px; left:50%; transform:translateX(-50%); width:8px; height:3px; background:var(--hazard); border-radius:1px 1px 0 0; }

.sidebar__section { 
    padding:18px 20px 8px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--sidebar-section); 
  }

.sidebar__link {
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:13px 18px;
    margin:4px 12px;
    border-radius:12px;
    border:none;
    background:transparent;
    color:#E2E8F0;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    width:calc(100% - 24px);
    transition:.25s ease;
}
.sidebar__text{
    flex:1;
    text-align:left;
    line-height:1.25;
    white-space:normal;
    word-break:break-word;
}
.sidebar__link:hover { 
    background:var(--sidebar-hover);
    transform:translateX(4px);
  }
.sidebar__link.active { 
    background:var(--sidebar-active-bg);
    color:var(--sidebar-active-text);
    font-weight:700;
    border-left:none;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
  }
.sidebar__link.active .icon { color:#2563EB; }
.sidebar__link .icon { 
    width:20px;
    height:20px;
    color:#CBD5E1;
    flex-shrink:0; 
  }

.sidebar__footer { 
    margin-top:auto;
    padding:16px 18px max(16px, env(safe-area-inset-bottom, 16px)) 18px;
    border-top:1px solid var(--sidebar-footer-border); 
    flex-shrink: 0;
    background: var(--sidebar-bg);
  }
.sidebar__user { display: flex; align-items: center; gap: 10px; }
.sidebar__avatar {
    width:42px;
    height:42px;
    border-radius:12px;
    background:var(--sidebar-avatar-bg);
    color:var(--sidebar-avatar-text);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:16px;
}
.sidebar__user-info { min-width: 0; }
.sidebar__user-name { font-size: 13px; font-weight: 700; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__user-role { font-size: 11.5px; color: var(--ink-300); font-family: var(--font-mono); text-transform: uppercase; }

.main-col {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* El contenido derecho controla su propio scroll */
    overflow-y: auto;
    overflow-x: hidden;
    /* Scroll más limpio en tablets/táctiles */
    -webkit-overflow-scrolling: touch;
}
.topbar {
    height: var(--topbar-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 24px;
    background:var(--bg-surface);
    border-bottom:1px solid var(--border);
    box-shadow:0 2px 10px rgba(15,23,42,.05);
    backdrop-filter:blur(14px);
    position:sticky;
    top:0;
    z-index:20;
    transition:background .25s ease,
              border-color .25s ease,
              box-shadow .25s ease;
}
.topbar__title { 
    font-family:var(--font-display);
    font-size:30px;
    font-weight:700;
    color:var(--text-primary);
    letter-spacing:-.02em;
}
.topbar__actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--bg-surface);
    color:var(--text-secondary);
    cursor:pointer;
    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .20s ease;
}
.icon-btn:hover { 
    background:var(--bg-surface-2);
    color:var(--hazard);
    border-color:rgba(37,99,235,.35);
    box-shadow:0 6px 16px rgba(37,99,235,.12);
    transform:translateY(-2px);
}
.icon-btn:active{
    transform:scale(.96);
}
.icon-btn:focus-visible{
    outline:none;
    box-shadow:
        0 0 0 3px rgba(37,99,235,.18);
}
.content { padding: 24px; max-width: 1400px; width: 100%; margin: 0 auto; }

/* ---------- KPI cards: silueta de celda de batería ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px 14px; margin-bottom: 26px; margin-top: 10px; }
.kpi-card{
    position:relative;
    background:var(--bg-surface);
    border:1px solid var(--border);
    border-radius:16px;
    padding:18px 18px 16px;
    box-shadow:var(--shadow-sm);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}
.kpi-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
    border-color:rgba(37,99,235,.25);
}
.kpi-card::before { content:"";
    position:absolute;
    top:-8px;
    left:20px;
    width:26px;
    height:8px;
    border-radius:4px 4px 0 0;
    background:linear-gradient(
      180deg,
      var(--kpi-tab-top) 0%,
      var(--kpi-tab-bottom) 100%
    );
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.45),
        0 2px 4px rgba(0,0,0,.08);}
/*Darle enfasis al numero y texto de la tarjeta*/
.kpi-card__label { 
    font-size:11px;
    color:var(--text-secondary);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.12em;
    line-height:1.4;
  }
.kpi-card__value { 
    font-size:46px;
    font-weight:700;
    margin-top:10px;
    font-family:var(--font-display);
    line-height:1;
    color:var(--text-primary);
  }
  /*Para que la barra de color se vea mejor*/
.kpi-card__accent { 
    height:4px;
    width:36px;
    margin-top:14px;
    border-radius:999px; 
  }

/* ==========================================================
   PANEL PRINCIPAL
   Contenedor utilizado en todas las páginas del sistema
========================================================== */

.panel{
    background:var(--bg-surface);
    /* borde suave */
    border:1px solid var(--border);
    /* esquinas más modernas */
    border-radius:16px;
    /* separación interna */
    padding:24px;
    /* separación entre paneles */
    margin-bottom:24px;
    /* sombra elegante */
    box-shadow:var(--shadow-sm);
    /* transición para hover */
    transition:
        box-shadow .25s ease,
        border-color .25s ease,
        transform .25s ease;
}
/* efecto al pasar el mouse */
.panel:hover{
  border-color:rgba(37,99,235,.18);
  box-shadow:var(--shadow-md);
}
.panel__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel__title { font-family: var(--font-display); font-size: 16px; letter-spacing: .01em; }

.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
@media (max-width: 980px) { .grid-2 { grid-template-columns: 1fr; } }
.grid-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }

/* ---------- Badges de estado: "dot" con forma de celda ---------- */
.badge-estado {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: 11.5px; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .03em;
}
.badge-estado .dot { position: relative; width: 6px; height: 9px; border-radius: 1px; flex-shrink: 0; }
.badge-estado .dot::before { content: ''; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 3px; height: 2px; border-radius: .5px .5px 0 0; background: inherit; }
.badge-estado--almacen { background: var(--st-almacen-bg); color: var(--st-almacen); }
.badge-estado--almacen .dot { background: var(--st-almacen); }
.badge-estado--retirada { background: var(--st-retirada-bg); color: var(--hazard-ink); }
.badge-estado--retirada .dot { background: var(--st-retirada); }
.badge-estado--produccion { background: var(--st-produccion-bg); color: var(--st-produccion); }
.badge-estado--produccion .dot { background: var(--st-produccion); }
.badge-estado--tienda { background: var(--st-tienda-bg); color: var(--st-tienda); }
.badge-estado--tienda .dot { background: var(--st-tienda); }
.badge-estado--vehicular { background: var(--st-vehicular-bg); color: var(--st-vehicular); }
.badge-estado--vehicular .dot { background: var(--st-vehicular); }
.badge-estado--transito { background: var(--st-produccion-bg); color: var(--st-produccion); }
.badge-estado--transito .dot { background: var(--st-produccion); }
.badge-estado--extraviada { background: var(--st-extraviada-bg); color: var(--st-extraviada); }
.badge-estado--extraviada .dot { background: var(--st-extraviada); }
.badge-estado--baja { background: var(--st-baja-bg); color: var(--st-baja); }
.badge-estado--baja .dot { background: var(--st-baja); }

.badge-pendiente { background: var(--st-retirada-bg); color: var(--hazard-ink); }
.badge-si { background: var(--st-almacen-bg); color: var(--st-almacen); }
.badge-na { background: var(--st-baja-bg); color: var(--st-baja); }
/* SEPARACIÓN ENTRE LOS FILTROS Y LA TABLA */
.history-toolbar {
    margin-bottom: 14px;
}

/* ---------- Tablas ---------- */
.table-wrap { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 900px; }
.data-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-secondary);
  padding: 14px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--bg-surface);
  position: sticky;
  top: 0;
  z-index: 2;
}
/* Evita que la fecha se divida en dos líneas */
.data-table tbody td:first-child {
  white-space: nowrap;
  min-width: 78px;
}
.data-table td{
  padding:16px 14px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
  line-height:1.35;
}
.data-table tbody tr{
  transition:background .18s ease;
}
.data-table tbody tr:hover td{
  background:var(--bg-surface-2);
}
.data-table td.mono{
  font-family:var(--font-mono);
  font-size:13px;
  /* Evita que el código de batería se divida en dos líneas */
  white-space:nowrap;
  /* Da un poco más de espacio a la columna Código */
  min-width:110px;
}
/* Evita que la fecha se divida en dos líneas */
.fecha-tabla {
  white-space: nowrap;
}
/* Ajuste de la columna Código para desplazar
   ligeramente las columnas siguientes hacia la derecha */
.data-table th:nth-child(2){
  min-width:110px;
}  
.table-empty { padding: 44px 20px; text-align: center; color: var(--text-secondary); }
.table-empty__title { font-family: var(--font-display); font-size: 17px; color: var(--text-primary); margin-bottom: 4px; text-transform: uppercase; }
/* FILTROS DEL HISTORIAL*/
.filters-row{
    display:flex;
    /* Todos los filtros en una línea */
    flex-wrap:nowrap;
    /* Alinea todos los controles por la parte inferior */
    align-items:flex-end;
    /* Espacio entre filtros */
    gap:18px;
    /* Ocupa todo el espacio disponible */
    flex:0 0 auto;
    /* Permite que el bloque se reduzca cuando sea necesario */
    min-width:0;
    margin:0;
}
/* Cada filtro (label + input) */
.filters-row .field{
    display:flex;
    flex-direction:column;
    gap:6px;
    /* Todos los filtros tendrán el mismo ancho */
    flex:1;
    /* Evita que sean demasiado pequeños */
    min-width:130px;
    margin:0;
}
/* Títulos Código, Movimiento, Desde... */
.filters-row .field label{
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text-secondary);
    font-family:var(--font-mono);
}
/*BOTONES DE EXPORTACIÓN DEL HISTORIAL*/
.filters-actions{
    display:flex;
    align-items:flex-end;
    gap:10px;
    /* Evita que los botones se encojan */
    flex-shrink:0;
    /* Los empuja hacia la derecha */
    margin-left:auto;
}
.pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 13px; color: var(--text-secondary); font-family: var(--font-mono); }
/* ---------- Barra de carga (Salidas Pendientes de Cierre): celda con relleno proporcional ---------- */
.charge-bar {
  position: relative;
  height: 22px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--bg-surface-2);
  overflow: hidden;
}
.charge-bar::before {
  content: ''; position: absolute; top: -6px; left: 8px; width: 14px; height: 6px;
  background: var(--border); border-radius: 2px 2px 0 0;
}
.charge-bar__fill {
  height: 100%;
  background: var(--st-almacen);
  transition: width .3s ease;
}
.charge-bar__label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-primary); mix-blend-mode: difference;
  filter: invert(1) grayscale(1) contrast(2);
}

/* ---------- Scan screen ---------- */
.scan-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 36px 20px; border-radius: var(--radius-lg);
  background: var(--graphite-950);
  color: white; margin-bottom: 20px; position: relative; overflow: hidden;
  border-bottom: 4px solid var(--hazard);
}
.scan-hero__code-input {
  width: 100%; max-width: 420px;
  font-family: var(--font-mono); font-size: 18px; text-align: center;
  padding: 16px; border-radius: var(--radius-md);
  border: 1.5px dashed rgba(255,255,255,.3);
  background: rgba(255,255,255,.06); color: white;
  letter-spacing: .04em;
}
.scan-hero__code-input::placeholder { color: rgba(255,255,255,.35); }
.scan-hero__code-input:focus { outline: none; border-color: var(--hazard); background: rgba(255,255,255,.1); }
.scan-hero__hint { margin-top: 10px; font-size: 12px; color: var(--ink-300); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .04em; }
.scan-hero__actions { display: flex; gap: 10px; margin-top: 18px; }

.scan-result-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; border-radius: var(--radius-md);
  background: var(--bg-surface-2); border: 1px solid var(--border);
  margin-bottom: 18px; flex-wrap: wrap;
}
.scan-result-card__code { font-family: var(--font-mono); font-size: 19px; font-weight: 700; }
.scan-result-card__meta { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }

.main-tabs-box {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.main-tabs-box__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.movement-type-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.movement-type-tab {
  padding: 9px 16px; border-radius: var(--radius-sm); font-weight: 700; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .02em;
  border: 1.5px solid var(--border); background: var(--bg-surface); cursor: pointer; color: var(--text-secondary);
  transition: all .2s ease;
}
.movement-type-tab.active { border-color: var(--hazard); background: var(--hazard-soft); color: var(--hazard); }
.movement-type-tab:disabled { opacity: .4; cursor: not-allowed; }

/* Sub-botones de condición / tipo (Sin usar / Usada) en Devolución */
.sub-type-tabs { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.sub-type-tab {
  padding: 9px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: 12.5px;
  border: 1.5px solid var(--border);
  background: var(--bg-surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .25s ease;
}
.sub-type-tab:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--graphite-700);
}
.sub-type-tab.active {
  background: #475569;
  color: #FFFFFF !important;
  border-color: #334155;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(71, 85, 105, 0.4);
}
[data-theme='dark'] .sub-type-tab.active {
  background: #334155;
  color: #F8FAFC !important;
  border-color: #64748B;
  box-shadow: 0 0 14px rgba(100, 116, 139, 0.5);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .field.span-2 { grid-column: 1 / -1; }

.auto-fill-preview {
  display: flex; align-items: center; gap: 10px; font-size: 13.5px;
  background: var(--hazard-soft); color: var(--hazard-ink);
  padding: 10px 14px; border-radius: var(--radius-sm); margin: 4px 0 6px;
  font-weight: 600;
}
.auto-fill-preview svg { flex-shrink: 0; }

/* ---------- Lista de escaneo continuo (Ingreso/Salida Masiva) ---------- */
.scan-list { display: flex; flex-direction: column; gap: 1px; max-height: 360px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--border); }
.scan-list__row { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; background: var(--bg-surface); gap: 10px; }
.scan-list__row.is-error { background: var(--st-extraviada-bg); }
.scan-list__row.is-duplicate { background: var(--st-retirada-bg); }
.scan-list__code { font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
.scan-list__error { font-size: 11.5px; color: var(--st-extraviada); }
.scan-list__remove { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; }
.scan-list__remove:hover { color: var(--st-extraviada); }
.scan-list__empty { padding: 32px 16px; text-align: center; color: var(--text-secondary); font-size: 13.5px; }

.scan-counter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.scan-counter {
  flex: 1; min-width: 110px; text-align: center; padding: 10px 8px;
  background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.scan-counter__value { font-family: var(--font-display); font-size: 24px; }
.scan-counter__label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }

/* ---------- Modal cámara ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20,17,12,.72);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal-card {
  background: var(--bg-surface); border-radius: var(--radius-lg);
  width: 100%; max-width: 440px; box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal-card__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.modal-card__title { font-family: var(--font-display); font-size: 16px; letter-spacing: .01em; }
.modal-card__body { padding: 18px; }
.modal-card__footer { padding: 14px 18px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

.scanner-viewport { position: relative; border-radius: var(--radius-md); overflow: hidden; background: black; aspect-ratio: 4/3; }
.scanner-viewport video { width: 100%; height: 100%; object-fit: cover; }
.scanner-frame { position: absolute; inset: 14%; border: 2.5px solid var(--hazard); border-radius: 4px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); }
.scanner-line {
  position: absolute; left: 14%; right: 14%; height: 2px; background: var(--hazard);
  box-shadow: 0 0 8px var(--hazard);
  animation: scanline 1.8s ease-in-out infinite;
}
@keyframes scanline { 0%{top:16%;} 50%{top:82%;} 100%{top:16%;} }
.scanner-error { color: var(--st-extraviada); font-size: 13px; margin-top: 10px; }

/* ---------- Mensajes globales ---------- */
.toast-modal-layer {
  position: fixed;
  inset: 0;
  z-index: 3000;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 16px;
  gap: 10px;
}
.toast-modal {
  pointer-events: auto;
  width: min(520px, 100%);
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 17px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
  animation: message-modal-in .22s ease-out both;
}
.toast-modal--success { border-color: rgba(47, 125, 90, .35); }
.toast-modal--error { border-color: rgba(178, 59, 48, .4); }
.toast-modal--info { border-color: rgba(37, 99, 235, .3); }
.toast-modal__icon {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  display: grid; place-items: center;
}
.toast-modal--success .toast-modal__icon { background: rgba(47,125,90,.12); color: #2F7D5A; }
.toast-modal--error .toast-modal__icon { background: rgba(178,59,48,.12); color: #B23B30; }
.toast-modal--info .toast-modal__icon { background: rgba(37,99,235,.12); color: var(--hazard); }
.toast-modal__content { min-width: 0; flex: 1; }
.toast-modal__title { font-weight: 750; font-size: 14px; margin-bottom: 3px; }
.toast-modal__message { font-size: 13px; line-height: 1.45; color: var(--text-secondary); overflow-wrap: anywhere; }
.toast-modal__close {
  border: 0; background: transparent; color: var(--text-secondary); cursor: pointer;
  font-size: 22px; line-height: 1; padding: 1px 3px; border-radius: 6px;
}
.toast-modal__close:hover { background: var(--bg-muted); color: var(--text-primary); }
@keyframes message-modal-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
.toast-modal.is-exiting { animation: message-modal-out .26s ease-in forwards; }
@keyframes message-modal-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-8px) scale(.98); } }

/* ---------- Combobox con autocompletado y dropdowns ---------- */
.combobox-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 100;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); max-height: 240px; overflow-y: auto;
  color: var(--text-primary);
}
.combobox-option {
  padding: 9px 12px;
  font-size: 13.5px;
  cursor: pointer;
  font-family: var(--font-mono);
  color: var(--text-primary);
  background: transparent;
}
.combobox-option:hover, .combobox-option.is-active {
  background: var(--hazard);
  color: #FFFFFF !important;
}
.combobox-option--empty { color: var(--text-secondary); font-family: var(--font-ui); cursor: default; }
.combobox-option--empty:hover { background: none; color: var(--text-secondary); }

select option {
  background-color: var(--bg-surface);
  color: var(--text-primary);
}

/* ---------- Modal grande (info de batería) ---------- */
.modal-card--lg { max-width: 760px; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px 16px; }
.info-grid dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); font-family: var(--font-mono); }
.info-grid dd { margin: 3px 0 0; font-size: 14px; font-weight: 600; }
.modal-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.modal-tab { padding: 9px 14px; font-size: 13px; font-weight: 600; border: none; background: none; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; }
/* Modo claro: tab activo usa color sólido oscuro (#1E293B) para distinguirse claramente del inactivo (#64748B) */
.modal-tab.active { color: #1E293B; font-weight: 700; border-bottom-color: var(--hazard); }
[data-theme='dark'] .modal-tab.active { color: #FFFFFF; border-bottom-color: var(--hazard); }
.text-muted { color: var(--text-secondary); }
.stack-y > * + * { margin-top: 10px; }
/*CONTENEDOR DE FILTROS + BOTONES*/
.flex-between{
    display:flex;
    /* Coloca filtros y botones en una misma fila */
    align-items:flex-end;
    /* Empuja los botones completamente hacia la derecha */
    justify-content:space-between;
    /* Permite que en pantallas pequeñas bajen de línea */
    flex-wrap:nowrap;
    /* Espacio entre ambos bloques */
    gap:20px;
    /* Ocupa todo el ancho del panel */
    width:100%;
    /* Espacio entre los filtros/botones y la tabla */
    margin-bottom:18px;
}
.tag-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-sm); background: var(--bg-surface-2); font-size: 11.5px; font-weight: 600; border: 1px solid var(--border); font-family: var(--font-mono); }
.dialog-overlay { position: fixed; inset: 0; background: rgba(20,17,12,.65); display: flex; align-items: center; justify-content: center; z-index: 150; padding: 20px; }
.dialog-card { background: var(--bg-surface); border-radius: var(--radius-md); max-width: 380px; width: 100%; padding: 22px; box-shadow: var(--shadow-lg); }
.dialog-card h3 { margin: 0 0 8px; font-size: 18px; }
.dialog-card p { color: var(--text-secondary); font-size: 14px; margin: 0 0 20px; font-family: var(--font-ui); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
/* =========================================================
   RESPONSIVE — TABLET Y MÓVIL
   ========================================================= */
/* Evita que toda la aplicación genere scroll horizontal */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
#root {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}
.main-col {
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.content {
  width: 100%;
  max-width: 1400px;
  min-width: 0;
  margin: 0 auto;
}
.mobile-only {
  display: none !important;
}

/* =========================================================
   TABLET (Redmi Pad, iPad, etc.)
   ========================================================= */
@media (max-width: 1024px) {
  .mobile-only {
    display: inline-flex !important;
  }
  .content {
    padding: 20px;
  }
  .panel {
    padding: 20px;
  }
  .topbar {
    padding: 0 20px;
  }
  .topbar__title {
    font-size: 25px;
  }
  .flex-between {
    width: 100%;
    min-width: 0;
  }
  .filters-row {
    min-width: 0;
  }
  .filters-row .field {
    min-width: 120px;
  }
  .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
  /* Sidebar desplegable en tablets */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    width: var(--sidebar-w);
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .main-col {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}
/* =========================================================
   TABLET PEQUEÑA / MÓVIL
   ========================================================= */
@media (max-width: 900px) {
  .content {
    width: 100%;
    max-width: 100%;
    padding: 18px;
  }
  /* Barra superior */
  .topbar {
    width: 100%;
    padding: 0 18px;
  }
  .topbar__title {
    font-size: 25px;
  }
  /* Filtros */
  .flex-between {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    width: 100%;
  }
  .filters-row {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    gap: 12px;
  }
  .filters-row .field {
    flex: 1 1 calc(50% - 6px);
    min-width: 140px;
    margin: 0;
  }
  .filters-actions {
    display: flex;
    flex: 1 1 100%;
    width: 100%;
    justify-content: flex-end;
    gap: 10px;
    margin-left: 0;
  }
  /* Tabla */
  .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table.data-table {
    min-width: 900px;
  }
  /* Grids */
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .grid-charts {
    grid-template-columns: 1fr;
  }
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* =========================================================
   IPAD MINI / TABLET PEQUEÑA
   ========================================================= */
@media (max-width: 768px) {
  .content {
    padding: 14px;
  }
  .panel {
    padding: 16px;
    border-radius: 14px;
  }
  /* Barra superior */
  .topbar {
    padding: 0 14px;
  }
  .topbar__title {
    font-size: 22px;
  }
  /* KPI */
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .kpi-card {
    padding: 15px;
  }
  .kpi-card__value {
    font-size: 38px;
  }
  /* Filtros */
  .filters-row {
    gap: 10px;
  }
  .filters-row .field {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
  }
  /* Botones de exportación */
  .filters-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .filters-actions .btn {
    flex: 0 0 auto;
  }
  /* Tabs */
  .movement-type-tabs {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .movement-type-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  /* Tabla */
  .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
  table.data-table {
    min-width: 900px;
  }
}
/* =========================================================
   MÓVIL
   ========================================================= */
@media (max-width: 640px) {
  .content {
    padding: 12px;
  }
  .panel {
    padding: 14px;
    border-radius: 12px;
  }
  /* Barra superior */
  .topbar {
    padding: 0 12px;
  }
  .topbar__title {
    font-size: 20px;
  }
  /* KPI */
  .kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .kpi-card {
    padding: 13px;
  }
  .kpi-card__value {
    font-size: 34px;
  }
  /* Filtros */
  .filters-row {
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .filters-row .field {
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
  }
  /* Botones */
  .filters-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: stretch;
  }
  .filters-actions .btn {
    flex: 1 1 0;
    min-width: 0;
  }
  /* Formularios */
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-grid .field.span-2 {
    grid-column: auto;
  }
  /* Tabla */
  .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
  table.data-table {
    min-width: 850px;
  }
  /* Paginación */
  .pagination {
    flex-wrap: wrap;
    gap: 10px;
  }
}
/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */
@media (max-width: 480px) {
  .content {
    padding: 10px;
  }
  .panel {
    padding: 12px;
  }
  /* KPI */
  .kpi-grid {
    grid-template-columns: 1fr;
  }
  /* Barra superior */
  .topbar__title {
    font-size: 18px;
  }
  /* Botones de exportación */
  .filters-actions {
    flex-direction: column;
  }
  .filters-actions .btn {
    width: 100%;
    flex: 1 1 auto;
  }
  /* Tabs */
  .movement-type-tabs {
    overflow-x: auto;
  }
  /* Modales */
  .modal-overlay,
  .dialog-overlay {
    padding: 10px;
  }
  .modal-card,
  .dialog-card {
    max-width: 100%;
  }
}
/* BADGES DE MOVIMIENTO */
.movement-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:90px;
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.02em;
    border:1px solid transparent;
}
/* Entrada */
.movement-entrada{
    color:#18794E;
    background:rgba(24,121,78,.12);
    border-color:rgba(24,121,78,.18);
}
/* Salida */
.movement-salida{
    color:#B54708;
    background:rgba(245,158,11,.14);
    border-color:rgba(245,158,11,.22);
}
/* Devolución */
.movement-devolucion{
    color:#2563EB;
    background:rgba(37,99,235,.12);
    border-color:rgba(37,99,235,.20);
}
/* Instalación */
.movement-instalacion{
    color:#7A5C99;
    background:rgba(122,92,153,.12);
    border-color:rgba(122,92,153,.20);
}

/* ---------- Badges de estado de devolución (historial de movimientos) ---------- */
/* Mismo sistema que movement-badge: pill ovalado, fondo pastel, tipografía uniforme */
.badge-devolucion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    border: 1px solid transparent;
    font-family: var(--font-ui);
}
.badge-devolucion--pendiente {
    color: #B54708;
    background: rgba(245,158,11,.14);
    border-color: rgba(245,158,11,.22);
}
.badge-devolucion--completado {
    color: #18794E;
    background: rgba(24,121,78,.12);
    border-color: rgba(24,121,78,.18);
}
.badge-devolucion--usada {
    color: #2563EB;
    background: rgba(37,99,235,.12);
    border-color: rgba(37,99,235,.20);
}
[data-theme='dark'] .badge-devolucion--pendiente {
    color: #FDE047;
    background: rgba(245,158,11,.18);
    border-color: rgba(245,158,11,.28);
}
[data-theme='dark'] .badge-devolucion--completado {
    color: #6EE7B7;
    background: rgba(24,121,78,.18);
    border-color: rgba(24,121,78,.28);
}
[data-theme='dark'] .badge-devolucion--usada {
    color: #93C5FD;
    background: rgba(37,99,235,.18);
    border-color: rgba(37,99,235,.28);
}

/* ---------- Modal de código ya registrado ---------- */
.modal-overlay--alert {
  background: rgba(15, 23, 42, .78);
  backdrop-filter: blur(5px);
  z-index: 300;
}
.modal-card--registered {
  max-width: 540px;
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
  animation: modal-alert-in .18s ease-out;
}
@keyframes modal-alert-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-alert-icon {
  width: 58px;
  height: 58px;
  margin: 22px auto 0;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--st-extraviada);
  background: rgba(178, 59, 48, .12);
  border: 1px solid rgba(178, 59, 48, .24);
}
.modal-card__body--alert { padding: 16px 24px 20px; }
.modal-alert-eyebrow {
  text-align: center;
  margin-top: 2px;
  color: var(--st-extraviada);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.modal-alert-title {
  margin: 5px 0 8px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--text-primary);
}
.modal-alert-text {
  margin: 0 auto;
  max-width: 440px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.55;
}
.modal-alert-codes {
  margin-top: 17px;
  padding: 11px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.modal-alert-codes__label {
  margin: 0 4px 7px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.modal-alert-code {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}
.modal-alert-code + .modal-alert-code { margin-top: 6px; }
.modal-alert-code svg { color: var(--st-extraviada); flex: 0 0 auto; }
.modal-alert-help {
  display: flex;
  gap: 11px;
  margin-top: 14px;
  padding: 12px 13px;
  border-radius: var(--radius-md);
  background: var(--hazard-soft);
  border: 1px solid rgba(37, 99, 235, .18);
  color: var(--text-primary);
  font-size: 12.5px;
  line-height: 1.45;
}
.modal-alert-help__icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hazard);
  background: rgba(37, 99, 235, .10);
}
.modal-alert-help strong { font-weight: 750; }
.modal-alert-help p { margin: 3px 0 0; color: var(--text-secondary); }
.modal-card__footer--alert { padding: 13px 20px; }
.modal-card__footer--alert .btn-primary { display: inline-flex; align-items: center; gap: 7px; }

/* =========================================================
   DASHBOARD — KPIs OPERATIVOS
   ========================================================= */
.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.dashboard-kpi {
  --kpi-accent: var(--hazard);
  appearance: none;
  width: 100%;
  min-width: 0;
  text-align: left;
  font: inherit;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 17px 17px 14px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dashboard-kpi::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--kpi-accent);
}
.dashboard-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--kpi-accent) 32%, var(--border));
}
.dashboard-kpi:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--kpi-accent) 22%, transparent);
  outline-offset: 2px;
}
.dashboard-kpi__top,
.dashboard-kpi__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dashboard-kpi__label {
  min-width: 0;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-secondary);
}
.dashboard-kpi__icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--kpi-accent);
  background: color-mix(in srgb, var(--kpi-accent) 10%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, var(--kpi-accent) 18%, var(--border));
}
.dashboard-kpi__value {
  display: block;
  margin: 12px 0 9px;
  font-family: var(--font-display);
  font-size: clamp(32px, 3.1vw, 44px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.03em;
}
.dashboard-kpi__bottom {
  min-height: 20px;
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.35;
}
.dashboard-kpi__bottom svg { color: var(--kpi-accent); flex: 0 0 auto; }
.dashboard-kpi--stock { --kpi-accent: #2F7D5A; }
.dashboard-kpi--vehicle { --kpi-accent: #2563EB; }
.dashboard-kpi--returns { --kpi-accent: #3E6E92; }
.dashboard-kpi--guarantee { --kpi-accent: #0F766E; }
.dashboard-kpi--no-guarantee { --kpi-accent: #7A5C99; }
.dashboard-kpi--provider { --kpi-accent: #B37D00; }

/* Modal de medición de voltaje — mismo lenguaje visual que el modal de batería registrada */
.modal-overlay--voltage {
  z-index: 400;
  background: rgba(15, 23, 42, .78);
  backdrop-filter: blur(5px);
}
.modal-card--voltage {
  max-width: 500px;
  border: 1px solid rgba(148, 163, 184, .22);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
  animation: modal-voltage-in .18s ease-out;
}
@keyframes modal-voltage-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-card__header--voltage { padding: 18px 20px; }
.voltage-modal__eyebrow {
  color: var(--hazard);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .09em;
  margin-bottom: 4px;
}
.voltage-modal__title { font-size: 20px; }
.voltage-modal__body { display: flex; flex-direction: column; gap: 14px; }
.voltage-modal__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border-radius: 12px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
}
.voltage-modal__battery-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--hazard);
  background: var(--hazard-soft);
}
.voltage-modal__label { color: var(--text-secondary); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 750; }
.voltage-modal__model { margin-top: 2px; font-size: 14px; font-weight: 750; }
.voltage-modal__meta { margin-top: 3px; color: var(--text-secondary); font-size: 11.5px; }
.voltage-modal__rule {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.voltage-modal__rule-item { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.voltage-modal__rule-item strong { font-size: 13px; color: var(--text-primary); }
.voltage-modal__rule-item span { font-size: 10.5px; color: var(--text-secondary); }
.voltage-modal__rule-divider { width: 1px; height: 28px; background: var(--border); }
.voltage-modal__field label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 750; }
.voltage-input-wrap { position: relative; }
.voltage-input-wrap input { width: 100%; padding: 13px 46px 13px 14px; font-size: 18px; font-weight: 750; font-family: var(--font-mono); }
.voltage-input-wrap > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-family: var(--font-mono); font-weight: 700; }
.voltage-result { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; border: 1px solid; }
.voltage-result__icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 9px; }
.voltage-result strong, .voltage-result span { display: block; }
.voltage-result strong { font-size: 12.5px; }
.voltage-result span { margin-top: 2px; font-size: 11px; color: var(--text-secondary); }
.voltage-result--provider { background: rgba(229,161,0,.09); border-color: rgba(229,161,0,.28); }
.voltage-result--provider .voltage-result__icon { color: #B37D00; background: rgba(229,161,0,.14); }
.voltage-result--lights { background: rgba(37,99,235,.07); border-color: rgba(37,99,235,.20); }
.voltage-result--lights .voltage-result__icon { color: var(--hazard); background: rgba(37,99,235,.10); }
.voltage-modal__hint { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: 11.5px; line-height: 1.4; }
.voltage-modal__hint svg { flex: 0 0 auto; }
.voltage-modal__footer { padding: 13px 20px; }
.voltage-modal__save { min-width: 150px; }

@media (max-width: 900px) {
  .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .dashboard-kpi-grid { grid-template-columns: 1fr; }
  .voltage-modal__rule { grid-template-columns: 1fr; }
  .voltage-modal__rule-divider { width: 100%; height: 1px; }
}

/* =========================================================
   REFINAMIENTO VISUAL — HISTORIAL Y DASHBOARD
   ========================================================= */
.dashboard-section-label {
  margin: 2px 0 12px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* Filtros: distribución estable, sin desbordamiento lateral */
.flex-between:has(.filters-row) {
  display: block;
}
.filters-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(125px, 1fr) minmax(125px, 1fr) minmax(125px, .9fr) minmax(220px, 1.55fr) minmax(145px, 1fr) minmax(145px, 1fr);
  gap: 14px;
  align-items: end;
}
.filters-row .field,
.filters-row .field.filter-field--guarantee {
  min-width: 0;
  width: 100%;
  flex: none;
}
.filters-row .field input,
.filters-row .field select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.filters-row .field select {
  font-size: 12px;
  text-overflow: ellipsis;
}
.filters-actions {
  width: 100%;
  justify-content: flex-end;
  margin: 14px 0 0;
}

/* KPIs: menos cuadriculado y más aire */
.dashboard-kpi-grid { gap: 16px; }
.dashboard-kpi {
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 7px 24px rgba(15,23,42,.055);
  border-color: rgba(148,163,184,.24);
}
.dashboard-kpi::after { width: 3px; opacity: .8; }
.dashboard-kpi:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15,23,42,.09); }
.dashboard-kpi__bottom svg { display: none; }
.dashboard-kpi__bottom { padding-top: 1px; }

/* Tarjeta de evaluación de voltaje */
.dashboard-voltage-panel { padding: 22px; }
.dashboard-voltage-header { margin-bottom: 16px; }
.dashboard-panel-caption {
  display: block;
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 11.5px;
}
.dashboard-voltage-list { display: grid; gap: 9px; }
.dashboard-voltage-item {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.dashboard-voltage-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15,23,42,.07);
}
.dashboard-voltage-item--provider { background: rgba(245, 184, 55, .10); border-color: rgba(229,161,0,.22); }
.dashboard-voltage-item--lights { background: rgba(37, 99, 235, .065); border-color: rgba(37,99,235,.16); }
.dashboard-voltage-item--pending { background: rgba(100,116,139,.065); border-color: rgba(100,116,139,.15); }
.dashboard-voltage-marker { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.6); }
.dashboard-voltage-item--provider .dashboard-voltage-marker { background: #E5A100; }
.dashboard-voltage-item--lights .dashboard-voltage-marker { background: #3E6E92; }
.dashboard-voltage-item--pending .dashboard-voltage-marker { background: #94A3B8; }
.dashboard-voltage-copy { min-width: 0; }
.dashboard-voltage-copy strong { display: block; font-size: 13px; font-weight: 800; color: var(--text-primary); }
.dashboard-voltage-copy small { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 11px; }
.dashboard-voltage-value { min-width: 30px; text-align: right; font-size: 22px; line-height: 1; font-weight: 850; font-family: var(--font-display); }
.dashboard-voltage-item--provider .dashboard-voltage-value { color: #B37D00; }
.dashboard-voltage-item--lights .dashboard-voltage-value { color: #3E6E92; }
.dashboard-voltage-item--pending .dashboard-voltage-value { color: #64748B; }

@media (max-width: 1180px) and (min-width: 901px) {
  .filters-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter-field--guarantee { grid-column: span 1; }
}
@media (max-width: 900px) {
  .filters-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 12px;
  }
  .filters-row .field { min-width: 0; }
  .filters-actions { justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .filters-row { grid-template-columns: 1fr; }
  .dashboard-voltage-panel { padding: 17px; }
  .dashboard-voltage-item { padding: 12px; }
}

/* =========================================================
   V8 — PALETA VISUAL FINAL
   Basada en la referencia proporcionada:
   negro profundo + azul eléctrico + blanco + grafito.
   Objetivo: alto contraste, lectura clara y estados suaves.
   ========================================================= */
:root {
  --brand-blue: #0060F5;
  --brand-blue-hover: #0053D6;
  --brand-blue-soft: rgba(0, 96, 245, .10);
  --brand-blue-focus: rgba(0, 96, 245, .20);
  --brand-black: #080808;
  --brand-graphite: #1B1B19;
  --brand-graphite-2: #242422;
  --brand-white: #FFFFFF;

  --bg-app: #F5F6F8;
  --bg-surface: #FFFFFF;
  --bg-surface-2: #F8F9FB;
  --border: #D9DDE4;
  --text-primary: #111317;
  --text-secondary: #596170;
  --text-muted: #788191;

  --hazard: var(--brand-blue);
  --hazard-strong: var(--brand-blue-hover);
  --hazard-ink: #FFFFFF;
  --hazard-soft: var(--brand-blue-soft);
  --accent: var(--brand-blue);
  --accent-dark: var(--brand-blue-hover);
  --accent-soft: var(--brand-blue-soft);
  --accent-ink: #FFFFFF;

  --sidebar-bg: var(--brand-blue);
  --sidebar-text: #FFFFFF;
  --sidebar-hover: rgba(255,255,255,.13);
  --sidebar-active-bg: #FFFFFF;
  --sidebar-active-text: var(--brand-blue);
  --sidebar-border: rgba(255,255,255,.16);
  --sidebar-section: rgba(255,255,255,.72);
  --sidebar-footer-border: rgba(255,255,255,.16);
  --sidebar-avatar-bg: #FFFFFF;
  --sidebar-avatar-text: var(--brand-blue);

  --shadow-sm: 0 2px 8px rgba(8,8,8,.05);
  --shadow-md: 0 10px 28px rgba(8,8,8,.08);
  --shadow-lg: 0 20px 50px rgba(8,8,8,.14);
}

[data-theme='dark'] {
  --bg-app: #080808;
  --bg-surface: #1B1B19;
  --bg-surface-2: #242422;
  --border: #3A3A37;
  --text-primary: #FFFFFF;
  --text-secondary: #D5D7DA;
  --text-muted: #A7ABB2;

  --hazard: #0060F5;
  --hazard-strong: #2A78FF;
  --hazard-ink: #FFFFFF;
  --hazard-soft: rgba(0,96,245,.20);
  --accent: #0060F5;
  --accent-dark: #2A78FF;
  --accent-soft: rgba(0,96,245,.20);
  --accent-ink: #FFFFFF;

  --graphite-950: #080808;
  --graphite-900: #1B1B19;
  --graphite-800: #242422;
  --graphite-700: #3A3A37;

  --sidebar-bg: #080808;
  --sidebar-text: #FFFFFF;
  --sidebar-hover: rgba(0,96,245,.18);
  --sidebar-active-bg: #0060F5;
  --sidebar-active-text: #FFFFFF;
  --sidebar-border: #2E2E2B;
  --sidebar-section: #A7ABB2;
  --sidebar-footer-border: #2E2E2B;
  --sidebar-avatar-bg: #FFFFFF;
  --sidebar-avatar-text: #0060F5;

  --shadow-sm: 0 2px 10px rgba(0,0,0,.30);
  --shadow-md: 0 12px 30px rgba(0,0,0,.42);
  --shadow-lg: 0 22px 55px rgba(0,0,0,.55);
}

/* ---------- Legibilidad global ---------- */
body,
button,
input,
select,
textarea,
option {
  color: var(--text-primary);
}

::placeholder { color: var(--text-muted) !important; opacity: 1; }

/* Inputs y selects: siempre legibles en ambos temas */
input,
select,
textarea,
.field input,
.field select,
.field textarea {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

select option {
  background: var(--bg-surface);
  color: var(--text-primary);
}

input:focus,
select:focus,
textarea:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand-blue) !important;
  box-shadow: 0 0 0 4px var(--brand-blue-focus) !important;
}

/* ---------- Botones: interacción suave ---------- */
.btn,
button {
  -webkit-tap-highlight-color: transparent;
}

.btn-primary {
  background: var(--brand-blue) !important;
  color: #FFFFFF !important;
  border-color: var(--brand-blue) !important;
}

.btn-primary:hover:not(:disabled) {
  background: var(--brand-blue-hover) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,96,245,.28);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(.985);
  box-shadow: 0 5px 12px rgba(0,96,245,.20);
}

.btn-ghost {
  color: var(--text-primary) !important;
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
}

.btn-ghost:hover:not(:disabled) {
  color: var(--brand-blue) !important;
  background: var(--brand-blue-soft) !important;
  border-color: var(--brand-blue) !important;
  transform: translateY(-1px);
}

.btn-danger:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--sidebar-bg) !important;
  color: var(--sidebar-text) !important;
  border-right-color: var(--sidebar-border) !important;
}

.sidebar a,
.sidebar button,
.sidebar .nav-item,
.sidebar [role='button'] {
  color: var(--sidebar-text);
  transition: background .20s ease, color .20s ease, transform .20s ease, box-shadow .20s ease;
}

.sidebar a:hover,
.sidebar button:hover,
.sidebar .nav-item:hover,
.sidebar [role='button']:hover {
  background: var(--sidebar-hover);
  color: #FFFFFF;
}

.sidebar a:active,
.sidebar button:active,
.sidebar .nav-item:active {
  transform: scale(.985);
}

.sidebar .active,
.sidebar a.active,
.sidebar .nav-item.active {
  background: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-text) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

[data-theme='dark'] .sidebar .active,
[data-theme='dark'] .sidebar a.active,
[data-theme='dark'] .sidebar .nav-item.active {
  background: var(--brand-blue) !important;
  color: #FFFFFF !important;
}

/* ---------- Barra superior ---------- */
.topbar {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-bottom-color: var(--border) !important;
  box-shadow: 0 2px 12px rgba(8,8,8,.05) !important;
}

.topbar h1,
.topbar h2,
.topbar .page-title {
  color: var(--text-primary) !important;
}

/* ---------- Tarjetas / paneles ---------- */
.card,
.panel,
.modal-card,
.login-card,
.kpi-card,
.dashboard-card,
.history-card {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border);
}

.kpi-card,
.modal-card,
.login-card {
  transition: transform .20s ease, box-shadow .20s ease, border-color .20s ease;
}

.kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0,96,245,.38);
  box-shadow: var(--shadow-md);
}

/* ---------- Tablas ---------- */
table.data-table {
  color: var(--text-primary);
}

.data-table th {
  color: var(--text-secondary) !important;
  border-bottom-color: var(--border) !important;
}

.data-table td {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border) !important;
}

.data-table tbody tr {
  transition: background-color .16s ease;
}

.data-table tbody tr:hover {
  background: var(--brand-blue-soft) !important;
}

/* ---------- Links y elementos interactivos ---------- */
a:not(.btn):hover {
  color: var(--brand-blue);
}

button:focus-visible,
a:focus-visible,
[role='button']:focus-visible {
  outline: 2px solid var(--brand-blue) !important;
  outline-offset: 3px;
}

/* ---------- Filtros ---------- */
.filters-row,
.filters-grid,
.history-toolbar,
.filter-bar {
  color: var(--text-primary);
}

/* ---------- Modales ---------- */
.modal-overlay {
  background: rgba(8,8,8,.72) !important;
  backdrop-filter: blur(3px);
}

.modal-card {
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
}

/* ---------- Toast / alertas ---------- */
.toast-modal {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar-thumb {
  background: #9BA1AA;
}

[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background: #4B4B48;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-blue);
}

/* =========================================================
   CORRECCIÓN ESPECÍFICA — SCROLLBAR VERTICAL DEL SIDEBAR
   Modo claro: al pasar el mouse, la barra lateral NO se vuelve azul.
   Se mantiene gris y aumenta su luminosidad para distinguir el hover.
   El resto de las barras conserva el comportamiento azul existente.
   ========================================================= */
html:not([data-theme='dark']) .sidebar > nav::-webkit-scrollbar-thumb {
  background: #9BA1AA !important;
}

html:not([data-theme='dark']) .sidebar > nav::-webkit-scrollbar-thumb:hover {
  background: #C9CDD3 !important;
}

html:not([data-theme='dark']) .sidebar > nav::-webkit-scrollbar-track {
  background: transparent !important;
}

/* ---------- Estados de texto comunes ---------- */
.text-muted,
.muted,
.hint,
.help-text,
.subtitle,
.section-description {
  color: var(--text-secondary) !important;
}

/* ---------- Badges: conservar semántica, mejorar contraste ---------- */
.badge,
.status-badge,
.estado-badge {
  transition: transform .16s ease, filter .16s ease;
}

.badge:hover,
.status-badge:hover,
.estado-badge:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

/* ---------- Modo oscuro: elementos que históricamente usaban blanco fijo ---------- */
[data-theme='dark'] .data-table,
[data-theme='dark'] .table-wrap,
[data-theme='dark'] .content,
[data-theme='dark'] .page,
[data-theme='dark'] .section,
[data-theme='dark'] .card,
[data-theme='dark'] .panel {
  color: var(--text-primary);
}

[data-theme='dark'] .btn-ghost {
  color: #FFFFFF !important;
  background: #1B1B19 !important;
  border-color: #3A3A37 !important;
}

[data-theme='dark'] .btn-ghost:hover:not(:disabled) {
  color: #FFFFFF !important;
  background: rgba(0,96,245,.18) !important;
  border-color: var(--brand-blue) !important;
}

[data-theme='dark'] .data-table tbody tr:hover {
  background: rgba(0,96,245,.10) !important;
}

/* ---------- Microinteracciones ---------- */
@keyframes softPulseBlue {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,96,245,0); }
  50% { box-shadow: 0 0 0 5px rgba(0,96,245,.08); }
}

.kpi-card:focus-within,
.filter-card:focus-within {
  border-color: rgba(0,96,245,.42);
}

/* Respeta accesibilidad cuando el usuario pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .kpi-card:hover,
  .btn-primary:hover:not(:disabled),
  .btn-ghost:hover:not(:disabled) {
    transform: none;
  }
}

/* =========================================================
   V9 — AJUSTE DE CONTRASTE Y JERARQUÍA VISUAL
   - Sidebar con el mismo tono de superficie que las tarjetas.
   - Pestañas Baterías / Luces con contraste alto.
   - Barra superior ligeramente más alta para que el título respire.
   ========================================================= */

:root {
  --sidebar-bg: var(--bg-surface);
  --sidebar-text: var(--text-primary);
  --sidebar-hover: var(--brand-blue-soft);
  --sidebar-active-bg: var(--brand-blue);
  --sidebar-active-text: #FFFFFF;
  --sidebar-border: var(--border);
  --sidebar-section: var(--text-secondary);
  --sidebar-footer-border: var(--border);
  --sidebar-avatar-bg: var(--brand-blue);
  --sidebar-avatar-text: #FFFFFF;
}

[data-theme='dark'] {
  --sidebar-bg: var(--bg-surface);
  --sidebar-text: #FFFFFF;
  --sidebar-hover: rgba(0,96,245,.14);
  --sidebar-active-bg: var(--brand-blue);
  --sidebar-active-text: #FFFFFF;
  --sidebar-border: var(--border);
  --sidebar-section: #A7ABB2;
  --sidebar-footer-border: var(--border);
  --sidebar-avatar-bg: #FFFFFF;
  --sidebar-avatar-text: var(--brand-blue);
}

/* El sidebar se percibe como un panel independiente del fondo de trabajo. */
.sidebar {
  background: var(--sidebar-bg) !important;
  color: var(--sidebar-text) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  box-shadow: 4px 0 18px rgba(8,8,8,.06) !important;
}

.sidebar__brand,
.sidebar__user-name {
  color: var(--text-primary) !important;
}

.sidebar__brand .badge-dot,
.sidebar__brand .badge-dot::before {
  background: #F5C518 !important;
}

.sidebar__section {
  color: var(--sidebar-section) !important;
}

.sidebar__link {
  color: var(--text-secondary) !important;
}

.sidebar__link .icon {
  color: var(--text-secondary) !important;
}

.sidebar__link:hover {
  background: var(--sidebar-hover) !important;
  color: var(--brand-blue) !important;
  transform: translateX(3px);
}

.sidebar__link:hover .icon {
  color: var(--brand-blue) !important;
}

.sidebar__link.active {
  background: var(--brand-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 0 7px 18px rgba(0,96,245,.20) !important;
}

.sidebar__link.active .icon,
.sidebar__link.active .sidebar__text {
  color: #FFFFFF !important;
}

.sidebar__user-role {
  color: var(--text-muted) !important;
}

.sidebar__footer {
  border-top-color: var(--sidebar-footer-border) !important;
}

/* Botón de cerrar sesión: siempre legible en ambos temas. */
.sidebar .btn,
.sidebar button {
  color: var(--text-primary);
}

[data-theme='dark'] .sidebar .btn,
[data-theme='dark'] .sidebar button {
  color: #FFFFFF;
}

/* ---------- Barra superior: más aire vertical ---------- */
:root {
  --topbar-h: 70px;
}

.topbar {
  min-height: var(--topbar-h);
  height: var(--topbar-h);
  padding: 5px 24px 0;
}

.topbar__title {
  transform: translateY(2px);
}

.topbar .icon-btn {
  transform: translateY(2px);
}

.topbar .icon-btn:hover {
  transform: translateY(1px);
}

/* ---------- Pestañas Baterías / Luces de emergencia ---------- */
.movement-type-tabs {
  gap: 10px;
  margin-bottom: 18px;
}

.movement-type-tab {
  min-height: 40px;
  padding: 9px 17px;
  border-radius: 10px;
  border: 1px solid var(--border) !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 1px 3px rgba(8,8,8,.04);
  transition: background .18s ease, color .18s ease, border-color .18s ease,
              transform .16s ease, box-shadow .18s ease;
}

.movement-type-tab:hover:not(:disabled) {
  color: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  background: var(--brand-blue-soft) !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0,96,245,.10);
}

.movement-type-tab:active:not(:disabled) {
  transform: translateY(0) scale(.985);
}

.movement-type-tab.active {
  background: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 0 7px 18px rgba(0,96,245,.20);
}

.movement-type-tab.active:hover:not(:disabled) {
  background: var(--brand-blue-hover) !important;
  color: #FFFFFF !important;
  border-color: var(--brand-blue-hover) !important;
}

/* En modo oscuro las pestañas conservan el contraste sin verse pegadas al fondo. */
[data-theme='dark'] .movement-type-tab {
  background: var(--bg-surface) !important;
  color: #FFFFFF !important;
  border-color: var(--border) !important;
}

[data-theme='dark'] .movement-type-tab:hover:not(:disabled) {
  background: rgba(0,96,245,.16) !important;
  color: #FFFFFF !important;
  border-color: var(--brand-blue) !important;
}

[data-theme='dark'] .movement-type-tab.active {
  background: var(--brand-blue) !important;
  color: #FFFFFF !important;
  border-color: var(--brand-blue) !important;
}

/* El título de cada página conserva el mismo aire vertical en tablets. */
@media (max-width: 1024px) {
  .topbar {
    min-height: 66px;
    height: 66px;
    padding: 5px 20px 0;
  }
}

@media (max-width: 640px) {
  .topbar {
    min-height: 62px;
    height: 62px;
    padding: 4px 14px 0;
  }

  .movement-type-tab {
    flex: 1 1 auto;
    justify-content: center;
  }
}


/* V12 — Modo claro V9 + modo oscuro V11 */
[data-theme='dark'] {
  /* Fondo oscuro con matiz azul para dar profundidad sin perder el carácter industrial. */
  --bg-app: #0A0F18;
  --bg-surface: #151D29;
  --bg-surface-2: #1C2736;
  --border: #2B3A4F;
  --text-primary: #F8FAFC;
  --text-secondary: #D2DAE5;
  --text-muted: #9AA9BA;

  --brand-graphite: #151D29;
  --brand-graphite-2: #1C2736;

  --sidebar-bg: #151D29;
  --sidebar-text: #F8FAFC;
  --sidebar-hover: rgba(0,96,245,.16);
  --sidebar-active-bg: #0060F5;
  --sidebar-active-text: #FFFFFF;
  --sidebar-border: #2B3A4F;
  --sidebar-section: #9FB0C4;
  --sidebar-footer-border: #2B3A4F;
  --sidebar-avatar-bg: #FFFFFF;
  --sidebar-avatar-text: #0060F5;

  --shadow-sm: 0 2px 10px rgba(0,0,0,.28);
  --shadow-md: 0 12px 30px rgba(0,0,0,.38);
  --shadow-lg: 0 22px 55px rgba(0,0,0,.48);
}

/* Sidebar: el color coincide con las superficies de las tarjetas. */
.sidebar {
  background: var(--sidebar-bg) !important;
}

/* En oscuro, texto e iconos con contraste alto. */
[data-theme='dark'] .sidebar__link {
  color: #F8FAFC;
}

[data-theme='dark'] .sidebar__link .icon {
  color: #B8C7D8;
}

[data-theme='dark'] .sidebar__link:hover:not(.active) {
  color: #FFFFFF;
  background: rgba(0,96,245,.16);
}

/* Botones secundarios: contraste consistente con ambos temas. */
[data-theme='dark'] .btn-secondary,
[data-theme='dark'] .btn-ghost {
  color: #F8FAFC !important;
}

[data-theme='dark'] .btn-secondary:hover:not(:disabled),
[data-theme='dark'] .btn-ghost:hover:not(:disabled) {
  color: #FFFFFF !important;
  background: rgba(0,96,245,.16) !important;
  border-color: #0060F5 !important;
}

/* =========================================================
   V13 — CORRECCIÓN DEFINITIVA DEL SIDEBAR EN MODO CLARO
   Modo claro: conservar sidebar azul de V9.
   Modo oscuro: conservar exactamente la paleta oscura de V11/V12.
   ========================================================= */
:root {
  --sidebar-bg: var(--brand-blue);
  --sidebar-text: #FFFFFF;
  --sidebar-hover: rgba(255,255,255,.13);
  --sidebar-active-bg: #FFFFFF;
  --sidebar-active-text: var(--brand-blue);
  --sidebar-border: rgba(255,255,255,.16);
  --sidebar-section: rgba(255,255,255,.72);
  --sidebar-footer-border: rgba(255,255,255,.16);
  --sidebar-avatar-bg: #FFFFFF;
  --sidebar-avatar-text: var(--brand-blue);
}

:root .sidebar__brand,
:root .sidebar__user-name {
  color: #FFFFFF !important;
}

:root .sidebar__link {
  color: #FFFFFF !important;
}

:root .sidebar__link .icon {
  color: rgba(255,255,255,.88) !important;
}

/* El modo oscuro conserva la configuración de V11/V12. */
[data-theme='dark'] .sidebar__brand,
[data-theme='dark'] .sidebar__user-name {
  color: #F8FAFC !important;
}

/* =========================================================
   V14 — Historial: acciones arriba y botones azules
   ========================================================= */
.history-toolbar {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 38px;
  margin: -2px 0 12px;
}

.history-toolbar .filters-actions {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
}

.history-export-btn {
  background: var(--hazard) !important;
  color: #fff !important;
  border: 1px solid var(--hazard) !important;
  box-shadow: 0 2px 7px rgba(37,99,235,.16);
  transition: background-color .16s ease, border-color .16s ease,
              transform .12s ease, box-shadow .16s ease;
}

.history-export-btn:hover {
  background: var(--hazard-strong) !important;
  border-color: var(--hazard-strong) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(37,99,235,.22);
}

.history-export-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(37,99,235,.18);
}

/* ----------------------------------------------------------------------------
   PESTANAS DE TIPO (Baterias / Luces, Sin usar / Usada)
   ----------------------------------------------------------------------------
   El aspecto lo define el bloque "V15" mas abajo, que es el pedido: la pestana
   NO elegida va azul llena con texto blanco, y la elegida va blanca con texto
   azul. Aca no se define nada, a proposito: antes habia varios bloques
   repartidos por el archivo pisandose entre si.

   Lo que si se quito de aca es una regla que pintaba el texto de la pestana no
   elegida de casi negro SOBRE el azul. Medido en el navegador daba
   rgb(17,19,23) sobre rgb(0,96,245): practicamente ilegible. Ahora el texto lo
   pone V15 en blanco, que es lo que corresponde sobre ese fondo.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .history-toolbar {
    margin-bottom: 10px;
  }

  .history-toolbar .filters-actions {
    width: auto;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .history-toolbar {
    justify-content: stretch;
  }

  .history-toolbar .filters-actions {
    width: 100%;
  }

  .history-export-btn {
    flex: 1 1 auto;
  }
}

/* =========================================================
   V15 — Botones Baterías / Luces de emergencia
   Regla visual solicitada:
   - Inactivo: azul igual al azul principal del sidebar + texto blanco.
   - Hover: azul más claro derivado de la MISMA variable azul del sistema.
   - Activo/seleccionado: fondo blanco, con texto azul para mantener contraste.
   ========================================================= */
:root {
  --movement-tab-blue: var(--brand-blue);
  --movement-tab-hover-blue: color-mix(in srgb, var(--movement-tab-blue) 72%, #FFFFFF 28%);
}

.movement-type-tab,
.movement-type-tab.active {
  min-height: 40px;
  padding: 9px 17px;
  border-radius: 10px;
  border: 1px solid var(--movement-tab-blue) !important;
  background: var(--movement-tab-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 7px rgba(0,96,245,.14);
  transition: background-color .16s ease, border-color .16s ease,
              color .16s ease, transform .12s ease, box-shadow .16s ease;
}

.movement-type-tab .icon,
.movement-type-tab.active .icon {
  color: currentColor !important;
}

.movement-type-tab:hover:not(:disabled),
.movement-type-tab.active:hover:not(:disabled) {
  background: var(--movement-tab-hover-blue) !important;
  border-color: var(--movement-tab-hover-blue) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 5px 13px rgba(0,96,245,.22);
}

/* Al seleccionar una pestaña, pasa al estilo blanco mostrado en la referencia. */
.movement-type-tab.active,
.movement-type-tab.active:hover:not(:disabled) {
  background: #FFFFFF !important;
  border-color: var(--movement-tab-blue) !important;
  color: var(--movement-tab-blue) !important;
  box-shadow: 0 4px 12px rgba(0,96,245,.12);
  transform: none;
}

.movement-type-tab.active .icon {
  color: var(--movement-tab-blue) !important;
}

.movement-type-tab:active:not(:disabled),
.movement-type-tab.active:active:not(:disabled) {
  transform: scale(.985);
  box-shadow: 0 2px 6px rgba(0,96,245,.16);
}

[data-theme='dark'] .movement-type-tab,
[data-theme='dark'] .movement-type-tab:hover:not(:disabled) {
  background: var(--movement-tab-blue) !important;
  border-color: var(--movement-tab-blue) !important;
  color: #FFFFFF !important;
}

[data-theme='dark'] .movement-type-tab:hover:not(:disabled) {
  background: var(--movement-tab-hover-blue) !important;
  border-color: var(--movement-tab-hover-blue) !important;
}

[data-theme='dark'] .movement-type-tab.active,
[data-theme='dark'] .movement-type-tab.active:hover:not(:disabled) {
  background: #FFFFFF !important;
  border-color: var(--movement-tab-blue) !important;
  color: var(--movement-tab-blue) !important;
}

[data-theme='dark'] .movement-type-tab.active .icon {
  color: var(--movement-tab-blue) !important;
}

/* =========================================================
   V16 — Corrección de pestañas y botones en modo oscuro
   Referencias visuales del usuario:
   - Sidebar oscuro: #151D29
   - Azul principal: #0060F5
   - Botones: azul principal + texto blanco
   - Hover: azul más claro derivado de la variable principal
   ========================================================= */

/* Centrado real del contenido de las pestañas. */
.movement-type-tab,
.movement-type-tab.active {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
  white-space: nowrap;
}

/* En modo oscuro el sidebar debe ser exactamente el grafito de la referencia. */
[data-theme='dark'] {
  --sidebar-bg: #151D29;
  --sidebar-border: #2B3A4F;
  --sidebar-text: #F8FAFC;
}

[data-theme='dark'] .sidebar {
  background: #151D29 !important;
  border-right-color: #2B3A4F !important;
}

/*
   Modo oscuro: misma lógica visual que el botón azul de referencia.
   Todas las pestañas permanecen azules con texto BLANCO.
   El hover utiliza una variable derivada del azul principal.
*/
[data-theme='dark'] .movement-type-tab,
[data-theme='dark'] .movement-type-tab.active,
[data-theme='dark'] .movement-type-tab.active:hover:not(:disabled) {
  background: var(--movement-tab-blue) !important;
  border-color: var(--movement-tab-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 10px rgba(0,96,245,.18);
  transform: none;
}

[data-theme='dark'] .movement-type-tab .icon,
[data-theme='dark'] .movement-type-tab.active .icon {
  color: #FFFFFF !important;
}

/* Hover: azul más claro, derivado automáticamente del mismo azul del sidebar. */
[data-theme='dark'] .movement-type-tab:hover:not(:disabled),
[data-theme='dark'] .movement-type-tab.active:hover:not(:disabled) {
  background: var(--movement-tab-hover-blue) !important;
  border-color: var(--movement-tab-hover-blue) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(0,96,245,.28);
}

[data-theme='dark'] .movement-type-tab:hover:not(:disabled) .icon,
[data-theme='dark'] .movement-type-tab.active:hover:not(:disabled) .icon {
  color: #FFFFFF !important;
}

/* Al presionar: pequeño efecto físico, sin cambiar el color. */
[data-theme='dark'] .movement-type-tab:active:not(:disabled),
[data-theme='dark'] .movement-type-tab.active:active:not(:disabled) {
  background: var(--movement-tab-blue) !important;
  border-color: var(--movement-tab-blue) !important;
  color: #FFFFFF !important;
  transform: scale(.985);
  box-shadow: 0 2px 6px rgba(0,96,245,.18);
}

/* Botones primarios del modo oscuro: misma identidad azul + texto blanco. */
[data-theme='dark'] .btn-primary,
[data-theme='dark'] .btn-primary:hover:not(:disabled),
[data-theme='dark'] .btn-primary:focus-visible {
  background: var(--movement-tab-blue) !important;
  border-color: var(--movement-tab-blue) !important;
  color: #FFFFFF !important;
}

[data-theme='dark'] .btn-primary:hover:not(:disabled) {
  background: var(--movement-tab-hover-blue) !important;
  border-color: var(--movement-tab-hover-blue) !important;
}

[data-theme='dark'] .btn-primary:active:not(:disabled) {
  background: var(--movement-tab-blue) !important;
  border-color: var(--movement-tab-blue) !important;
  color: #FFFFFF !important;
  transform: scale(.985);
}

/* Autocompletado de Batería original referente */
.autocomplete-wrap { position: relative; }
.autocomplete-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border, #d9dee7);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  padding: 4px;
}
.autocomplete-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 9px 10px;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
}
.autocomplete-option:hover { background: var(--hazard-soft, rgba(37,99,235,.12)); }
.autocomplete-option__code { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autocomplete-option__status { flex-shrink: 0; font-size: 11px; padding: 3px 7px; border-radius: 999px; background: rgba(229,161,0,.12); color: var(--text-primary); }
.autocomplete-option__status.is-vehicular { background: rgba(37,99,235,.12); }
.autocomplete-empty { padding: 10px; font-size: 12px; color: var(--text-secondary, #6b7280); }

/* Corrección de visualización para Modo Oscuro (Dark Mode) */
[data-theme='dark'] .autocomplete-menu {
  background: var(--bg-surface, #1E293B);
  border-color: var(--border, #334155);
  box-shadow: 0 10px 25px rgba(0,0,0,.5);
}
[data-theme='dark'] .autocomplete-option__code {
  color: #F8FAFC;
}
[data-theme='dark'] .autocomplete-option:hover {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .autocomplete-option__status {
  background: rgba(229, 161, 0, 0.22);
  color: #FDE047;
}
[data-theme='dark'] .autocomplete-option__status.is-vehicular {
  background: rgba(37, 99, 235, 0.3);
  color: #93C5FD;
}

/* Hover brillante para el botón Cerrar Sesión en la barra lateral */
.sidebar .btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ============================================================================
   FORMULARIOS DE OPERACION (devolucion, instalacion)
   ============================================================================
   Estas clases existen porque los formularios de estos modulos quedaban con los
   campos pegados unos a otros: .stack-y deja 10px, que alcanza para una lista
   corta pero no para un formulario de seis campos con etiquetas.

   Todo esta en rem/px fijos y sin columnas propias: el ancho lo sigue mandando
   .grid-2, que a 980px pasa a una sola columna. Asi nada de esto puede romper
   el comportamiento en tablet o telefono.
   ========================================================================== */

/* Linea de contexto debajo de los botones de tipo: explica que hace la opcion
   elegida antes de que la persona cargue datos. */
.form-lead {
  margin: 0 2px 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 78ch;
}

/* Separacion entre campos de un formulario. Casi el doble que .stack-y. */
.form-stack > * + * { margin-top: 18px; }

/* Campo con un boton al lado (buscar + agregar). En pantalla chica el boton
   pasa abajo y ocupa todo el ancho, en vez de encogerse hasta no poder leerse. */
.field-row { display: flex; gap: 10px; align-items: flex-start; }
.field-row > .btn { flex-shrink: 0; }
@media (max-width: 520px) {
  .field-row { flex-direction: column; }
  .field-row > .btn { width: 100%; }
}

/* Ayuda debajo de un campo. */
.form-hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Marca de campo opcional dentro de la etiqueta, para no tener que escribir
   "(opcional)" en el texto de cada una. */
.field__opcional {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-left: 6px;
}

/* El boton que cierra el formulario, separado del ultimo campo. */
.form-submit { margin-top: 22px; }

/* Fila de lista que ademas lleva un campo debajo (el motivo de retiro). */
.scan-list__row--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px 14px 14px;
}
.scan-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.scan-list__head .scan-list__code { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Casilla con texto de apoyo, alineada con el resto de los campos del
   formulario. Existe para no tener que maquetar un checkbox a mano con
   estilos sueltos cada vez que hace falta uno. */
.check-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.45;
}
.check-field input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  flex-shrink: 0;
  cursor: pointer;
}
.check-field__hint {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-secondary);
}