/* ═══════════════════════════════════════════════════════════════
   COOTRANSI — Design System v3 (2026-10-26)
   Paleta del logo: verde #00933F · tinta #1D1D1B · gris #676767
   Los nombres de variables (--navy, --blue, --gold) se conservan porque
   las pantallas ya los usan; cambia el color, no el nombre:
     --navy = tinta del logo (títulos, barras oscuras)
     --blue = verde del logo (acciones, enlaces, selección)
     --gold = ámbar, solo como color de estado (próximo, observación, pendiente)
   ═══════════════════════════════════════════════════════════════ */

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

:root {
  /* ── Marca ────────────────────────────────────────────────── */
  --brand:       #00933F;   /* verde del logo */
  --brand-dark:  #007A34;   /* verde para hover / texto sobre claro */
  --brand-deep:  #005C27;
  --brand-light: #E6F4EC;   /* fondo verde muy claro */
  --brand-on-dark: #3DBE73; /* verde legible sobre la tinta */
  --ink:         #1D1D1B;   /* negro del logo */
  --gray:        #676767;   /* gris del logo */

  /* ── Paleta principal (nombres heredados) ─────────────────── */
  --navy:       var(--ink);
  --blue:       var(--brand-dark); /* verde un tono más oscuro: texto y botones legibles (contraste AA) */
  --blue-light: var(--brand-light);
  --gold:       #E8A317;   /* ámbar — estados, no marca */
  --gold-light: #FDF4E1;
  --info:       #2563EB;   /* azul — solo estados informativos (p. ej. hora sustituida) */
  --info-light: #EAF1FE;

  /* ── Neutros ──────────────────────────────────────────────── */
  --bg:         #F2F4F3;   /* fondo general */
  --surface:    #FFFFFF;   /* tarjetas y paneles */
  --surface2:   #F7F8F7;   /* fondos secundarios */
  --border:     #E3E6E4;   /* bordes sutiles */
  --border-mid: #CBD1CD;   /* bordes medios */

  /* ── Texto ────────────────────────────────────────────────── */
  --text:       #1D1D1B;   /* texto principal */
  --text-mid:   #4B4E4C;   /* texto secundario */
  --muted:      #676767;   /* gris del logo — texto secundario (contraste AA) */

  /* ── Semánticos ───────────────────────────────────────────── */
  --green:      #15803D;   /* éxito: un tono más oscuro que la marca para distinguirlo */
  --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(29,29,27,.08), 0 1px 2px rgba(29,29,27,.04);
  --shadow-md:  0 4px 12px rgba(29,29,27,.10), 0 2px 4px rgba(29,29,27,.06);
  --shadow-lg:  0 10px 30px rgba(29,29,27,.12), 0 4px 8px rgba(29,29,27,.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(29,29,27,.18) !important;
}
#flv-nav .nb { color: var(--brand-on-dark) !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(--brand-on-dark) !important; background: rgba(61,190,115,.15) !important; border-color: rgba(61,190,115,.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: var(--brand-deep); border-color: var(--brand-deep); box-shadow: var(--shadow-sm); }
.btn-navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-navy:hover { background: #0F0F0E; border-color: #0F0F0E; }
.btn-gold { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 700; }
.btn-gold:hover { background: #D4920F; border-color: #D4920F; }
.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(0,147,63,.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: #EDEFED; color: var(--navy); }
.badge-gold   { background: var(--gold-light); color: #9A6200; }
.badge-gray   { background: #F2F4F2; color: var(--text-mid); }
.badge-ACTIVO   { background: var(--green-bg); color: var(--green); }
.badge-INACTIVO { background: #F2F4F2; color: var(--muted); }
.badge-activo   { background: var(--green-bg); color: var(--green); }
.badge-inactivo { background: #F2F4F2; color: var(--muted); }
.badge-admin    { background: #EDEFED; color: var(--navy); }
.badge-supervisor { background: var(--blue-light); color: var(--blue); }
.badge-operador { background: #F2F4F2; 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(0,147,63,.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(29,29,27,.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:#00933F; --dv-2:#D98A00; --dv-3:#2563EB; --dv-4:#7C3AED; --dv-5:#D6457A; --dv-otros:#A3A8A5;
  --dv-tip-bg:#1D1D1B; --dv-tip-fg:#FFFFFF; --dv-tip-mut:#CBD1CD;
}
/* 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,#CBD1CD); box-shadow:0 2px 10px rgba(29,29,27,.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;}

/* ══ Adaptación a tablet y celular (2026-10-18) ═════════════════════════════════════════════
   Evita que los campos se salgan de la pantalla o se monten unos sobre otros: los hijos de una
   cuadrícula/flex pueden encogerse (min-width:0), nada se pasa del ancho de la ventana y, en
   pantallas angostas, los formularios de las ventanas emergentes pasan a UNA columna. */
img, video, canvas, svg { max-width: 100%; }
input, select, textarea { max-width: 100%; min-width: 0; }
.form-grid > *, .fg, .field { min-width: 0; }
[class*="modal"] [style*="grid-template-columns"] > *,
[class*="modal"] [style*="display:flex"] > * { min-width: 0; }
@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .fg.span2 { grid-column: 1 / -1; }
  /* ventanas emergentes: ancho de la pantalla y formularios en una sola columna */
  .modal { max-width: calc(100vw - 1rem); }
  .modal-bg { padding: 1rem .5rem; }
  .modal-header, .modal-body, .modal-footer { padding-left: 1rem; padding-right: 1rem; }
  .modal-footer { flex-wrap: wrap; }
  .modal-footer .btn, .modal-footer button { flex: 1 1 140px; justify-content: center; }
  [class*="modal"] [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [class*="modal"] [style*="display:flex"][style*="gap"] { flex-wrap: wrap; }
  [class*="modal"] [style*="width:"] { max-width: 100%; }
  [class*="modal"] .btn, [class*="modal"] button { white-space: normal; }
  /* pestañas con desplazamiento lateral en vez de partirse */
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; padding-left: .9rem; padding-right: .9rem; flex: 0 0 auto; }
}
@media (max-width: 480px) {
  .form-grid { grid-template-columns: 1fr; }
  .btn { white-space: normal; }
}
/* Barra de pestañas: nunca ensancha la página; si no caben, se desplaza de lado */
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs > .btn { flex-shrink: 0; }
/* Zonas táctiles cómodas en pantallas táctiles (tablet/celular) */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]), select { min-height: 40px; }
  .btn-sm { min-height: 34px; }
}

/* ═══ Paneles de módulo (unificado: Operación, Mantenimiento, Tecnología, Rutas) ═══ */
.hub { max-width: 1100px; margin: 0 auto; padding: 2rem; }
.hub-head { margin-bottom: 1.5rem; }
.hub-title { display: flex; align-items: center; gap: .7rem; font-family: var(--font-d); font-size: 1.5rem; font-weight: 800; color: var(--navy); line-height: 1.2; }
.hub-title .module-icon { flex: none; }
.hub-sub { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-mid, var(--muted)); margin-top: .4rem; }
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin-bottom: 2rem; }
.module-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-lg, 14px); padding: 1.4rem 1.5rem; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .7rem; transition: transform .2s, box-shadow .2s, border-color .2s; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; --mc: var(--navy); --mc-bg: rgba(29,29,27,.08); }
.module-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--mc); }
.module-card.blue  { --mc: var(--blue);  --mc-bg: rgba(0,147,63,.10); }
.module-card.gold  { --mc: var(--gray);  --mc-bg: rgba(103,103,103,.11); } /* 2026-10-26: en los menús de módulo se usa el gris del logo */
.module-card.green { --mc: var(--brand-dark); --mc-bg: rgba(0,122,52,.11); }
.module-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--mc); }
.module-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--mc-bg, rgba(29,29,27,.08)); color: var(--mc, var(--navy)); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; line-height: 1; }
.module-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hub-title .module-icon { width: 40px; height: 40px; --mc: var(--navy); --mc-bg: rgba(29,29,27,.08); }
.module-name { font-family: var(--font-d); font-size: 1rem; font-weight: 700; color: var(--navy); }
.module-desc { font-size: .78rem; color: var(--text-mid); line-height: 1.55; flex: 1; }
.module-go { font-size: .75rem; font-weight: 600; color: var(--blue); }
@media (max-width: 700px) { .hub { padding: 1.1rem 1rem; } .hub-title { font-size: 1.25rem; } .module-grid { gap: .9rem; } }