/*
 * ╔══════════════════════════════════════════════════════════════════╗
 * ║  TEMA CORPORATIVO — Naranja + Azul  · Light          v2.1       ║
 * ║  Font: Poppins · Sidebar blanco · Acentos naranja + azul        ║
 * ║  Inspirado en factura.com / carta porte                         ║
 * ║  CAMBIOS v2.1:                                                   ║
 * ║    • Fix: sidebar llega hasta footer (sin romper Gentelella)     ║
 * ║    • Chart.js: barras naranja, hover azul                        ║
 * ║                                                                  ║
 * ║  <link rel="stylesheet" href="corporate-blue-theme.css">        ║
 * ╚══════════════════════════════════════════════════════════════════╝
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════════════
   TOKENS DE DISEÑO
   ══════════════════════════════════════════════════════════════ */
:root {
  /* Naranja — acento primario */
  --o700: #C94F02;
  --o600: #E85D04;
  --o500: #F77F00;
  --o400: #FB9B3A;
  --o200: #FDD5B0;
  --o100: #FEE9D0;
  --o050: #FFF6EE;

  /* Azul — acento secundario */
  --b800: #0F3D7A;
  --b700: #1554A0;
  --b600: #1A6BC1;
  --b500: #2E86DE;
  --b400: #60A8E8;
  --b100: #D6EAFB;
  --b050: #EEF6FD;

  /* Superficies */
  --bg:    #F0F2F5;
  --surf:  #FFFFFF;
  --surf2: #F8F9FB;
  --surf3: #F0F2F5;

  /* Texto */
  --t1: #1A1D23;
  --t2: #3D4350;
  --t3: #6B7385;
  --t4: #9EA6B4;

  /* Bordes */
  --bdr:  #E8EAEE;
  --bdr2: #D1D5DC;

  /* Semánticos */
  --ok:     #16A34A;  --ok-bg:   #F0FDF4;  --ok-t:   #14532D;
  --warn:   #D97706;  --warn-bg: #FFFBEB;  --warn-t: #92400E;
  --err:    #DC2626;  --err-bg:  #FEF2F2;  --err-t:  #7F1D1D;
  --info:   #1A6BC1;  --info-bg: #EEF6FD;  --info-t: #1554A0;

  /* Sidebar — BLANCO */
  --sb-bg:   #FFFFFF;
  --sb-surf: #F8F9FB;
  --sb-hover:#FFF0E6;
  --sb-act:  #FFF0E6;
  --sb-t:    #6B7385;
  --sb-thi:  #E85D04;
  --sb-bdr:  #E8EAEE;

  /* Forma — poco redondeado para mejor legibilidad en formularios */
  --r:    4px;
  --r-sm: 3px;
  --r-lg: 6px;
  --r-xl: 8px;

  /* Sombras */
  --s1: 0 1px 4px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
  --s2: 0 4px 20px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.04);
  --s3: 0 8px 32px rgba(0,0,0,.09), 0 4px 12px rgba(0,0,0,.05);
  --so: 0 4px 18px rgba(232,93,4,.28);
  --sb-shadow: 2px 0 16px rgba(0,0,0,.06);

  /* Transición */
  --tr: .18s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════════════════════════
   FONT GLOBAL — Poppins
   ORDEN CRÍTICO: protecciones de iconos al final para ganar
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Elementos que no heredan font-family automáticamente */
input, button, select, textarea, optgroup,
.btn, .form-control,
label, .control-label,
.dropdown-menu, .dropdown-menu > li > a,
.modal-title, .panel-title,
.nav > li > a,
.select2-selection,
.select2-results__option {
  font-family: 'Poppins', sans-serif !important;
}

/* th y td: Poppins SIN !important para que los iconos dentro puedan ganar */
th, td { font-family: 'Poppins', sans-serif; }

/* ── FontAwesome — protección máxima (debe ir DESPUÉS de th/td) ── */
i.fa,
i[class^="fa-"],
i[class*=" fa-"],
span.fa,
.fa,
[class^="fa-"],
[class*=" fa-"] {
  font-family: 'FontAwesome' !important;
  font-style: normal !important;
  font-weight: normal !important;
}
i.fa::before,
i[class^="fa-"]::before,
i[class*=" fa-"]::before,
.fa::before,
[class^="fa-"]::before,
[class*=" fa-"]::before {
  font-family: 'FontAwesome' !important;
}

/* ── Glyphicons — protección máxima (incluye daterangepicker) ── */
i.glyphicon,
span.glyphicon,
.glyphicon,
[class^="glyphicon-"],
[class*=" glyphicon-"],
/* Dentro de th/td (daterangepicker usa th para prev/next) */
th i.glyphicon,
td i.glyphicon,
th [class^="glyphicon-"],
td [class^="glyphicon-"],
/* Botones prev/next del daterangepicker */
.daterangepicker .prev i,
.daterangepicker .next i,
.daterangepicker th i {
  font-family: 'Glyphicons Halflings' !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1 !important;
}
i.glyphicon::before,
span.glyphicon::before,
.glyphicon::before,
[class^="glyphicon-"]::before,
[class*=" glyphicon-"]::before,
th i.glyphicon::before,
.daterangepicker .prev i::before,
.daterangepicker .next i::before,
.daterangepicker th i::before {
  font-family: 'Glyphicons Halflings' !important;
}

body {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--t2) !important;
  background: var(--bg) !important;
  -webkit-font-smoothing: antialiased;
}
body .container.body .right_col { background: var(--bg) !important; }

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  color: var(--t1) !important;
}

a       { color: var(--b500); text-decoration: none; transition: color var(--tr); }
a:hover { color: var(--b700); }
p       { color: var(--t2); }
small   { color: var(--t3); }
hr      { border-color: var(--bdr); }
legend  { color: var(--t1); border-bottom: 1px solid var(--bdr); }

.ln_solid     { border-top: 1px solid var(--bdr) !important; }
.text-muted   { color: var(--t3) !important; }
.divider      { border-bottom: 1px solid var(--bdr); }
span.section  { border-bottom: 1px solid var(--bdr); color: var(--t1); font-weight: 600; }
span.required { color: var(--err) !important; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* ══════════════════════════════════════════════════════════════
   SIDEBAR — blanco con acento naranja
   Alta especificidad para ganarle a custom.min.css de Gentelella
   ══════════════════════════════════════════════════════════════ */

/* Contenedor raíz — máxima especificidad */
/* v2.1 FIX: min-height:100vh para que el fondo blanco llegue hasta el footer */
/* NO se toca .container.body ni .main_container — rompe el grid Bootstrap/Gentelella */
body .left_col,
body.nav-sm .left_col,
body.nav-md .left_col,
.nav-sm .container.body .col-md-3.left_col,
.nav-md .container.body .col-md-3.left_col,
html body .left_col {
  background: var(--sb-bg) !important;
  background-color: var(--sb-bg) !important;
  border-right: 1px solid var(--sb-bdr) !important;
  box-shadow: var(--sb-shadow) !important;
  min-height: 100vh !important;
}

/* Todos los contenedores internos — evita colores heredados */
.left_col .scroll-view,
body .left_col .scroll-view,
.left_col .mCustomScrollBox,
.left_col .mCSB_container,
.left_col .mCSB_inside > .mCSB_container,
.left_col .main_menu,
.left_col .main_menu_side,
.left_col #sidebar-menu,
.left_col .menu_section,
body .left_col .menu_section {
  background: var(--sb-bg) !important;
  background-color: var(--sb-bg) !important;
}

/* Scrollbar */
.left_col .mCSB_scrollTools .mCSB_draggerRail          { background: var(--bdr) !important; }
.left_col .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background: rgba(232,93,4,.22) !important; }
.left_col .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background: var(--o500) !important; }

/* ── Logo / nav_title — elimina fondo azul de Bootstrap navbar-default ── */
.nav_title,
.navbar.nav_title,
.nav-sm .navbar.nav_title,
.nav-md .navbar.nav_title,
body .nav_title,
body .navbar.nav_title,
.navbar-default.nav_title,
.navbar-default.navbar.nav_title,
html body .navbar.nav_title,
html body .navbar-default.navbar.nav_title {
  background: var(--sb-bg) !important;
  background-color: var(--sb-bg) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--sb-bdr) !important;
  border-radius: 0 !important;
  border-top: none !important; border-left: none !important; border-right: none !important;
  box-shadow: none !important;
}

