/* ═══════════════════════════════════════════════════════════════
   FLOTA LA V S.A. — Design System v2
   Paleta basada en logo: azul marino, azul eléctrico, dorado
   ═══════════════════════════════════════════════════════════════ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Paleta principal ─────────────────────────────────────── */
  --navy:       #1B2B5E;   /* azul marino logo — primario */
  --blue:       #1E6FD9;   /* azul eléctrico   — interactivo */
  --blue-light: #EAF2FF;   /* azul muy claro   — fondos activos */
  --gold:       #F5A623;   /* dorado logo      — acento/highlight */
  --gold-light: #FEF6E4;   /* dorado muy claro — fondos badge */

  /* ── Neutros ──────────────────────────────────────────────── */
  --bg:         #F0F2F7;   /* fondo general */
  --surface:    #FFFFFF;   /* tarjetas y paneles */
  --surface2:   #F8F9FC;   /* fondos secundarios */
  --border:     #E2E6F0;   /* bordes sutiles */
  --border-mid: #C8D0E4;   /* bordes medios */

  /* ── Texto ────────────────────────────────────────────────── */
  --text:       #1A1F36;   /* texto principal */
  --text-mid:   #4A5578;   /* texto secundario */
  --muted:      #8B93B0;   /* texto deshabilitado/placeholder */

  /* ── Semánticos ───────────────────────────────────────────── */
  --green:      #16A34A;
  --green-bg:   #F0FDF4;
  --red:        #DC2626;
  --red-bg:     #FEF2F2;
  --amber:      #D97706;
  --amber-bg:   #FFFBEB;

  /* ── Tipografía ───────────────────────────────────────────── */
  --font-d:     'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-b:     'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-m:     'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ── Radios y sombras ─────────────────────────────────────── */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  20px;
  --shadow-sm:  0 1px 3px rgba(27,43,94,.08), 0 1px 2px rgba(27,43,94,.04);
  --shadow-md:  0 4px 12px rgba(27,43,94,.10), 0 2px 4px rgba(27,43,94,.06);
  --shadow-lg:  0 10px 30px rgba(27,43,94,.12), 0 4px 8px rgba(27,43,94,.06);
}

/* ── Reset base ───────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* ── Navbar compartido ────────────────────────────────────────── */
#flv-nav {
  background: var(--navy) !important;
  border-bottom: none !important;
  padding: .65rem 1.5rem !important;
  box-shadow: 0 2px 8px rgba(27,43,94,.18) !important;
}
#flv-nav .nb { color: var(--gold) !important; font-family: var(--font-d); }
#flv-nav a.nm { color: rgba(255,255,255,.65) !important; border-color: transparent !important; font-family: var(--font-b); font-size: .75rem; }
#flv-nav a.nm:hover { color: #fff !important; background: rgba(255,255,255,.1) !important; }
#flv-nav a.nm.cur { color: #fff !important; background: var(--blue) !important; border-color: transparent !important; }
#flv-nav .nu { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.15) !important; color: rgba(255,255,255,.8) !important; font-family: var(--font-b); }
#flv-nav button.ns { color: rgba(255,255,255,.6) !important; border-color: rgba(255,255,255,.2) !important; font-family: var(--font-b); }
#flv-nav button.ns:hover { color: #fff !important; border-color: rgba(255,255,255,.5) !important; background: rgba(255,255,255,.08) !important; }
#flv-nav a.np { color: var(--gold) !important; background: rgba(245,166,35,.15) !important; border-color: rgba(245,166,35,.3) !important; font-family: var(--font-b); }

/* ── Botones ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: var(--r-md);
  font-family: var(--font-b); font-size: .8rem; font-weight: 600;
  cursor: pointer; border: 1.5px solid transparent;
  transition: all .15s; white-space: nowrap; text-decoration: none;
}
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: #1560C0; border-color: #1560C0; box-shadow: var(--shadow-sm); }
.btn-navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-navy:hover { background: #152349; border-color: #152349; }
.btn-gold { background: var(--gold); color: var(--navy); border-color: var(--gold); font-weight: 700; }
.btn-gold:hover { background: #E09510; border-color: #E09510; }
.btn-ghost { background: transparent; color: var(--blue); border-color: var(--border-mid); }
.btn-ghost:hover { background: var(--blue-light); border-color: var(--blue); }
.btn-danger { background: var(--red-bg); color: var(--red); border-color: #FECACA; }
.btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }
.btn-sm { padding: .3rem .65rem; font-size: .74rem; border-radius: var(--r-sm); }
.btn-lg { padding: .65rem 1.4rem; font-size: .9rem; }
.btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* ── Inputs ───────────────────────────────────────────────────── */
input, select, textarea {
  font-family: var(--font-b); font-size: .84rem; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-md); padding: .55rem .85rem;
  outline: none; transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30,111,217,.12);
}
input::placeholder { color: var(--muted); }
select option { background: var(--surface); color: var(--text); }

