/* ============================================================
   AB Comercial — Sistema de diseño (escritorio, look ERP sobrio)
   Un solo archivo compartido por todos los módulos.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* superficies */
  --bg:            #f3f4f6;
  --surface:       #ffffff;
  --surface-2:     #fafafb;
  --border:        #e4e6ea;
  --border-strong: #d3d6dc;

  /* texto */
  --text:   #1a1d24;
  --text-2: #565c6b;
  --text-3: #8b909c;

  /* sidebar (oscuro, neutro — no azul brillante) */
  --side-bg:       #171a21;
  --side-bg-hov:   #21252f;
  --side-border:   #2a2e38;
  --side-text:     #b5b9c4;
  --side-text-dim: #6c7280;
  --side-active:   #ffffff;
  --side-active-bg:#262a35;

  /* acento único, sobrio (azul acero, no "iOS blue") */
  --accent:      #33507a;
  --accent-bg:   #eef1f6;
  --accent-text: #2a4266;

  /* estados financieros — únicos toques de color permitidos */
  --green:    #1f7a4d;
  --green-bg: #eaf6ef;
  --red:      #b3261e;
  --red-bg:   #fbeceb;
  --amber:    #92600c;
  --amber-bg: #fbf1de;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius:    10px;
  --radius-sm: 7px;
  --shadow:    0 1px 2px rgba(16,24,40,.05);
  --sidebar-w: 232px;
}

html{-webkit-text-size-adjust:100%;overflow-x:hidden;width:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  font-size:14px;
  line-height:1.45;
  overflow-x:hidden;
  width:100%;
}

a{color:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:20px}
::-webkit-scrollbar-track{background:transparent}

/* ══════════════ LAYOUT ══════════════ */
.app{display:flex;min-height:100vh}

.content{
  flex:1;
  margin-left:var(--sidebar-w);
  min-width:0;
  padding:28px 36px 48px;
  max-width:1320px;
}

/* ══════════════ SIDEBAR ══════════════ */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;
  width:var(--sidebar-w);
  background:var(--side-bg);
  border-right:1px solid var(--side-border);
  display:flex;flex-direction:column;
  z-index:100;
}

.side-brand{
  display:flex;align-items:center;gap:10px;
  padding:20px 20px 18px;
  border-bottom:1px solid var(--side-border);
}
.side-brand-icon{
  width:32px;height:32px;border-radius:8px;
  background:var(--side-active-bg);
  border:1px solid var(--side-border);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.side-brand-icon svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8}
.side-brand-text{font-size:.86rem;font-weight:600;letter-spacing:-.01em;color:#fff}
.side-brand-text span{color:var(--side-text-dim);font-weight:400}

.side-nav{flex:1;padding:14px 12px;overflow-y:auto}
.side-sec{
  font-size:.63rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--side-text-dim);
  padding:14px 10px 6px;
}
.side-sec:first-child{padding-top:4px}