/* Neutralizar .navbar-default SOLO dentro del sidebar */
body .left_col .navbar-default,
body .left_col .navbar,
body .navbar-default.nav_title {
  background-color: var(--sb-bg) !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Asegurar que el top_nav NO se vea afectado */
body .top_nav .navbar-default,
body .top_nav .navbar,
body .top_nav nav {
  background: var(--surf) !important;
  background-color: var(--surf) !important;
  background-image: none !important;
  border-color: var(--bdr) !important;
  box-shadow: none !important;
}

/* site_title */
.site_title,
.site_title:link   { font-weight: 700 !important; font-size: 15px !important; color: var(--t1) !important; }
.site_title:hover  { color: var(--o500) !important; }
.site_title i      { border-color: var(--bdr) !important; color: var(--o500) !important; }

/* ── Encabezado de sección ── */
.menu_section      { margin-bottom: 4px !important; }
.menu_section h3,
.sidebar-header {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .13em !important;
  color: var(--t4) !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  padding: 18px 20px 6px !important;
  border: none !important;
}

/* ── Items del menú nav-md ── */
.nav.side-menu > li > a,
.left_col .nav.side-menu > li > a {
  color: var(--sb-t) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 10px 16px 10px 20px !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 var(--r) var(--r) 0 !important;
  margin: 1px 10px 1px 0 !important;
  background: transparent !important;
  transition: all var(--tr) !important;
}
.nav.side-menu > li > a .fa,
.nav.side-menu > li > a .ms-nav-icon {
  color: var(--t4) !important;
  width: 24px; text-align: center;
  margin-right: 10px;
  font-size: 20px !important;
  transition: color var(--tr);
  flex-shrink: 0;
  vertical-align: middle;
}

/* Hover */
.nav.side-menu > li > a:hover,
.left_col .nav.side-menu > li > a:hover {
  color: var(--o600) !important;
  background: var(--sb-hover) !important;
  border-left-color: var(--o400) !important;
}
.nav.side-menu > li > a:hover .fa,
.nav.side-menu > li > a:hover .ms-nav-icon { color: var(--o500) !important; }

/* Activo */
.nav.side-menu > li.active,
.left_col .nav.side-menu > li.active { border-right: none !important; background: transparent !important; }
.nav.side-menu > li.active > a,
.nav.side-menu > li.current-page > a,
.left_col .nav.side-menu > li.active > a {
  color: var(--o600) !important;
  background: var(--sb-act) !important;
  border-left: 3px solid var(--o500) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.nav.side-menu > li.active > a .fa,
.nav.side-menu > li.active > a .ms-nav-icon,
.left_col .nav.side-menu > li.active > a .fa,
.left_col .nav.side-menu > li.active > a .ms-nav-icon { color: var(--o500) !important; }
.nav li.current-page                         { background: transparent !important; }
.nav li.current-page > a                     { color: var(--o500) !important; }

/* ── Submenú child_menu ── */
.nav.child_menu,
ul.nav.child_menu,
.left_col .nav.child_menu {
  background: var(--surf2) !important;
}
.nav.child_menu > li > a,
ul.nav.child_menu li a,
.left_col ul.nav.child_menu li a {
  font-size: 12px !important;
  color: var(--sb-t) !important;
  padding: 8px 16px 8px 44px !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 var(--r-sm) var(--r-sm) 0 !important;
  margin-right: 10px !important;
  transition: all var(--tr) !important;
  font-weight: 400 !important;
}
.nav.child_menu li:hover,
.nav.child_menu li.active          { background: transparent !important; }
.nav.child_menu li:hover > a,
ul.nav.child_menu li a:hover,
.nav.child_menu li.active > a      {
  color: var(--o600) !important;
  background: var(--o050) !important;
  border-left-color: var(--o400) !important;
}

/* Bullets nav-md */
.nav-md ul.nav.child_menu li:before { background: var(--bdr2) !important; width: 5px; height: 5px; }
.nav-md ul.nav.child_menu li:after  { border-left-color: var(--bdr) !important; }

/* ── nav-sm (colapsado) ── */
.nav-sm .left_col,
.nav-sm .container.body .col-md-3.left_col { overflow: visible !important; }

.nav-sm .nav.side-menu > li > a,
.nav-sm .left_col .nav.side-menu > li > a {
  padding: 14px 0 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  max-width: 70px !important;
  width: 70px !important;
  overflow: hidden !important;
}
.nav-sm .nav.side-menu > li > a .fa,
.nav-sm .nav.side-menu > li > a .ms-nav-icon {
  font-size: 22px !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 0 2px !important;
  color: var(--t4) !important;
}
.nav-sm .nav.side-menu > li > a .fa { font-family: 'FontAwesome' !important; }
.nav-sm .nav.side-menu > li > a .ms-nav-icon {
  font-family: 'Material Symbols Rounded' !important;
}
/* Ocultar texto y chevron en nav-sm — excluir .ms-nav-icon */
.nav-sm .nav.side-menu > li > a > span:not(.ms-nav-icon),
.nav-sm .nav.side-menu > li > a > :not(.fa):not(.ms-nav-icon),
.nav-sm .nav.side-menu > li > a .fa-chevron-down,
.nav-sm .nav.side-menu > li > a .fa-chevron-right {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important; height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important; padding: 0 !important; font-size: 0 !important;
}
.nav-sm .nav.side-menu > li > a:hover {
  color: var(--o600) !important;
  background: var(--sb-hover) !important;
  border-left-color: var(--o500) !important;
}
.nav-sm .nav.side-menu > li > a:hover .fa,
.nav-sm .nav.side-menu > li > a:hover .ms-nav-icon { color: var(--o500) !important; }
.nav-sm .nav.side-menu > li.active > a,
.nav-sm .nav.side-menu > li.active-sm > a {
  color: var(--o600) !important;
  background: var(--sb-act) !important;
  border-left: 3px solid var(--o500) !important;
}
.nav-sm .nav.side-menu > li.active > a .fa,
.nav-sm .nav.side-menu > li.active > a .ms-nav-icon { color: var(--o500) !important; }

/* nav_title colapsado */
.nav-sm .navbar.nav_title {
  width: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.nav-sm .navbar.nav_title a.site_title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 70px !important;
  padding: 0 !important;
}

/* Flyout nav-sm */
.nav-sm .nav.child_menu,
.nav-sm ul.nav.child_menu {
  background: var(--surf) !important;
  border-left: 3px solid var(--o500) !important;
  box-shadow: var(--s3) !important;
  min-width: 200px !important;
  border-radius: 0 var(--r) var(--r) 0 !important;
}
.nav-sm ul.nav.child_menu li a {
  color: var(--t2) !important;
  white-space: nowrap !important;
  padding: 9px 20px !important;
  font-size: 12.5px !important;
  display: block !important;
  width: auto !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  border-radius: 0 !important;
  margin: 0 !important;
  border-left: 2px solid transparent !important;
}
.nav-sm ul.nav.child_menu li a:hover {
  color: var(--o600) !important;
  background: var(--o050) !important;
  border-left-color: var(--o400) !important;
}
.nav-sm > .nav.side-menu > li.active-sm > a { color: var(--o500) !important; }
.nav-sm .nav.child_menu li,
.nav-sm .nav.side-menu li.active-sm { border-right-color: var(--o500) !important; }

/* Footer sidebar — evita el cuadro blanco flotante en la esquina */
.sidebar-footer,
body .left_col .sidebar-footer,
.left_col .sidebar-footer {
  background: var(--sb-bg) !important;
  background-color: var(--sb-bg) !important;
  border-top: 1px solid var(--sb-bdr) !important;
  width: 100% !important;
  min-height: 0 !important;
}
/* Si está vacío, no ocupa espacio */
.sidebar-footer:empty {
  display: none !important;
  height: 0 !important;
  border: none !important;
  padding: 0 !important;
}
.sidebar-footer a,
.left_col .sidebar-footer a      { color: var(--t3) !important; background: transparent !important; transition: all var(--tr); }
.sidebar-footer a:hover,
.left_col .sidebar-footer a:hover { background: var(--sb-hover) !important; color: var(--o600) !important; }
.sidebar-widget { background: var(--surf2) !important; border-color: var(--bdr) !important; }

/* nav-sm: sidebar-footer también 70px */
.nav-sm .sidebar-footer,
.nav-sm .left_col .sidebar-footer { width: 70px !important; }

/* ══════════════════════════════════════════════════════════════
   TOP NAV — blanco limpio
   ══════════════════════════════════════════════════════════════ */
.top_nav,
body .top_nav { background: var(--surf) !important; }

.nav_menu,
.top_nav .nav_menu,
body .top_nav .nav_menu {
  background: var(--surf) !important;
  border-bottom: 1px solid var(--bdr) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.05) !important;
}
.top_nav .navbar,
.top_nav .navbar-default,
.top_nav nav {
  background: var(--surf) !important;
  background-color: var(--surf) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.nav.navbar-nav > li > a,
.top_nav .nav > li > a          { color: var(--t2) !important; font-weight: 500; background: transparent !important; }
.top_nav .nav > li > a:hover    { background: var(--o050) !important; color: var(--o600) !important; }
.top_nav .nav .open > a,
.top_nav .nav .open > a:hover   { background: var(--o050) !important; color: var(--o600) !important; }

.top_nav h2, .nav_menu h2       { color: var(--t1) !important; font-size: 14px !important; font-weight: 600 !important; }
.nav_menu #menu_toggle,
.nav_menu .nav.toggle a         { color: var(--t3) !important; font-size: 18px !important; transition: color var(--tr); }
.nav_menu #menu_toggle:hover    { color: var(--o500) !important; }
.nav_menu .nav.toggle           { border-right: 1px solid var(--bdr) !important; }

/* Badges de notificaciones */
.info-number .badge {
  background: var(--o500) !important;
  border: 2px solid var(--surf) !important;
  font-size: 10px !important;
}

/* ══════════════════════════════════════════════════════════════
   DROPDOWN
   ══════════════════════════════════════════════════════════════ */
.dropdown-menu {
  background: var(--surf) !important;
  border: 1px solid var(--bdr2) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--s3) !important;
  padding: 6px !important;
  font-size: 13px !important;
}
.dropdown-menu > li > a {
  color: var(--t2) !important;
  padding: 8px 14px !important;
  border-radius: var(--r-sm) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  transition: all var(--tr) !important;
  display: block;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus      { background: var(--o050) !important; color: var(--o600) !important; }
.dropdown-menu > li.active > a,
.dropdown-menu > li.active > a:hover { background: var(--o500) !important; color: #FFFFFF !important; }
.dropdown-menu .divider            { background: var(--bdr) !important; margin: 4px 0 !important; }

/* ══════════════════════════════════════════════════════════════
   PANELES  x_panel
   ══════════════════════════════════════════════════════════════ */
.x_panel {
  background: var(--surf) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--s2) !important;
  padding: 22px 26px !important;
  margin-bottom: 18px !important;
  transition: box-shadow var(--tr);
}
.x_panel:hover { box-shadow: var(--s3) !important; }

.x_title {
  border-bottom: 1px solid var(--bdr) !important;
  padding-bottom: 14px !important;
  margin-bottom: 18px !important;
  position: relative;
}
/* Línea naranja decorativa */
.x_title::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -1px; left: 0;
  width: 30px; height: 3px;
  background: linear-gradient(90deg, var(--o600), var(--o400));
  border-radius: 3px;
}
.x_title h2       { color: var(--t1) !important; font-weight: 600 !important; font-size: 14px !important; margin: 4px 0 0 !important; }
.x_title h2 small { color: var(--t3) !important; font-weight: 400 !important; font-size: 12px !important; }
.x_content h4     { color: var(--t1); font-weight: 600; }

.panel_toolbox > li > a {
  color: var(--t4) !important;
  border-radius: var(--r-sm);
  padding: 5px 7px;
  transition: all var(--tr);
}
.panel_toolbox > li > a:hover { background: var(--o050) !important; color: var(--o600) !important; }

/* ══════════════════════════════════════════════════════════════
   BOTONES
   ══════════════════════════════════════════════════════════════ */
.btn {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  border-radius: var(--r) !important;
  transition: all var(--tr) !important;
  letter-spacing: .01em;
}

/* Primary → naranja */
.btn-primary, a.btn-primary {
  background: linear-gradient(135deg, var(--o600) 0%, var(--o500) 100%) !important;
  border: 1px solid var(--o600) !important;
  color: #FFFFFF !important;
  text-shadow: none !important;
  box-shadow: 0 2px 8px rgba(232,93,4,.20) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.open .dropdown-toggle.btn-primary {
  background: linear-gradient(135deg, var(--o700) 0%, var(--o600) 100%) !important;
  border-color: var(--o700) !important;
  color: #FFFFFF !important;
  box-shadow: var(--so) !important;
  transform: translateY(-1px);
}

/* Success → naranja (brand) */
.btn-success, a.btn-success {
  background: linear-gradient(135deg, var(--o600) 0%, var(--o500) 100%) !important;
  border: 1px solid var(--o600) !important;
  color: #FFFFFF !important;
  text-shadow: none !important;
  box-shadow: 0 2px 8px rgba(232,93,4,.20) !important;
}
.btn-success:hover, .btn-success:focus, .btn-success:active,
.open .dropdown-toggle.btn-success {
  background: linear-gradient(135deg, var(--o700) 0%, var(--o600) 100%) !important;
  border-color: var(--o700) !important;
  color: #FFFFFF !important;
  box-shadow: var(--so) !important;
  transform: translateY(-1px);
}

/* Default */
.btn-default {
  background: var(--surf) !important;
  border: 1px solid var(--bdr2) !important;
  color: var(--t2) !important;
  box-shadow: var(--s1) !important;
  text-shadow: none !important;
}
.btn-default:hover, .btn-default:focus {
  background: var(--surf2) !important;
  border-color: var(--o300, var(--o400)) !important;
  color: var(--t1) !important;
}

/* Danger */
.btn-danger, a.btn-danger {
  background: var(--err) !important;
  border-color: var(--err) !important;
  color: #FFFFFF !important;
  text-shadow: none !important;
}
.btn-danger:hover { background: #B91C1C !important; transform: translateY(-1px); }

/* Warning */
.btn-warning, a.btn-warning {
  background: var(--warn) !important;
  border-color: var(--warn) !important;
  color: #FFFFFF !important;
  text-shadow: none !important;
}
.btn-warning:hover { background: #B45309 !important; transform: translateY(-1px); }

/* Dark */
.btn-dark {
  background: var(--t1) !important;
  border: 1px solid var(--t1) !important;
  color: #FFFFFF !important;
  text-shadow: none !important;
}
.btn-dark:hover { background: var(--t2) !important; transform: translateY(-1px); }

/* Excel */
.btn-excel, a.btn-excel {
  background: #16A34A !important;
  border: 1px solid #15803D !important;
  color: #FFFFFF !important;
}
.btn-excel:hover { background: #15803D !important; transform: translateY(-1px); }

.btn-round { border-radius: 50px !important; }
.input-group-btn .btn { margin-right: 0 !important; margin-bottom: 0 !important; }

/* ══════════════════════════════════════════════════════════════
   TILE STATS
   ══════════════════════════════════════════════════════════════ */
.tile-stats {
  background: var(--surf) !important;
  border: 1px solid var(--bdr) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--s1) !important;
  transition: all var(--tr);
  overflow: hidden;
  position: relative;
}
.tile-stats::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--o600), var(--o400));
  opacity: 0;
  transition: opacity var(--tr);
}
.tile-stats:hover { box-shadow: var(--s2) !important; transform: translateY(-2px); }
.tile-stats:hover::before { opacity: 1; }
.tile-stats .icon  { color: var(--bdr2) !important; }
.tile-stats h3     { color: var(--t3) !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; }
.tile-stats .count { color: var(--t1) !important; font-weight: 700 !important; font-size: 32px !important; }
.tile-stats p      { color: var(--t3) !important; font-size: 12px !important; }
.tile-stats > .dash-box-footer { background: var(--o050) !important; color: var(--o600) !important; }

.tile_count .tile_stats_count       { border-bottom: 1px solid var(--bdr) !important; }
.tile_count .tile_stats_count:before { border-left-color: var(--o500) !important; }
.tile_count .tile_stats_count .count { color: var(--t1) !important; font-weight: 700 !important; }
.tile_count .tile_stats_count span   { color: var(--t3) !important; }
.tile_head  { background: var(--surf2) !important; color: var(--t1) !important; border-color: var(--bdr) !important; }
.tiles      { border-top: 1px solid var(--bdr) !important; }
.tile_info  { color: var(--t3) !important; }

/* ══════════════════════════════════════════════════════════════
   TABLAS
   ══════════════════════════════════════════════════════════════ */
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border-color: var(--bdr) !important;
  color: var(--t2) !important;
  vertical-align: middle !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}