/* ── Tarjetas ─────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.card-header {
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.card-body { padding: 1.25rem; }

/* ── Badges ───────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .6rem; border-radius: 20px;
  font-size: .7rem; font-weight: 600; letter-spacing: .02em;
}
.badge-green  { background: var(--green-bg); color: var(--green); }
.badge-red    { background: var(--red-bg); color: var(--red); }
.badge-amber  { background: var(--amber-bg); color: var(--amber); }
.badge-blue   { background: var(--blue-light); color: var(--blue); }
.badge-navy   { background: #EEF1FA; color: var(--navy); }
.badge-gold   { background: var(--gold-light); color: #9A6200; }
.badge-gray   { background: #F1F3F9; color: var(--text-mid); }
.badge-ACTIVO   { background: var(--green-bg); color: var(--green); }
.badge-INACTIVO { background: #F1F3F9; color: var(--muted); }
.badge-activo   { background: var(--green-bg); color: var(--green); }
.badge-inactivo { background: #F1F3F9; color: var(--muted); }
.badge-admin    { background: #EEF1FA; color: var(--navy); }
.badge-supervisor { background: var(--blue-light); color: var(--blue); }
.badge-operador { background: #F1F3F9; color: var(--text-mid); }
.badge-despachador { background: var(--gold-light); color: #9A6200; }
.badge-fijo         { background: var(--blue-light); color: var(--blue); }
.badge-extra        { background: var(--gold-light); color: #9A6200; }
.badge-supernumerario { background: #F3EEFF; color: #6B21A8; }

/* ── Tabla ────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1.5px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; font-size: .8rem; }
thead th {
  text-align: left; padding: .65rem .9rem;
  font-size: .68rem; font-weight: 700; color: var(--text-mid);
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--surface2); border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
}
thead th:first-child { border-radius: var(--r-lg) 0 0 0; }
thead th:last-child  { border-radius: 0 var(--r-lg) 0 0; }
tbody td { padding: .65rem .9rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--blue-light); }
.mono { font-family: var(--font-m); color: var(--text-mid); font-size: .78rem; }

/* ── KPIs ─────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kpi {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.kpi::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: var(--blue); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.kpi.kpi-gold::before { background: var(--gold); }
.kpi.kpi-green::before { background: var(--green); }
.kpi.kpi-red::before { background: var(--red); }
.kpi.kpi-navy::before { background: var(--navy); }
.kpi-v { font-size: 1.8rem; font-weight: 700; font-family: var(--font-d); color: var(--navy); line-height: 1.1; }
.kpi-l { font-size: .68rem; color: var(--muted); margin-top: .25rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }

/* ── Toolbar ──────────────────────────────────────────────────── */
.toolbar { display: flex; gap: .75rem; margin-bottom: 1.1rem; flex-wrap: wrap; align-items: center; }
.search {
  flex: 1; min-width: 200px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-md); padding: .5rem .9rem;
  font-family: var(--font-b); font-size: .83rem; color: var(--text); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.search:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,111,217,.1); }
.filter-sel {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-md); padding: .5rem .85rem;
  font-family: var(--font-b); font-size: .8rem; color: var(--text); outline: none; cursor: pointer;
}
.filter-sel:focus { border-color: var(--blue); }

/* ── Modal ────────────────────────────────────────────────────── */
.modal-bg {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(27,43,94,.35); backdrop-filter: blur(3px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 2rem 1rem; overflow-y: auto;
}
.modal-bg.open { display: flex; }
.modal {
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); width: 100%; margin: auto;
  border: 1.5px solid var(--border);
}
.modal-header {
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-header h3 { font-family: var(--font-d); font-size: 1rem; font-weight: 700; color: var(--navy); }
.modal-body { padding: 1.5rem; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); display: flex; gap: .75rem; justify-content: flex-end; }