.side-link{
  display:flex;align-items:center;gap:11px;
  padding:9px 10px;border-radius:var(--radius-sm);
  color:var(--side-text);text-decoration:none;
  font-size:.83rem;font-weight:500;
  margin-bottom:1px;
  transition:background .15s,color .15s;
}
.side-link svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}
.side-link:hover{background:var(--side-bg-hov);color:#fff}
.side-link.active{background:var(--side-active-bg);color:var(--side-active)}
.side-link.active svg{stroke:#fff}

.side-foot{
  border-top:1px solid var(--side-border);
  padding:14px 16px;
  display:flex;align-items:center;gap:10px;
}
.side-avatar{
  width:32px;height:32px;border-radius:7px;
  background:var(--side-active-bg);border:1px solid var(--side-border);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:.75rem;font-weight:700;color:#fff;
}
.side-user{flex:1;min-width:0}
.side-user-name{font-size:.78rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user-rol{font-size:.68rem;color:var(--side-text-dim);text-transform:capitalize}
.side-logout{
  width:28px;height:28px;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--side-text-dim);text-decoration:none;
  transition:background .15s,color .15s;
}
.side-logout:hover{background:var(--red-bg);color:var(--red)}
.side-logout svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* ══════════════ PAGE HEADER ══════════════ */
.page-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:24px;flex-wrap:wrap;gap:12px;
}
.page-eyebrow{font-size:.72rem;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.page-title{font-size:1.5rem;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.page-sub{font-size:.82rem;color:var(--text-2);margin-top:3px}
.page-actions{display:flex;gap:8px;flex-shrink:0}

/* ══════════════ BUTTONS ══════════════ */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:var(--radius-sm);
  font-family:var(--font);font-size:.8rem;font-weight:600;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);
  text-decoration:none;cursor:pointer;transition:all .15s;
}
.btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.btn:hover{border-color:var(--text-3);color:var(--text)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-text);border-color:var(--accent-text);color:#fff}

/* ══════════════ KPI CARDS ══════════════ */
.kpi-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;margin-bottom:14px;
}
.kpi{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);
}
.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.kpi-icon{
  width:34px;height:34px;border-radius:8px;
  background:var(--accent-bg);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.kpi-icon svg{width:16px;height:16px;stroke:var(--accent-text);fill:none;stroke-width:1.8}
.kpi.k-green .kpi-icon{background:var(--green-bg)}
.kpi.k-green .kpi-icon svg{stroke:var(--green)}
.kpi.k-red   .kpi-icon{background:var(--red-bg)}
.kpi.k-red   .kpi-icon svg{stroke:var(--red)}
.kpi.k-amber .kpi-icon{background:var(--amber-bg)}
.kpi.k-amber .kpi-icon svg{stroke:var(--amber)}

.kpi-badge{font-size:.68rem;font-weight:600;padding:3px 8px;border-radius:20px}
.badge-up{background:var(--green-bg);color:var(--green)}
.badge-dn{background:var(--red-bg);color:var(--red)}
.badge-neu{background:var(--surface-2);color:var(--text-3);border:1px solid var(--border)}

.kpi-val{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--text);line-height:1}
.kpi-lbl{font-size:.76rem;color:var(--text-3);font-weight:500;margin-top:5px}

/* ══════════════ SECTION LABEL ══════════════ */
.sec{display:flex;align-items:center;gap:10px;margin:26px 0 14px}
.sec-text{font-size:.76rem;font-weight:600;color:var(--text);white-space:nowrap}
.sec-line{flex:1;height:1px;background:var(--border)}
.sec-link{font-size:.78rem;color:var(--accent-text);font-weight:600;text-decoration:none;white-space:nowrap}

/* ══════════════ QUICK ACTIONS ══════════════ */
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:6px}
.quick-btn{
  display:flex;align-items:center;gap:11px;
  padding:13px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  text-decoration:none;color:var(--text);box-shadow:var(--shadow);
  transition:border-color .15s,box-shadow .15s;
}
.quick-btn:hover{border-color:var(--border-strong);box-shadow:0 2px 6px rgba(16,24,40,.07)}
.quick-icon{
  width:34px;height:34px;border-radius:8px;background:var(--accent-bg);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.quick-icon svg{width:16px;height:16px;stroke:var(--accent-text);fill:none;stroke-width:1.8}
.quick-label{font-size:.83rem;font-weight:600}

/* ══════════════ TABLE / CARD LIST ══════════════ */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.data-table{width:100%;border-collapse:collapse;font-size:.82rem}
.data-table th{
  text-align:left;padding:10px 16px;background:var(--surface-2);
  font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);
  border-bottom:1px solid var(--border);
}
.data-table td{padding:11px 16px;border-bottom:1px solid var(--border);color:var(--text-2)}
.data-table tr:last-child td{border-bottom:none}
.data-table td.strong{color:var(--text);font-weight:600}
.data-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.empty-state{padding:32px 16px;text-align:center;color:var(--text-3);font-size:.83rem}

/* ══════════════ ALERTS / FLASH MESSAGES ══════════════ */
.alert{
  display:flex;align-items:flex-start;gap:10px;
  padding:11px 14px;border-radius:var(--radius-sm);
  font-size:.82rem;font-weight:500;margin-bottom:16px;line-height:1.5;
}
.alert svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;stroke:currentColor;fill:none;stroke-width:2.2}
.alert-ok {background:var(--green-bg);border:1px solid rgba(31,122,77,.22);color:var(--green)}
.alert-err{background:var(--red-bg);border:1px solid rgba(179,38,30,.2);color:var(--red)}

/* ══════════════ TOOLBAR: BUSCADOR + FILTROS ══════════════ */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.search-box{position:relative;flex:1;min-width:220px;max-width:360px}
.search-box input{
  width:100%;padding:9px 12px 9px 34px;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  font-family:var(--font);font-size:.83rem;color:var(--text);outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.search-box input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.search-box input::placeholder{color:var(--text-3)}
.search-box svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:14px;height:14px;stroke:var(--text-3);fill:none;stroke-width:2}