.table.table-items > tbody > tr > td { vertical-align: top !important; }
.table .help-block { margin-top: 0 !important; margin-bottom: 3px !important; }
.table .form-group-sm,
.table .form-group  { margin-bottom: 0 !important; }

/* ── Tabla de conceptos / líneas de factura (table-items) ──────────────
   Padding compacto para que la tabla no desborde horizontalmente
   ni active el scroll en pantallas normales
   ════════════════════════════════════════════════════════════════════ */
.table-items > thead > tr > th {
  padding: 8px 6px !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}
.table-items > tbody > tr > td {
  padding: 4px 4px !important;
  vertical-align: top !important;
}
/* Inputs y selects dentro de la tabla de conceptos: sin margen extra */
.table-items .form-control,
.table-items input.form-control,
.table-items select.form-control,
.table-items textarea.form-control {
  padding: 4px 6px !important;
  height: 30px !important;
  font-size: 12px !important;
  min-width: 0 !important;
}
.table-items textarea.form-control {
  height: auto !important;
  min-height: 30px !important;
  resize: vertical !important;
}
.table-items .input-group,
.table-items .input-group-sm {
  min-width: 0 !important;
}
.table-items .input-group .form-control {
  width: 100% !important;
}
/* Botones de acción dentro de la fila (buscar, lupa, etc.) */
.table-items .btn-sm,
.table-items .input-group-btn .btn {
  padding: 4px 7px !important;
  height: 30px !important;
  font-size: 12px !important;
}
/* Select2 dentro de tabla de conceptos */
.table-items .select2-container .select2-selection--single {
  height: 30px !important;
  min-height: 30px !important;
}
.table-items .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 28px !important;
  padding-left: 6px !important;
  font-size: 12px !important;
}
/* Checkbox IVA incluido */
.table-items .checkbox,
.table-items .checkbox label {
  margin: 0 !important;
  padding: 2px 0 !important;
  font-size: 11px !important;
}