/* ── Sección label ────────────────────────────────────────────── */
.sec-label {
  font-size: .68rem; font-weight: 700; color: var(--blue);
  letter-spacing: .08em; text-transform: uppercase;
  margin: 1.25rem 0 .75rem; display: flex; align-items: center; gap: .5rem;
}
.sec-label::after { content:''; flex:1; height:1px; background: var(--border); }

/* ── Form grid ────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: .85rem; }
.fg {}
.fg.full { grid-column: 1/-1; }
.fg.span2 { grid-column: span 2; }
.fg label { display: block; font-size: .7rem; font-weight: 600; color: var(--text-mid); margin-bottom: .35rem; letter-spacing: .02em; }

/* ── Tabs ─────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 0; margin-bottom: 1.75rem; border-bottom: 2px solid var(--border); }
.tab {
  padding: .6rem 1.25rem; font-size: .82rem; font-weight: 600;
  cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: all .15s; font-family: var(--font-b);
}
.tab:hover { color: var(--navy); }
.tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.panel { display: none; }
.panel.active { display: block; }

/* ── Readonly notice ──────────────────────────────────────────── */
.readonly-notice {
  background: var(--amber-bg); border: 1.5px solid #FDE68A;
  border-radius: var(--r-md); padding: .7rem 1rem;
  font-size: .8rem; color: var(--amber); margin-bottom: 1rem;
  display: none; align-items: center; gap: .5rem; font-weight: 500;
}
.readonly-notice.show { display: flex; }