.chip-row{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  padding:7px 13px;border-radius:var(--radius-sm);
  font-size:.78rem;font-weight:600;white-space:nowrap;
  cursor:pointer;text-decoration:none;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);
  transition:all .15s;
}
.chip.active{background:var(--text);border-color:var(--text);color:#fff}
.chip:hover:not(.active){border-color:var(--text-3);color:var(--text)}

/* ══════════════ BADGES / TAGS ══════════════ */
.tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 9px;border-radius:20px;
  font-size:.68rem;font-weight:600;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);
}
.tag-accent{background:var(--accent-bg);border-color:transparent;color:var(--accent-text)}
.tag-green {background:var(--green-bg);border-color:transparent;color:var(--green)}
.tag-red   {background:var(--red-bg);border-color:transparent;color:var(--red)}
.tag-amber {background:var(--amber-bg);border-color:transparent;color:var(--amber)}

/* ══════════════ AVATAR (iniciales, sobrio) ══════════════ */
.avatar-sq{
  border-radius:8px;background:var(--accent-bg);color:var(--accent-text);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-weight:700;
}

/* ══════════════ PROGRESS BAR ══════════════ */
.bar-track{height:5px;background:var(--surface-2);border:1px solid var(--border);border-radius:99px;overflow:hidden}
.bar-fill{height:100%;border-radius:99px;background:var(--green);transition:width .4s var(--ease,ease)}
.bar-fill.low{background:var(--red)}