.table > thead > tr > th {
  background: var(--surf2) !important;
  color: var(--t1) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid var(--bdr2) !important;
  padding: 12px 14px !important;
}
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--surf2) !important; }
.table-bordered  { border-color: var(--bdr) !important; }
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--bdr) !important; }
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th { background: var(--o050) !important; color: var(--t1) !important; }
tr.row_selected td, tr.row_selected th { background: rgba(232,93,4,.07) !important; }

/* jambo_table — encabezado azul */
table.jambo_table { border: 1px solid var(--bdr) !important; border-radius: var(--r-lg) !important; overflow: hidden; }
table.jambo_table thead {
  background: linear-gradient(135deg, var(--b800) 0%, var(--b600) 100%) !important;
}
table.jambo_table thead th {
  color: rgba(255,255,255,.92) !important;
  background: transparent !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 13px 16px !important;
  border: none !important;
}
table.jambo_table thead .sorting:after,
table.jambo_table thead .sorting_asc:after,
table.jambo_table thead .sorting_desc:after { color: rgba(255,255,255,.45) !important; }
table.jambo_table tbody td {
  color: var(--t2) !important;
  background: var(--surf) !important;
  padding: 11px 16px !important;
  border: none !important;
  border-bottom: 1px solid var(--bdr) !important;
  font-size: 12.5px !important;
}
table.jambo_table tbody tr:hover td  { background: var(--o050) !important; }
table.jambo_table tbody tr.selected td { background: rgba(232,93,4,.06) !important; }

/* ── jambo_table + table-items: tabla de conceptos/líneas de factura ──
   Necesita padding compacto — el thead azul se mantiene pero más ajustado.
   También cancela el min-width:1400px inline que fuerza scroll horizontal.
   ════════════════════════════════════════════════════════════════════ */
table.jambo_table.table-items {
  min-width: unset !important;   /* cancela el style="min-width:1400px" del HTML */
  table-layout: fixed !important;
  width: 100% !important;
}
table.jambo_table.table-items thead th {
  padding: 7px 5px !important;
  font-size: 9.5px !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
table.jambo_table.table-items tbody td {
  padding: 3px 3px !important;
  border-bottom: 1px solid var(--bdr) !important;
  vertical-align: top !important;
}
/* Inputs dentro de la tabla de facturas */
table.jambo_table.table-items .form-control,
table.jambo_table.table-items input,
table.jambo_table.table-items select {
  padding: 3px 5px !important;
  height: 28px !important;
  font-size: 11.5px !important;
}
table.jambo_table.table-items textarea.form-control {
  height: auto !important;
  min-height: 28px !important;
}
/* Select2 dentro de tabla de facturas */
table.jambo_table.table-items .select2-container--bootstrap .select2-selection--single,
table.jambo_table.table-items .select2-container .select2-selection--single {
  height: 28px !important;
  min-height: 28px !important;
}
table.jambo_table.table-items .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 26px !important;
  padding-left: 5px !important;
  font-size: 11.5px !important;
}
table.jambo_table.table-items .select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
  height: 26px !important;
}
/* input-group dentro de tabla */
table.jambo_table.table-items .input-group,
table.jambo_table.table-items .input-group-sm { min-width: 0 !important; }
table.jambo_table.table-items .input-group .form-control,
table.jambo_table.table-items .input-group-sm .form-control { height: 28px !important; }
table.jambo_table.table-items .input-group-btn .btn,
table.jambo_table.table-items .btn-sm {
  height: 28px !important;
  padding: 3px 7px !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
}
/* Checkbox IVA incluido */
table.jambo_table.table-items .checkbox {
  margin: 2px 0 !important;
  min-height: 0 !important;
}
table.jambo_table.table-items .checkbox label {
  padding-left: 16px !important;
  font-size: 10.5px !important;
  line-height: 1.4 !important;
}

/* DataTables controles */
div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_filter,
div.dataTables_wrapper div.dataTables_info { color: var(--t3) !important; font-size: 12px !important; }

div.dataTables_wrapper div.dataTables_length select,
div.dataTables_wrapper div.dataTables_filter input {
  background: var(--surf) !important;
  border: 1px solid var(--bdr2) !important;
  border-radius: var(--r-sm) !important;
  color: var(--t2) !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  box-shadow: var(--s1) !important;
}
div.dataTables_wrapper div.dataTables_filter input:focus {
  border-color: var(--o400) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(247,127,0,.12) !important;
}

/* ══════════════════════════════════════════════════════════════
   PAGINACIÓN
   ══════════════════════════════════════════════════════════════ */
