/* ═══════════════════════════════════════════════════════════════════
   CRM 3C Ingenieros — hoja de estilos
   Sistema de diseño basado en variables. Para cambiar la paleta se
   editan los tokens de :root, no las reglas de cada componente.
   El modo oscuro sigue la preferencia del sistema operativo.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens: modo claro ─────────────────────────────────────────── */
:root {
  /* Superficies */
  --bg:        #f5f7fa;
  --panel:     #ffffff;
  --panel-2:   #f0f4f8;
  --panel-3:   #e7eef4;

  /* Texto */
  --ink:       #12283d;
  --ink-2:     #4d6579;
  --ink-3:     #7b93a8;

  /* Líneas */
  --line:      #e2e9f0;
  --line-2:    #cfdae4;

  /* Marca */
  --brand:     #0f2942;
  --brand-2:   #16354f;
  --brand-ink: #dae4ee;
  --brand-ink-2:#8ba3ba;

  /* Acento */
  --acc:       #2b7fd9;
  --acc-2:     #2368b4;
  --acc-ink:   #ffffff;
  --acc-soft:  #e6f0fb;

  /* Semánticos */
  --ok:   #0d7a63;  --ok-soft:   #e0f2ed;
  --warn: #a2610a;  --warn-soft: #fcf2e1;
  --dang: #b3261e;  --dang-soft: #fdeceb;
  --info: #4a5fa8;  --info-soft: #eaedfa;

  /* Sombras y radios */
  --sh-1: 0 1px 2px rgba(15,41,66,.06);
  --sh-2: 0 1px 3px rgba(15,41,66,.07), 0 8px 20px -12px rgba(15,41,66,.28);
  --sh-3: 0 2px 6px rgba(15,41,66,.10), 0 16px 32px -18px rgba(15,41,66,.35);
  --r-s: 7px;
  --r:   10px;
  --r-l: 13px;
}

