/* ============================================================================
   iberoASP · Sistema de diseño (Fase 1 del rediseño)
   Capa de tema sobre Bootstrap 5: tokens, tipografía y reskin de componentes.
   NO cambia la estructura de las páginas; solo su aspecto. Tema claro.
   ============================================================================ */

:root{
  /* --- Marca / acento (petróleo-teal, continuidad con la identidad actual) --- */
  --erp-accent:#0d7d74;
  --erp-accent-600:#0b6a63;
  --erp-accent-700:#095852;
  --erp-accent-soft:#e2f1ef;
  --erp-accent-rgb:13,125,116;

  /* --- Chrome de navegación (tinta pino profunda, harmoniza con el teal) --- */
  --erp-nav:#0e211d;
  --erp-nav-2:#16302a;
  --erp-nav-ink:#cddbd6;
  --erp-nav-muted:#7a938c;

  /* --- Neutros (papel: off-white neutro-cálido con leve sesgo verde) --- */
  --erp-bg:#edf0ec;
  --erp-surface:#ffffff;
  --erp-surface-2:#f4f7f3;
  --erp-ink:#152420;
  --erp-ink-2:#39504a;
  --erp-muted:#63756e;
  --erp-line:#e2e8e3;
  --erp-line-2:#eef2ee;
  /* rejilla de papel pautado (guiño al libro contable) — muy tenue */
  --erp-grid-line:rgba(16,40,34,.032);

  /* --- Semántica de estado (independiente del acento) --- */
  --erp-good:#17915f;   --erp-good-soft:#e2f3ea;
  --erp-warn:#b0730c;   --erp-warn-soft:#fbeed7;
  --erp-bad:#c33a30;    --erp-bad-soft:#fbe6e3;
  --erp-info:#0d7d74;   --erp-info-soft:#e2f1ef;

  --erp-shadow-sm:0 1px 2px rgba(20,30,40,.05), 0 4px 12px rgba(20,30,40,.05);
  --erp-shadow:0 1px 2px rgba(20,30,40,.06), 0 12px 30px rgba(20,30,40,.08);
  --erp-r:12px;

  --erp-sans:'IBM Plex Sans',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --erp-disp:'Schibsted Grotesk',var(--erp-sans);
  --erp-mono:'IBM Plex Mono',ui-monospace,"SFMono-Regular",Consolas,monospace;

  /* --- Puente con Bootstrap: recolorea primary/link en toda la app --- */
  --bs-primary:var(--erp-accent);
  --bs-primary-rgb:var(--erp-accent-rgb);
  --bs-link-color:var(--erp-accent-600);
  --bs-link-hover-color:var(--erp-accent-700);
  --bs-body-font-family:var(--erp-sans);
  --bs-body-color:var(--erp-ink);
  --bs-body-bg:var(--erp-bg);
  --bs-border-color:var(--erp-line);
}

/* ---------- base ---------- */
body{
  font-family:var(--erp-sans);
  background:var(--erp-bg);
  color:var(--erp-ink);
  -webkit-font-smoothing:antialiased;
  font-size:15px;
  line-height:1.55;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family:var(--erp-disp);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--erp-ink);
}
a{color:var(--erp-accent-600);text-decoration:none}
a:hover{color:var(--erp-accent-700)}
.text-primary{color:var(--erp-accent)!important}
.text-muted{color:var(--erp-muted)!important}
.bg-primary{background-color:var(--erp-accent)!important}
.border-primary{border-color:var(--erp-accent)!important}
code,kbd,pre,.font-monospace{font-family:var(--erp-mono)}
::selection{background:var(--erp-accent-soft)}

.body-content,.container.body-content{max-width:1320px;padding-top:6px}

/* ---------- barra de navegación (superior, en tinta) ---------- */
.navbar.bg-primary{
  background:var(--erp-nav)!important;
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 1px 0 rgba(0,0,0,.2), 0 6px 22px rgba(10,25,30,.16);
  padding-top:.4rem;padding-bottom:.4rem;
  position:sticky;top:0;z-index:1030;
}
.navbar .navbar-brand{
  font-family:var(--erp-disp);font-weight:800;letter-spacing:-.01em;font-size:1.12rem;
  color:#fff;display:flex;align-items:center;gap:.5rem;
}
.navbar .navbar-brand .bi{color:var(--erp-accent);
  background:rgba(var(--erp-accent-rgb),.16);border-radius:8px;padding:.28rem;font-size:.95rem}