.pagination > li > a,
.pagination > li > span {
  background: var(--surf) !important;
  border: 1px solid var(--bdr2) !important;
  color: var(--t2) !important;
  font-size: 12.5px !important;
  transition: all var(--tr) !important;
}
.pagination > li > a:hover,
.pagination > li > span:hover { background: var(--o050) !important; border-color: var(--o400) !important; color: var(--o600) !important; }
.pagination > .active > a,
.pagination > .active > span  { background: var(--o500) !important; border-color: var(--o500) !important; color: #FFFFFF !important; font-weight: 600 !important; box-shadow: var(--so) !important; }
.pagination > .disabled > a,
.pagination > .disabled > span { color: var(--t4) !important; background: var(--surf2) !important; border-color: var(--bdr) !important; }
.pagination-split li           { display: inline-block; margin-right: 3px; }
.pagination-split li a         { border-radius: var(--r-sm) !important; }

div.dataTables_wrapper div.dataTables_paginate ul.pagination li.active a {
  background: var(--o500) !important;
  border-color: var(--o500) !important;
  color: #FFFFFF !important;
}

/* ══════════════════════════════════════════════════════════════
   FORMULARIOS
   ══════════════════════════════════════════════════════════════ */
.form-control {
  background: var(--surf) !important;
  border: 1px solid var(--bdr2) !important;
  border-radius: var(--r) !important;
  color: var(--t1) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  height: auto !important;
  box-shadow: none !important;
  transition: border-color var(--tr), box-shadow var(--tr) !important;
}
.form-control:focus {
  border-color: var(--o400) !important;
  box-shadow: 0 0 0 3px rgba(247,127,0,.12) !important;
  background: var(--surf) !important;
  color: var(--t1) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--t4) !important; }
.form-control[disabled],
.form-control[readonly]    { background: var(--surf2) !important; color: var(--t3) !important; }

.input-group-addon {
  background: var(--surf2) !important;
  border: 1px solid var(--bdr2) !important;
  color: var(--t3) !important;
  border-radius: var(--r) !important;
}

/* Validación */
.has-success .form-control  { border-color: var(--ok) !important; }
.has-error   .form-control  { border-color: var(--err) !important; }
.has-warning .form-control  { border-color: var(--warn) !important; }
.has-success .control-label { color: var(--ok) !important; }
.has-error   .control-label { color: var(--err) !important; }
.has-warning .control-label { color: var(--warn) !important; }
.help-block           { color: var(--t3) !important; font-size: 11.5px !important; margin-top: 0 !important; margin-bottom: 3px !important; }
.has-error   .help-block { color: var(--err) !important; }
.has-success .help-block { color: var(--ok) !important; }

.tagsinput       { background: var(--surf) !important; border: 1px solid var(--bdr2) !important; border-radius: var(--r-sm) !important; color: var(--t2) !important; }
.tagsinput input { color: var(--t1) !important; }
.thumbnail       { border-color: var(--bdr) !important; background: var(--surf2) !important; height: auto !important; }

/* ══════════════════════════════════════════════════════════════
   SELECT2
   ══════════════════════════════════════════════════════════════ */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--bootstrap .select2-selection {
  background: var(--surf) !important;
  border: 1px solid var(--bdr2) !important;
  border-radius: var(--r) !important;
  min-height: 34px !important;
  box-shadow: none !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open  .select2-selection--single,
.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open  .select2-selection {
  border-color: var(--o400) !important;
  box-shadow: 0 0 0 3px rgba(247,127,0,.12) !important;
  outline: none !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--t1) !important; line-height: 32px !important; padding-left: 10px !important; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--t4) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow b   { border-color: var(--t3) transparent transparent !important; }
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple { background: var(--surf2) !important; }
.select2-container--bootstrap .select2-selection--single { height: 34px !important; }
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered { color: var(--t1) !important; }
.select2-container--bootstrap .select2-selection--single .select2-selection__placeholder { color: var(--t4) !important; }
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
  background: var(--o050) !important; border: 1px solid var(--o100) !important;
  color: var(--o600) !important; border-radius: var(--r-sm) !important;
}
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove { color: var(--o500) !important; }

.select2-dropdown,
.select2-container--bootstrap .select2-dropdown {
  background: var(--surf) !important;
  border: 1px solid var(--bdr2) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--s3) !important;
}
.select2-container--bootstrap .select2-dropdown { border-color: var(--o300, var(--o400)) !important; }
.select2-search--dropdown {
  background: var(--surf2) !important;
  border-bottom: 1px solid var(--bdr) !important;
  padding: 6px !important;
}
.select2-search--dropdown .select2-search__field,
.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
  background: var(--surf) !important;
  border: 1px solid var(--bdr2) !important;
  border-radius: var(--r-sm) !important;
  color: var(--t1) !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  box-shadow: none !important;
}
.select2-search--dropdown .select2-search__field:focus { border-color: var(--o400) !important; box-shadow: 0 0 0 3px rgba(247,127,0,.12) !important; outline: none !important; }
.select2-results__option,
.select2-container--bootstrap .select2-results__option { padding: 7px 12px !important; font-size: 12.5px !important; color: var(--t2) !important; border-radius: var(--r-sm) !important; margin: 2px 4px !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] { background: var(--o500) !important; color: #FFFFFF !important; }
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--bootstrap .select2-results__option[aria-selected=true] { background: var(--o050) !important; color: var(--o600) !important; font-weight: 600 !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--o050) !important; border: 1px solid var(--o100) !important;
  color: var(--o600) !important; border-radius: var(--r-sm) !important; font-weight: 500 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--o500) !important; }

/* ══════════════════════════════════════════════════════════════
   SWITCHERY
   ══════════════════════════════════════════════════════════════ */
.switchery        { background-color: var(--surf2) !important; border: 1px solid var(--bdr2) !important; }
.switchery > small { background: var(--surf) !important; box-shadow: 0 1px 4px rgba(0,0,0,.18) !important; }

/* ══════════════════════════════════════════════════════════════
   PACE
   ══════════════════════════════════════════════════════════════ */
.pace { background: var(--surf) !important; border: 1px solid var(--o200) !important; border-radius: 4px; height: 5px; }
.pace .pace-progress { background: linear-gradient(90deg, var(--o600), var(--o400)) !important; }

/* ══════════════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════════════ */
.modal-content {
  background: var(--surf) !important;
  border: none !important;
  border-radius: var(--r-xl) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.14) !important;
}
.modal-header {
  background: var(--surf) !important;
  border-bottom: 1px solid var(--bdr) !important;
  border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
  padding: 18px 22px !important;
}
.modal-header .modal-title { color: var(--t1) !important; font-weight: 600 !important; font-size: 15px !important; }
.modal-header .close       { color: var(--t3) !important; opacity: 1 !important; font-size: 20px !important; text-shadow: none !important; }
.modal-header .close:hover { color: var(--t1) !important; }
.modal-body   { padding: 22px !important; color: var(--t2) !important; background: var(--surf) !important; }
.modal-footer { padding: 14px 22px !important; border-top: 1px solid var(--bdr) !important; background: var(--surf2) !important; border-radius: 0 0 var(--r-xl) var(--r-xl) !important; }
.modal-icon   { display: block !important; font-size: 64px !important; margin: 10px 0 24px !important; text-align: center !important; color: var(--o500) !important; }

/* ══════════════════════════════════════════════════════════════
   ALERTAS
   ══════════════════════════════════════════════════════════════ */
.alert {
  border-radius: var(--r) !important;
  border-left-width: 4px !important;
  border-top: 1px solid transparent !important;
  border-right: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
}
.alert-success { background: var(--ok-bg)  !important; border-left-color: var(--ok)  !important; color: var(--ok-t)  !important; }
.alert-info    { background: var(--info-bg) !important; border-left-color: var(--info) !important; color: var(--info-t) !important; }
.alert-warning { background: var(--warn-bg) !important; border-left-color: var(--warn) !important; color: var(--warn-t) !important; }
.alert-danger,
.alert-error   { background: var(--err-bg)  !important; border-left-color: var(--err)  !important; color: var(--err-t)  !important; }

/* ══════════════════════════════════════════════════════════════
   LABELS / BADGES
   ══════════════════════════════════════════════════════════════ */
.label-primary { background-color: var(--o500) !important; }
.badge         { background-color: var(--o500) !important; }
.label-success { background-color: var(--ok) !important; }
.label-danger  { background-color: var(--err) !important; }
.label-warning { background-color: var(--warn) !important; }
.label-info    { background-color: var(--b500) !important; }