/* ══════════════ MODAL SYSTEM ══════════════ */
.overlay{
  position:fixed;inset:0;background:rgba(16,20,28,.5);
  z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;
}
.modal{
  background:var(--surface);border-radius:12px;
  width:100%;max-width:460px;max-height:calc(100vh - 48px);overflow-y:auto;
  box-shadow:0 20px 60px rgba(16,24,40,.25);
}
.modal-head{
  padding:16px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;background:var(--surface);z-index:1;
}
.modal-title{font-size:.94rem;font-weight:600;color:var(--text)}
.modal-close{
  width:26px;height:26px;border-radius:7px;background:var(--surface-2);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.modal-close svg{width:13px;height:13px;stroke:var(--text-2);fill:none;stroke-width:2.2}
.modal-body{padding:20px}

/* ══════════════ FORM ELEMENTS ══════════════ */
.form-group{margin-bottom:13px}
.form-label{font-size:.7rem;font-weight:600;letter-spacing:.02em;color:var(--text-2);margin-bottom:6px;display:block}
.form-input{
  width:100%;padding:9px 12px;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  font-family:var(--font);font-size:.85rem;color:var(--text);outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.form-input::placeholder{color:var(--text-3)}
select.form-input{cursor:pointer}
.form-hint{font-size:.72rem;color:var(--text-3);margin-top:5px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-section-lbl{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-3);margin:16px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border);
}

.btn-submit{
  width:100%;padding:10px;border:none;border-radius:var(--radius-sm);
  background:var(--accent);color:#fff;
  font-family:var(--font);font-size:.85rem;font-weight:600;
  cursor:pointer;margin-top:4px;transition:background .15s;
}
.btn-submit:hover{background:var(--accent-text)}
.btn-submit.danger{background:var(--red)}
.btn-submit.danger:hover{background:#8f1e18}
.btn-submit.gold{background:var(--amber)}
.btn-submit.gold:hover{background:#704a09}
.btn-cancel{
  padding:10px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  background:var(--surface);font-family:var(--font);font-size:.83rem;font-weight:600;
  color:var(--text-2);cursor:pointer;
}
.btn-cancel:hover{border-color:var(--text-3);color:var(--text)}

.confirm-body{padding:22px 20px;text-align:center}
.confirm-title{font-size:.94rem;font-weight:600;margin-bottom:8px;color:var(--text)}
.confirm-sub{font-size:.82rem;color:var(--text-2);margin-bottom:18px;line-height:1.55}
.confirm-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ══════════════ ICON BUTTON (acciones en tabla) ══════════════ */
.btn-icon{
  width:28px;height:28px;border-radius:7px;border:1px solid transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;transition:background .15s,border-color .15s;
}
.btn-icon svg{width:14px;height:14px;stroke:var(--text-3);fill:none;stroke-width:1.8}
.btn-icon:hover{background:var(--surface-2);border-color:var(--border)}
.btn-icon:hover svg{stroke:var(--text)}
.btn-icon.danger:hover{background:var(--red-bg);border-color:transparent}
.btn-icon.danger:hover svg{stroke:var(--red)}
.btn-icon.accent:hover{background:var(--accent-bg);border-color:transparent}
.btn-icon.accent:hover svg{stroke:var(--accent-text)}

/* ══════════════ PAGINATION ══════════════ */
.pagination{display:flex;align-items:center;justify-content:center;gap:5px;margin:22px 0 6px;flex-wrap:wrap}
.pg-btn,.pg-num{
  min-width:30px;height:30px;padding:0 6px;border-radius:7px;
  background:var(--surface);border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font);font-size:.78rem;font-weight:600;color:var(--text-2);
  text-decoration:none;transition:background .15s;
}
.pg-btn:hover,.pg-num:hover{background:var(--surface-2)}
.pg-btn.disabled{opacity:.35;pointer-events:none}
.pg-num.active{background:var(--text);border-color:var(--text);color:#fff}
.pg-dots{padding:0 4px;color:var(--text-3);font-size:.78rem}
.pg-info{text-align:center;font-size:.75rem;color:var(--text-3);margin-bottom:10px}

.empty-state-lg{text-align:center;padding:56px 24px;color:var(--text-3)}
.empty-state-lg .t{font-size:.92rem;font-weight:600;color:var(--text);margin-bottom:5px}
.empty-state-lg .s{font-size:.82rem}

/* ══════════════ MOBILE TOPBAR (oculta en escritorio) ══════════════ */
.mobile-topbar{display:none}
.sidebar-backdrop{display:none}

/* ══════════════ RESPONSIVE ══════════════ */

/* Tablet: sidebar se reduce a solo iconos, sigue fija */
@media(max-width:900px){
  .sidebar{width:64px}
  .sidebar .side-brand-text,.sidebar .side-sec,.sidebar .side-link span,
  .sidebar .side-user{display:none}
  .side-link{justify-content:center}
  .content{margin-left:64px}
}

/* Móvil: sidebar pasa a ser un panel deslizable (drawer) con botón hamburguesa */
@media(max-width:640px){
  .mobile-topbar{
    display:flex;align-items:center;gap:12px;
    position:fixed;top:0;left:0;right:0;height:54px;
    background:var(--side-bg);color:#fff;padding:0 16px;
    z-index:150;
  }
  .mobile-topbar button{
    background:none;border:none;color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;padding:4px;flex-shrink:0;
  }
  .mobile-topbar button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
  .mobile-topbar .brand{font-size:.88rem;font-weight:600}

  .sidebar{
    width:240px !important;
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:200;
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar .side-brand-text{display:block !important}
  .sidebar .side-sec{display:block !important}
  .sidebar .side-link span{display:inline !important}
  .sidebar .side-user{display:flex !important}
  .sidebar .side-link{justify-content:flex-start !important}

  .sidebar-backdrop{
    position:fixed;inset:0;background:rgba(16,20,28,.5);
    z-index:190;display:none;
  }
  .sidebar-backdrop.show{display:block}

  .content{
    margin-left:0 !important;
    padding:70px 16px 40px !important;
    max-width:100%;
    width:100%;
    overflow-x:hidden;
  }

  /* Encabezado de página apilado */
  .page-head{flex-direction:column;align-items:flex-start;margin-bottom:18px}
  .page-actions{width:100%}
  .page-actions .btn{flex:1;justify-content:center}
  .page-title{font-size:1.25rem}

  /* KPIs en 2 columnas */
  .kpi-grid{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:13px 14px}

  /* Toolbar apilado */
  .toolbar{flex-direction:column;align-items:stretch}
  .search-box{max-width:none;min-width:0}
  .chip-row{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}

  /* Tablas: scroll horizontal en vez de romper el layout */
  .card{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
  .data-table{min-width:560px}

  /* Formularios en una sola columna */
  .form-row{grid-template-columns:1fr}

  /* Modales con menos padding, ocupan casi toda la pantalla */
  .overlay{padding:10px}
  .modal{max-height:calc(100vh - 20px)}

  /* Quick actions en 1 columna */
  .quick-grid{grid-template-columns:1fr}
}