.navbar-dark .navbar-nav .nav-link{
  color:var(--erp-nav-ink);font-size:.9rem;font-weight:500;
  padding:.42rem .7rem;border-radius:8px;margin:0 1px;
  transition:background .12s ease,color .12s ease;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus{color:#fff;background:rgba(255,255,255,.07)}
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-item.dropdown .nav-link.show{background:rgba(255,255,255,.10);color:#fff}
.navbar-dark .navbar-nav .nav-link .bi{opacity:.85;margin-right:.15rem}
.navbar .nav-link.fw-bold.text-warning{color:#ffd07a!important}
.navbar .dropdown-toggle::after{opacity:.5}

/* menús desplegables refinados */
.dropdown-menu{
  border:1px solid var(--erp-line);
  border-radius:var(--erp-r);
  box-shadow:var(--erp-shadow);
  padding:.4rem;
  font-size:.885rem;
  --bs-dropdown-link-active-bg:var(--erp-accent-soft);
  --bs-dropdown-link-active-color:var(--erp-accent-700);
}
.dropdown-menu .dropdown-item{
  border-radius:8px;padding:.44rem .6rem;color:var(--erp-ink-2);display:flex;align-items:center;gap:.55rem;
}
.dropdown-menu .dropdown-item .bi{color:var(--erp-muted);width:1.05rem;text-align:center;font-size:.95rem}
.dropdown-menu .dropdown-item:hover,.dropdown-menu .dropdown-item:focus{
  background:var(--erp-accent-soft);color:var(--erp-accent-700);
}
.dropdown-menu .dropdown-item:hover .bi{color:var(--erp-accent-600)}
.dropdown-menu .dropdown-item.fw-bold{color:var(--erp-accent-700)}
.dropdown-header{
  font-family:var(--erp-mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--erp-muted);padding:.55rem .6rem .25rem;
}
.dropdown-divider{border-color:var(--erp-line-2);margin:.35rem .2rem}

/* ---------- tarjetas ---------- */
.card{
  border:1px solid var(--erp-line);
  border-radius:var(--erp-r);
  box-shadow:var(--erp-shadow-sm);
  background:var(--erp-surface);
}
.card+.card{margin-top:1rem}
.card-header{
  background:var(--erp-surface);
  border-bottom:1px solid var(--erp-line);
  font-family:var(--erp-disp);font-weight:600;
  padding:.85rem 1.1rem;
}
.card-header.bg-primary,.card-header.bg-dark{color:#fff}
.card-body{padding:1.1rem}
.card-title{font-family:var(--erp-disp)}

/* ---------- botones ---------- */
.btn{border-radius:9px;font-weight:500;font-size:.9rem;padding:.44rem .85rem;letter-spacing:.005em}
.btn-lg{border-radius:11px}
.btn-sm{border-radius:7px}
.btn-primary{
  --bs-btn-bg:var(--erp-accent);--bs-btn-border-color:var(--erp-accent);
  --bs-btn-hover-bg:var(--erp-accent-600);--bs-btn-hover-border-color:var(--erp-accent-600);
  --bs-btn-active-bg:var(--erp-accent-700);--bs-btn-active-border-color:var(--erp-accent-700);
  --bs-btn-disabled-bg:var(--erp-accent);--bs-btn-disabled-border-color:var(--erp-accent);
  box-shadow:0 1px 2px rgba(var(--erp-accent-rgb),.35);
}
.btn-outline-primary{
  --bs-btn-color:var(--erp-accent-600);--bs-btn-border-color:var(--erp-accent);
  --bs-btn-hover-bg:var(--erp-accent);--bs-btn-hover-border-color:var(--erp-accent);
  --bs-btn-active-bg:var(--erp-accent-600);
}
.btn-success{--bs-btn-bg:var(--erp-good);--bs-btn-border-color:var(--erp-good);--bs-btn-hover-bg:#137a50;--bs-btn-hover-border-color:#137a50}
.btn-warning{--bs-btn-bg:var(--erp-warn);--bs-btn-border-color:var(--erp-warn);--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#96620a;--bs-btn-hover-border-color:#96620a}
.btn-danger{--bs-btn-bg:var(--erp-bad);--bs-btn-border-color:var(--erp-bad);--bs-btn-hover-bg:#a5302a;--bs-btn-hover-border-color:#a5302a}
.btn-secondary{--bs-btn-bg:#5b6b76;--bs-btn-border-color:#5b6b76;--bs-btn-hover-bg:#4c5b65;--bs-btn-hover-border-color:#4c5b65}
.btn-info{--bs-btn-bg:var(--erp-info);--bs-btn-border-color:var(--erp-info);--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:var(--erp-accent-600);--bs-btn-hover-border-color:var(--erp-accent-600)}
.btn-light{--bs-btn-bg:var(--erp-surface-2);--bs-btn-border-color:var(--erp-line);--bs-btn-hover-bg:#eaeef0}
.btn:focus-visible{outline:2px solid var(--erp-accent);outline-offset:1px;box-shadow:none}

/* ---------- tablas ---------- */
.table{
  --bs-table-color:var(--erp-ink);--bs-table-border-color:var(--erp-line);
  font-size:.9rem;font-variant-numeric:tabular-nums;
}
.table thead th{
  font-family:var(--erp-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--erp-muted);font-weight:600;
  background:var(--erp-surface-2);
  border-bottom:1px solid var(--erp-line);
  padding:.7rem .8rem;white-space:nowrap;
}
.table.table-dark thead th,.table thead.table-dark th{background:var(--erp-nav);color:var(--erp-nav-ink)}
.table tbody td{padding:.62rem .8rem;border-bottom-color:var(--erp-line-2);vertical-align:middle}
.table-hover tbody tr:hover{background:var(--erp-accent-soft)}
.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-bg-type:var(--erp-surface-2)}

/* ---------- formularios ---------- */
.form-control,.form-select{
  border-radius:9px;border-color:var(--erp-line);font-size:.9rem;color:var(--erp-ink);
  background-color:var(--erp-surface);
}
.form-control:focus,.form-select:focus{
  border-color:var(--erp-accent);box-shadow:0 0 0 .18rem rgba(var(--erp-accent-rgb),.18);
}
.form-label{font-size:.82rem;font-weight:600;color:var(--erp-ink-2);margin-bottom:.3rem}
.input-group-text{background:var(--erp-surface-2);border-color:var(--erp-line);color:var(--erp-muted)}
.form-check-input:checked{background-color:var(--erp-accent);border-color:var(--erp-accent)}
.form-switch .form-check-input:checked{background-color:var(--erp-accent);border-color:var(--erp-accent)}

/* ---------- badges / píldoras ---------- */
.badge{font-weight:600;font-size:.7rem;letter-spacing:.02em;padding:.36em .6em;border-radius:999px}
.badge.bg-primary{background:var(--erp-accent-soft)!important;color:var(--erp-accent-700)!important}
.badge.bg-success{background:var(--erp-good-soft)!important;color:var(--erp-good)!important}
.badge.bg-warning{background:var(--erp-warn-soft)!important;color:var(--erp-warn)!important}
.badge.bg-danger{background:var(--erp-bad-soft)!important;color:var(--erp-bad)!important}
.badge.bg-secondary{background:#e7ebee!important;color:#4c5b65!important}
.badge.bg-info{background:var(--erp-info-soft)!important;color:var(--erp-accent-700)!important}
.badge.bg-light{background:var(--erp-surface-2)!important;color:var(--erp-ink-2)!important;border:1px solid var(--erp-line)}
/* la campanita de alertas mantiene rojo sólido para que se vea */
#alertasBadge.bg-danger{background:var(--erp-bad)!important;color:#fff!important}

/* ---------- navegación por pestañas ---------- */
.nav-tabs{border-bottom:1px solid var(--erp-line)}
.nav-tabs .nav-link{
  color:var(--erp-muted);font-weight:500;border:0;border-bottom:2px solid transparent;
  border-radius:0;padding:.6rem .9rem;
}
.nav-tabs .nav-link:hover{color:var(--erp-ink);border-bottom-color:var(--erp-line)}
.nav-tabs .nav-link.active{color:var(--erp-accent-700);background:transparent;border-bottom-color:var(--erp-accent)}
.nav-pills .nav-link{color:var(--erp-ink-2);border-radius:9px}
.nav-pills .nav-link.active{background:var(--erp-accent);color:#fff}

/* ---------- modales ---------- */
.modal-content{border:1px solid var(--erp-line);border-radius:16px;box-shadow:0 24px 60px rgba(15,25,35,.22)}
.modal-header{border-bottom:1px solid var(--erp-line);padding:1rem 1.25rem}
.modal-title{font-family:var(--erp-disp)}
.modal-footer{border-top:1px solid var(--erp-line)}

/* ---------- listas / list-group ---------- */
.list-group-item{border-color:var(--erp-line-2)}
.list-group-item-action:hover{background:var(--erp-accent-soft)}

/* ---------- utilidades de datos ---------- */
.tabular,.text-end.tabular{font-variant-numeric:tabular-nums;font-family:var(--erp-mono)}
.alert{border-radius:11px;border:1px solid transparent}
.alert-success{background:var(--erp-good-soft);color:#0f6b46;border-color:#bfe6d1}
.alert-warning{background:var(--erp-warn-soft);color:#8a5a09;border-color:#f0dcb0}
.alert-danger{background:var(--erp-bad-soft);color:#932c24;border-color:#f2c9c4}
.alert-info{background:var(--erp-info-soft);color:var(--erp-accent-700);border-color:#bfe4e0}

hr{border-color:var(--erp-line);opacity:1}
footer.text-center.text-muted{border-top:1px solid var(--erp-line);padding-top:1rem;font-size:.82rem}

/* barra de scroll discreta (webkit) */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-thumb{background:#c7d0d6;border-radius:20px;border:3px solid var(--erp-bg)}
*::-webkit-scrollbar-thumb:hover{background:#aeb9c0}

/* respeta el modo reducido */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- Avisos (toasts) ---- */
.mg-toasts{position:fixed;right:16px;bottom:16px;z-index:2000;display:flex;flex-direction:column;gap:.5rem;max-width:min(92vw,390px)}
.mg-toast{display:flex;align-items:flex-start;gap:.6rem;background:var(--erp-surface);border:1px solid var(--erp-line);border-left:4px solid var(--erp-muted);border-radius:11px;box-shadow:var(--erp-shadow);padding:.7rem .85rem;font-size:.88rem;opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s}
.mg-toast.show{opacity:1;transform:none}
.mg-toast > .bi{font-size:1.05rem;margin-top:.05rem;flex:0 0 auto}
.mg-toast-msg{flex:1 1 auto;color:var(--erp-ink);word-break:break-word}
.mg-toast-x{border:0;background:none;font-size:1.15rem;line-height:1;color:var(--erp-muted);cursor:pointer;padding:0 .1rem;flex:0 0 auto}
.mg-toast-x:hover{color:var(--erp-ink)}
.mg-toast.mg-ok{border-left-color:var(--erp-good)} .mg-toast.mg-ok > .bi{color:var(--erp-good)}
.mg-toast.mg-error{border-left-color:var(--erp-bad)} .mg-toast.mg-error > .bi{color:var(--erp-bad)}
.mg-toast.mg-warn{border-left-color:var(--erp-warn)} .mg-toast.mg-warn > .bi{color:var(--erp-warn)}
.mg-toast.mg-info{border-left-color:var(--erp-accent)} .mg-toast.mg-info > .bi{color:var(--erp-accent)}

/* ---- Confirmación con estilo ---- */
.mg-confirm-ov{position:fixed;inset:0;background:rgba(10,20,26,.45);z-index:2050;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s;padding:1rem}
.mg-confirm-ov.show{opacity:1}
.mg-confirm{background:var(--erp-surface);border-radius:14px;box-shadow:0 24px 60px rgba(15,25,35,.3);max-width:min(94vw,440px);padding:1.15rem 1.25rem;transform:scale(.96);transition:transform .18s}
.mg-confirm-ov.show .mg-confirm{transform:none}
.mg-confirm-body{color:var(--erp-ink);font-size:.95rem;white-space:pre-line;margin-bottom:1.1rem}
.mg-confirm-foot{display:flex;justify-content:flex-end;gap:.5rem}

/* ---- Usuario con pantalla personalizada (acceso restringido): sin menú lateral ---- */
.app-shell.restringido .app-sidebar{display:none}
.app-shell.restringido .app-main{margin-left:0}
.app-shell.restringido .sidebar-hamburger,
.app-shell.restringido #btnRail,
.app-shell.restringido #navAlertas{display:none!important}
.tb-brand{display:none;color:#fff;background:var(--erp-nav);width:38px;height:38px;border-radius:9px;align-items:center;justify-content:center;text-decoration:none;margin-right:.15rem;flex:0 0 auto}
.tb-brand:hover{background:var(--erp-nav-2);color:#fff}
.tb-brand .bi{color:var(--erp-accent);font-size:1.05rem}
.app-shell.restringido .tb-brand{display:inline-flex}

/* ---- Barra de carga global (AJAX) ---- */
#mgProgress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--erp-accent);z-index:3000;opacity:0;box-shadow:0 0 8px rgba(var(--erp-accent-rgb),.5)}
#mgProgress.go{opacity:1;width:80%;transition:width 9s cubic-bezier(.05,.7,.2,1),opacity .2s}
#mgProgress.done{width:100%;opacity:0;transition:width .2s ease,opacity .35s ease .15s}

/* ---- Migas de pan en la topbar ---- */
.topbar-title .tb-crumb{color:var(--erp-muted);font-weight:500;font-family:var(--erp-sans);font-size:.82rem;margin-right:.35rem}
.topbar-title .tb-crumb::after{content:'›';margin-left:.35rem;opacity:.55}

/* ---- Extras del estándar de maestros ---- */
.mg-toolbar .mg-chips{display:inline-flex;gap:.15rem;align-items:center}
.mg-toolbar .mg-chip{border:1px solid var(--erp-line);background:var(--erp-surface);color:var(--erp-ink-2);border-radius:999px;padding:.2rem .7rem;font-size:.8rem;cursor:pointer;transition:.12s}
.mg-toolbar .mg-chip:hover{border-color:var(--erp-accent);color:var(--erp-accent-700)}
.mg-toolbar .mg-chip.active{background:var(--erp-accent);border-color:var(--erp-accent);color:#fff}
.mg-banner{width:100%;background:var(--erp-accent-soft);border:1px solid #bfe4e0;border-radius:9px;padding:.4rem .7rem;font-size:.83rem;color:var(--erp-accent-700)}
.mg-banner a{font-weight:600;cursor:pointer;text-decoration:underline}
.mg-filtros input{min-width:70px}

/* ---- Maestros en móvil: cada fila como TARJETA (label: valor) ---- */
@media (max-width:767.98px){
  table.mg-sticky > thead{display:none}
  table.mg-sticky, table.mg-sticky > tbody, table.mg-sticky > tbody > tr, table.mg-sticky > tbody > tr > td{display:block;width:100%!important}
  .dataTables_wrapper{overflow-x:hidden}
  table.mg-sticky > tbody > tr{border:1px solid var(--erp-line)!important;border-radius:11px;margin-bottom:.6rem;padding:.35rem .55rem;background:var(--erp-surface)!important;box-shadow:var(--erp-shadow-sm)}
  table.mg-sticky > tbody > tr > td{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:0!important;padding:.34rem .15rem;text-align:right}
  table.mg-sticky > tbody > tr > td::before{content:attr(data-label);font-weight:600;color:var(--erp-muted);font-size:.76rem;text-align:left;flex:0 0 auto}
  table.mg-sticky > tbody > tr > td.mg-check{justify-content:flex-start}
  table.mg-sticky > tbody > tr > td.mg-check::before{content:''}
  table.mg-sticky > tbody > tr > td.text-center{justify-content:flex-end}
}

/* ============================================================================
   FASE 2 · Sidebar «Consola» (menú lateral fijo con secciones colapsables)
   Reviste el mismo DOM/permisos; sustituye la barra superior por una lateral.
   ============================================================================ */
.app-shell{display:flex;min-height:100vh;background:var(--erp-bg)}

.app-sidebar{
  width:266px;flex:0 0 266px;background:var(--erp-nav);color:var(--erp-nav-ink);
  position:fixed;inset:0 auto 0 0;z-index:1045;display:flex;flex-direction:column;
  border-right:1px solid rgba(255,255,255,.06);
}
.app-main{
  margin-left:266px;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;min-height:100vh;
  /* papel pautado: rejilla tenue tipo libro contable, firma visual propia */
  background-color:var(--erp-bg);
  background-image:
    linear-gradient(var(--erp-grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--erp-grid-line) 1px,transparent 1px);
  background-size:27px 27px,27px 27px;
  background-position:-1px -1px;
}

/* marca */
.sidebar-brand{
  display:flex;align-items:center;padding:.9rem 1rem;border-bottom:1px solid rgba(255,255,255,.07);
}
.sidebar-brand a{
  color:#fff;display:flex;align-items:center;gap:.55rem;text-decoration:none;
  font-family:var(--erp-disp);font-weight:800;letter-spacing:-.01em;font-size:1.06rem;
}
.sidebar-brand .bi{color:var(--erp-accent);background:rgba(var(--erp-accent-rgb),.16);border-radius:8px;padding:.3rem;font-size:.95rem}

/* zona scrollable del menú */
.sidebar-scroll{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:.55rem .5rem 1.2rem}
.side-menu{list-style:none;margin:0;padding:0}
.side-menu>li{margin:1px 0}

/* fila de nivel superior (enlace directo o cabecera de grupo) */
.side-link,.side-toggle{
  display:flex;align-items:center;gap:.6rem;width:100%;
  padding:.52rem .62rem;border-radius:9px;color:var(--erp-nav-ink);
  font-size:.9rem;font-weight:500;text-decoration:none;line-height:1.2;
  background:none;border:0;text-align:left;cursor:pointer;
  transition:background .12s,color .12s;
}
.side-link:hover,.side-toggle:hover{background:rgba(255,255,255,.08);color:#fff}
.side-link .side-ico,.side-toggle .side-ico{font-size:1rem;width:1.25rem;text-align:center;opacity:.9;flex:0 0 auto}
.side-toggle .chev{margin-left:auto;transition:transform .16s ease;font-size:.72rem;opacity:.6}
.side-toggle[aria-expanded="true"]{background:rgba(255,255,255,.06);color:#fff}
.side-toggle[aria-expanded="true"] .chev{transform:rotate(90deg);opacity:.9}
.side-link.is-active{background:var(--erp-accent);color:#fff}
.side-link.is-active .side-ico{opacity:1}
.side-link.text-warning{color:#ffd27a!important}
.side-link.text-warning:hover{color:#ffdf9c!important}

/* submenú (acordeón) — visibilidad propia, independiente del plugin/CSS collapse de Bootstrap */
.app-sidebar .side-group > .collapse{display:none}
.app-sidebar .side-group > .collapse.show{display:block}
.side-sub{list-style:none;margin:.1rem 0 .4rem;padding:0}
.side-sub .dropdown-item{
  display:flex;align-items:center;gap:.5rem;white-space:normal;
  padding:.4rem .6rem .4rem .7rem;margin:1px 0 1px .95rem;border-radius:8px;
  color:var(--erp-nav-muted);font-size:.83rem;font-weight:400;text-decoration:none;
  border-left:2px solid rgba(255,255,255,.08);
}
.side-sub .dropdown-item .bi{width:1.05rem;text-align:center;opacity:.75;font-size:.88rem;flex:0 0 auto}
.side-sub .dropdown-item:hover,.side-sub .dropdown-item:focus{
  background:rgba(255,255,255,.08);color:#fff;border-left-color:var(--erp-accent);
}
.side-sub .dropdown-item:hover .bi{opacity:1;color:var(--erp-nav-ink)}
.side-sub .dropdown-item.is-active{background:var(--erp-accent);color:#fff;border-left-color:#fff}
.side-sub .dropdown-item.is-active .bi{opacity:1;color:#fff}
.side-sub .dropdown-item.fw-bold{color:#e8eef0}
.side-sub .dropdown-item.text-primary{color:#7fd8cf!important}
.side-sub .dropdown-header{
  font-family:var(--erp-mono);font-size:.61rem;letter-spacing:.1em;text-transform:uppercase;
  color:#5f757c;padding:.55rem .6rem .2rem .95rem;
}
.side-sub .dropdown-divider{border-top:1px solid rgba(255,255,255,.09);margin:.35rem .6rem .35rem .95rem;opacity:1}

/* barra superior del área de trabajo */
.app-topbar{
  position:sticky;top:0;z-index:1030;display:flex;align-items:center;gap:.6rem;
  padding:.5rem 1.1rem;min-height:56px;background:var(--erp-surface);
  border-bottom:1px solid var(--erp-line);box-shadow:0 1px 0 rgba(20,30,40,.03);
}
.topbar-title{font-family:var(--erp-disp);font-weight:600;color:var(--erp-ink);font-size:1rem;letter-spacing:-.01em}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:.1rem}
.tb-btn{
  color:var(--erp-ink-2);padding:.42rem .55rem;border-radius:9px;text-decoration:none;
  position:relative;display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;
  border:0;background:none;cursor:pointer;
}
.tb-btn:hover,.tb-btn.show{background:var(--erp-surface-2);color:var(--erp-accent-700)}
.tb-btn .bi{font-size:1.05rem}
.tb-btn.dropdown-toggle::after{margin-left:.1rem;opacity:.5}
.tb-btn #alertasBadge{font-size:.6rem}
.sidebar-hamburger{display:none;border:0;background:none;color:var(--erp-ink);font-size:1.35rem;padding:.15rem .4rem;border-radius:8px;cursor:pointer}
.sidebar-hamburger:hover{background:var(--erp-surface-2)}

/* contenido */
.app-main .body-content{flex:1 1 auto;padding-top:1.1rem}

/* backdrop móvil */
.side-backdrop{display:none;position:fixed;inset:0;background:rgba(8,18,24,.5);z-index:1044}

/* responsive: sidebar deslizable */
@media (max-width:991.98px){
  .app-sidebar{transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.45)}
  .app-shell.side-open .app-sidebar{transform:none}
  .app-shell.side-open .side-backdrop{display:block}
  .app-main{margin-left:0}
  .sidebar-hamburger{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){.app-sidebar{transition:none}}

/* ---- Modo RAIL: sidebar contraído a iconos con submenús flotantes (desktop) ---- */
@media (min-width:992px){
  .app-shell.rail .app-sidebar{width:66px;flex-basis:66px}
  .app-shell.rail .app-main{margin-left:66px}
  .app-shell.rail .sidebar-brand{justify-content:center;padding-left:0;padding-right:0}
  .app-shell.rail .sidebar-brand a{gap:0}
  .app-shell.rail .sidebar-brand a > span,
  .app-shell.rail .side-link > span,
  .app-shell.rail .side-toggle > span,
  .app-shell.rail .side-toggle > .chev{display:none}
  .app-shell.rail .side-link,.app-shell.rail .side-toggle{justify-content:center;padding:.55rem}
  .app-shell.rail .side-ico{width:auto}
  /* el submenú se convierte en flotante que aparece al pasar el ratón sobre el grupo */
  .app-shell.rail .side-group{position:relative}
  .app-shell.rail .side-group > .collapse{
    display:none!important;position:absolute;left:100%;top:0;min-width:236px;max-height:82vh;overflow:auto;
    background:var(--erp-nav-2);border:1px solid rgba(255,255,255,.12);border-radius:0 12px 12px 0;
    box-shadow:0 14px 34px rgba(0,0,0,.4);padding:.4rem;z-index:1050;
  }
  .app-shell.rail .side-group:hover > .collapse{display:block!important}
  .app-shell.rail .side-sub .dropdown-item{margin-left:.3rem}
}

/* ---- Paleta de comandos ⌘K ---- */
.pal-res .pal-group{font-family:var(--erp-mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--erp-muted);padding:.55rem .5rem .2rem}
.pal-res .list-group{--bs-list-group-border-width:0}
.pal-res .pal-item{border:0;border-radius:9px;margin:1px 0;padding:.5rem .6rem;color:var(--erp-ink-2)}
.pal-res .pal-item.active,.pal-res .pal-item:hover{background:var(--erp-accent-soft);color:var(--erp-accent-700)}
.pal-res .pal-item.active .bi,.pal-res .pal-item:hover .bi{color:var(--erp-accent-600)!important}
kbd{background:var(--erp-surface-2);border:1px solid var(--erp-line);border-bottom-width:2px;border-radius:5px;padding:.02rem .32rem;font-family:var(--erp-mono);font-size:.7rem;color:var(--erp-ink-2);margin:0 .05rem}

/* ============================================================================
   FASE 6 · Identidad «instrumento de gestión» — KPIs, acciones y firmas
   ============================================================================ */

/* --- Indicadores de negocio: tarjeta-instrumento (neutra + costilla semántica) --- */
.kpi-stat{
  position:relative;display:flex;flex-direction:column;gap:.55rem;height:100%;
  background:var(--erp-surface);border:1px solid var(--erp-line);border-radius:var(--erp-r);
  padding:.9rem 1rem .95rem 1.15rem;overflow:hidden;transition:transform .14s,box-shadow .14s,border-color .14s;
}
.kpi-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--erp-accent)}
.kpi-stat.t-good::before{background:var(--erp-good)}
.kpi-stat.t-warn::before{background:var(--erp-warn)}
.kpi-stat.t-bad::before{background:var(--erp-bad)}
.kpi-stat.t-info::before{background:var(--erp-accent)}
.kpi-stat:hover{transform:translateY(-2px);box-shadow:var(--erp-shadow);border-color:var(--erp-line)}
.kpi-stat .kpi-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.kpi-stat .kpi-label{font-family:var(--erp-mono);font-size:.645rem;letter-spacing:.11em;text-transform:uppercase;color:var(--erp-muted);line-height:1.2}
.kpi-stat .kpi-ico{font-size:1rem;color:var(--erp-muted);opacity:.65;flex:0 0 auto}
.kpi-stat.t-good .kpi-ico{color:var(--erp-good);opacity:.9}
.kpi-stat.t-warn .kpi-ico{color:var(--erp-warn);opacity:.9}
.kpi-stat.t-bad .kpi-ico{color:var(--erp-bad);opacity:.9}
.kpi-stat .kpi-val{font-family:var(--erp-mono);font-variant-numeric:tabular-nums;font-weight:600;
  font-size:1.55rem;line-height:1.05;letter-spacing:-.015em;color:var(--erp-ink)}
.kpi-stat.t-bad .kpi-val{color:var(--erp-bad)}

/* --- Acciones de fila unificadas en TODOS los maestros (calma la deriva de color) --- */
table.mg-sticky tbody .btn.btn-sm{
  --bs-btn-bg:transparent;--bs-btn-border-color:var(--erp-line);
  background:var(--erp-surface);border-color:var(--erp-line);color:var(--erp-ink-2);
  box-shadow:none;padding:.28rem .5rem;
}
table.mg-sticky tbody .btn.btn-sm .bi{color:var(--erp-ink-2)}
table.mg-sticky tbody .btn.btn-sm:hover{
  background:var(--erp-accent-soft);border-color:var(--erp-accent);color:var(--erp-accent-700);
}
table.mg-sticky tbody .btn.btn-sm:hover .bi{color:var(--erp-accent-700)}
/* la acción destructiva conserva la lectura roja */
table.mg-sticky tbody .btn.btn-sm.btn-danger,
table.mg-sticky tbody .btn.btn-sm.btn-outline-danger{background:var(--erp-surface);border-color:var(--erp-bad-soft);color:var(--erp-bad)}
table.mg-sticky tbody .btn.btn-sm.btn-danger .bi,
table.mg-sticky tbody .btn.btn-sm.btn-outline-danger .bi{color:var(--erp-bad)}
table.mg-sticky tbody .btn.btn-sm.btn-danger:hover,
table.mg-sticky tbody .btn.btn-sm.btn-outline-danger:hover{background:var(--erp-bad-soft);border-color:var(--erp-bad);color:var(--erp-bad)}

/* --- Título de página: filete de acento (firma sutil, se aplica al h2/h1 del body) --- */
.body-content > h1:first-child,.body-content > h2:first-child,
.body-content > .container-fluid > h1:first-child,.body-content > .container-fluid > h2:first-child{
  padding-bottom:.5rem;margin-bottom:1rem;border-bottom:1px solid var(--erp-line);position:relative;
}
.body-content > h1:first-child::after,.body-content > h2:first-child::after,
.body-content > .container-fluid > h1:first-child::after,.body-content > .container-fluid > h2:first-child::after{
  content:"";position:absolute;left:0;bottom:-1px;width:44px;height:2px;background:var(--erp-accent);
}

/* --- Sidebar: costilla de acento en el ítem/grupo activo (más deliberado) --- */
.side-link.is-active{position:relative;box-shadow:inset 3px 0 0 rgba(255,255,255,.85)}
.sidebar-brand .bi{box-shadow:0 0 0 1px rgba(var(--erp-accent-rgb),.35)}

/* --- Marca de la topbar / hero de inicio --- */
.home-hero h2,.home-hero h1{letter-spacing:-.02em}
.acc-empty,.acc-btn{font-family:var(--erp-sans)}

/* ============ #211 Tanda 1: pulido transversal ============ */
/* Cifras tabulares: los dígitos alinean en vertical en tablas, totales y KPIs */
.table td,.table th,.kpi-stat,.trow,.mg-confirm-body{font-variant-numeric:tabular-nums}
/* Importe negativo en rojo contable */
.imp-neg{color:var(--erp-bad)!important;font-weight:600}
/* Chip de estado unificado (lo emite window.chipEstado): punto del color del estado */
.badge.chip-dot::before{content:'';display:inline-block;width:.42em;height:.42em;border-radius:50%;background:currentColor;margin-right:.45em;vertical-align:.08em;opacity:.85}
/* Input del diálogo Preguntar (sustituto de prompt) */
.mg-confirm .mg-c-input{margin-top:.15rem}

/* ============ #212 Tanda 2: shell de página, estados vacíos y skeletons ============ */
/* Título de página unificado: lo marca Site.Master sobre el primer h1-h4 del contenido.
   Antes convivían h2/h3/h4 con tres tamaños distintos según la página. */
.pg-title{font-size:1.3rem!important;font-weight:700;letter-spacing:-.01em;color:var(--erp-ink)}
.pg-title .bi{color:var(--erp-accent);margin-right:.3rem}
.pg-title.pg-filete{position:relative;padding-bottom:.55rem;margin-bottom:1rem}
.pg-title.pg-filete::after{content:'';position:absolute;left:0;bottom:0;width:44px;height:3px;border-radius:2px;background:var(--erp-accent)}
/* Estado vacío rico (lo insertan DataTables desde el json de idioma y window.vacioHtml) */
.mg-empty{padding:2.1rem 1rem;text-align:center;color:var(--erp-ink-2);white-space:normal}
.mg-empty > .bi{font-size:1.7rem;display:inline-flex;width:54px;height:54px;align-items:center;justify-content:center;border-radius:50%;background:var(--erp-surface-2);color:var(--erp-accent);margin-bottom:.55rem}
.mg-empty-t{font-weight:600;color:var(--erp-ink)}
.mg-empty-s{font-size:.85rem;max-width:440px;margin:.15rem auto 0}
td.dataTables_empty{padding:0!important}
/* Celdas vacías manuales («Sin resultados», «Sin movimientos»…): aire y tono consistentes */
.table td.text-center.text-muted{padding:1.5rem .75rem;font-size:.88rem}
/* Skeleton de carga: tabla cuyo tbody aún no tiene filas (carga AJAX inicial).
   Solo CSS: en cuanto llegan filas (o la fila de «vacío») desaparece solo. */
.table > tbody:empty{display:block;height:168px;background:repeating-linear-gradient(to bottom,var(--erp-surface-2) 0 16px,transparent 16px 44px);background-position:0 12px;animation:mgSkelPulse 1.3s ease-in-out infinite}
@keyframes mgSkelPulse{0%,100%{opacity:.5}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.table > tbody:empty{animation:none}}

/* ============ #213 Tanda 3: paleta con acciones ============ */
.pal-item .bi-plus-circle{color:var(--erp-accent)}
.pal-item .bi-clock-history{color:var(--erp-ink-2)}

/* ============ #214 Tanda 4: MODO OSCURO + DENSIDAD ============ */
/* El tema es token-driven, así que el modo oscuro es un intercambio de tokens +
   overrides acotados de los componentes donde Bootstrap 5.2 fija colores propios
   (no hay data-bs-theme nativo hasta 5.3). Se activa con data-erp-theme="oscuro"
   en <html> (persistido en localStorage, aplicado en <head> antes de pintar). */
html[data-erp-theme=oscuro]{
  --erp-bg:#0f1513; --erp-surface:#161f1c; --erp-surface-2:#1e2a26;
  --erp-ink:#e4edea; --erp-ink-2:#a9bdb6; --erp-muted:#84988f;
  --erp-line:#2a3833; --erp-line-2:#232f2a;
  --erp-grid-line:rgba(255,255,255,.02);
  --erp-accent:#2fae9f; --erp-accent-600:#3cbfb0; --erp-accent-700:#57cfc1;
  --erp-accent-soft:#143733; --erp-accent-rgb:47,174,159;
  --erp-nav:#0b1614; --erp-nav-2:#132320;
  --erp-good:#42c188; --erp-good-soft:#143627;
  --erp-warn:#e0a94e; --erp-warn-soft:#3a2d13;
  --erp-bad:#ea7268;  --erp-bad-soft:#41201c;
  --erp-info:#2fae9f; --erp-info-soft:#143733;
  --erp-shadow-sm:0 1px 2px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.35);
  --erp-shadow:0 1px 2px rgba(0,0,0,.5),0 12px 30px rgba(0,0,0,.45);
  color-scheme:dark; /* controles nativos (scrollbars, date, listas de select) en oscuro */
}
/* Superficies que Bootstrap pinta de blanco por su cuenta */
html[data-erp-theme=oscuro] .modal-content{background:var(--erp-surface);color:var(--erp-ink)}
html[data-erp-theme=oscuro] .dropdown-menu{background:var(--erp-surface);--bs-dropdown-color:var(--erp-ink);--bs-dropdown-link-color:var(--erp-ink);--bs-dropdown-link-hover-bg:var(--erp-surface-2);--bs-dropdown-link-hover-color:var(--erp-ink)}
html[data-erp-theme=oscuro] .list-group-item{background:var(--erp-surface);color:var(--erp-ink);border-color:var(--erp-line-2)}
html[data-erp-theme=oscuro] .list-group-item-action:hover,html[data-erp-theme=oscuro] .list-group-item-action.active{background:var(--erp-surface-2);color:var(--erp-ink);border-color:var(--erp-line-2)}
html[data-erp-theme=oscuro] .accordion-item,html[data-erp-theme=oscuro] .accordion-button{background:var(--erp-surface);color:var(--erp-ink)}
html[data-erp-theme=oscuro] .toast,html[data-erp-theme=oscuro] .popover{background:var(--erp-surface);color:var(--erp-ink)}
/* Utilidades de color usadas por las páginas */
html[data-erp-theme=oscuro] .bg-white{background-color:var(--erp-surface)!important}
html[data-erp-theme=oscuro] .bg-light{background-color:var(--erp-surface-2)!important}
html[data-erp-theme=oscuro] .text-dark{color:var(--erp-ink)!important}
html[data-erp-theme=oscuro] .text-muted,html[data-erp-theme=oscuro] .text-secondary{color:var(--erp-muted)!important}
html[data-erp-theme=oscuro] .border,html[data-erp-theme=oscuro] .border-top,html[data-erp-theme=oscuro] .border-bottom,html[data-erp-theme=oscuro] .border-start,html[data-erp-theme=oscuro] .border-end{border-color:var(--erp-line)!important}
/* Tablas */
html[data-erp-theme=oscuro] .table{--bs-table-bg:transparent;--bs-table-color:var(--erp-ink);color:var(--erp-ink)}
html[data-erp-theme=oscuro] .table-light,html[data-erp-theme=oscuro] thead.table-light th,html[data-erp-theme=oscuro] .table .table-light th{--bs-table-bg:var(--erp-surface-2);--bs-table-color:var(--erp-ink-2);background:var(--erp-surface-2);color:var(--erp-ink-2)}
/* Botones neutros y cierres */
html[data-erp-theme=oscuro] .btn-light{--bs-btn-bg:var(--erp-surface-2);--bs-btn-color:var(--erp-ink);--bs-btn-border-color:var(--erp-line);--bs-btn-hover-bg:#2a3833;--bs-btn-hover-color:var(--erp-ink);--bs-btn-hover-border-color:var(--erp-line)}
html[data-erp-theme=oscuro] .btn-outline-secondary{--bs-btn-color:var(--erp-ink-2);--bs-btn-border-color:var(--erp-line);--bs-btn-hover-bg:var(--erp-surface-2);--bs-btn-hover-color:var(--erp-ink);--bs-btn-hover-border-color:var(--erp-line)}
html[data-erp-theme=oscuro] .btn-outline-dark{--bs-btn-color:var(--erp-ink);--bs-btn-border-color:var(--erp-line);--bs-btn-hover-bg:var(--erp-surface-2);--bs-btn-hover-color:var(--erp-ink)}
html[data-erp-theme=oscuro] .btn-close{filter:invert(1) grayscale(1) brightness(1.6)}
/* Flecha del select (el SVG de serie es oscuro y desaparecería) */
html[data-erp-theme=oscuro] .form-select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a9bdb6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
/* Alertas y paginación */
html[data-erp-theme=oscuro] .alert-info{background:var(--erp-info-soft);color:var(--erp-ink);border-color:transparent}
html[data-erp-theme=oscuro] .alert-warning{background:var(--erp-warn-soft);color:var(--erp-ink);border-color:transparent}
html[data-erp-theme=oscuro] .alert-danger{background:var(--erp-bad-soft);color:var(--erp-ink);border-color:transparent}
html[data-erp-theme=oscuro] .alert-success{background:var(--erp-good-soft);color:var(--erp-ink);border-color:transparent}
html[data-erp-theme=oscuro] .alert-secondary,html[data-erp-theme=oscuro] .alert-light{background:var(--erp-surface-2);color:var(--erp-ink);border-color:var(--erp-line)}
html[data-erp-theme=oscuro] .page-link{background:var(--erp-surface);border-color:var(--erp-line);color:var(--erp-ink-2)}
html[data-erp-theme=oscuro] .page-item.active .page-link{background:var(--erp-accent);border-color:var(--erp-accent);color:#06231f}
html[data-erp-theme=oscuro] .page-item.disabled .page-link{background:var(--erp-surface);border-color:var(--erp-line-2);color:var(--erp-muted)}
/* Chips/badges con literales claros en el tema base */
html[data-erp-theme=oscuro] .badge.bg-secondary{background:#2c3a35!important;color:#aebfb8!important}
html[data-erp-theme=oscuro] .badge.bg-dark{background:#0b1614!important;color:var(--erp-ink-2)!important}

/* ---- DENSIDAD COMPACTA (data-erp-densidad="compacta" en <html>) ---- */
html[data-erp-densidad=compacta] .table thead th{padding:.42rem .6rem}
html[data-erp-densidad=compacta] .table tbody td{padding:.32rem .6rem;font-size:.855rem}
html[data-erp-densidad=compacta] .btn:not(.btn-lg){padding:.3rem .65rem;font-size:.85rem}
html[data-erp-densidad=compacta] .form-control,html[data-erp-densidad=compacta] .form-select{padding:.28rem .55rem;font-size:.855rem}
html[data-erp-densidad=compacta] .card-body{padding:.75rem .9rem}
html[data-erp-densidad=compacta] .card-header{padding:.6rem .9rem}
html[data-erp-densidad=compacta] .pg-title.pg-filete{margin-bottom:.65rem}
html[data-erp-densidad=compacta] .modal-body{padding:.85rem}

/* ---- #282: acciones de fila SIEMPRE en horizontal (con 6+ botones se apilaban y cada
   fila del listado medía ~200px — en Facturas solo cabían 2 filas por pantalla) ---- */
table td:last-child:has(.btn){white-space:nowrap}
table td:last-child .btn+.btn{margin-left:2px}