/* ── Tokens: modo oscuro ──────────────────────────────────────────
   Tres estados: la preferencia del sistema aplica salvo que el usuario
   haya elegido explícitamente, y esa elección gana en ambos sentidos. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0b1520;
    --panel:     #132230;
    --panel-2:   #1a2c3c;
    --panel-3:   #22394c;

    --ink:       #e6eef5;
    --ink-2:     #a6bccd;
    --ink-3:     #7891a5;

    --line:      #22384a;
    --line-2:    #31506a;

    --brand:     #0a1622;
    --brand-2:   #132433;
    --brand-ink: #dae4ee;
    --brand-ink-2:#8ba3ba;

    --acc:       #5aa4ea;
    --acc-2:     #78b6f0;
    --acc-ink:   #06121e;
    --acc-soft:  #15304a;

    --ok:   #40b89b;  --ok-soft:   #0f302a;
    --warn: #e0a154;  --warn-soft: #2c2113;
    --dang: #ef8a82;  --dang-soft: #2e1715;
    --info: #8f9fe0;  --info-soft: #1b1f3a;

    --sh-1: 0 1px 2px rgba(0,0,0,.40);
    --sh-2: 0 1px 3px rgba(0,0,0,.50), 0 8px 20px -12px rgba(0,0,0,.80);
    --sh-3: 0 2px 6px rgba(0,0,0,.55), 0 16px 32px -18px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"] {
  --bg:        #0b1520;
  --panel:     #132230;
  --panel-2:   #1a2c3c;
  --panel-3:   #22394c;

  --ink:       #e6eef5;
  --ink-2:     #a6bccd;
  --ink-3:     #7891a5;

  --line:      #22384a;
  --line-2:    #31506a;

  --brand:     #0a1622;
  --brand-2:   #132433;
  --brand-ink: #dae4ee;
  --brand-ink-2:#8ba3ba;

  --acc:       #5aa4ea;
  --acc-2:     #78b6f0;
  --acc-ink:   #06121e;
  --acc-soft:  #15304a;

  --ok:   #40b89b;  --ok-soft:   #0f302a;
  --warn: #e0a154;  --warn-soft: #2c2113;
  --dang: #ef8a82;  --dang-soft: #2e1715;
  --info: #8f9fe0;  --info-soft: #1b1f3a;

  --sh-1: 0 1px 2px rgba(0,0,0,.40);
  --sh-2: 0 1px 3px rgba(0,0,0,.50), 0 8px 20px -12px rgba(0,0,0,.80);
  --sh-3: 0 2px 6px rgba(0,0,0,.55), 0 16px 32px -18px rgba(0,0,0,.85);
}

/* ── Tipografía alojada localmente ──────────────────────────────── */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/jakarta-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/jakarta-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/jakarta-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/jakarta-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;
  src:url("../fonts/jakarta-800-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/jakarta-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/jakarta-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/jakarta-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ── Base ───────────────────────────────────────────────────────── */
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  background:var(--bg);
  color:var(--ink);
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Cifras de ancho fijo: los importes de una columna quedan alineados */
table, .kpi .val, .mono, input, select { font-variant-numeric:tabular-nums; }

:focus-visible { outline:2px solid var(--acc); outline-offset:2px; border-radius:3px; }

.layout { display:flex; min-height:100vh; }

/* ── Barra lateral ──────────────────────────────────────────────── */
.sidebar {
  position:relative; width:230px; flex-shrink:0;
  background:var(--brand); color:var(--brand-ink);
  display:flex; flex-direction:column;
  transition:width .18s ease;
}
.sidebar .brand { display:flex; align-items:center; gap:11px; padding:19px 18px 17px; }
.sidebar .brand .logo {
  width:36px; height:36px; border-radius:9px; background:#fff;
  display:flex; align-items:center; justify-content:center; flex:none; padding:3px;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.sidebar .brand .logo img { width:100%; height:100%; object-fit:contain; }
.sidebar .brand .name { font-weight:700; font-size:13.5px; line-height:1.25; white-space:nowrap; color:#fff; letter-spacing:-.01em; }
.sidebar .brand .name small { display:block; font-weight:500; font-size:10.5px; color:var(--brand-ink-2); letter-spacing:.04em; }
.sidebar .mwelcome, .sidebar .mtoggle { display:none; }

.sidebar .section {
  padding:15px 18px 5px; font-size:10px; font-weight:700; letter-spacing:.1em;
  color:#7a95ad; text-transform:uppercase; white-space:nowrap;
}
.sidebar nav a {
  display:flex; align-items:center; gap:11px; padding:9px 18px;
  color:#b9cadb; text-decoration:none; font-size:13.5px; font-weight:500;
  white-space:nowrap; position:relative; border-left:3px solid transparent;
  transition:background .13s ease, color .13s ease;
}
.sidebar nav a:hover { background:rgba(255,255,255,.055); color:#fff; }
.sidebar nav a.active {
  background:linear-gradient(90deg, rgba(43,127,217,.26), rgba(43,127,217,.06));
  border-left-color:var(--acc); color:#fff; font-weight:600;
}
.sidebar nav a svg { flex:none; opacity:.8; }
.sidebar nav a.active svg { opacity:1; }
.sidebar .spacer { flex:1; }

.sidebar .userbox {
  display:flex; align-items:center; gap:10px; padding:13px 16px; margin:0 8px;
  border-top:1px solid rgba(255,255,255,.09);
}
.sidebar .userbox img.avatar { width:31px; height:31px; border-radius:50%; flex:none; }
.sidebar .userbox .who { flex:1; min-width:0; }
.sidebar .userbox .who .n { font-size:12.5px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar .userbox .who .e { font-size:10.5px; color:var(--brand-ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar .userbox a { color:var(--brand-ink-2); text-decoration:none; font-size:15px; flex:none; }
.sidebar .userbox a:hover { color:#fff; }

.sidebar-toggle {
  display:flex; align-items:center; gap:11px; width:calc(100% - 16px); margin:0 8px 8px;
  background:transparent; color:#b9cadb; border:none; border-radius:8px;
  padding:9px 10px; cursor:pointer; font:inherit; font-size:13.5px; font-weight:500;
  white-space:nowrap; text-align:left;
}
.sidebar-toggle:hover { background:rgba(255,255,255,.08); color:#fff; }
.sidebar-toggle svg { flex:none; opacity:.8; }
.sidebar-toggle:hover svg { opacity:1; }

.sidebar.collapsed { width:72px; }
.sidebar.collapsed .brand { justify-content:center; padding:19px 10px; }
.sidebar.collapsed .brand .name,
.sidebar.collapsed .section,
.sidebar.collapsed nav a .lbl,
.sidebar.collapsed .sidebar-toggle .lbl,
.sidebar.collapsed .userbox .who { display:none; }
.sidebar.collapsed nav a { justify-content:center; padding:10px; }
.sidebar.collapsed .sidebar-toggle { width:auto; justify-content:center; padding:9px; }
.sidebar.collapsed .userbox { justify-content:center; padding:13px 10px; }

/* ── Área principal ─────────────────────────────────────────────── */
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.main-header {
  background:var(--panel); border-bottom:1px solid var(--line);
  padding:15px 20px; display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.main-header h1 { font-size:18.5px; font-weight:700; color:var(--ink); letter-spacing:-.02em; display:flex; align-items:center; gap:10px; }
.btn-atras {
  flex:none; width:30px; height:30px; border-radius:8px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink-2); display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
}
.btn-atras:hover { background:var(--panel-3); color:var(--ink); }
.container { max-width:1440px; margin:0 auto; padding:24px 20px; width:100%; }

/* ── Tarjetas ───────────────────────────────────────────────────── */
.card {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-l);
  padding:24px; box-shadow:var(--sh-1);
}

/* ── Tablas ─────────────────────────────────────────────────────── */
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:10px 13px; border-bottom:1px solid var(--line); }
th {
  position:sticky; top:0; z-index:2;
  background:var(--panel-2); color:var(--ink-3);
  font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  white-space:nowrap;
}
td { color:var(--ink-2); vertical-align:middle; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:var(--panel-2); }
.tbl-scroll { overflow-x:auto; overflow-y:visible; }

/* Importes: alineados a la derecha y destacados */
td.num, th.num { text-align:right; }
td.num { font-weight:600; color:var(--ink); }
td.neg { color:var(--dang); font-weight:700; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }

/* ── Distintivos de estado ──────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:var(--r-s);
  font-size:11px; font-weight:700; white-space:nowrap; line-height:1.5;
}
.badge::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; }
.badge.on      { background:var(--ok-soft);   color:var(--ok); }
.badge.off     { background:var(--dang-soft); color:var(--dang); }
.badge.neutral { background:var(--panel-3);   color:var(--ink-3); }
.badge.info    { background:var(--info-soft); color:var(--info); }
.badge.warn    { background:var(--warn-soft); color:var(--warn); }
/* Distintivo usado sólo como icono (p. ej. el carrito de Uber): sin punto */
.badge:empty::before, .badge.sindot::before { display:none; }

/* ── Botones ────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--acc); color:var(--acc-ink); text-decoration:none;
  padding:8px 15px; border-radius:var(--r-s);
  font-family:inherit; font-size:13px; font-weight:600;
  border:1px solid transparent; cursor:pointer; box-shadow:var(--sh-1);
  transition:background .13s ease, box-shadow .13s ease;
}
.btn:hover { background:var(--acc-2); box-shadow:var(--sh-2); }
.btn.secondary { background:var(--panel); color:var(--ink); border-color:var(--line-2); box-shadow:none; }
.btn.secondary:hover { background:var(--panel-2); box-shadow:none; }
.btn.success { background:var(--ok); color:#fff; }
.btn.success:hover { background:var(--ok); filter:brightness(1.1); }
.btn.small { padding:5px 11px; font-size:12px; }

.actions { white-space:nowrap; }
.actions a, .actions button { margin-right:6px; font-size:12.5px; }
.actions a { color:var(--acc); text-decoration:none; font-weight:600; }
.actions a:hover { text-decoration:underline; }

.toolbar { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }

/* ── Avisos ─────────────────────────────────────────────────────── */
.flash {
  padding:11px 15px; border-radius:var(--r-s); font-size:13.5px;
  margin-bottom:15px; border-left:3px solid transparent; font-weight:500;
}
.flash.error   { background:var(--dang-soft); color:var(--dang); border-left-color:var(--dang); }
.flash.success { background:var(--ok-soft);   color:var(--ok);   border-left-color:var(--ok); }
.flash.warn    { background:var(--warn-soft); color:var(--warn); border-left-color:var(--warn); }

/* ── Formularios ────────────────────────────────────────────────── */
form.inline { display:inline; }
.field { margin-bottom:15px; }
.field label {
  display:block; font-size:11.5px; color:var(--ink-3);
  margin-bottom:5px; font-weight:700; letter-spacing:.02em;
}
.field input, .field select, .field textarea {
  width:100%; padding:9px 11px;
  border:1px solid var(--line-2); border-radius:var(--r-s);
  font-size:13.5px; font-family:inherit;
  background:var(--panel); color:var(--ink);
  transition:border-color .13s ease, box-shadow .13s ease;
}
.field input::placeholder, .field textarea::placeholder { color:var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(43,127,217,.16);
}
.field input:disabled, .field select:disabled, .field input[readonly] {
  background:var(--panel-2); color:var(--ink-3); cursor:not-allowed;
}
.field .hint { font-size:11px; color:var(--ink-3); margin-top:4px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.form-actions { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }

.search { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.search input, .search select {
  padding:8px 11px; border:1px solid var(--line-2); border-radius:var(--r-s);
  font-size:13px; font-family:inherit; background:var(--panel); color:var(--ink);
}
.search input:focus, .search select:focus {
  outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(43,127,217,.16);
}

.vacio { text-align:center; padding:44px 20px; color:var(--ink-3); font-size:14px; }

/* ── Indicadores ────────────────────────────────────────────────── */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(178px,1fr)); gap:12px; margin-bottom:20px; }
.kpi {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 17px; box-shadow:var(--sh-1); position:relative; overflow:hidden;
}
.kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--acc); }
.kpi.ok::before   { background:var(--ok); }
.kpi.warn::before { background:var(--warn); }
.kpi.dang::before { background:var(--dang); }
.kpi.on { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc); }
.kpi.on::before { width:4px; }
tr.fila-clic { cursor:pointer; }
tr.fila-clic:hover { background:var(--panel-3); }
.adjunto { text-decoration:none; font-size:15px; }

/* ── Stepper de progreso (estado de una factura de compra) ─────── */
.stepper { display:flex; align-items:flex-start; margin-bottom:22px; }
.paso { display:flex; flex-direction:column; align-items:center; gap:6px; flex:none; }
.paso-circulo {
  width:26px; height:26px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel-3); color:var(--ink-3); border:2px solid var(--line);
  font-size:11.5px; font-weight:700;
}
.paso.hecho .paso-circulo { background:var(--ok); border-color:var(--ok); color:#fff; }
.paso.actual .paso-circulo { background:var(--acc); border-color:var(--acc); color:#fff; }
.paso-etq {
  font-size:10.5px; font-weight:600; color:var(--ink-3); text-align:center;
  max-width:82px; line-height:1.25;
}
.paso.hecho .paso-etq, .paso.actual .paso-etq { color:var(--ink); }
.paso-linea { flex:1; height:2px; background:var(--line); margin:12px 4px 0; min-width:14px; }
.paso-linea.hecho { background:var(--ok); }
@media (max-width:560px) {
  .paso-etq { display:none; }
  .stepper { margin-bottom:14px; }
}
.kpi .lbl { font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
.kpi .val { font-size:26px; font-weight:800; color:var(--ink); margin-top:4px; letter-spacing:-.03em; line-height:1.15; }
.kpi .sub { font-size:11.5px; color:var(--ink-3); margin-top:2px; font-weight:500; }

.muted { color:var(--ink-3); }


/* ── Selector de tema ───────────────────────────────────────────── */
.hd-acciones { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tema {
  background:var(--panel); border:1px solid var(--line-2); cursor:pointer;
  width:34px; height:34px; padding:0; margin:0; flex:none;
  color:var(--ink-2); border-radius:var(--r-s);
  display:flex; align-items:center; justify-content:center;
  transition:background .13s ease, color .13s ease, border-color .13s ease;
}
.tema:hover { color:var(--acc); border-color:var(--acc); background:var(--acc-soft); }
.tema svg { display:block; width:17px; height:17px; }
/* Por defecto (claro) se ofrece pasar a oscuro: se muestra la luna. */
.tema .sol { display:none; }
.tema .luna { display:block; }
/* En oscuro se ofrece volver a claro: se muestra el sol. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema .sol { display:block; }
  :root:not([data-theme="light"]) .tema .luna { display:none; }
}
:root[data-theme="dark"] .tema .sol { display:block; }
:root[data-theme="dark"] .tema .luna { display:none; }
:root[data-theme="light"] .tema .sol { display:none; }
:root[data-theme="light"] .tema .luna { display:block; }

/* ── Responsivo ─────────────────────────────────────────────────── */
@media (max-width:820px) {
  html, body { overflow-x:hidden; }
  .layout { flex-direction:column; max-width:100vw; }
  .sidebar, .sidebar.collapsed { width:100%; flex-direction:column; align-items:stretch; }
  .sidebar .brand { display:flex; align-items:center; gap:10px; padding:9px 14px; }
  .sidebar .brand .name { display:none; }
  .sidebar .mwelcome { display:block; flex:1; min-width:0; font-size:12px; color:var(--brand-ink-2); line-height:1.2; }
  .sidebar .mwelcome b { display:block; font-size:13.5px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sidebar .mtoggle { display:flex; align-items:center; justify-content:center; background:none; border:0; color:#fff; padding:6px; cursor:pointer; flex:none; }
  /* colapsado: solo la barra (logo + Bienvenido) */
  .sidebar > .section, .sidebar > nav, .sidebar .spacer, .sidebar-toggle, .sidebar .userbox { display:none; }
  .sidebar.mobile-open { border-bottom:1px solid rgba(255,255,255,.12); }
  .sidebar.mobile-open > .section {
    display:block; cursor:pointer; position:relative; padding:13px 40px 13px 16px;
    font-size:13px; letter-spacing:0; text-transform:none; color:#fff; font-weight:600;
    border-top:1px solid rgba(255,255,255,.07); }
  .sidebar.mobile-open > .section::after {
    content:'\203A'; position:absolute; right:18px; top:50%; transform:translateY(-50%) rotate(90deg);
    transition:transform .15s; font-size:16px; color:var(--brand-ink-2); }
  .sidebar.mobile-open > .section.open::after { transform:translateY(-50%) rotate(-90deg); }
  .sidebar.mobile-open > .section.open + nav { display:block; }
  .sidebar.mobile-open > .section + nav { display:none; background:rgba(0,0,0,.18); }
  .sidebar.mobile-open > nav a { padding:12px 16px 12px 30px; border-left:none; justify-content:flex-start; }
  .sidebar.mobile-open nav a .lbl { display:inline; }
  .sidebar.mobile-open > nav a.active { background:rgba(43,127,217,.22); border-left:3px solid var(--acc); padding-left:27px; }
  .sidebar.mobile-open .userbox { display:flex; border-top:1px solid rgba(255,255,255,.1); margin-left:0; }
  .sidebar.mobile-open .userbox .who { display:block; }
  .container, .main-header { padding-left:17px; padding-right:17px; }
  .grid-2 { grid-template-columns:1fr; }
  th { position:static; }
}
@media (max-width:560px) {
  .container { padding-top:16px; }
  .card { padding:17px; border-radius:var(--r); }
  .kpis { grid-template-columns:1fr 1fr; gap:9px; }
  .kpi .val { font-size:22px; }
  .toolbar { align-items:stretch; }
  .search { width:100%; }
  .search input { flex:1; min-width:0; }
  .btn { padding:9px 14px; }
}

@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; }
}

@media print {
  .sidebar, .sidebar-toggle, .toolbar, .actions, .form-actions { display:none !important; }
  body { background:#fff; }
  .card, .kpi { box-shadow:none; border-color:#ccc; }
}

/* ── Resumen de módulo ──────────────────────────────────────────── */
.bloque { margin-bottom:24px; }
.bloque-h { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:11px; }
.bloque-h h2 { font-size:15px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.dos-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }

.kpi .val .u { font-size:14px; font-weight:600; color:var(--ink-3); margin-left:5px; letter-spacing:0; }

/* ── Tarjetas de caja abierta ───────────────────────────────────── */
.cajas-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:12px; }
.caja-card {
  display:block; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 15px 12px; box-shadow:var(--sh-1);
  transition:border-color .13s ease, box-shadow .13s ease, transform .13s ease;
}
.caja-card:hover { border-color:var(--acc); box-shadow:var(--sh-2); transform:translateY(-1px); }
.caja-card.alerta { border-left:3px solid var(--warn); }
.caja-card.sobregirada { border-left:3px solid var(--dang); }

.cc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.cc-id { font-family:ui-monospace,Menlo,monospace; font-size:15px; font-weight:800; color:var(--ink-3); }
.cc-dias {
  font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px;
  background:var(--panel-3); color:var(--ink-3);
}
.cc-dias.medio { background:var(--warn-soft); color:var(--warn); }
.cc-dias.alto  { background:var(--dang-soft); color:var(--dang); }

.cc-nombre {
  font-size:14px; font-weight:700; color:var(--ink); line-height:1.3;
  display:flex; align-items:center; gap:6px;
}
.cc-barra { height:6px; border-radius:4px; background:var(--panel-3); overflow:hidden; margin-top:11px; margin-bottom:11px; }
.cc-barra span { display:block; height:100%; background:var(--acc); border-radius:4px; }
.cc-barra span.lleno { background:var(--ok); }

.cc-cifras { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.cc-cifras > div { display:flex; flex-direction:column; gap:1px; min-width:0; }
.cc-l { font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.cc-v { font-size:12.5px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.cc-v.neg { color:var(--dang); }
.cc-v.ok  { color:var(--ok); }

.cc-pie {
  margin-top:10px; padding-top:9px; border-top:1px solid var(--line);
  font-size:11px; color:var(--ink-3);
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}

/* ── Barras por persona ─────────────────────────────────────────── */
.fila-emp { margin-bottom:15px; }
.fila-emp:last-of-type { margin-bottom:4px; }
.fe-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:5px; }
.fe-nombre { font-size:13px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fe-monto { font-size:13px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; flex:none; }
.fe-barra { display:flex; height:8px; border-radius:4px; overflow:hidden; background:var(--panel-3); }
.fe-leg { background:var(--ok); }
.fe-pen { background:var(--warn); }
.fe-pie { font-size:11.5px; color:var(--ink-3); margin-top:4px; }
.fe-pie b.neg { color:var(--dang); font-variant-numeric:tabular-nums; }

.leyenda { display:flex; gap:16px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink-3); }
.leyenda span { display:flex; align-items:center; gap:6px; }
.leyenda i { width:9px; height:9px; border-radius:2px; display:block; }
.leyenda .sw-leg { background:var(--ok); }
.leyenda .sw-pen { background:var(--warn); }

/* ── Tendencia mensual ──────────────────────────────────────────── */
.tendencia { display:flex; align-items:flex-end; gap:9px; }
.tm { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; }
.tm-val { font-size:10px; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums;
  white-space:nowrap; transform:scale(.92); }
.tm-barra { width:100%; height:96px; display:flex; align-items:flex-end;
  background:var(--panel-2); border-radius:5px; overflow:hidden; }
.tm-barra span { width:100%; background:var(--acc); border-radius:5px 5px 0 0; min-height:3px; }
.tm:last-child .tm-barra span { background:var(--brand); }
.tm-mes { font-size:11px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.tm-n { font-size:10px; color:var(--ink-3); }

@media (max-width:900px) {
  .dos-col { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .cajas-grid { grid-template-columns:1fr; }
  .tm-val { display:none; }
}

/* ── Selector de periodo ────────────────────────────────────────── */
.periodo { display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-bottom:18px; }
.seg { display:flex; background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-s); padding:2px; gap:2px; }
.seg button {
  font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  background:none; border:none; color:var(--ink-2);
  padding:6px 13px; border-radius:5px; white-space:nowrap;
  transition:background .13s ease, color .13s ease;
}
.seg button:hover { color:var(--ink); background:var(--panel); }
.seg button.on { background:var(--acc); color:var(--acc-ink); box-shadow:var(--sh-1); }
.periodo select {
  font-family:inherit; font-size:13px; padding:7px 11px;
  border:1px solid var(--line-2); border-radius:var(--r-s);
  background:var(--panel); color:var(--ink);
}
.periodo select:focus { outline:none; border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(43,127,217,.16); }
.periodo-etq { font-size:12.5px; color:var(--ink-3); font-weight:600; margin-left:auto; }

/* Meses navegables en las gráficas */
a.tm { text-decoration:none; color:inherit; border-radius:6px; padding:3px 2px;
  transition:background .13s ease; }
a.tm:hover { background:var(--panel-2); }
a.tm:hover .tm-barra span { background:var(--acc-2); }
.tm.destacado .tm-barra span { background:var(--brand); }
.tm.destacado .tm-mes { color:var(--acc); font-weight:700; }
.tendencia.alta .tm-barra { height:120px; }
.tendencia.alta { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
.tendencia.alta .tm { min-width:58px; }

.cc-dias.cerrada { background:var(--panel-3); color:var(--ink-3); font-weight:600; }