/* ══════════════════════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════════════════════ */
.breadcrumb { background: transparent !important; padding: 6px 0 !important; font-size: 12px !important; }
.breadcrumb > li + li:before { color: var(--t4) !important; }
.breadcrumb > li a           { color: var(--o500) !important; }
.breadcrumb > .active        { color: var(--t3) !important; }

/* ══════════════════════════════════════════════════════════════
   PROGRESS BARS
   ══════════════════════════════════════════════════════════════ */
.progress { background: var(--surf2) !important; border-radius: var(--r-sm) !important; height: 8px !important; box-shadow: none !important; }
.progress-bar         { background: linear-gradient(90deg, var(--o600), var(--o400)) !important; }
.progress-bar-success { background: var(--ok) !important; }
.progress-bar-info    { background: var(--b500) !important; }
.progress-bar-warning { background: var(--warn) !important; }
.progress-bar-danger  { background: var(--err) !important; }
.progress-bar-dark    { background: var(--t1) !important; }

/* ══════════════════════════════════════════════════════════════
   TAGS
   ══════════════════════════════════════════════════════════════ */
span.tag, .tag {
  background: var(--o050) !important;
  color: var(--o600) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  padding: 3px 8px !important;
  border: 1px solid var(--o100) !important;
}
span.tag a { color: var(--o500) !important; }
.tag:after { border-left-color: var(--o050) !important; }

/* ══════════════════════════════════════════════════════════════
   PANELS Bootstrap
   ══════════════════════════════════════════════════════════════ */