/* ── Link card ────────────────────────────────────────────────── */
.link-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); padding: 1.25rem 1.5rem;
  display: flex; align-items: center; gap: 1rem;
  text-decoration: none; color: inherit; transition: all .2s;
  box-shadow: var(--shadow-sm);
}
.link-card:hover { border-color: var(--blue); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.link-card .icon { font-size: 1.75rem; }
.link-card .info h4 { font-size: .95rem; font-weight: 700; color: var(--navy); margin-bottom: .2rem; }
.link-card .info p { font-size: .76rem; color: var(--muted); }
.link-card .go { margin-left: auto; color: var(--blue); font-size: 1.2rem; }

/* ── Ibt (icon button en tabla) ───────────────────────────────── */
.ibt {
  background: var(--surface2); border: 1.5px solid var(--border);
  border-radius: var(--r-sm); padding: .28rem .6rem;
  cursor: pointer; font-size: .8rem; transition: all .15s;
}
.ibt:hover { border-color: var(--blue); background: var(--blue-light); }
.ibt.del:hover { border-color: var(--red); background: var(--red-bg); }
.ibt:disabled { opacity: .35; cursor: not-allowed; }

/* ── Foto mini en tabla ───────────────────────────────────────── */
.foto-mini { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }

/* ── Vencimientos ─────────────────────────────────────────────── */
.venc-ok   { color: var(--green); font-weight: 600; }
.venc-warn { color: var(--amber); font-weight: 600; }
.venc-exp  { color: var(--red);   font-weight: 600; }

/* ── Page header ──────────────────────────────────────────────── */
.page-header { margin-bottom: 1.5rem; }
.page-header h2 { font-family: var(--font-d); font-size: 1.5rem; font-weight: 800; color: var(--navy); }
.page-header h2 span { color: var(--blue); }
.page-header p { font-size: .75rem; color: var(--muted); margin-top: .2rem; letter-spacing: .04em; text-transform: uppercase; }

/* ── Wrap ─────────────────────────────────────────────────────── */
.wrap { max-width: 1400px; margin: 0 auto; padding: 2rem; }

/* ── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* ══════════════════════════════════════════════════════════════
   ESTÁNDAR DE DASHBOARDS (todas las pantallas)
   - Tarjetas KPI iguales  - paleta única validada  - tooltip único
   Serie 1 azul · 2 ámbar · 3 verde azulado · 4 violeta · 5 rosa · resto gris
   Rojo/verde/ámbar de estado SOLO para estados (con texto o ícono)
   ══════════════════════════════════════════════════════════════ */
:root{
  --dv-1:#1E6FD9; --dv-2:#D98A00; --dv-3:#0F9D7A; --dv-4:#7C3AED; --dv-5:#D6457A; --dv-otros:#9AA3B8;
  --dv-tip-bg:#1A1F36; --dv-tip-fg:#FFFFFF; --dv-tip-mut:#C8D0E4;
}
/* Tarjeta KPI única (especificidad html .x para ganar a los estilos de cada página) */
html .kpi, html .dash-kpi, html .hist-kpi, html .stat-card, html .lq-kpi, html .docs-kpi{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:.85rem 1rem; box-shadow:none; position:relative; overflow:hidden;
  transition:border-color .15s, box-shadow .15s;
}
html .kpi:hover, html .dash-kpi:hover, html .hist-kpi:hover, html .stat-card:hover, html .lq-kpi:hover{
  transform:none; border-color:var(--border-mid,#C8D0E4); box-shadow:0 2px 10px rgba(27,43,94,.08);
}
html .stat-card::after{display:none;}
html .kpi-label, html .dash-kpi-label, html .hist-kpi-label, html .stat-label, html .lq-kpi .k, html .kpi-l{
  font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:0 0 .3rem;
}
html .kpi-l{text-transform:uppercase; margin-top:.25rem;}
html .kpi-val, html .dash-kpi-val, html .hist-kpi-val, html .stat-value, html .lq-kpi .v, html .kpi-v{
  font-family:var(--font-m,var(--font-mono)); font-size:1.5rem; font-weight:800; line-height:1.15;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
html .dash-kpi-val, html .hist-kpi-val, html .kpi-val, html .kpi-v{color:var(--text);}
html .kpi-val.green, html .stat-value.green{color:var(--green);}
html .kpi-val.red, html .stat-value.red, html .hist-kpi-val.neg{color:var(--red);}
html .dash-kpi.warn .dash-kpi-val{color:var(--red);}
html .dash-kpi-name{font-family:var(--font-d,var(--font-display)); font-size:.95rem; font-weight:800; color:var(--text);}
html .stat-sub, html .lq-kpi .s{font-size:.7rem; color:var(--muted); margin-top:.2rem;}
html .kpis, html .kpi-grid, html .dash-kpis, html .hist-kpis, html .lq-kpis{gap:.75rem;}

/* Barras de ranking (una sola medida = azul sólido; segunda medida = ámbar) */
html .rank-bar{height:8px; background:var(--surface2); border-radius:4px;}
html .rank-bar-fill, html .lq-bar-i{background:var(--dv-1); border-radius:0 4px 4px 0; opacity:.9;}
html .rank-bar-fill.money{background:var(--dv-2);}
html .rank-item:hover .rank-bar-fill{opacity:1;}
html .rank-item[data-tip]{cursor:default; border-radius:6px;}
html .rank-item[data-tip]:hover{background:var(--surface2);}
/* Columnas por mes */
html .mes-chart-bar{background:var(--dv-1); border-radius:4px 4px 0 0;}
html .mes-chart-bar.cur{background:var(--dv-2);}
html .mes-chart-col[data-tip]:hover .mes-chart-bar{opacity:.8;}
html .mes-chart-col[data-tip]{cursor:default;}
html .bar-col .bar.pas{background:var(--dv-1);}
html .bar-col .bar.via{background:var(--dv-2);}
/* Donut */
html .donut-legend-item[data-tip]:hover{background:var(--surface2);}

/* Tooltip único: .bar-tooltip, .hist-tooltip, .rp-tip, .lq-tip, .flv-tip */
html .bar-tooltip, html .hist-tooltip, html .rp-tip, html .lq-tip, .flv-tip{
  background:var(--dv-tip-bg); color:var(--dv-tip-fg); border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.25); font-family:var(--font-b,inherit);
  font-variant-numeric:tabular-nums;
}
.flv-tip{position:fixed; z-index:99999; pointer-events:none; padding:.45rem .7rem; font-size:.74rem; line-height:1.5; max-width:300px; display:none;}
.flv-tip b{font-weight:700;} .flv-tip .m{color:var(--dv-tip-mut); font-size:.7rem;}
.flv-tip .sw{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:.35rem; vertical-align:baseline;}
@media print{ .flv-tip{display:none!important;} }
html .kpi::before{display:none;}
html .dash-kpi-val[style], html .hist-kpi-val[style]{color:var(--text)!important;}