/* =====================================================================
   SIG — Sistema de diseño (rediseño profesional y responsivo)
   - Layouts fluidos (sin medidas fijas): %, fr, minmax, clamp, min()
   - Sombras con profundidad, animaciones sutiles, flex/grid
   - Tema claro/oscuro vía tokens en :root
   ===================================================================== */

/* ---------------- TOKENS ---------------- */
:root {
  --primary:      #2563eb;
  --primary-700:  #1d4ed8;
  --primary-soft: #eaf1fe;
  --grad:         linear-gradient(125deg, #1e3a8a 0%, #2456c9 55%, #3b82f6 100%);
  --grad-violet:  linear-gradient(135deg, #2563eb, #3b82f6);
  --ring:         rgba(37, 99, 235, .26);
  --glow:         0 8px 20px rgba(37, 99, 235, .30);

  --bg-1:    #f7f9fc;
  --bg-2:    #eaf0f8;
  --surface: #ffffff;
  --surface-2: #f1f5fb;
  --thead-bg: #eef3fb;
  --border:  #e1e8f2;
  --text:    #0f1b2d;
  --text-soft: #45566d;
  --text-muted: #8b98ac;
  --tab-active: var(--primary);

  --danger: #e11d48;  --danger-soft: #fde8ed;
  --success: #059669; --success-soft: #e6f6f0;
  --warning: #d97706; --warning-soft: #fdf1de;

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --shadow:    0 6px 18px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.05);
  --shadow-lg: 0 20px 48px rgba(16,24,40,.16), 0 6px 14px rgba(16,24,40,.07);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-sm: 13px; --fs: 14px;
}
:root[data-theme="dark"] {
  --primary:      #93b4fb;
  --primary-700:  #bcd2fd;
  --primary-soft: #17284a;
  --grad:         linear-gradient(125deg, #12213f 0%, #1c3566 60%, #2456c9 100%);
  --grad-violet:  linear-gradient(135deg, #2456c9, #3b82f6);
  --ring:         rgba(147, 180, 251, .32);
  --glow:         0 8px 22px rgba(12, 24, 46, .5);

  --bg-1:    #0a0f19;
  --bg-2:    #0d1420;
  --surface: #131b28;
  --surface-2: #1b2534;
  --thead-bg: #17202f;
  --border:  #283647;
  --text:    #e6ecf5;
  --text-soft: #94a3b8;
  --text-muted: #61708a;

  --danger: #fb7185;  --danger-soft: #3a1d28;
  --success: #34d399; --success-soft: #103027;
  --warning: #fbbf24; --warning-soft: #332a14;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 8px 22px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 54px rgba(0,0,0,.62);
}

/* ---------------- ACENTOS DE COLOR (por usuario) ----------------
   El acento se elige en "Mi cuenta" y se guarda en localStorage.
   theme.js pone data-accent="…" en <html>. Sin atributo = Azul (por
   defecto, definido arriba en :root). Cada acento sobreescribe solo
   los tokens de color, en claro y en oscuro. El bloque combinado
   [data-theme="dark"][data-accent] tiene mayor especificidad y siempre
   gana en modo oscuro. */

/* Púrpura (el original) */
:root[data-accent="purpura"] {
  --primary: #7c3aed; --primary-700: #6d28d9; --primary-soft: #f3edfe;
  --grad: linear-gradient(125deg, #5b21b6 0%, #7c3aed 55%, #a855f7 100%);
  --grad-violet: linear-gradient(135deg, #7c3aed, #a855f7);
  --ring: rgba(124,58,237,.28); --glow: 0 8px 22px rgba(124,58,237,.35);
}
:root[data-theme="dark"][data-accent="purpura"] {
  --primary: #a78bfa; --primary-700: #c4b5fd; --primary-soft: #2a2150;
  --grad: linear-gradient(125deg, #2e1065 0%, #5b21b6 60%, #6d28d9 100%);
  --grad-violet: linear-gradient(135deg, #7c3aed, #a855f7);
  --ring: rgba(167,139,250,.32); --glow: 0 8px 22px rgba(124,58,237,.45);
}

/* Verde */
:root[data-accent="verde"] {
  --primary: #059669; --primary-700: #047857; --primary-soft: #e6f6f0;
  --grad: linear-gradient(125deg, #064e3b 0%, #059669 55%, #10b981 100%);
  --grad-violet: linear-gradient(135deg, #059669, #10b981);
  --ring: rgba(5,150,105,.26); --glow: 0 8px 20px rgba(5,150,105,.30);
}
:root[data-theme="dark"][data-accent="verde"] {
  --primary: #6ee7b7; --primary-700: #a7f3d0; --primary-soft: #05372b;
  --grad: linear-gradient(125deg, #052e24 0%, #064e3b 60%, #059669 100%);
  --grad-violet: linear-gradient(135deg, #059669, #10b981);
  --ring: rgba(110,231,183,.32); --glow: 0 8px 22px rgba(5,60,43,.5);
}

/* Rojo */
:root[data-accent="rojo"] {
  --primary: #dc2626; --primary-700: #b91c1c; --primary-soft: #fdecec;
  --grad: linear-gradient(125deg, #7f1d1d 0%, #dc2626 55%, #ef4444 100%);
  --grad-violet: linear-gradient(135deg, #dc2626, #ef4444);
  --ring: rgba(220,38,38,.26); --glow: 0 8px 20px rgba(220,38,38,.30);
}
:root[data-theme="dark"][data-accent="rojo"] {
  --primary: #fca5a5; --primary-700: #fecaca; --primary-soft: #431a1a;
  --grad: linear-gradient(125deg, #4c1414 0%, #7f1d1d 60%, #dc2626 100%);
  --grad-violet: linear-gradient(135deg, #dc2626, #ef4444);
  --ring: rgba(252,165,165,.32); --glow: 0 8px 22px rgba(76,20,20,.5);
}

/* Teal (verde azulado) */
:root[data-accent="teal"] {
  --primary: #0d9488; --primary-700: #0f766e; --primary-soft: #e3f5f3;
  --grad: linear-gradient(125deg, #134e4a 0%, #0d9488 55%, #14b8a6 100%);
  --grad-violet: linear-gradient(135deg, #0d9488, #14b8a6);
  --ring: rgba(13,148,136,.26); --glow: 0 8px 20px rgba(13,148,136,.30);
}
:root[data-theme="dark"][data-accent="teal"] {
  --primary: #5eead4; --primary-700: #99f6e4; --primary-soft: #06332e;
  --grad: linear-gradient(125deg, #0a2e2b 0%, #134e4a 60%, #0d9488 100%);
  --grad-violet: linear-gradient(135deg, #0d9488, #14b8a6);
  --ring: rgba(94,234,212,.32); --glow: 0 8px 22px rgba(6,51,46,.5);
}

/* Ámbar / Naranja */
:root[data-accent="ambar"] {
  --primary: #d97706; --primary-700: #b45309; --primary-soft: #fdf1de;
  --grad: linear-gradient(125deg, #7c2d12 0%, #d97706 55%, #f59e0b 100%);
  --grad-violet: linear-gradient(135deg, #d97706, #f59e0b);
  --ring: rgba(217,119,6,.26); --glow: 0 8px 20px rgba(217,119,6,.30);
}
:root[data-theme="dark"][data-accent="ambar"] {
  --primary: #fcd34d; --primary-700: #fde68a; --primary-soft: #3a2a0c;
  --grad: linear-gradient(125deg, #451f06 0%, #7c2d12 60%, #d97706 100%);
  --grad-violet: linear-gradient(135deg, #d97706, #f59e0b);
  --ring: rgba(252,211,77,.32); --glow: 0 8px 22px rgba(58,42,12,.5);
}

/* Grafito / pizarra */
:root[data-accent="grafito"] {
  --primary: #334155; --primary-700: #1e293b; --primary-soft: #eef2f6;
  --grad: linear-gradient(125deg, #1f2937 0%, #374151 55%, #4b5563 100%);
  --grad-violet: linear-gradient(135deg, #334155, #4b5563);
  --ring: rgba(51,65,85,.26); --glow: 0 8px 20px rgba(30,41,59,.28);
}
:root[data-theme="dark"][data-accent="grafito"] {
  --primary: #94a3b8; --primary-700: #cbd5e1; --primary-soft: #1e293b;
  --grad: linear-gradient(125deg, #0f172a 0%, #1e293b 60%, #334155 100%);
  --grad-violet: linear-gradient(135deg, #334155, #475569);
  --ring: rgba(148,163,184,.32); --glow: 0 8px 22px rgba(15,23,42,.5);
}

/* ---------------- BASE ---------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--font); font-size: var(--fs); color: var(--text);
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2)); /* respaldo navegadores sin color-mix */
  background:
    radial-gradient(900px 520px at 100% -10%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 60%),
    radial-gradient(820px 520px at -10% 0%, color-mix(in srgb, var(--primary) 8%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { margin: 0; font-weight: 600; color: var(--text); letter-spacing: -.01em; }

@keyframes fade-up { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------------- ENCABEZADO ---------------- */
.appbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: clamp(10px, 2vw, 16px);
  width: 100%; padding: 12px clamp(16px, 3vw, 30px);
  background: var(--grad); color: #fff; box-shadow: var(--shadow);
  animation: fade-in .3s ease;
}
.appbar .logo {
  width: clamp(38px, 6vw, 44px); aspect-ratio: 1; border-radius: 13px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); font-weight: 700; letter-spacing: .03em;
}
.appbar .logo.brandmark { background: var(--grad-violet); box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 45%, transparent); }
/* Logo en el login: negro en modo claro, blanco en modo oscuro */
.login-logo { width: 200px; max-width: 72%; height: 50px; margin: 2px 0 16px;
  background: url('/img/chesa-logo-negro.png') left center / contain no-repeat; }
[data-theme="dark"] .login-logo { background-image: url('/img/chesa-logo.png'); }
.appbar .titles { line-height: 1.18; min-width: 0; }
.appbar .titles strong { display: block; font-size: clamp(15px, 2.4vw, 17px); }
.appbar .titles span { font-size: 11px; opacity: .82; text-transform: uppercase; letter-spacing: .09em; }
.appbar .spacer { flex: 1; }
.appbar .actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.appbar a { color: #fff; }
.appbar .user-pill { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.15); padding: 6px 13px; border-radius: 999px; font-size: var(--fs-sm); }
.appbar .user-pill .role, .appbar .user-pill .badge-admin { background: rgba(255,255,255,.26); padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.appbar .btn { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.24); backdrop-filter: blur(4px); }
.appbar .btn:hover { background: rgba(255,255,255,.26); }
.appbar .btn.primary { background: rgba(255,255,255,.95); color: var(--primary-700); border-color: transparent; font-weight: 600; }
.appbar .btn.primary:hover { background: #fff; }
.appbar .theme-toggle, .appbar .icon-sq {
  width: 36px; aspect-ratio: 1; border-radius: 10px; border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.14); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.appbar .theme-toggle:hover, .appbar .icon-sq:hover { background: rgba(255,255,255,.26); }

/* Encabezado simple heredado */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:12px clamp(16px,3vw,30px); background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20; }
.topbar .brand { font-weight:600; font-size:16px; }
.topbar .user { display:flex; align-items:center; gap:12px; font-size:var(--fs-sm); color:var(--text-soft); }

/* ---------------- BARRA DE PESTAÑAS ---------------- */
/* Los módulos grandes llegan a catorce pestañas (Sistemas), así que el
   espaciado se aprieta conforme falta ancho en vez de dejarlas todas del
   mismo tamaño y mandar la mitad al scroll. */
/* `flex: none` para que la barra NO se encoja: el body es una columna
   flexible y, al pasar a dos renglones, la comprimía a la altura de uno
   —el segundo renglón se salía por encima del contenido y no se podía
   ni tocar—. */
.tabbar { display: flex; flex: none; align-items: stretch; gap: 2px; width: 100%; min-height: 46px; padding: 0 clamp(10px, 1.6vw, 22px); background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: thin; }
.tabbar a { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 0 clamp(6px, .62vw, 10px); min-height: 46px; line-height: 1; font-size: var(--fs-sm); font-weight: 500; color: var(--text-soft); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabbar a:hover { color: var(--text); text-decoration: none; }
.tabbar a.active { color: var(--tab-active); border-bottom-color: var(--tab-active); }
.tabbar a svg { width: 15px; height: 15px; flex-shrink: 0; }
/* `flex: none` en las pestañas no es decorativo: sin él son elementos
   flexibles que se ENCOGEN antes que desbordar, y entonces la medición de
   theme.js no se entera de que ya no caben —la barra parecía caber
   mientras el texto se apelmazaba—.

   Cuando no caben se cede primero en la letra y, si aún así no entran, la
   barra pasa a DOS RENGLONES. Los iconos se quedan siempre y ninguna
   pestaña se esconde: lo mide theme.js después de pintarlas, porque
   depende de cuántas tenga QUIEN mira, no del tamaño de su pantalla. */
.tabbar.compacta a { padding: 0 6px; font-size: var(--fs-xs, 12.5px); }
/* El segundo renglón: se acaba el desplazamiento horizontal —ya no hace
   falta— y las pestañas se reparten en las filas necesarias. */
.tabbar.dos-filas { flex-wrap: wrap; overflow-x: visible; height: auto; }
.tabbar.dos-filas a { min-height: 40px; }
/* La barra de desplazamiento, discreta: si aparece, que no se vea como
   un renglón gris bajo las pestañas. */
.tabbar::-webkit-scrollbar { height: 6px; }
.tabbar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.tabbar::-webkit-scrollbar-track { background: transparent; }

/* ---------------- CONTENEDORES (fluidos, 100%) ---------------- */
.container { width: 100%; flex: 1; padding: clamp(18px, 3vw, 34px) clamp(16px, 4vw, 44px); animation: fade-up .35s ease both; }
.page-head { margin-bottom: clamp(16px, 2.5vw, 24px); }
.page-head h1 { font-size: clamp(20px, 3vw, 26px); }
.page-head p { margin-top: 5px; color: var(--text-soft); }

.grid, .modules-grid { display: grid; gap: clamp(14px, 2vw, 20px); width: 100%; }
.modules-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.stack > * + * { margin-top: 12px; }

/* ---------------- TARJETAS ---------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(16px, 2vw, 22px); box-shadow: var(--shadow-sm); }
.card.clickable { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card.clickable:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--primary); }

.module-card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: clamp(18px, 2.2vw, 24px) clamp(18px,2.2vw,24px) clamp(18px,2.2vw,24px) 26px;
  cursor: pointer; overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  animation: fade-up .4s ease both;
}
.module-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent, var(--primary)); }
.module-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg), var(--glow); border-color: transparent; }
.module-card .ic { width: 48px; aspect-ratio: 1; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; transition: transform .2s ease; }
.module-card:hover .ic { transform: scale(1.08) rotate(-3deg); }
.module-card .ic svg { width: 24px; height: 24px; }
.module-card h3 { font-size: clamp(15px, 2vw, 17px); }
.module-card p { margin-top: 5px; font-size: var(--fs-sm); color: var(--text-soft); }
.module-card .go { position: absolute; right: 18px; top: 22px; color: var(--text-muted); font-size: 18px; transition: transform .2s ease, color .2s ease; }
.module-card:hover .go { transform: translateX(5px); color: var(--primary); }

/* ---------------- BOTONES ---------------- */
.btn { font: inherit; font-size: var(--fs); font-weight: 500; padding: 9px 17px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; transition: background .14s, border-color .14s, box-shadow .14s, transform .06s; }
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--primary); color: #fff; border-color: transparent; box-shadow: var(--glow); }
.btn.primary:hover { background: var(--primary-700); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.link { border: none; background: none; color: var(--primary); padding: 0; box-shadow: none; }
.btn.link:hover { background: none; text-decoration: underline; }
.btn.sm { padding: 6px 12px; font-size: var(--fs-sm); }
/* .xs se usa en columnas "Acciones" de tablas (varios botones por fila) —
   nunca tuvo su propio tamaño y salía igual de grande que un .btn normal,
   por eso esas columnas se veían amontonadas. */
.btn.xs { padding: 4px 9px; font-size: 12px; border-radius: 7px; }
.btn.block { width: 100%; }

/* ---------------- FORMULARIOS ---------------- */
.field { margin-bottom: 15px; }
.field label { display: block; font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: 6px; }
.input, .field input, select.input {
  width: 100%; font: inherit; font-size: var(--fs); padding: 11px 13px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  transition: border-color .14s, box-shadow .14s;
}
.input:focus, .field input:focus, select.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.input.err { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.error { color: var(--danger); font-size: var(--fs-sm); min-height: 18px; margin-top: 4px; }

/* ---------------- TABLAS ---------------- */
table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
th, td { text-align: left; padding: 13px 15px; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); vertical-align: middle; }
th { background: var(--surface-2); font-weight: 600; color: var(--text-soft); }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
table.data thead th { background: var(--thead-bg); color: #5b6b8c; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
:root[data-theme="dark"] table.data thead th { color: var(--text-soft); }
table.data thead { box-shadow: inset 0 -2px 0 var(--primary); }
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th .arr { opacity: .4; font-size: 10px; margin-left: 3px; }
td.shrink, th.shrink { width: 1%; white-space: nowrap; text-align: center; }

/* ---------------- AVATAR / PILLS / CHIPS ---------------- */
.avatar { width: 36px; aspect-ratio: 1; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: var(--fs-sm); box-shadow: var(--shadow-sm); }
.cell-name { display: flex; align-items: center; gap: 11px; }
.cell-name .nm { font-weight: 500; }

.tag, .badge { display: inline-block; font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); }
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: 999px; }
.pill.corp { background: #ece9fb; color: #6b46c1; }
.pill.ecos { background: #e2f1f4; color: #0e7490; }
.pill.nissan { background: #fde7ea; color: #c8102e; }
.pill.renault { background: #f7efce; color: #856700; }
.pill.changan { background: #eaf1fe; color: #1d4ed8; }
.pill.otro { background: var(--surface-2); color: var(--text-soft); }
:root[data-theme="dark"] .pill.corp { background:#2a2350; color:#b9a6f0; }
:root[data-theme="dark"] .pill.ecos { background:#133038; color:#6fcad9; }
:root[data-theme="dark"] .pill.nissan { background:#3a1b20; color:#f0909a; }
:root[data-theme="dark"] .pill.renault { background:#332c14; color:#e3c668; }
:root[data-theme="dark"] .pill.changan { background:#17284a; color:#bcd2fd; }

.chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; margin: 1px; color: #fff; }
.m-NISSAN { background:#c8102e; } .m-RENAULT { background:#f4c100; color:#3a2e00; } .m-CHANGAN { background:#1f6fbf; } .m-otro { background:#8a93a2; }

.mail-chip { display: inline-flex; align-items: center; gap: 7px; max-width: min(260px, 40vw); background: var(--primary-soft); color: var(--primary); border: none; cursor: pointer; padding: 6px 11px; border-radius: 999px; font: inherit; font-size: 12px; transition: filter .12s; }
.mail-chip .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-chip:hover { filter: brightness(.96); }
.sia-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border); cursor: pointer; padding: 5px 10px; border-radius: 999px; font: inherit; font-size: 12px; transition: border-color .12s; }
.sia-chip .n { background: var(--primary); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 700; }
.sia-chip:hover { border-color: var(--primary); }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; }
.chip-btn:hover { background: var(--surface-2); border-color: var(--primary); }
.equipo-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); padding: 5px 10px; border-radius: 8px; font-size: 12px; }
.icon-btn { width: 30px; aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: background .12s, color .12s; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* ---------------- BARRA DE HERRAMIENTAS ---------------- */
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; width: 100%; }
.toolbar .search { position: relative; flex: 1 1 240px; min-width: 0; }
.toolbar .search input { padding-left: 36px; }
.toolbar .search::before { content: "🔍"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; opacity: .6; }
.toolbar select.input { flex: 0 0 auto; width: auto; min-width: 160px; }
.toolbar .count { margin-left: auto; color: var(--text-soft); font-size: var(--fs-sm); white-space: nowrap; }

/* ---------------- MODALES ---------------- */
.modal-bg { position: fixed; inset: 0; background: rgba(16,24,40,.5); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: clamp(12px, 4vw, 24px); z-index: 60; animation: fade-in .15s ease; }
.modal { width: min(560px, 96vw); max-height: 92vh; overflow: auto; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: fade-up .22s ease; }
.modal header { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px; border-bottom: 1px solid var(--border); }
.modal .body { padding: 20px 22px; }
.modal h4 { font-size: var(--fs); margin-bottom: 8px; }
.row-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); flex-wrap: wrap; }
.row-line:last-child { border-bottom: none; }
.inline-form { display: flex; gap: 8px; margin-top: 13px; flex-wrap: wrap; }

/* ---------------- AVISO SUPLANTACIÓN ---------------- */
.imp-banner { width: 100%; background: var(--warning-soft); color: var(--warning); border-bottom: 1px solid #f0d699; padding: 10px clamp(16px,3vw,30px); font-size: var(--fs-sm); display: none; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ---------------- UTILIDADES ---------------- */
.muted { color: var(--text-muted); }
.mono { font-family: ui-monospace, Menlo, monospace; }

/* ---------------- LOGIN (dos paneles, responsivo) ---------------- */
.auth { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; width: 100%; }
.auth__brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 5vw, 64px); background: var(--grad); color: #fff; overflow: hidden; }
.auth__brand::after { content: ""; position: absolute; right: -20%; bottom: -25%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.08); }
.auth__brand .mark { width: 56px; aspect-ratio: 1; border-radius: 16px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
.auth__brand h2 { font-size: clamp(24px, 4vw, 38px); line-height: 1.15; max-width: 14ch; }
.auth__brand p { opacity: .85; max-width: 38ch; line-height: 1.6; }
.auth__form { display: flex; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 48px); position: relative; }
.auth__card { width: min(380px, 100%); animation: fade-up .4s ease both; }
.auth__card h1 { font-size: clamp(22px, 3vw, 28px); }
.auth__card .sub { color: var(--text-soft); margin: 6px 0 22px; }

@media (max-width: 820px) {
  .auth { grid-template-columns: 1fr; }
  .auth__brand { display: none; }
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 760px) {
  .appbar .titles span { display: none; }
  .appbar .user-pill span:not(.role):not(.badge-admin) { display: none; }
  table.data { display: block; overflow-x: auto; white-space: nowrap; }
  .toolbar .count { margin-left: 0; width: 100%; }
  .toolbar select.input { flex: 1 1 auto; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, .module-card, .card.clickable, .btn { animation: none !important; transition: none !important; }
  .module-card:hover, .card.clickable:hover { transform: none; }
}

/* Ordenamiento en cabeceras de tabla simples (no .data) */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }

/* ---------------- SKELETONS (placeholders de carga) ----------------
   Se muestran mientras se espera una respuesta lenta de la base de datos
   secundaria (chesa_datos, vía query2/ETL) y se reemplazan solos cuando el
   render normal de cada vista sobreescribe el contenedor con los datos
   reales — no requieren limpieza aparte. Ver public/js/skeleton.js. */
@keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel {
  display: inline-block;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.3s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes skel-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
.skel-pulse { animation: skel-pulse 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .skel, .skel-pulse { animation: none; opacity: .7; }
}
th .arr { opacity: .4; font-size: 10px; margin-left: 3px; }

/* =====================================================================
   TESORERÍA — componentes compartidos entre las 7 pantallas del módulo
   Combustible (dashboard, reportes, autorizar, auditoria,
   tarjetahabientes, contable, configuracion). Antes cada página
   redefinía esto localmente con valores ligeramente distintos; ahora
   viven aquí una sola vez.
   ===================================================================== */

/* ---- Barra de filtros (selects con flecha personalizada + campos) ---- */
.filtros { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px; }
.filtros .field { margin-bottom:0; width:190px; flex:0 0 190px; }
.filtros .field.grow { flex:1 1 220px; width:auto; }
.filtros .field input.input, .filtros .field select.input { width:100%; }
.filtros .field.btn-field { width:auto; flex:0 0 auto; }
.filtros .field.btn-field label { visibility:hidden; }
.filtros .field.btn-field .btn { padding:11px 18px; }
.sel-arrow { position:relative; }
.sel-arrow select.input { appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right:30px; width:100%; }
.sel-arrow::after { content:"⌄"; position:absolute; right:13px; bottom:12px; color:var(--text-muted); font-size:15px; line-height:1; pointer-events:none; }

/* Utilidad: iguala la altura de un botón suelto (fuera de .filtros) a la
   de un input/select de al lado — misma medida que .btn-field .btn. */
.btn.tall { padding:11px 18px; }

/* ---- Selector de marca segmentado, con indicador deslizante
   (Reportes de combustible, Tarjetahabientes) ---- */
.brand-tabs { display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.brand-tabs .bt-lbl { font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); font-weight:700; }
.bt-seg { position:relative; display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:4px; }
.bt-seg button { position:relative; z-index:1; display:inline-flex; align-items:center; border:none; background:transparent;
  font:inherit; font-size:13.5px; font-weight:600; padding:8px 18px; border-radius:999px; cursor:pointer;
  color:var(--text-soft); white-space:nowrap; transition:color .25s ease; }
.bt-seg button:hover:not(.active) { color:var(--text); }
.bt-seg button.active { color:#fff; }
.bt-dot { width:7px; height:7px; border-radius:50%; margin-right:8px; flex-shrink:0; }
.bt-thumb { position:absolute; top:4px; bottom:4px; left:4px; width:0; border-radius:999px; z-index:0;
  transition:left .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1), background .3s ease, box-shadow .3s ease; }

/* ---- Panel: caja de contenido (tablas, formularios) ---- */
.panel { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; margin-bottom:16px; }
.panel h3 { margin:0 0 12px; font-size:15px; }

/* ---- Sección colapsable (Autorizar) ---- */
.section { border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; margin-bottom:16px; background:var(--surface); }
.section-head { display:flex; align-items:center; justify-content:space-between; cursor:pointer; padding-bottom:10px; border-bottom:1px solid var(--border); margin-bottom:12px; }
.section-head strong { font-size:15px; }
.section.collapsed .section-body { display:none; }
.section-arrow { color:var(--text-muted); transition:transform .2s; }
.section.collapsed .section-arrow { transform:rotate(180deg); }

/* ---- Badges de estado — una sola convención para todo el módulo.
   b-pend/b-warn = ámbar, b-aut/b-ok = verde, b-disp/b-info = morado,
   b-danger = rojo. Dos alias por color porque distintas pantallas leen
   mejor "pendiente/autorizado/dispersado" o "ok/atención/info" según
   el contexto, pero ambos apuntan al mismo color. */
.b { padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
.b-pend, .b-warn { background:var(--warning-soft); color:var(--warning); }
.b-parcial { background:var(--warning-soft); color:var(--warning); border:1px solid var(--warning); }
.b-aut, .b-ok { background:var(--success-soft); color:var(--success); }
.b-disp, .b-info { background:var(--primary-soft); color:var(--primary-700); }
.b-danger { background:var(--danger-soft); color:var(--danger); }

/* ---- Modales: dos anchos fijos, nunca definidos ad-hoc por pantalla.
   wide = formularios/tablas angostas. xwide = tablas de detalle. ---- */
.modal-bg.open { display:flex; }
.modal.wide { width:720px; max-width:96vw; }
.modal.xwide { width:900px; max-width:96vw; }

/* ---- KPIs de página (Dashboard) ---- */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin:6px 0 18px; }
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; }
.kpi .lbl { color:var(--text-muted); font-size:12.5px; }
.kpi .val { font-size:24px; font-weight:700; margin-top:4px; }
.kpi .sub { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* ---- Mini-KPIs dentro de modales/paneles ---- */
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.stat-card { background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:12px 14px; }
.stat-val { font-size:20px; font-weight:700; color:var(--primary); }
.stat-label { color:var(--text-muted); font-size:12.5px; }

/* ---- Chip informativo (p. ej. Límite/Compra en el modal "Cargas").
   Se llama .info-pill, no .pill, porque .pill ya existe arriba para las
   etiquetas de marca (Nissan/Renault/Changan) y es un diseño distinto —
   reusar el mismo nombre pisaría esa regla. ---- */
.info-pill { background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:6px 12px; font-size:13px; }
.info-pill.danger { background:var(--danger-soft); border-color:var(--danger); }
.info-pill.warning { background:var(--warning-soft); border-color:var(--warning); }

/* ---- Zona de carga de archivos (drag & drop) ---- */
.upload-zone { border:2px dashed var(--border); border-radius:10px; padding:20px; text-align:center; cursor:pointer; }
.upload-zone:hover { border-color:var(--primary); }

/* ---- Contenedor de tabla con scroll (dentro de modales) ---- */
.tbl-wrap, .wrap-x { overflow-x:auto; }

/* ---------------- SKELETONS (placeholders de carga) ----------------
   Se muestran mientras se espera la respuesta del servidor y se
   reemplazan solos cuando el render normal de cada vista sobreescribe
   el contenedor con los datos reales — no requieren limpieza aparte.
   Ver public/js/skeleton.js. */
@keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel {
  display: inline-block;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.3s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes skel-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
.skel-pulse { animation: skel-pulse 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .skel, .skel-pulse { animation: none; opacity: .7; }
}

/* ── Alcance: qué marca y sucursal está viendo la persona (js/alcance.js).
   Va bajo el título de la pantalla, discreto: informa, no compite con el
   contenido. */
.alc-pantalla {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 6px 0 0; padding: 3px 10px 3px 8px;
  font-size: 12.5px; color: var(--text-soft);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
}
.alc-pantalla strong { color: var(--text); font-weight: 600; }
.alc-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }

/* =====================================================================
   MODO EJECUTIVO — el marco, no el contenido.
   ---------------------------------------------------------------------
   Se enciende con data-modo="ejecutivo" en <html> (lo pone theme.js) y
   cambia UNA cosa: dónde está el menú. En vez de la barra azul con las
   pestañas debajo, un panel oscuro fijo a la izquierda con los módulos,
   y la barra de arriba en claro. El contenido de cada pantalla —tablas,
   tarjetas, formularios— no se entera: sigue siendo el mismo.

   Quien lo dibuja es appbar.js (sig-sb), sin tocar el HTML de ninguna
   pantalla. El ancho vive en --sb para que body y menú no se
   contradigan, y el modo plegado sólo lo cambia.
   ===================================================================== */
[data-modo="ejecutivo"] { --sb: 234px; --sb-bg: #0f172a; --sb-txt: #cbd5e1; }
[data-modo="ejecutivo"][data-sb="corto"] { --sb: 68px; }

[data-modo="ejecutivo"] body { padding-left: var(--sb); transition: padding-left .13s ease-out; }

.sig-sb {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sb); z-index: 40;
  background: var(--sb-bg); color: var(--sb-txt);
  display: flex; flex-direction: column; overflow: hidden;
  /* Plegar mueve el ancho del menú Y el del contenido, así que el
     navegador rehace el layout en cada cuadro: cuanto más corta, mejor se
     siente. 130 ms alcanza para que se lea como un movimiento y no como
     una espera. */
  transition: width .13s ease-out, transform .16s ease-out;
  will-change: width;
}
/* Quien pide menos movimiento en su sistema no lo ve animarse. */
@media (prefers-reduced-motion: reduce) {
  .sig-sb, [data-modo="ejecutivo"] body { transition: none !important; }
}
.sig-sb-marca {
  display: flex; align-items: center; gap: 11px; padding: 16px 16px 14px;
  color: #fff; text-decoration: none; flex: 0 0 auto;
}
.sig-sb-marca:hover { text-decoration: none; }
.sig-sb-marca .cuad {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-violet); font-weight: 700; font-size: 13px; letter-spacing: .03em;
}
.sig-sb-marca .txt { font-weight: 700; letter-spacing: .02em; line-height: 1.1; white-space: nowrap; }
.sig-sb-marca .txt small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: #64748b; }

.sig-sb-nav { flex: 1; overflow-y: auto; padding: 6px 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.sig-sb-nav::-webkit-scrollbar { width: 6px; }
.sig-sb-nav::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 99px; }
.sig-sb-it {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
  color: var(--sb-txt); text-decoration: none; font-size: var(--fs-sm); font-weight: 600;
  white-space: nowrap; transition: background .12s, color .12s;
}
.sig-sb-it:hover { background: #1e293b; color: #fff; text-decoration: none; }
/* El módulo en el que se está: barra de color y fondo encendido. */
.sig-sb-it.on { background: color-mix(in srgb, var(--primary) 30%, #0f172a); color: #fff;
  box-shadow: inset 3px 0 0 var(--primary); }
.sig-sb-it svg { width: 18px; height: 18px; flex: none; }

/* Cada módulo es un grupo desplegable: el renglón (el link de siempre +
   la flechita) y, debajo, sus submódulos. Sólo uno abierto a la vez. */
.sig-sb-row { display: flex; align-items: stretch; gap: 2px; }
.sig-sb-row .sig-sb-it { flex: 1; min-width: 0; }
.sig-sb-chev {
  flex: none; display: flex; align-items: center; justify-content: center; width: 30px;
  background: none; border: none; border-radius: 10px; color: var(--sb-txt); cursor: pointer;
  transition: background .12s, color .12s;
}
.sig-sb-chev:hover { background: #1e293b; color: #fff; }
.sig-sb-chev svg { width: 15px; height: 15px; transition: transform .14s ease; }
.sig-sb-grp.abierto .sig-sb-chev svg { transform: rotate(90deg); }
.sig-sb-sub {
  display: none; flex-direction: column; gap: 1px; padding: 2px 0 4px 14px; margin-left: 16px;
  border-left: 1px solid #1e293b;
}
.sig-sb-grp.abierto .sig-sb-sub { display: flex; }
.sig-sb-sub-it {
  display: block; padding: 7px 10px; border-radius: 8px; color: #94a3b8; text-decoration: none;
  font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .12s, color .12s;
}
.sig-sb-sub-it:hover { background: #1e293b; color: #fff; text-decoration: none; }
.sig-sb-sub-it.on { background: color-mix(in srgb, var(--primary) 22%, #0f172a); color: #fff; }
.sig-sb-sub-vacio { display: block; padding: 6px 10px; font-size: 12px; color: #64748b; }
/* Encabezado de subgrupo (migración 317, ej. Tesorería: Gestión de
   combustible / Referencias bancarias). Sólo aparece donde hay más de un
   apartado de negocio bajo el mismo módulo. */
.sig-sb-sub-grupo {
  padding: 9px 10px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: color-mix(in srgb, var(--primary) 65%, #cbd5e1);
}
.sig-sb-sub-grupo:not(:first-child) { margin-top: 6px; padding-top: 10px; border-top: 1px solid #1e293b; }

/* Plegado: ni la flecha ni los submódulos caben sin el texto — el link
   sigue llevando a la pantalla principal del módulo, igual que siempre. */
[data-sb="corto"] .sig-sb-chev, [data-sb="corto"] .sig-sb-sub { display: none !important; }

/* La barra horizontal de submódulos (nav#tabbar) queda cubierta por el
   desplegable del sidebar: se oculta sólo en modo ejecutivo. En modo
   clásico (sin sidebar) sigue siendo la única forma de verlos. */
[data-modo="ejecutivo"] .tabbar { display: none !important; }
/* Excepto CORI: sus vistas no son submódulos reales del SIG (salen de
   /api/automotriz/cori/mi-acceso, ver cori-nav.js), así que el sidebar
   del modo ejecutivo sólo alcanza a mostrar "CORI" como un renglón
   suelto, sin sus pestañas internas — sin esto, quien entra en modo
   ejecutivo se queda sin forma de navegar entre ellas. */
[data-modo="ejecutivo"] .tabbar.cori-tabbar { display: flex !important; }

.sig-sb-plegar {
  display: flex; align-items: center; gap: 11px; padding: 12px 16px; margin: 0;
  background: none; border: none; border-top: 1px solid #1e293b;
  color: #64748b; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.sig-sb-plegar:hover { color: #cbd5e1; }
.sig-sb-plegar svg { width: 16px; height: 16px; flex: none; transition: transform .18s ease; }

/* Plegado: sólo los iconos. El texto se va, no se encoge. */
[data-sb="corto"] .sig-sb-marca .txt,
[data-sb="corto"] .sig-sb-it span,
[data-sb="corto"] .sig-sb-plegar span { display: none; }
[data-sb="corto"] .sig-sb-marca { justify-content: center; padding-inline: 0; }
[data-sb="corto"] .sig-sb-it,
[data-sb="corto"] .sig-sb-plegar { justify-content: center; padding-inline: 0; }
[data-sb="corto"] .sig-sb-plegar svg { transform: rotate(180deg); }

/* La barra de arriba deja de ser azul: el color ya lo pone el menú, y
   dos bloques oscuros peleando se ven pesados. */
[data-modo="ejecutivo"] .appbar {
  background: var(--surface); color: var(--text);
  border-bottom: 1px solid var(--border); box-shadow: none;
}
[data-modo="ejecutivo"] .appbar a,
[data-modo="ejecutivo"] .appbar .titles strong { color: var(--text); }
[data-modo="ejecutivo"] .appbar .titles span { color: var(--text-muted); opacity: 1; }
/* El logo y el nombre del sistema ya viven en el menú lateral. */
[data-modo="ejecutivo"] .appbar .logo { display: none; }
/* El botón de volver ("← Tablero", "← Compras"…) vive suelto en la barra,
   justo después del título. En modo ejecutivo el logo desaparece y ese
   botón quedaba pegado al nombre del sistema, como si fuera parte de él.
   Se pasa al extremo izquierdo y se queda sólo con la flecha: ahí se lee
   como lo que es, un "atrás". El texto sigue en el HTML —para el lector
   de pantalla y para el tooltip que le pone appbar.js—, sólo que sin
   tamaño. */
[data-modo="ejecutivo"] .appbar > a.btn {
  order: -1; margin-right: 4px; flex: none;
  width: 36px; height: 36px; padding: 0; font-size: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
[data-modo="ejecutivo"] .appbar > a.btn::before {
  content: "←"; font-size: 17px; line-height: 1; font-weight: 600;
}
[data-modo="ejecutivo"] .appbar .user-pill { background: var(--surface-2); color: var(--text); }
[data-modo="ejecutivo"] .appbar .user-pill .role,
[data-modo="ejecutivo"] .appbar .user-pill .badge-admin { background: var(--border); color: var(--text-soft); }
[data-modo="ejecutivo"] .appbar .btn { background: var(--surface-2); color: var(--text-soft); border-color: var(--border); }
[data-modo="ejecutivo"] .appbar .btn:hover { background: var(--surface); color: var(--text); }
[data-modo="ejecutivo"] .appbar .theme-toggle,
[data-modo="ejecutivo"] .appbar .icon-sq { background: var(--surface-2); color: var(--text-soft); border-color: var(--border); }

.sig-ham { display: none; background: var(--surface-2); color: var(--text-soft);
  border: 1px solid var(--border); border-radius: 10px; width: 38px; height: 38px; flex: none;
  align-items: center; justify-content: center; cursor: pointer; }
.sig-ham svg { width: 18px; height: 18px; }
.sig-sb-velo { display: none; }

/* Angosto: el menú deja de empujar y se abre encima, con velo. */
@media (max-width: 900px) {
  [data-modo="ejecutivo"] body { padding-left: 0; }
  [data-modo="ejecutivo"] .sig-sb { transform: translateX(-100%); box-shadow: var(--shadow); }
  [data-modo="ejecutivo"][data-sb-abierto] .sig-sb { transform: none; }
  [data-modo="ejecutivo"] .sig-ham { display: inline-flex; }
  [data-modo="ejecutivo"][data-sb-abierto] .sig-sb-velo {
    display: block; position: fixed; inset: 0; z-index: 35; background: rgba(15,23,42,.45); }
  /* Plegado no aplica en el teléfono: ahí o está o no está. */
  [data-modo="ejecutivo"][data-sb="corto"] { --sb: 234px; }
}
/* ── Las tarjetas de las portadas, en modo ejecutivo ─────────────────
   Rectangulares y pintadas ENTERAS, cada una de un color, con el icono
   en grande y traslúcido al fondo: el estilo de tablero que pidió el
   usuario. Los colores se reparten por posición (ver la paleta abajo).

   Cada portada trae su propia clase —.module-card en unas, .opt-card en
   otras— y sus iconos llegan pintados desde el JS de cada pantalla; por
   eso aquí se nombran las dos y varias reglas van con !important: es la
   única forma de igualarlas sin entrar a editar trece archivos.
   Sólo las tarjetas que son ACCESOS: la .pol-card de Políticas se deja
   en paz, que ésa es un documento con su descripción. */
[data-modo="ejecutivo"] .modules-grid,
[data-modo="ejecutivo"] .opt-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 244px), 1fr));
}
[data-modo="ejecutivo"] .module-card,
[data-modo="ejecutivo"] .opt-card {
  position: relative; overflow: hidden;
  /* Alto suficiente para el caso más cargado —título, dos líneas de
     descripción y su "Solicitar insumos →"—, que si no se cortaba. */
  min-height: 134px; padding: 16px 18px; gap: 0;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--c-card, var(--primary)); border-color: transparent; color: #fff;
  box-shadow: var(--shadow-sm);
}
/* Cada tarjeta de un color, en el orden en que la portada las pinta, y
   la paleta vuelve a empezar a la séptima. Va por posición y no por
   módulo a propósito: así una portada nueva queda coloreada sola, sin
   que nadie tenga que asignarle nada. */
[data-modo="ejecutivo"] .module-card:nth-child(6n+1),
[data-modo="ejecutivo"] .opt-card:nth-child(6n+1)  { --c-card: #e11d48; }  /* rojo */
[data-modo="ejecutivo"] .module-card:nth-child(6n+2),
[data-modo="ejecutivo"] .opt-card:nth-child(6n+2)  { --c-card: #059669; }  /* verde */
[data-modo="ejecutivo"] .module-card:nth-child(6n+3),
[data-modo="ejecutivo"] .opt-card:nth-child(6n+3)  { --c-card: #0284c7; }  /* azul */
[data-modo="ejecutivo"] .module-card:nth-child(6n+4),
[data-modo="ejecutivo"] .opt-card:nth-child(6n+4)  { --c-card: #ea580c; }  /* naranja */
[data-modo="ejecutivo"] .module-card:nth-child(6n+5),
[data-modo="ejecutivo"] .opt-card:nth-child(6n+5)  { --c-card: #7c3aed; }  /* morado */
[data-modo="ejecutivo"] .module-card:nth-child(6n+6),
[data-modo="ejecutivo"] .opt-card:nth-child(6n+6)  { --c-card: #0d9488; }  /* teal */
[data-modo="ejecutivo"] .module-card:hover,
[data-modo="ejecutivo"] .opt-card:hover {
  background: color-mix(in srgb, var(--c-card, var(--primary)) 86%, #000);
  border-color: transparent; transform: translateY(-3px);
}
/* En oscuro los mismos colores encandilan sobre el fondo negro: se
   apagan un punto, y el texto blanco sigue leyéndose igual. */
[data-theme="dark"][data-modo="ejecutivo"] .module-card,
[data-theme="dark"][data-modo="ejecutivo"] .opt-card {
  background: color-mix(in srgb, var(--c-card, var(--primary)) 82%, #0b1220);
}
[data-theme="dark"][data-modo="ejecutivo"] .module-card:hover,
[data-theme="dark"][data-modo="ejecutivo"] .opt-card:hover {
  background: color-mix(in srgb, var(--c-card, var(--primary)) 94%, #0b1220);
}
/* La franja lateral sobra cuando la tarjeta entera ya es del color. */
[data-modo="ejecutivo"] .module-card::before { display: none; }
/* El icono deja de ser una pastilla y pasa a ser la marca de agua del
   fondo, como en los tableros de los que salió la idea. */
[data-modo="ejecutivo"] .module-card .ic,
[data-modo="ejecutivo"] .opt-card .ic {
  position: absolute; right: -6px; bottom: -10px; margin: 0;
  width: auto; height: auto; background: none !important; box-shadow: none !important;
  color: #fff; opacity: .22; pointer-events: none;
}
[data-modo="ejecutivo"] .module-card .ic svg,
[data-modo="ejecutivo"] .opt-card .ic svg { width: 78px; height: 78px; }
[data-modo="ejecutivo"] .module-card:hover .ic { transform: none; }

[data-modo="ejecutivo"] .module-card h3,
[data-modo="ejecutivo"] .opt-card h3 { font-size: 17px; font-weight: 700; color: #fff; }
[data-modo="ejecutivo"] .module-card p,
[data-modo="ejecutivo"] .opt-card p {
  font-size: 12px; margin-top: 3px; opacity: .85;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  max-width: 82%;
}
/* Todo lo que va dentro, en blanco: la flechita, los enlaces y los
   "Solicitar insumos →" que en algunas portadas son un span suelto. Va
   con !important porque esas portadas los pintan del color del tema en
   su propio <style>, que se carga después: quedaban azul sobre azul. */
[data-modo="ejecutivo"] .module-card *,
[data-modo="ejecutivo"] .opt-card * { color: #fff !important; }
[data-modo="ejecutivo"] .module-card:hover .go { color: #fff; }

@media print { .sig-sb, .sig-ham, .sig-sb-velo, .imp-banner { display: none !important; }
  [data-modo="ejecutivo"] body { padding-left: 0; } }

/* =====================================================================
   COMPONENTES COMPARTIDOS DEL EQUIPO (prefijo sx-) — 2026-10
   Solo clases NUEVAS: ningún selector anterior se modifica. Se usan con
   las variables de color/tema que ya existen (claro y oscuro).
   Muestra visual: sig/docs/componentes-front.html (abrir desde el disco).
   ===================================================================== */

/* Contenedor adaptable y centrado: ocupa todo el ancho en pantallas chicas
   y crece con la pantalla hasta un tope; centrado en las anchas. */
.sx-content { width: 100%; max-width: clamp(960px, 90vw, 1600px); margin-inline: auto; }

/* Encabezado de página con acciones a la derecha (centradas con el título). */
.sx-page-head-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-bottom: clamp(16px, 2.5vw, 24px); }
.sx-page-head-row > .page-head { margin-bottom: 0; }
.sx-btn-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Modal: cabecera fija y scroll solo en el cuerpo (usar junto a .modal). */
.modal.sx-modal-fixed { display: flex; flex-direction: column; overflow: hidden; }
.modal.sx-modal-fixed > header { flex: 0 0 auto; }
.modal.sx-modal-fixed > .body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sx-modal-sub { font-size: 12.5px; color: var(--text-muted); margin: 2px 0 0; }
/* Pie de modal: a la derecha; orden Cancelar · destructiva · principal. */
.sx-modal-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sx-modal-section { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin-top: 14px; }
.sx-modal-section > :first-child { margin-top: 0; }
.sx-modal-section > :last-child { margin-bottom: 0; }

/* Pie fijo para modales largos: va FUERA del .body, como hijo directo de .modal.sx-modal-fixed. */
.modal.sx-modal-fixed > .sx-modal-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface); }

/* Barra de filtros: controles de la misma altura (42 px) alineados abajo. */
.sx-filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; }
.sx-filters .field { flex: 0 1 190px; margin-bottom: 0; }
.sx-filters .input, .sx-filters select.input, .sx-filters .btn { height: 42px; box-sizing: border-box; }

/* Tabla con altura máxima y scroll (p. ej. dentro de un modal). */
.sx-tbl-scroll { max-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* Formularios: cuadrícula que se adapta sola, sin breakpoints. */
.sx-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.sx-form-grid > .sx-full { grid-column: 1 / -1; }
.sx-field-sm { max-width: 180px; }
.sx-hint { font-size: 12px; color: var(--text-muted); margin: 6px 0 0; }
.sx-req { color: var(--danger); margin-left: 2px; }

/* Tablas: columnas numéricas a la derecha y acciones centradas. */
table td.sx-num, table th.sx-num { text-align: right; font-variant-numeric: tabular-nums; }
.sx-tabular { font-variant-numeric: tabular-nums; }
.sx-row-actions { display: flex; align-items: center; justify-content: center; gap: 6px; }

/* Botón con icono SVG alineado. */
.sx-btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sx-btn-icon svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Pill de estado alineada con el texto. */
.sx-pill { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border); }
.sx-pill.ok { background: var(--success-soft); color: var(--success); border-color: transparent; }
.sx-pill.warn { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.sx-pill.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.sx-pill.info { background: var(--primary-soft); color: var(--primary); border-color: transparent; }

/* Estado vacío amigable (la combinación de filtros nunca tuvo datos). */
.sx-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 24px; color: var(--text-soft); }
.sx-empty-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.sx-empty-t { font-size: 15.5px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.sx-empty-s { font-size: 13px; max-width: 380px; margin: 0; }

/* Zona para soltar/elegir archivos. */
.sx-dropzone { border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 34px 20px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.sx-dropzone:hover, .sx-dropzone.sx-over { border-color: var(--primary); background: var(--primary-soft); }
.sx-dropzone.sx-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Paginador (Anterior · N de M · Siguiente) a la derecha de la barra de filtros. */
.sx-pager { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; white-space: nowrap; }