.panel { background: var(--surf) !important; border: 1px solid var(--bdr) !important; border-radius: var(--r-lg) !important; box-shadow: var(--s1) !important; }
.panel-default > .panel-heading { background: var(--surf2) !important; border-color: var(--bdr) !important; color: var(--t1) !important; }
.panel-primary > .panel-heading { background: var(--o500) !important; border-color: var(--o500) !important; color: #FFFFFF !important; }
.panel-body { color: var(--t2) !important; }

/* ══════════════════════════════════════════════════════════════
   TABS / PILLS
   ══════════════════════════════════════════════════════════════ */
.nav-tabs { border-bottom: 2px solid var(--bdr) !important; }
.nav-tabs > li > a {
  color: var(--t3) !important;
  border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
  font-weight: 500 !important;
  border: 1px solid transparent !important;
  transition: all var(--tr) !important;
}
.nav-tabs > li > a:hover { background: var(--o050) !important; color: var(--o600) !important; border-color: var(--bdr) var(--bdr) transparent !important; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus { background: var(--surf) !important; color: var(--o600) !important; border-color: var(--bdr) !important; border-bottom-color: var(--surf) !important; font-weight: 600 !important; }
.nav-pills > li > a             { color: var(--t2) !important; border-radius: var(--r-sm) !important; font-weight: 500 !important; }
.nav-pills > li > a:hover       { background: var(--o050) !important; color: var(--o600) !important; }
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover { background: var(--o500) !important; color: #FFFFFF !important; }

/* ══════════════════════════════════════════════════════════════
   POPOVER / TOOLTIP
   ══════════════════════════════════════════════════════════════ */
.tooltip-inner { background: var(--t1) !important; border-radius: var(--r-sm) !important; font-size: 11.5px !important; padding: 5px 10px !important; }
.jqstooltip    { background: var(--t1) !important; border: none !important; border-radius: var(--r-sm) !important; color: #FFFFFF !important; }
.popover       { background: var(--surf) !important; border: 1px solid var(--bdr2) !important; border-radius: var(--r-lg) !important; box-shadow: var(--s3) !important; }
.popover-title { background: var(--surf2) !important; border-color: var(--bdr) !important; color: var(--t1) !important; font-weight: 600 !important; }
.popover-content { color: var(--t2) !important; }

/* ══════════════════════════════════════════════════════════════
   WELL
   ══════════════════════════════════════════════════════════════ */
.well { background: var(--surf2) !important; border: 1px solid var(--bdr) !important; border-radius: var(--r-lg) !important; box-shadow: none !important; color: var(--t2) !important; }

/* ══════════════════════════════════════════════════════════════
   COLORES HELPERS
   ══════════════════════════════════════════════════════════════ */
.green    { color: var(--ok) !important; }
.blue     { color: var(--b500) !important; }
.red      { color: var(--err) !important; }
.dark     { color: var(--t1) !important; }
.aero     { color: var(--b400) !important; }
.purple   { color: #7C3AED !important; }

.bg-green    { background: var(--ok) !important;   border-color: var(--ok) !important;   color: #FFFFFF !important; }
.bg-blue     { background: var(--b500) !important;  border-color: var(--b500) !important;  color: #FFFFFF !important; }
.bg-red      { background: var(--err) !important;   border-color: var(--err) !important;   color: #FFFFFF !important; }
.bg-orange   { background: var(--o500) !important;  border-color: var(--o500) !important;  color: #FFFFFF !important; }
.bg-purple   { background: #7C3AED !important;      border-color: #7C3AED !important;      color: #FFFFFF !important; }
.bg-white    { background: var(--surf) !important;  border-color: var(--bdr) !important;   color: var(--t2) !important; }
.bg-blue-sky { background: var(--b400) !important;  border-color: var(--b400) !important;  color: #FFFFFF !important; }

.border-green  { border-color: var(--ok) !important; }
.border-red    { border-color: var(--err) !important; }
.border-blue   { border-color: var(--b500) !important; }
.border-dark   { border-color: var(--t1) !important; }
.border-aero   { border-color: var(--b400) !important; }

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
footer {
  background: var(--surf) !important;
  border-top: 1px solid var(--bdr) !important;
  color: var(--t3) !important;
  font-size: 12px !important;
}
.footer-app, .footer-app a { color: var(--t4) !important; font-size: 11px !important; }

/* ══════════════════════════════════════════════════════════════
   ENTORNOS
   ══════════════════════════════════════════════════════════════ */
.env-local span { color: #92400E !important; background: rgba(245,158,11,.22) !important; }
.env-demo  span { color: #FFFFFF !important; background: rgba(220,38,38,.75) !important; }

/* ══════════════════════════════════════════════════════════════
   SWAL2
   ══════════════════════════════════════════════════════════════ */
.swal2-popup { font-family: 'Poppins', sans-serif !important; width: 42em !important; }

/* ══════════════════════════════════════════════════════════════
   DATERANGEPICKER — estilos completos
   ══════════════════════════════════════════════════════════════ */
.daterangepicker {
  background: var(--surf) !important;
  border: 1px solid var(--bdr2) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--s3) !important;
  font-family: 'Poppins', sans-serif !important;
}

/* Cabecera del calendario */
.daterangepicker .calendar-table         { background: var(--surf) !important; border-color: var(--bdr) !important; }
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td      { font-family: 'Poppins', sans-serif; color: var(--t2); }

/* Flechas prev/next — Glyphicons, máxima protección */
.daterangepicker th.prev,
.daterangepicker th.next {
  color: var(--t3) !important;
}
.daterangepicker th.prev:hover,
.daterangepicker th.next:hover {
  background: var(--o050) !important;
  color: var(--o600) !important;
  border-radius: var(--r-sm) !important;
}
/* Los íconos dentro de prev/next son Glyphicons — forzar fuente */
.daterangepicker th.prev i,
.daterangepicker th.next i,
.daterangepicker th.prev span,
.daterangepicker th.next span,
.daterangepicker .prev i,
.daterangepicker .next i {
  font-family: 'Glyphicons Halflings' !important;
  font-style: normal !important;
  font-weight: normal !important;
  display: inline-block !important;
  line-height: 1 !important;
}
.daterangepicker th.prev i::before,
.daterangepicker th.next i::before,
.daterangepicker .prev i::before,
.daterangepicker .next i::before {
  font-family: 'Glyphicons Halflings' !important;
}

/* mes/año título */
.daterangepicker .month { color: var(--t1) !important; font-weight: 600 !important; font-size: 13px !important; }

/* Celdas de días */
.daterangepicker td.available:hover  { background: var(--o050) !important; color: var(--o600) !important; border-radius: var(--r-sm) !important; }
.daterangepicker td.off               { color: var(--t4) !important; background: transparent !important; }
.daterangepicker td.in-range          { background: var(--o050) !important; color: var(--t2) !important; }
.daterangepicker td.active,
.daterangepicker td.active:hover      { background: var(--o500) !important; color: #FFFFFF !important; border-radius: var(--r-sm) !important; }
.daterangepicker td.start-date        { border-radius: var(--r-sm) 0 0 var(--r-sm) !important; }
.daterangepicker td.end-date          { border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; }
.daterangepicker td.today             { font-weight: 700 !important; }

/* Input mini (campos de fecha dentro del picker) */
.daterangepicker .input-mini {
  background: var(--surf2) !important;
  border: 1px solid var(--bdr2) !important;
  border-radius: var(--r-sm) !important;
  color: var(--t1) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  padding: 4px 8px !important;
  box-shadow: none !important;
}
.daterangepicker .input-mini.active {
  border-color: var(--o400) !important;
  box-shadow: 0 0 0 2px rgba(247,127,0,.10) !important;
}

/* El ícono de calendario en el trigger input (fa-calendar) */
.daterangepicker-trigger i.fa-calendar,
.daterangepicker-trigger .fa-calendar,
i.fa-calendar { font-family: 'FontAwesome' !important; }

/* Ícono de caret en el botón trigger */
.daterangepicker-trigger i.fa-caret-down,
i.fa-caret-down { font-family: 'FontAwesome' !important; }

/* Select de mes/año dentro del picker */
.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  font-family: 'Poppins', sans-serif !important;
  border: 1px solid var(--bdr2) !important;
  border-radius: var(--r-sm) !important;
  background: var(--surf) !important;
  color: var(--t1) !important;
  font-size: 12px !important;
}

/* Lista de rangos (Hoy, Ayer, etc.) */
.daterangepicker .ranges li          { color: var(--t2) !important; border-radius: var(--r-sm) !important; font-size: 12.5px !important; padding: 6px 12px !important; }
.daterangepicker .ranges li:hover    { background: var(--o050) !important; color: var(--o600) !important; border-color: var(--o100) !important; }
.daterangepicker .ranges li.active   { background: var(--o500) !important; border-color: var(--o500) !important; color: #FFFFFF !important; font-weight: 600 !important; }

/* Botones Aplicar / Cancelar */
.daterangepicker .applyBtn {
  background: linear-gradient(135deg, var(--o600), var(--o500)) !important;
  border-color: var(--o600) !important;
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  border-radius: var(--r-sm) !important;
}
.daterangepicker .applyBtn:hover  { background: linear-gradient(135deg, var(--o700), var(--o600)) !important; }
.daterangepicker .cancelBtn {
  background: var(--surf) !important;
  border: 1px solid var(--bdr2) !important;
  color: var(--t2) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  border-radius: var(--r-sm) !important;
}
.daterangepicker .cancelBtn:hover { background: var(--surf2) !important; border-color: var(--bdr2) !important; }

/* ══════════════════════════════════════════════════════════════
   DATERANGEPICKER — Reemplazo de Glyphicons con FontAwesome
   Solución definitiva para cuando la fuente Glyphicons no carga
   ══════════════════════════════════════════════════════════════ */

/*
  El daterangepicker usa:
    th.prev  > i.glyphicon.glyphicon-chevron-left    ← flecha izquierda
    th.next  > i.glyphicon.glyphicon-chevron-right   ← flecha derecha
    .input-mini con icono calendario (glyphicon-calendar) al inicio

  Estrategia: ocultar el glyph roto y reemplazarlo con FA vía ::before
*/

/* ── Flechas prev / next ── */
.daterangepicker th.prev > i.glyphicon,
.daterangepicker th.next > i.glyphicon {
  /* Ocultar el carácter Glyphicon roto */
  font-family: 'FontAwesome' !important;
  font-size: 0 !important;           /* tamaño 0 para ocultar el □ */
  display: inline-block !important;
  position: relative;
  width: 16px; height: 16px;
  color: transparent !important;
}
.daterangepicker th.prev > i.glyphicon::before {
  content: '\f053' !important;       /* fa-chevron-left */
  font-family: 'FontAwesome' !important;
  font-size: 12px !important;
  color: var(--t3) !important;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.daterangepicker th.next > i.glyphicon::before {
  content: '\f054' !important;       /* fa-chevron-right */
  font-family: 'FontAwesome' !important;
  font-size: 12px !important;
  color: var(--t3) !important;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.daterangepicker th.prev:hover > i.glyphicon::before,
.daterangepicker th.next:hover > i.glyphicon::before {
  color: var(--o600) !important;
}

/* ── Ícono de calendario en input-mini ── */
/*
  El daterangepicker inserta un <i class="glyphicon glyphicon-calendar">
  antes del campo .input-mini. Lo reemplazamos igual.
*/
.daterangepicker .input-mini + i.glyphicon,
.daterangepicker i.glyphicon-calendar {
  font-family: 'FontAwesome' !important;
  font-size: 0 !important;
  display: inline-block !important;
  position: relative;
  width: 14px; height: 14px;
  color: transparent !important;
  vertical-align: middle;
}
.daterangepicker .input-mini + i.glyphicon::before,
.daterangepicker i.glyphicon-calendar::before {
  content: '\f073' !important;       /* fa-calendar */
  font-family: 'FontAwesome' !important;
  font-size: 12px !important;
  color: var(--t3) !important;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* ── Ícono calendario en el botón trigger (input-group) ── */
/*
  Si el trigger usa <i class="fa fa-calendar"> o <i class="glyphicon glyphicon-calendar">
  fuera del picker, aseguramos que FA funcione correctamente.
*/
button i.glyphicon-calendar,
a i.glyphicon-calendar,
.btn i.glyphicon-calendar,
.input-group-btn i.glyphicon-calendar,
span.glyphicon-calendar {
  font-family: 'FontAwesome' !important;
  font-size: 0 !important;
  display: inline-block;
  position: relative;
  width: 14px; height: 14px;
  color: transparent !important;
}
button i.glyphicon-calendar::before,
a i.glyphicon-calendar::before,
.btn i.glyphicon-calendar::before,
.input-group-btn i.glyphicon-calendar::before,
span.glyphicon-calendar::before {
  content: '\f073' !important;
  font-family: 'FontAwesome' !important;
  font-size: 13px !important;
  color: var(--t3) !important;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* ── Ícono caret-down en trigger ── */
.daterangepicker-trigger i.glyphicon-calendar::before { content: '\f073' !important; font-family: 'FontAwesome' !important; }
.daterangepicker-trigger i.glyphicon-chevron-down::before,
.daterangepicker-trigger .caret::before               { content: '\f0d7' !important; font-family: 'FontAwesome' !important; }

/* ══════════════════════════════════════════════════════════════
   SCROLLBAR GLOBAL
   ══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar             { width: 5px; height: 5px; }
::-webkit-scrollbar-track       { background: transparent; }
::-webkit-scrollbar-thumb       { background: var(--bdr2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--o400); }
.left_col ::-webkit-scrollbar-thumb       { background: var(--bdr); }
.left_col ::-webkit-scrollbar-thumb:hover { background: var(--o400); }

/* ══════════════════════════════════════════════════════════════
   SIDEBAR EXPANDIDO (nav-md) — estilos adicionales de pulido
   ══════════════════════════════════════════════════════════════ */

/* Ancho fijo del sidebar expandido */
.nav-md .left_col { min-height: 100vh !important; height: 100% !important; }

/* FIX scroll-view height: ocupa todo el sidebar para que el fondo blanco
   se extienda hasta el final aunque haya poco contenido en el menú */
.nav-md .left_col .scroll-view,
.nav-md .left_col .mCustomScrollBox,
.nav-md .left_col .mCSB_container {
  min-height: calc(100vh - 57px) !important; /* 57px = altura del nav_title */
}

/* En nav-md los items muestran texto normalmente */
.nav-md .nav.side-menu > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  white-space: nowrap !important;
}
.nav-md .nav.side-menu > li > a .fa {
  flex-shrink: 0 !important;
  width: 18px !important;
  text-align: center !important;
}
/* Chevron alineado a la derecha */
.nav-md .nav.side-menu > li > a .fa-chevron-down,
.nav-md .nav.side-menu > li > a .fa-chevron-right {
  margin-left: auto !important;
  font-size: 11px !important;
  opacity: .5;
}

/* Línea decorativa naranja en el logo */
.nav_title {
  padding: 0 16px !important;
  height: 57px !important;
  display: flex !important;
  align-items: center !important;
}

/* Separador visual entre secciones del menú */
.menu_section + .menu_section {
  border-top: 1px solid var(--sb-bdr) !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
}

/* ══════════════════════════════════════════════════════════════
   CHART.JS — YA implementado en scripts.blade.php
   v2.1: barras naranja (#F77F00) con hover azul (#2E86DE)
   Compatible con Chart.js v2 y v3+
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   ACCESO RÁPIDO CFDI — panel debajo del logo en sidebar
   ══════════════════════════════════════════════════════════════ */
.cfdi-quick {
  margin: 8px 10px;
  position: relative;
}
.cfdi-quick-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: linear-gradient(135deg, var(--o600), var(--o500));
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all .18s;
  box-shadow: 0 2px 8px rgba(232,93,4,.25);
}
.cfdi-quick-btn:hover {
  background: linear-gradient(135deg, var(--o700), var(--o600));
  box-shadow: 0 4px 14px rgba(232,93,4,.38);
  transform: translateY(-1px);
}
.cfdi-quick-icon {
  width: 24px;
  height: 24px;
  background: rgba(255,255,255,.2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.cfdi-quick-label {
  flex: 1;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  text-align: left;
  letter-spacing: .01em;
}
.cfdi-quick-chevron {
  color: rgba(255,255,255,.75);
  transition: transform .18s;
  display: flex;
  align-items: center;
}
.cfdi-quick.open .cfdi-quick-chevron {
  transform: rotate(180deg);
}

/* Dropdown menu */
.cfdi-quick-menu {
  display: none;
  background: var(--sb-bg, #fff);
  border: 1px solid var(--bdr, #e8eaee);
  border-radius: 10px;
  margin-top: 6px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
.cfdi-quick.open .cfdi-quick-menu {
  display: block;
}

/* Items del menú */
.cfdi-quick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  text-decoration: none !important;
  border-bottom: 1px solid var(--bdr, #e8eaee);
  transition: background .12s;
}
.cfdi-quick-item:last-child { border-bottom: none; }
.cfdi-quick-item:hover {
  background: var(--o050, #fff6ee) !important;
}
.cfdi-quick-item-ico {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.cfdi-quick-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cfdi-quick-item-info strong {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--t1, #1a1d23) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cfdi-quick-item-info small {
  font-size: 10.5px !important;
  color: var(--t4, #9ea6b4) !important;
  margin-top: 1px;
  font-weight: 400 !important;
}

/* nav-sm: ocultar el panel cuando el sidebar está colapsado */
.nav-sm .cfdi-quick { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   WIZARD — pasos completados: color primario naranja
   Sobreescribe el #1ABB9C (teal) de custom.min.css
   ══════════════════════════════════════════════════════════════ */
.wizard_horizontal ul.wizard_steps li a.done:before,
.wizard_horizontal ul.wizard_steps li a.done .step_no,
.wizard_verticle   ul.wizard_steps li a.done:before,
.wizard_verticle   ul.wizard_steps li a.done .step_no {
  background: var(--o500) !important;   /* #F77F00 */
  border-color: var(--o500) !important;
  color: #fff !important;
}

/* Línea de conexión entre pasos completados */
.wizard_horizontal ul.wizard_steps li a.done:after {
  border-top-color: var(--o500) !important;
}
.wizard_vertical ul.wizard_steps li a.done:after {
  border-left-color: var(--o500) !important;
}

/* ══════════════════════════════════════════════════════════════
   MODERNIZACIÓN v3.0 — Material Symbols + sidebar mejorado
   ══════════════════════════════════════════════════════════════ */

/* ── Sidebar nav-md: ítem activo como pill completo ─────────── */
.nav-md .nav.side-menu > li.active > a,
.nav-md .nav.side-menu > li.current-page > a,
.nav-md .left_col .nav.side-menu > li.active > a {
  background: linear-gradient(90deg, var(--o050) 0%, rgba(255,246,238,0) 100%) !important;
  border-left: 3px solid var(--o500) !important;
  border-radius: 0 var(--r) var(--r) 0 !important;
}

/* ── Sidebar nav-md: item link como flexbox para alinear icon+texto ── */
.nav.side-menu > li > a {
  display: flex !important;
  align-items: center !important;
}
.nav.side-menu > li > a .ms-nav-icon {
  font-size: 20px !important;
  line-height: 1 !important;
}

/* ── Topbar: iconos de acción (info-number) ─────────────────── */
.info-number .ms,
.info-number .ms-fill {
  font-size: 22px !important;
  vertical-align: middle !important;
  color: var(--t3) !important;
}
.info-number a:hover .ms,
.info-number a:hover .ms-fill { color: var(--o500) !important; }

/* ── Topbar: iconos generales más grandes ───────────────────── */
.nav_menu .ms,
.top_nav  .ms {
  font-size: 20px !important;
  vertical-align: middle !important;
}

/* ── Topbar toggle de menú ──────────────────────────────────── */
#menu_toggle .ms { font-size: 24px !important; }

/* ── Dropdown usuario: iconos alineados ─────────────────────── */
.dropdown-usermenu .ms-fw {
  display: inline-block !important;
  font-size: 16px !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
  opacity: .7;
}
.dropdown-usermenu li a:hover .ms-fw { opacity: 1; color: var(--o500); }

/* ── x_panel: borde superior naranja sutil ──────────────────── */
.x_panel {
  border-top: 2px solid transparent !important;
  transition: border-color var(--tr), box-shadow var(--tr) !important;
}
.x_panel:hover { border-top-color: var(--o400) !important; }

/* ── Sidebar: cabecera de sección más compacta ──────────────── */
.menu_section h3 {
  font-size: 9px !important;
  letter-spacing: .12em !important;
  font-weight: 700 !important;
  color: var(--t4) !important;
  padding: 14px 20px 6px !important;
  text-transform: uppercase !important;
}

/* ── Sidebar nav-sm: tooltip de nombre al hacer hover ────────── */
.nav-sm .nav.side-menu > li > a {
  position: relative !important;
}

/* ── Topbar: mejor alineación vertical general ──────────────── */
.top_nav .nav > li > a {
  display: flex !important;
  align-items: center !important;
  height: 50px !important;
  padding: 0 12px !important;
}
.top_nav .nav > li.user-profile-wrap > a,
.top_nav .nav > li > a.user-profile {
  gap: 6px !important;
}

/* ── Badge notificaciones: posicionamiento ───────────────────── */
.info-number { position: relative !important; }
.info-number .badge {
  position: absolute !important;
  top: 6px !important;
  right: 2px !important;
  min-width: 16px !important;
  height: 16px !important;
  line-height: 12px !important;
  padding: 2px 4px !important;
  font-size: 9px !important;
}

/* ── Tabla: cuerpo con font más legible ─────────────────────── */
.table > tbody > tr > td {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}

/* ── Scrollbar personalizada (webkit) ────────────────────────── */
.left_col ::-webkit-scrollbar         { width: 4px; }
.left_col ::-webkit-scrollbar-track   { background: transparent; }
.left_col ::-webkit-scrollbar-thumb   { background: var(--bdr2); border-radius: 4px; }
.left_col ::-webkit-scrollbar-thumb:hover { background: var(--o400); }

/* ── Transición de página suave ──────────────────────────────── */
.right_col { animation: fp-fadein .18s ease; }
@keyframes fp-fadein { from { opacity:.7; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* ── Material Symbols en sidebar colapsado: tooltip de label ─── */
.nav-sm .nav.side-menu > li { position: relative; }