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

/* ============================================================
   CLUBGESTIÓN — Aesthetic Override v4 (portado de gestiónUltimate)
   Desktop: SOLO color, font, shadow, border-radius, background
   Mobile: + padding, margin, font-size para UX táctil
   ============================================================ */

:root {
  --gu-primary: #2563eb;
  --gu-primary-dark: #1d4ed8;
  --gu-success: #059669;
  --gu-warning: #d97706;
  --gu-danger: #dc2626;
  --gu-info: #0891b2;
  --gu-bg: #dbe3ee;
  --gu-surface: #ffffff;
  /* Chrome (sidebar + header + hero) = navy oscuro (como le gustó al usuario).
     Para tunear TODO el chrome, cambiar solo --gu-chrome (y opcionalmente las derivadas). */
  --gu-chrome: #141d30;        /* base navy */
  --gu-chrome-hi: #1b2740;     /* hover / activo (más claro) */
  --gu-chrome-lo: #0f1626;     /* submenú (más oscuro) */
  --gu-chrome-active: #172136; /* ítem de submenú activo */
  --gu-border: #e2e8f0;
  --gu-text: #1e293b;
  --gu-text-sec: #64748b;
  --gu-text-muted: #94a3b8;
  --gu-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --gu-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);
  --gu-radius: 8px;
  --gu-radius-lg: 12px;
}


/* ============================================================
   DESKTOP — Solo visual puro
   ============================================================ */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  color: var(--gu-text) !important;
  background: var(--gu-bg) !important;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600 !important; }

.content-wrapper, .right-side { background: var(--gu-bg) !important; }

/* Info Boxes */
.info-box {
  border-radius: var(--gu-radius-lg) !important;
  box-shadow: var(--gu-shadow-sm) !important;
  border: 1px solid var(--gu-border) !important;
}
.info-box:hover { box-shadow: var(--gu-shadow) !important; }

/* KPIs: círculos con fondo tintado suave + ícono de color (look 2026, menos saturado) */
.info-box-icon.bg-aqua   { background: #e0f2fe !important; box-shadow: none !important; }
.info-box-icon.bg-green  { background: #dcfce7 !important; box-shadow: none !important; }
.info-box-icon.bg-yellow { background: #fef3c7 !important; box-shadow: none !important; }
.info-box-icon.bg-red    { background: #fee2e2 !important; box-shadow: none !important; }
.info-box-icon.bg-aqua i, .info-box-icon.bg-aqua   { color: #0891b2 !important; }
.info-box-icon.bg-green i, .info-box-icon.bg-green  { color: #059669 !important; }
.info-box-icon.bg-yellow i, .info-box-icon.bg-yellow { color: #d97706 !important; }
.info-box-icon.bg-red i, .info-box-icon.bg-red     { color: #dc2626 !important; }

.info-box-text {
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--gu-text-sec) !important;
}
.info-box-number { font-weight: 700 !important; color: var(--gu-text) !important; }

/* Boxes */
.box {
  border: 1px solid var(--gu-border) !important;
  border-radius: var(--gu-radius-lg) !important;
  box-shadow: var(--gu-shadow-sm) !important;
  background: var(--gu-surface) !important;
}
.box:hover { box-shadow: var(--gu-shadow) !important; }
.box-header .box-title { font-weight: 600 !important; color: var(--gu-text) !important; }
.box-footer { background: #f8fafc !important; }

.box-primary { border-top: 3px solid var(--gu-primary) !important; }
.box-success { border-top: 3px solid var(--gu-success) !important; }
.box-warning { border-top: 3px solid var(--gu-warning) !important; }
.box-danger  { border-top: 3px solid var(--gu-danger) !important; }
.box-info    { border-top: 3px solid var(--gu-info) !important; }

.box-primary > .box-header,
.box-success > .box-header,
.box-warning > .box-header,
.box-danger > .box-header,
.box-info > .box-header {
  background: var(--gu-surface) !important;
  color: var(--gu-text) !important;
}

/* Tablas */
.table > thead > tr > th {
  background: var(--gu-bg) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--gu-text-sec) !important;
  font-size: 11.5px !important;
  border-bottom-color: var(--gu-border) !important;
}
.table > tbody > tr > td { color: var(--gu-text) !important; }
.table > tbody > tr:hover > td { background: #f8fafc !important; }

/* DataTables */
.dataTables_wrapper .dataTables_filter input {
  border-radius: 6px !important;
  border-color: var(--gu-border) !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--gu-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
  outline: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--gu-primary) !important;
  border-color: var(--gu-primary) !important;
  color: #fff !important;
}

/* Botones */
.btn { border-radius: 6px !important; font-weight: 500 !important; }
.btn-primary { background: var(--gu-primary) !important; border-color: var(--gu-primary) !important; }
.btn-primary:hover { background: var(--gu-primary-dark) !important; }
.btn-success { background: var(--gu-success) !important; border-color: var(--gu-success) !important; }
.btn-danger { background: var(--gu-danger) !important; border-color: var(--gu-danger) !important; }
.btn-warning { background: var(--gu-warning) !important; border-color: var(--gu-warning) !important; color: #fff !important; }
.btn-info { background: var(--gu-info) !important; border-color: var(--gu-info) !important; }
.btn-purple { background: #7c3aed !important; border-color: #7c3aed !important; color: #fff !important; }

/* Formularios */
.form-control { border-radius: 6px !important; border-color: var(--gu-border) !important; color: var(--gu-text) !important; }
.form-control:focus { border-color: var(--gu-primary) !important; box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important; }
label { font-weight: 600 !important; color: var(--gu-text-sec) !important; }

/* Select2 */
.select2-container--default .select2-selection--single { border-radius: 6px !important; border-color: var(--gu-border) !important; }
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--gu-primary) !important; }
.select2-dropdown { border-radius: 8px !important; border-color: var(--gu-border) !important; box-shadow: var(--gu-shadow) !important; }

/* Otros */
.label { border-radius: 50px !important; font-weight: 600 !important; }
.modal-content { border-radius: var(--gu-radius-lg) !important; border: none !important; box-shadow: 0 10px 25px rgba(0,0,0,.1) !important; }
.nav-tabs > li.active > a { border-top: 2px solid var(--gu-primary) !important; font-weight: 600 !important; }
.dropdown-menu { border-radius: var(--gu-radius) !important; box-shadow: var(--gu-shadow) !important; border-color: var(--gu-border) !important; }
.progress { border-radius: 50px !important; }
.callout { border-radius: var(--gu-radius) !important; }
.alert { border-radius: var(--gu-radius) !important; }
.tooltip-inner { border-radius: 6px !important; background: #1e293b !important; }

/* Scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

/* Sidebar */
.sidebar-menu > li > a { font-weight: 450 !important; border-left: 3px solid transparent !important; }
.sidebar-menu > li.active > a { border-left-color: var(--gu-primary) !important; }

/* Sidebar text overflow fix — prevent long menu labels from overflowing */
.sidebar-menu > li > a {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Delivery */
.update_my_delivery_status { border-radius: var(--gu-radius-lg) !important; font-weight: 600 !important; }

/* MercadoLibre sidebar icon */
.icon-mercadolibre {
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  background: url('../img/mercadolibre-icon.svg') no-repeat center center !important;
  background-size: contain !important;
  vertical-align: middle !important;
  margin-right: 5px !important;
}
.sidebar-menu .icon-mercadolibre {
  width: 26px !important;
  height: 26px !important;
  font-size: 0 !important;
  vertical-align: -5px !important;
  filter: brightness(0) invert(0.25) !important;
  opacity: 0.85 !important;
}
.sidebar-menu > li.active > a .icon-mercadolibre,
.sidebar-menu > li > a:hover .icon-mercadolibre {
  filter: brightness(0) invert(0.1) !important;
  opacity: 1 !important;
}


/* ============================================================
   TABLET (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {

  /* Tablas siempre scroll horizontal */
  .table-responsive {
    -webkit-overflow-scrolling: touch !important;
    border: none !important;
  }
}


/* ============================================================
   MOBILE (≤767px) — Optimización completa
   ============================================================ */
@media (max-width: 767px) {

  /* --- LAYOUT GENERAL --- */
  .content {
    padding: 8px !important;
  }

  section.content-header {
    padding: 8px 10px !important;
  }

  .content-header > h1 {
    font-size: 1.15rem !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
  }

  .content-header > h1 > small {
    display: block !important;
    margin-top: 4px !important;
  }

  /* --- HEADER / NAVBAR --- */
  .main-header .navbar {
    padding: 0 !important;
  }

  /* Botones del header más compactos */
  .main-header .navbar .btn-sm {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  /* Logo más chico */
  .main-header .logo {
    font-size: 13px !important;
  }

  /* --- DASHBOARD KPI CARDS --- */
  .col-custom {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .info-box {
    margin-bottom: 8px !important;
  }

  .info-box-icon {
    width: 60px !important;
    font-size: 20px !important;
  }

  .info-box-text {
    font-size: 10px !important;
    letter-spacing: 0.02em !important;
  }

  .info-box-number {
    font-size: 14px !important;
  }

  /* Subtexto en tarjetas de devolución */
  .info-box > p {
    font-size: 9px !important;
    line-height: 1.3 !important;
  }

  /* --- BOXES / CARDS --- */
  .box {
    margin-bottom: 10px !important;
    border-radius: var(--gu-radius) !important;
  }

  .box-header {
    padding: 10px 12px !important;
  }

  .box-body {
    padding: 10px !important;
  }

  /* --- TABLAS --- */
  .table-responsive {
    -webkit-overflow-scrolling: touch !important;
    border: none !important;
  }

  .table > thead > tr > th {
    font-size: 10px !important;
    padding: 8px 6px !important;
    white-space: nowrap !important;
  }

  .table > tbody > tr > td {
    font-size: 12px !important;
    padding: 8px 6px !important;
  }

  /* Botón "Acciones" en tablas — más compacto */
  .table .btn-xs {
    padding: 4px 6px !important;
    font-size: 11px !important;
  }

  /* Grupo de botones en celdas de tabla */
  .table td .btn-group {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
  }

  /* --- DATATABLES CONTROLES --- */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    float: none !important;
    text-align: left !important;
    margin-bottom: 8px !important;
  }

  .dataTables_wrapper .dataTables_length label,
  .dataTables_wrapper .dataTables_filter label {
    font-size: 12px !important;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 4px !important;
    display: block !important;
  }

  .dataTables_wrapper .dataTables_info {
    font-size: 11px !important;
    text-align: center !important;
    padding: 8px 0 !important;
  }

  .dataTables_wrapper .dataTables_paginate {
    text-align: center !important;
    padding: 8px 0 !important;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 5px 10px !important;
    font-size: 11px !important;
    margin: 0 1px !important;
  }

  /* Botones de export — scroll horizontal */
  .dt-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
  }

  .dt-buttons .btn {
    font-size: 11px !important;
    padding: 5px 8px !important;
    flex-shrink: 0 !important;
  }

  /* --- FORMULARIOS --- */
  .form-control {
    font-size: 14px !important;   /* más grande para touch */
    padding: 8px 10px !important;
  }

  .form-group {
    margin-bottom: 8px !important;
  }

  /* Select2 ancho completo */
  .select2-container {
    width: 100% !important;
  }

  /* --- FILTROS (los col-md-3 con selects) --- */
  .content .row > [class*="col-md-3"] {
    margin-bottom: 4px !important;
  }

  /* --- MODALES --- */
  .modal-dialog {
    margin: 10px !important;
  }

  .modal-content {
    border-radius: var(--gu-radius) !important;
  }

  .modal-header {
    padding: 12px 14px !important;
  }

  .modal-header .modal-title {
    font-size: 15px !important;
  }

  .modal-body {
    padding: 12px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
  }

  .modal-footer {
    padding: 10px 14px !important;
  }

  .modal-lg {
    width: auto !important;
    margin: 10px !important;
  }

  /* --- NAV TABS scrollable --- */
  .nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .nav-tabs > li {
    flex-shrink: 0 !important;
  }

  .nav-tabs > li > a {
    font-size: 12px !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
  }

  /* --- BOTONES GENERALES --- */
  .btn-block {
    padding: 12px !important;
    font-size: 14px !important;
  }

  /* Pull-right no flotar en mobile */
  .box-header .box-tools.pull-right {
    float: none !important;
    margin-top: 8px !important;
  }

  /* --- DROPDOWNS --- */
  .dropdown-menu {
    max-width: calc(100vw - 30px) !important;
  }

  /* --- ALERTAS / CALLOUTS --- */
  .callout {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
}


/* ============================================================
   MOBILE — DELIVERY / REPARTO (≤767px)
   ============================================================ */
@media (max-width: 767px) {

  /* Tarjetas de delivery */
  .box.box-widget {
    margin-bottom: 10px !important;
  }

  .box.box-widget .box-header {
    padding: 10px 12px !important;
  }

  .box.box-widget .box-body {
    padding: 10px 12px !important;
  }

  /* Info del cliente — más grande y legible */
  .box.box-widget .box-body p {
    font-size: 14px !important;
    line-height: 1.8 !important;
  }

  /* Íconos en info de delivery */
  .box.box-widget .box-body p > .fa {
    width: 20px !important;
    text-align: center !important;
    color: var(--gu-text-muted) !important;
  }

  /* Teléfono clickable — grande y claro */
  .box.box-widget a[href^="tel:"] {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--gu-primary) !important;
    text-decoration: none !important;
    display: inline-block !important;
    padding: 2px 0 !important;
  }

  /* Dirección — destacada */
  .box.box-widget .fa-map-marker {
    color: var(--gu-danger) !important;
  }

  /* Tabla de productos en delivery */
  .box.box-widget .table-condensed th {
    font-size: 10px !important;
    padding: 5px 6px !important;
  }

  .box.box-widget .table-condensed td {
    font-size: 12px !important;
    padding: 5px 6px !important;
  }

  /* Botones de acción — táctiles y grandes */
  .update_my_delivery_status {
    padding: 14px 16px !important;
    font-size: 16px !important;
    border-radius: var(--gu-radius) !important;
  }

  .box.box-widget .btn-lg {
    padding: 14px 16px !important;
    font-size: 16px !important;
  }

  .box.box-widget .btn-sm.btn-block {
    padding: 10px !important;
    font-size: 13px !important;
    margin-top: 6px !important;
  }

  /* Status labels en header de delivery */
  .box.box-widget .box-header .label {
    font-size: 10px !important;
  }

  /* Completadas hoy counter */
  .content-header .label.bg-green {
    font-size: 12px !important;
    padding: 4px 10px !important;
  }

  /* Delivery show modal — tablas internas */
  .modal .table-condensed th,
  .modal .table-condensed td {
    font-size: 12px !important;
    padding: 5px 8px !important;
  }

  /* Timeline en delivery show */
  .modal .timeline-item {
    font-size: 12px !important;
  }
}


/* ============================================================
   MOBILE — SHIPMENTS / ENVÍOS (≤767px)
   ============================================================ */
@media (max-width: 767px) {

  /* Filtros del listado de envíos */
  .content .row > [class*="col-md-"] > .form-group {
    margin-bottom: 6px !important;
  }

  /* Tabla de envíos */
  #sell_table th,
  #sell_table td {
    font-size: 11px !important;
    padding: 6px 4px !important;
  }
}


/* ============================================================
   MOBILE PEQUEÑO (≤480px)
   ============================================================ */
@media (max-width: 480px) {

  .content {
    padding: 5px !important;
  }

  .content-header > h1 {
    font-size: 1rem !important;
  }

  /* KPIs más compactos */
  .info-box-icon {
    width: 50px !important;
    font-size: 18px !important;
  }

  .info-box-text {
    font-size: 9px !important;
  }

  .info-box-number {
    font-size: 12px !important;
  }

  /* Boxes sin padding extra */
  .box-body {
    padding: 8px !important;
  }

  /* Tablas con fuente más chica */
  .table > thead > tr > th {
    font-size: 9px !important;
    padding: 6px 4px !important;
  }

  .table > tbody > tr > td {
    font-size: 11px !important;
    padding: 6px 4px !important;
  }

  /* Modales ocupan todo el ancho */
  .modal-dialog {
    margin: 5px !important;
  }

  .modal-body {
    padding: 10px !important;
  }

  /* Delivery botones de acción */
  .update_my_delivery_status {
    font-size: 14px !important;
    padding: 12px !important;
  }

  /* Paginación más compacta */
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }

  /* Header botones ocultar texto, solo ícono */
  .main-header .navbar .btn-sm {
    padding: 4px 6px !important;
    font-size: 10px !important;
  }
}


/* ============================================================
   PRINT
   ============================================================ */
/* ============================================================
   PRINT
   ============================================================ */
@media print {
  body {
    font-family: Arial, sans-serif !important;
    background: #fff !important;
  }
  /* FIX 2026-07: el recibo/cotización se imprime desde #receipt_section, que
     vive DENTRO de .content-wrapper. El tema moderno pinta .content-wrapper con
     var(--gu-bg) (#dbe3ee), y al imprimir con "gráficos de fondo" activados ese
     gris salía como un recuadro detrás del documento. Forzamos blanco en los
     contenedores de la app SOLO en impresión (no toca pantalla ni plantillas). */
  html, .wrapper, .content-wrapper, .right-side, .content, .box,
  .invoice.print_section, #receipt_section {
    background: #fff !important;
    box-shadow: none !important;
  }
  /* El tema tiñe el texto con var(--gu-text) (#1e293b, gris pizarra). En el
     documento impreso queremos negro puro como antes. Lo aplicamos al contenedor
     del recibo (no a cada elemento) para NO pisar los textos blancos que van
     sobre fondo azul (cabecera de la tabla y barra de Total). */
  #receipt_section { color: #000 !important; }
  .box, .info-box {
    box-shadow: none !important;
  }
  /* Reset POS inline styles for printing */
  body.lockscreen .pos-form-actions {
    position: static !important;
    box-shadow: none !important;
  }
  /* URGENTE 2026-07: los mensajes de sistema (SweetAlert / toastr) NO deben salir
     impresos en el ticket. Al finalizar una venta el recibo se imprime con
     window.print() ~1s después, y si hay un swal abierto ("Venta añadida con
     éxito", avisos de Factura electrónica, etc.) quedaba impreso encima del
     ticket. Los ocultamos explícitamente en impresión (igual que #toast-container). */
  .swal-overlay, .swal-modal, .swal-icon, .swal-title, .swal-text, .swal-footer,
  .swal-button, .swal-content, .swal-display-thumb,
  .sweet-alert, .sweet-overlay,
  .swal2-container, .swal2-popup, .swal2-backdrop-show,
  #toast-container, .toast, .toast-container {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ============================================================
   SIDEBAR NAVY (look "pro") — 2026-07
   Aplica el sidebar oscuro navy a los temas azul (default blue-light
   y blue), negro (black) y rojo (red) + sus variantes -light.
   Los temas purple / green NO se pisan, así el selector de color por
   empresa (Config → Sistema) sigue ofreciendo alternativas distintas.
   ============================================================ */
.gu-dark .main-sidebar,
.gu-dark .main-sidebar .sidebar {
  background: var(--gu-chrome) !important;
}
.gu-dark .sidebar-menu > li > a {
  color: #9aa7bd !important;
}
.gu-dark .sidebar-menu > li > a > i,
.gu-dark .sidebar-menu > li > a > .fa {
  color: #6f7f99 !important;
}
.gu-dark .sidebar-menu > li:hover > a,
.gu-dark .sidebar-menu > li.active > a,
.gu-dark .sidebar-menu > li.menu-open > a {
  background: var(--gu-chrome-hi) !important;
  color: #ffffff !important;
  border-left-color: #3b82f6 !important;
}
.gu-dark .sidebar-menu > li:hover > a > i,
.gu-dark .sidebar-menu > li.active > a > i,
.gu-dark .sidebar-menu > li.menu-open > a > i {
  color: #3b82f6 !important;
}
/* Fondo del submenú desplegable (alta especificidad para ganarle a AdminLTE que lo pinta gris claro) */
.gu-dark .main-sidebar .sidebar-menu li > .treeview-menu,
.gu-dark .sidebar-menu > li > .treeview-menu,
.gu-dark .sidebar-menu > li:hover > .treeview-menu,
.gu-dark .sidebar-menu > li.active > .treeview-menu,
.gu-dark .sidebar-menu > li.menu-open > .treeview-menu {
  background: var(--gu-chrome-lo) !important;
}
.gu-dark .main-sidebar .sidebar-menu .treeview-menu > li > a {
  color: #8593a8 !important;
  background: transparent !important;
}
.gu-dark .main-sidebar .sidebar-menu .treeview-menu > li.active > a,
.gu-dark .main-sidebar .sidebar-menu .treeview-menu > li > a:hover {
  color: #ffffff !important;
  background: var(--gu-chrome-active) !important;
}
.gu-dark .sidebar-menu > li.header {
  color: #566585 !important;
  background: transparent !important;
}
/* Marca del producto (gestionUltimate) sobre navy */
.gu-dark .gu-brand { border-bottom-color: rgba(255,255,255,.08) !important; }
.gu-dark .gu-brand:hover { background: rgba(59,130,246,.12) !important; }
.gu-dark .gu-brand-name { color: #e2e8f0 !important; }
/* Panel de usuario (si está visible) */
.gu-dark .user-panel .info,
.gu-dark .user-panel .info > a { color: #cbd5e1 !important; }
/* Ícono MercadoLibre: aclararlo para que se vea sobre navy */
.gu-dark .sidebar-menu .icon-mercadolibre {
  filter: brightness(0) invert(0.75) !important;
}
.gu-dark .sidebar-menu > li.active > a .icon-mercadolibre,
.gu-dark .sidebar-menu > li > a:hover .icon-mercadolibre {
  filter: brightness(0) invert(0.95) !important;
}
/* Scrollbar del sidebar sobre navy */
.gu-dark .main-sidebar ::-webkit-scrollbar-thumb { background: #33415c; }

/* ------------------------------------------------------------
   BARRA SUPERIOR navy (combina con el sidebar → marco oscuro
   unificado). Los textos del header ya eran claros, así que
   sobre navy quedan legibles.
   ------------------------------------------------------------ */
.gu-dark .main-header .navbar,
.gu-dark .main-header .logo {
  background: var(--gu-chrome) !important;
}
.gu-dark .main-header .logo,
.gu-dark .main-header .logo b,
.gu-dark .main-header .logo span {
  color: #e2e8f0 !important;
}
.gu-dark .main-header .logo {
  border-right: 1px solid rgba(255,255,255,.05) !important;
}
.gu-dark .main-header .navbar {
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.15) !important;
}
.gu-dark .main-header .navbar .nav > li > a,
.gu-dark .main-header .sidebar-toggle {
  color: #cbd5e1 !important;
}
.gu-dark .main-header .navbar .nav > li > a:hover,
.gu-dark .main-header .sidebar-toggle:hover,
.gu-dark .main-header .navbar .nav > .open > a {
  background: rgba(255,255,255,.07) !important;
  color: #ffffff !important;
}

/* ------------------------------------------------------------
   DASHBOARD: banner "hero" navy detrás de la tarjeta y los KPIs.
   app.css lo pintaba de azul saturado; lo teñimos de navy para que
   continúe el chrome (header + sidebar) y las tarjetas blancas
   floten sobre el oscuro → sin corte brusco navy→blanco.
   ------------------------------------------------------------ */
.gu-dark .content-wrapper .content-header-custom {
  /* El hero se funde con el fondo (#0a0f19) en su parte baja: los 300px de
     padding-bottom quedan invisibles si el dashboard es corto (empresa nueva/vacía),
     evitando la "banda navy" que antes se veía bajo la bienvenida. Ver regla gemela
     más abajo (Hero del dashboard), que es la que efectivamente gana por orden. */
  background: linear-gradient(180deg, #16233d 0%, #0f1728 42%, #0a0f19 100%) !important;
  background-image: linear-gradient(180deg, #16233d 0%, #0f1728 42%, #0a0f19 100%) !important;
  padding: 16px 15px 300px !important;
}
.gu-dark .content-wrapper .content-custom {
  margin-top: -310px !important;
}
.gu-dark .content-wrapper .content-header-custom .gu-welcome {
  box-shadow: 0 12px 34px rgba(0,0,0,.22) !important;
}

/* ============================================================
   FORMULARIOS 2026 — controles con más aire, bordes suaves,
   foco claro y addons neutros. La altura se scopea a formularios
   (.form-group / .box-body) para NO inflar las tablas.
   ============================================================ */
.form-control,
.select2-container--default .select2-selection--single {
  border-radius: 8px !important;
  border: 1px solid #dde3ec !important;
  font-size: 14px !important;
  color: var(--gu-text) !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.form-control:focus,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--gu-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
}
/* Altura cómoda SOLO en formularios (no en tablas) */
.form-group .form-control,
.box-body .form-control,
.form-group .select2-container--default .select2-selection--single,
.box-body .select2-container--default .select2-selection--single {
  height: 40px !important;
}
.form-group textarea.form-control,
.box-body textarea.form-control { height: auto !important; min-height: 84px !important; padding: 10px 12px !important; }
.form-group .select2-selection__rendered,
.box-body .select2-selection__rendered { line-height: 38px !important; }
.form-group .select2-selection__arrow,
.box-body .select2-selection__arrow { height: 38px !important; }

/* input-group addons: del gris/oscuro BS3 a neutro suave */
.input-group-addon {
  background: #eef2f7 !important;
  border: 1px solid #dde3ec !important;
  color: #64748b !important;
}

/* labels más finas y legibles */
.form-group > label,
.control-label {
  font-weight: 600 !important;
  color: #475569 !important;
  font-size: 13px !important;
  margin-bottom: 6px !important;
}

/* cards / boxes: radio consistente + más aire + borde y sombra suaves */
.box { border-radius: 14px !important; border: 1px solid var(--gu-border) !important; box-shadow: 0 1px 3px rgba(16,24,40,.05) !important; }
.box-body { padding: 22px !important; }
.box-header { padding: 18px 22px 6px !important; }

/* botones consistentes */
.btn { border-radius: 8px !important; }

/* Dashboard: 6 KPIs limpios — ocultar las 2 de "Total de devolución" y dejar 3 por fila (parejo) */
.col-custom:has(.total_sell_return), .col-custom:has(.total_purchase_return) { display:none !important; }
@media (min-width:992px){ .content-custom .col-custom{ width:33.3333% !important; } }

/* Dashboard: quitar los <br> sueltos que separan de más la bienvenida de los KPIs, y compactar la fila de ubicación/filtro de fecha */
.content-custom > br { display:none !important; }
.content-custom > .row:first-of-type { margin-top:6px !important; margin-bottom:12px !important; }

/* Filtros: grilla pareja (evita el escalonado de las columnas flotantes de Bootstrap y los huecos al costado) */
.gu-filters { display:flex !important; flex-wrap:wrap !important; align-items:flex-start !important; }
.gu-filters::before, .gu-filters::after { display:none !important; }
.gu-filters > [class*="col-"] { float:none !important; }
.gu-filters > .form-group { padding-left:10px; padding-right:10px; }

/* ============================================================
   DARK MODE — contenido oscuro para combinar con el chrome navy.
   Aplica a los temas navy (blue-light default, blue, black, red).
   Primera pasada sobre componentes core; charts/algún widget de
   terceros pueden requerir pulido adicional.
   ============================================================ */
body.gu-dark,
.gu-dark .content-wrapper,
.gu-dark .right-side { background:#0a0f19 !important; }

/* Hero del dashboard: navy sutil arriba (detrás de la bienvenida) que se funde al
   color del fondo abajo. Así, si el contenido de los KPIs es corto, la franja de
   300px del hero no se ve como una banda oscura suelta — se mezcla con el fondo. */
.gu-dark .content-wrapper .content-header-custom {
  background:linear-gradient(180deg,#16233d 0%,#0f1728 42%,#0a0f19 100%) !important;
  background-image:linear-gradient(180deg,#16233d 0%,#0f1728 42%,#0a0f19 100%) !important;
}
/* Superficies */
.gu-dark :is(.box,.info-box,.gu-welcome,.content-main,.nav-tabs-custom,.panel,.well,.modal-content,.box-body,.box-footer) {
  background:#1a2436 !important; border-color:#28344a !important; color:#d7e0ee !important;
}
.gu-dark :is(.box,.gu-welcome,.gu-rh-card,.gu-rh-head,.info-box) {
  border:1px solid rgba(255,255,255,.07) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px rgba(0,0,0,.28) !important;
}
.gu-dark .box-header { border-color:#28344a !important; }
/* Paneles Bootstrap (Obras > Catálogos y otros): .panel-default > .panel-heading
   trae fondo claro (#f5f5f5) por defecto y con selector más específico que la
   regla de superficies → quedaba como BARRA BLANCA con el título invisible en
   modo oscuro. Se pisan el header, el título y el fondo gris de la fila "nueva". */
.gu-dark :is(.panel-heading,.panel-default>.panel-heading) {
  background:#141d2e !important; border-color:#28344a !important; color:#f1f5f9 !important;
}
.gu-dark :is(.panel-title,.panel-heading strong,.panel-heading a) { color:#f1f5f9 !important; }
.gu-dark :is(.panel-body,.panel-default>.panel-heading+.panel-collapse>.panel-body) { border-color:#28344a !important; }
.gu-dark :is(tr.bg-light-gray,.bg-light-gray,.bg-gray-light) { background:#141d2e !important; }
/* Tipografía */
.gu-dark :is(h1,h2,h3,h4,h5,.box-title,.info-box-number) { color:#f1f5f9 !important; }
.gu-dark :is(p,.text-muted,small,.help-block,.info-box-text) { color:#b7c2d4 !important; }
.gu-dark :is(label,.control-label,.form-group>label) { color:#b7c2d4 !important; }
.gu-dark .content-wrapper a:not(.btn):not(.gu-qa):not(.gu-fab):not(.dropdown-toggle):not(.info-box):not(.small-box) { color:#6ba5f6 !important; }
/* Ítems del sidebar (incl. promovidos como "Conector") siempre legibles */
.gu-dark .sidebar-menu a, .gu-dark .sidebar-menu a span { color:#c7d2e2 !important; }
.gu-dark .sidebar-menu > li.active > a, .gu-dark .sidebar-menu > li.active > a span, .gu-dark .sidebar-menu > li:hover > a, .gu-dark .sidebar-menu > li:hover > a span { color:#ffffff !important; }
/* Ítem promovido "Conector" (fondo verde #2dce89 inline): texto oscuro para contraste */
.gu-dark .sidebar-menu [style*="2dce89"] a, .gu-dark .sidebar-menu [style*="2dce89"] a span, .gu-dark .sidebar-menu [style*="2dce89"] a i,
.gu-dark .sidebar-menu a[style*="2dce89"], .gu-dark .sidebar-menu a[style*="2dce89"] span, .gu-dark .sidebar-menu a[style*="2dce89"] i { color:#08351f !important; }
/* Welcome card dark */
.gu-dark .content-wrapper .content-header-custom .gu-welcome { background:#1a2436 !important; }
.gu-dark .content-wrapper .content-header-custom .gu-welcome h1.gu-welcome-title { color:#f1f5f9 !important; }
.gu-dark .content-wrapper .content-header-custom .gu-welcome a.gu-qa { color:#cbd5e1 !important; background:#1f2c42 !important; border-color:#2c3a52 !important; }
.gu-dark .content-wrapper .content-header-custom .gu-welcome a.gu-qa-primary { color:#ffffff !important; background:var(--gu-primary) !important; }
.gu-dark .gu-rate { background:#0f1a2c !important; border-color:#243349 !important; color:#dfe6f1 !important; }
.gu-dark .gu-rate b { color:#ffffff !important; }
.gu-dark .gu-rate-label { color:#5eead4 !important; }
.gu-dark .gu-rate-date { color:#8f9db3 !important; }
/* Formularios */
.gu-dark :is(.form-control,.select2-container--default .select2-selection--single) {
  background:#0f1a2c !important; border-color:#2b3a52 !important; color:#e2e8f0 !important;
}
.gu-dark .form-control::placeholder { color:#5c6d88 !important; }
.gu-dark .select2-selection__rendered { color:#e2e8f0 !important; }
.gu-dark .input-group-addon { background:#1e2a40 !important; border-color:#2b3a52 !important; color:#b7c2d4 !important; }
body.gu-dark .select2-dropdown { background:#141f33 !important; border-color:#2b3a52 !important; }
body.gu-dark .select2-results__option { color:#d7e0ee !important; }
body.gu-dark .select2-results__option--highlighted { background:#1f2c42 !important; }
body.gu-dark .select2-search__field { background:#0f1a2c !important; color:#e2e8f0 !important; border-color:#2b3a52 !important; }
/* Tablas */
.gu-dark .table>thead>tr>th { color:#aebccf !important; border-color:#28344a !important; }
.gu-dark :is(.table>tbody>tr>td,.table>tfoot>tr>td) { color:#cdd7e5 !important; border-color:#222f45 !important; background:transparent !important; }
.gu-dark .table-striped>tbody>tr:nth-of-type(odd) { background:#141d2e !important; }
/* DataTables agrega tr.odd/tr.even y td.sorting_1 con fondo CLARO (#f9f9f9) y más
   especificidad que .table-striped:nth-of-type → las filas impares quedaban claras y
   el texto claro no se veía (solo al hacer hover). Le ganamos en especificidad. */
.gu-dark table.dataTable tbody tr.odd,
.gu-dark table.dataTable.stripe tbody tr.odd,
.gu-dark table.dataTable.display tbody tr.odd { background-color:#141d2e !important; }
.gu-dark table.dataTable tbody tr.even,
.gu-dark table.dataTable.display tbody tr.even { background-color:transparent !important; }
.gu-dark table.dataTable tbody tr.odd > td,
.gu-dark table.dataTable tbody tr.even > td { color:#cdd7e5 !important; }
/* columna ordenada (sorting_1) también viene con tinte claro */
.gu-dark table.dataTable tbody tr.odd > .sorting_1,
.gu-dark table.dataTable.display tbody tr.odd > .sorting_1,
.gu-dark table.dataTable.stripe tbody tr.odd > .sorting_1 { background-color:#111a2b !important; }
.gu-dark table.dataTable tbody tr.even > .sorting_1,
.gu-dark table.dataTable.display tbody tr.even > .sorting_1 { background-color:#0f1826 !important; }
.gu-dark table.dataTable tbody tr:hover > td,
.gu-dark table.dataTable tbody tr:hover > .sorting_1 { background-color:#1b2740 !important; color:#fff !important; }
.gu-dark .table>tbody>tr:hover>td { background:#1b2740 !important; }
/* Reportes de contabilidad: filas resaltadas (subtotal verde #dff0d8 / gran total
   celeste #d1f9ff) eran fondo CLARO con texto claro del tema oscuro => ilegibles.
   Las pasamos a tinte oscuro con texto legible, manteniendo el color semántico. */
.gu-dark tr.bg-subtotal, .gu-dark .bg-subtotal,
.gu-dark tr.bg-subtotal>td, .gu-dark .bg-subtotal>td { background:#173021 !important; color:#a7e0b0 !important; }
.gu-dark tr.bg-grand-total, .gu-dark .bg-grand-total,
.gu-dark tr.bg-grand-total>td, .gu-dark .bg-grand-total>td { background:#0e2f3b !important; color:#8fd6ec !important; }
.gu-dark .dataTables_wrapper :is(.dataTables_length,.dataTables_filter,.dataTables_info,.dataTables_paginate,label) { color:#b7c2d4 !important; }
/* Tabs */
.gu-dark .nav-tabs { border-color:#28344a !important; }
.gu-dark .nav-tabs>li>a { color:#b7c2d4 !important; }
.gu-dark .nav-tabs>li.active>a { background:#1a2436 !important; border-color:#28344a #28344a transparent !important; color:#f1f5f9 !important; }
/* Reports hub dark */
.gu-dark :is(.gu-rh-head,.gu-rh-card) { background:#1a2436 !important; border-color:#28344a !important; color:#d7e0ee !important; }
.gu-dark .gu-rh-title { color:#f1f5f9 !important; }
.gu-dark :is(.gu-rh-label,.gu-rh-desc,.gu-rh-sub) { color:#b7c2d4 !important; }
.gu-dark .gu-rh-search input { background:#0f1a2c !important; border-color:#2b3a52 !important; color:#e2e8f0 !important; }

/* --- DARK: pulido de parches (gráficos, tab-content, datatables) --- */
/* Tab content / paneles que quedaban blancos */
.gu-dark :is(.tab-content,.nav-tabs-custom>.tab-content,.dataTables_wrapper,.table-responsive) { background:#1a2436 !important; }
.gu-dark table.dataTable, .gu-dark .dataTables_scrollBody { background:transparent !important; }
.gu-dark .dataTables_wrapper .dt-buttons .btn { background:#1f2c42 !important; border-color:#2b3a52 !important; color:#cbd5e1 !important; }
.gu-dark .dataTables_wrapper .dataTables_filter input, .gu-dark .dataTables_wrapper .dataTables_length select { background:#0f1a2c !important; border-color:#2b3a52 !important; color:#e2e8f0 !important; }
.gu-dark .paginate_button { color:#cbd5e1 !important; }
.gu-dark .paginate_button.current { background:#1f2c42 !important; border-color:#2b3a52 !important; }
/* Highcharts (gráficos) en oscuro */
.gu-dark .highcharts-background { fill:#1a2436 !important; }
.gu-dark .highcharts-container, .gu-dark .chart, .gu-dark [id^="highcharts"] { background:#1a2436 !important; }
.gu-dark .highcharts-grid-line { stroke:#28344a !important; }
.gu-dark :is(.highcharts-axis-labels text,.highcharts-legend-item text,.highcharts-axis-title,.highcharts-title,.highcharts-subtitle,.highcharts-data-label text) { fill:#b7c2d4 !important; color:#b7c2d4 !important; }
.gu-dark .highcharts-axis-line, .gu-dark .highcharts-tick { stroke:#2b3a52 !important; }
/* Cabezales de tablas: estaban en gris claro (feo) → oscuro con texto legible */
.gu-dark :is(.table>thead>tr>th,.table>thead>tr>td,table.dataTable thead>tr>th,table.dataTable thead>tr>td) {
  background:#141d2e !important; color:#c7d2e2 !important; border-color:#28344a !important;
}
.gu-dark :is(.table>thead,table.dataTable thead) { background:#141d2e !important; }
/* Botones flotantes (Manual / WhatsApp): ícono blanco SIN aplastar la forma.
   El manual es un SVG de trazo (stroke) → solo color, fill:none. WhatsApp es relleno. */
.gu-dark .gu-fab, .gu-dark .gu-fab .gu-fab-label { color:#ffffff !important; }
.gu-dark .gu-fab-manual svg { stroke:#ffffff !important; fill:none !important; }
.gu-dark .gu-fab-wa svg { fill:#ffffff !important; stroke:none !important; }

/* Modales dark */
body.gu-dark .modal-content { background:#1a2436 !important; color:#d7e0ee !important; }
body.gu-dark :is(.modal-header,.modal-footer) { border-color:#28344a !important; }

/* DARK: filas con fondo contextual (Bootstrap success/info/danger/warning), p.ej. la fila
   "Diferencia/Sobrante/Faltante" del arqueo y los "Gran total" de productos vendidos/devueltos
   en el cierre de caja. Bootstrap pone fondo CLARO en algunas celdas y transparente en otras
   → en tema oscuro el texto quedaba ilegible. Los normalizamos a fondo oscuro tintado + texto claro. */
body.gu-dark tr.success > td, body.gu-dark tr.success > th { background:#1e3a2a !important; color:#d7f0dd !important; }
body.gu-dark tr.info > td,    body.gu-dark tr.info > th    { background:#173846 !important; color:#d6ecf7 !important; }
body.gu-dark tr.danger > td,  body.gu-dark tr.danger > th  { background:#4a1f24 !important; color:#f7d9dd !important; }
body.gu-dark tr.warning > td, body.gu-dark tr.warning > th { background:#4a3a1a !important; color:#f5e6c8 !important; }
body.gu-dark tr.success > td *, body.gu-dark tr.success > th * { color:#d7f0dd !important; }
body.gu-dark tr.info > td *,    body.gu-dark tr.info > th *    { color:#d6ecf7 !important; }
body.gu-dark tr.danger > td *,  body.gu-dark tr.danger > th *  { color:#f7d9dd !important; }
body.gu-dark tr.warning > td *, body.gu-dark tr.warning > th * { color:#f5e6c8 !important; }

/* ====== DARK: barrido exhaustivo de parches claros (según auditoría) ====== */
/* Totales de tablas y badges grises (.bg-gray) */
.gu-dark :is(.bg-gray,tr.bg-gray,tr.bg-gray>td,tr.bg-gray>th,.label.bg-gray) { background:#1a2436 !important; color:#c7d2e2 !important; }
/* Box headers que quedaban blancos → sobre la caja oscura */
.gu-dark .box-header { background:transparent !important; }
/* Footer */
.gu-dark .main-footer { background:#0c111c !important; color:#8f9db3 !important; border-top:1px solid #28344a !important; }
.gu-dark .main-footer strong, .gu-dark .main-footer a { color:#b7c2d4 !important; }
/* Wrapper base */
.gu-dark .wrapper { background:#0a0f19 !important; }
/* Paginación y botones default blancos */
.gu-dark :is(.paginate_button,.pagination>li>a,.pagination>li>span) { background:#141d2e !important; border-color:#2b3a52 !important; color:#c7d2e2 !important; }
.gu-dark :is(.paginate_button.current,.pagination>.active>a) { background:#1f2c42 !important; border-color:#33445f !important; color:#ffffff !important; }
.gu-dark .btn-default { background:#1f2a3e !important; border-color:#2b3a52 !important; color:#d7e0ee !important; }
.gu-dark .btn-default:hover { background:#26344c !important; }
/* select2 múltiple */
.gu-dark .select2-container--default .select2-selection--multiple { background:#0f1a2c !important; border-color:#2b3a52 !important; }
.gu-dark .select2-selection--multiple .select2-selection__choice { background:#26344c !important; border-color:#33445f !important; color:#e2e8f0 !important; }
/* Inputs varios (no .form-control) */
.gu-dark :is(input[type="text"],input[type="number"],input[type="date"],input[type="datetime-local"],input[type="email"],input[type="password"],input[type="search"],input[type="tel"],textarea) { background:#0f1a2c !important; border-color:#2b3a52 !important; color:#e2e8f0 !important; }
/* KPI: de círculos pastel a tinte oscuro con ícono vivo (más pro) */
.gu-dark .info-box-icon.bg-aqua { background:rgba(56,189,248,.14) !important; }
.gu-dark :is(.info-box-icon.bg-aqua,.info-box-icon.bg-aqua i) { color:#38bdf8 !important; }
.gu-dark .info-box-icon.bg-green { background:rgba(52,211,153,.14) !important; }
.gu-dark :is(.info-box-icon.bg-green,.info-box-icon.bg-green i) { color:#34d399 !important; }
.gu-dark .info-box-icon.bg-yellow { background:rgba(251,191,36,.15) !important; }
.gu-dark :is(.info-box-icon.bg-yellow,.info-box-icon.bg-yellow i) { color:#fbbf24 !important; }
.gu-dark .info-box-icon.bg-red { background:rgba(248,113,113,.14) !important; }
.gu-dark :is(.info-box-icon.bg-red,.info-box-icon.bg-red i) { color:#f87171 !important; }
/* Íconos redondos del hub y del saludo */
.gu-dark .gu-rh-ic { background:rgba(59,130,246,.16) !important; color:#60a5fa !important; }
.gu-dark .gu-welcome-ic { background:#232f4a !important; }
/* inputs sin type explícito */
.gu-dark input:not([type]) { background:#0f1a2c !important; border-color:#2b3a52 !important; color:#e2e8f0 !important; }
/* barra de carga (pace) */
.gu-dark .pace .pace-progress { background:var(--gu-primary) !important; }
/* badges grises por defecto (ej. estados en clínica) */
.gu-dark .label-default, .gu-dark .label.bg-gray, .gu-dark .badge.bg-gray { background:#2a3648 !important; color:#c7d2e2 !important; }

/* ---- DARK: POS a pantalla completa ---- */
.gu-dark .product_box { background:#1a2436 !important; border-color:#28344a !important; }
.gu-dark .product_box, .gu-dark .product_box * { color:#cdd7e5 !important; }
.gu-dark .product_box:hover { background:#26344c !important; border-color:#3b82f6 !important; }
.gu-dark .pos-form-actions { background:#0c111c !important; border-top:1px solid #28344a !important; box-shadow:0 -2px 12px rgba(0,0,0,.35) !important; }
.gu-dark :is(.product_list_body,.product_list_box,.pos_product_div) { background:transparent !important; }
.gu-dark .pos-tab-content, .gu-dark .left-panel { background:transparent !important; }
.gu-dark .pos-form-actions label { background:#1a2436 !important; color:#d7e0ee !important; border:1px solid #28344a !important; }

/* ---- DARK: dropdowns (menú de usuario, notificaciones, "Acciones", etc.) ---- */
.gu-dark .dropdown-menu { background:#1a2436 !important; border:1px solid #28344a !important; box-shadow:0 10px 30px rgba(0,0,0,.4) !important; }
.gu-dark .dropdown-menu > li > a, .gu-dark .dropdown-menu li a { color:#cbd5e1 !important; }
.gu-dark .dropdown-menu > li > a:hover, .gu-dark .dropdown-menu li a:hover, .gu-dark .dropdown-menu > .active > a { background:#26344c !important; color:#ffffff !important; }
.gu-dark .dropdown-menu .divider, .gu-dark .dropdown-menu .dropdown-divider { background:#28344a !important; border-color:#28344a !important; }
.gu-dark .dropdown-header { color:#8f9db3 !important; }
/* Menú de usuario de AdminLTE (header/body/footer) */
.gu-dark .main-header .user-menu .user-header { background:#141d2e !important; color:#e2e8f0 !important; }
.gu-dark .main-header .user-menu .user-header p, .gu-dark .main-header .user-menu .user-header small { color:#b7c2d4 !important; }
.gu-dark .main-header .user-menu .user-body { background:#1a2436 !important; border-color:#28344a !important; }
.gu-dark .main-header .user-menu .user-footer { background:#141d2e !important; }
.gu-dark .navbar-nav > .notifications-menu > .dropdown-menu > li.header, .gu-dark .navbar-nav > .messages-menu > .dropdown-menu > li.header { background:#141d2e !important; color:#cbd5e1 !important; border-color:#28344a !important; }
.gu-dark .navbar-nav .dropdown-menu > li .menu > li > a { color:#cbd5e1 !important; }
.gu-dark .navbar-nav .dropdown-menu > li .menu > li > a:hover { background:#26344c !important; }

/* ---- DARK: almanaque bootstrap-datepicker (.datepicker) ----
   El widget hereda el fondo oscuro de .dropdown-menu, pero los números de los
   días quedaban con el gris por defecto (#999/#777) y se perdían. Se tema el
   calendario completo. Global: sirve en superadmin (editar suscripción) y en
   TODA la app (fechas de producto, compra, filtros de reportes, etc.). */
.gu-dark .datepicker { color:#e6ebf2 !important; }
.gu-dark .datepicker table tr td,
.gu-dark .datepicker table tr th { color:#e6ebf2 !important; }
/* Encabezado: mes/año y flechas prev/next */
.gu-dark .datepicker .datepicker-switch,
.gu-dark .datepicker .prev,
.gu-dark .datepicker .next,
.gu-dark .datepicker tfoot tr th { color:#e6ebf2 !important; }
.gu-dark .datepicker .datepicker-switch:hover,
.gu-dark .datepicker .prev:hover,
.gu-dark .datepicker .next:hover,
.gu-dark .datepicker tfoot tr th:hover,
.gu-dark .datepicker table tr td.day:hover,
.gu-dark .datepicker table tr td span:hover { background:#26344c !important; }
/* Cabecera de días de la semana (L M M J V S D) */
.gu-dark .datepicker table tr th.dow { color:#8f9db3 !important; }
/* Días del mes contiguo (antes #999/#777): visibles pero secundarios */
.gu-dark .datepicker table tr td.old,
.gu-dark .datepicker table tr td.new,
.gu-dark .datepicker table tr td span.old,
.gu-dark .datepicker table tr td span.new { color:#8493ac !important; }
/* Días deshabilitados: apagados pero aún legibles */
.gu-dark .datepicker table tr td.disabled,
.gu-dark .datepicker table tr td.disabled:hover,
.gu-dark .datepicker table tr td span.disabled,
.gu-dark .datepicker table tr td span.disabled:hover { color:#5c6a82 !important; background:transparent !important; }
/* Hoy: aro distinguible sin depender del amarillo por defecto */
.gu-dark .datepicker table tr td.today,
.gu-dark .datepicker table tr td.today:hover { background:#33415c !important; color:#fff !important; border-color:#4a5b7d !important; }
/* Seleccionado / activo */
.gu-dark .datepicker table tr td.active,
.gu-dark .datepicker table tr td.active:hover,
.gu-dark .datepicker table tr td span.active,
.gu-dark .datepicker table tr td span.active:hover { background:#2563eb !important; background-image:none !important; color:#fff !important; border-color:#2563eb !important; text-shadow:none !important; }
.gu-dark .datepicker table tr td.range { background:#26344c !important; }

/* ---- DARK: daterangepicker (rango de fechas de reportes/filtros) ----
   Este widget trae fondo blanco fijo propio (no .dropdown-menu), así que en
   oscuro quedaba una caja blanca. Se tema para que combine y sea legible. */
.gu-dark .daterangepicker { background:#1a2436 !important; border-color:#28344a !important; color:#e6ebf2 !important; }
.gu-dark .daterangepicker:after { border-bottom-color:#1a2436 !important; }
.gu-dark .daterangepicker:before { border-bottom-color:#28344a !important; }
.gu-dark .daterangepicker .calendar-table { background:#1a2436 !important; border-color:#28344a !important; }
.gu-dark .daterangepicker td,
.gu-dark .daterangepicker th { color:#e6ebf2 !important; }
.gu-dark .daterangepicker td.available:hover,
.gu-dark .daterangepicker th.available:hover { background:#26344c !important; }
.gu-dark .daterangepicker td.off,
.gu-dark .daterangepicker td.off.in-range,
.gu-dark .daterangepicker td.off.start-date,
.gu-dark .daterangepicker td.off.end-date { background:#1a2436 !important; color:#5c6a82 !important; }
.gu-dark .daterangepicker td.in-range { background:#22314a !important; color:#e6ebf2 !important; }
.gu-dark .daterangepicker td.active,
.gu-dark .daterangepicker td.active:hover { background:#2563eb !important; color:#fff !important; }
.gu-dark .daterangepicker .ranges li { color:#cbd5e1 !important; }
.gu-dark .daterangepicker .ranges li:hover { background:#26344c !important; }
.gu-dark .daterangepicker .ranges li.active { background:#2563eb !important; color:#fff !important; }
.gu-dark .daterangepicker .calendar-time select,
.gu-dark .daterangepicker .input-mini { background:#0f1a2c !important; color:#e6ebf2 !important; border-color:#28344a !important; }
.gu-dark .daterangepicker .drp-buttons { border-top-color:#28344a !important; }
.gu-dark .daterangepicker .drp-calendar.left { border-color:#28344a !important; }

/* ---- Totales de tablas: tamaño razonable (eran enormes con .font-17) ---- */
tr.footer-total > td, tr.bg-gray.font-17, tr.bg-gray.font-17 > td, .footer-total .font-17 { font-size:14px !important; }
tr.footer-total > td strong { font-weight:700 !important; }

/* ---- DARK: modales SweetAlert (swal) coherentes con el oscuro ---- */
.gu-dark .swal-modal { background:#1a2436 !important; border:1px solid #28344a !important; }
.gu-dark .swal-title { color:#f1f5f9 !important; }
.gu-dark .swal-text { color:#c7d2e2 !important; }
.gu-dark .swal-footer { background:transparent !important; }
.gu-dark .swal-content input, .gu-dark .swal-content .form-control { background:#0f1a2c !important; border-color:#2b3a52 !important; color:#e2e8f0 !important; }
.gu-dark .swal-button--cancel { background:#26344c !important; color:#e2e8f0 !important; }
.gu-dark .swal-button--cancel:hover { background:#33445f !important; }

/* Botón OK de los modales centrado abajo (no a la derecha) */
.swal-footer { text-align:center !important; margin-top:14px !important; }
.swal-button-container { margin:0 6px !important; }

/* ---- DARK: popovers y tooltips de Bootstrap (ej: info de suscripción en la barra
        superior) que salían con fondo blanco ---- */
.gu-dark .popover { background:#1a2436 !important; border-color:#28344a !important; box-shadow:0 8px 26px rgba(0,0,0,.5) !important; }
.gu-dark .popover-title { background:#141d2e !important; color:#e6ebf2 !important; border-bottom-color:#28344a !important; }
.gu-dark .popover-content { color:#c7d2e2 !important; background:transparent !important; }
.gu-dark .popover-content :is(b,strong,h1,h2,h3,h4,h5,a) { color:#e6ebf2 !important; }
.gu-dark .popover.top > .arrow { border-top-color:#28344a !important; }
.gu-dark .popover.top > .arrow:after { border-top-color:#1a2436 !important; }
.gu-dark .popover.bottom > .arrow { border-bottom-color:#28344a !important; }
.gu-dark .popover.bottom > .arrow:after { border-bottom-color:#141d2e !important; }
.gu-dark .popover.left > .arrow { border-left-color:#28344a !important; }
.gu-dark .popover.left > .arrow:after { border-left-color:#1a2436 !important; }
.gu-dark .popover.right > .arrow { border-right-color:#28344a !important; }
.gu-dark .popover.right > .arrow:after { border-right-color:#1a2436 !important; }
.gu-dark .tooltip-inner { background:#0b1626 !important; color:#e6ebf2 !important; }
/* inputs de archivo (ej: subir logo) que salían blancos por defecto del navegador */
.gu-dark input[type=file] { background:#0f1a2c !important; color:#c7d2e2 !important; border:1px solid #2b3a52 !important; border-radius:6px; padding:6px 8px; }
.gu-dark input[type=file]::file-selector-button { background:#26344c !important; color:#e2e8f0 !important; border:1px solid #2b3a52 !important; border-radius:5px; padding:5px 11px; margin-right:9px; cursor:pointer; }
.gu-dark input[type=file]::-webkit-file-upload-button { background:#26344c !important; color:#e2e8f0 !important; border:1px solid #2b3a52 !important; border-radius:5px; padding:5px 11px; margin-right:9px; cursor:pointer; }
.gu-dark .tooltip.top .tooltip-arrow { border-top-color:#0b1626 !important; }
.gu-dark .tooltip.bottom .tooltip-arrow { border-bottom-color:#0b1626 !important; }
.gu-dark .tooltip.left .tooltip-arrow { border-left-color:#0b1626 !important; }
.gu-dark .tooltip.right .tooltip-arrow { border-right-color:#0b1626 !important; }

/* Ícono de ÉXITO de swal: sus máscaras blancas (::before/::after/hide-corners)
   están pensadas para un modal BLANCO. En el modal oscuro se veían como un disco
   blanco detrás del check. Las pintamos del color del modal para que desaparezcan. */
.gu-dark .swal-icon--success::before,
.gu-dark .swal-icon--success::after,
.gu-dark .swal-icon--success__hide-corners { background:#1a2436 !important; }
/* mismo criterio para el ícono de warning/info si tuvieran relleno blanco */
.gu-dark .swal-icon--warning__body, .gu-dark .swal-icon--warning__dot { background:#fbbf24 !important; }

/* ---- Nombre de la empresa: la app lo tiene duplicado en el markup (barra superior
        Y sidebar). Mostramos SOLO el de la barra superior y ocultamos el del sidebar
        para que no aparezca dos veces. ---- */
.main-sidebar > .sidebar > a.logo { display:none !important; }

/* Barra superior: el nombre largo ("Ferretería El Galpón") se cortaba a "Ferretería El".
   Permitimos que envuelva en hasta 2 líneas dentro de la barra, sin recortar. */
.main-header .logo {
    height:50px !important;
    white-space:normal !important;
    overflow:hidden !important;
    line-height:1.15 !important;
    padding:6px 10px !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.main-header .logo .logo-lg {
    display:block;
    white-space:normal !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    word-break:break-word;
    overflow-wrap:anywhere;
    font-size:15px;
    line-height:1.15;
    max-height:46px;
}

/* ---- DARK: barras de navegación de los módulos (Superadmin, Woocommerce, CRM,
        Accounting, Essentials/HRM, Project, MercadoLibre, etc.) que venían en blanco ---- */
.gu-dark .navbar-default.bg-white,
.gu-dark .navbar.navbar-default.bg-white {
    background:#141d2e !important;
    border:1px solid #28344a !important;
    box-shadow:0 1px 3px rgba(0,0,0,.35) !important;
}
.gu-dark .navbar-default.bg-white .navbar-brand,
.gu-dark .navbar-default.bg-white .navbar-nav > li > a {
    color:#c7d2e2 !important;
}
.gu-dark .navbar-default.bg-white .navbar-brand:hover,
.gu-dark .navbar-default.bg-white .navbar-nav > li > a:hover,
.gu-dark .navbar-default.bg-white .navbar-nav > li > a:focus {
    color:#fff !important;
    background:#1b2740 !important;
}
.gu-dark .navbar-default.bg-white .navbar-nav > li.active > a,
.gu-dark .navbar-default.bg-white .navbar-nav > li.active > a:hover,
.gu-dark .navbar-default.bg-white .navbar-nav > li.active > a:focus {
    color:#fff !important;
    background:#172136 !important;
}
.gu-dark .navbar-default.bg-white .navbar-toggle { border-color:#2b3a52 !important; }
.gu-dark .navbar-default.bg-white .navbar-toggle .icon-bar { background:#c7d2e2 !important; }
.gu-dark .navbar-default.bg-white .navbar-toggle:hover,
.gu-dark .navbar-default.bg-white .navbar-toggle:focus { background:#1b2740 !important; }
.gu-dark .navbar-default.bg-white .divider,
.gu-dark .navbar-default.bg-white .dropdown-menu { background:#1a2436 !important; border-color:#28344a !important; }

/* ---- KPIs .small-box (Superadmin y módulos): las letras blancas se perdían
        (sobre todo bg-yellow). Fondos ricos + texto blanco con buen contraste,
        en ambos temas. ---- */
.small-box.bg-aqua   { background:#0e7490 !important; }
.small-box.bg-green  { background:#15803d !important; }
.small-box.bg-yellow { background:#b45309 !important; }
.small-box.bg-red    { background:#b91c1c !important; }
.small-box.bg-blue   { background:#1d4ed8 !important; }
.small-box.bg-purple { background:#6d28d9 !important; }
.small-box > .inner h3,
.small-box > .inner p,
.small-box > .inner span,
.small-box > .icon i,
.small-box > .small-box-footer,
.small-box > .small-box-footer i { color:#fff !important; opacity:1 !important; }
.small-box > .icon { color:rgba(255,255,255,.18) !important; }
.small-box > .small-box-footer { background:rgba(0,0,0,.14) !important; }
.small-box > .small-box-footer:hover { background:rgba(0,0,0,.24) !important; }
.gu-dark .small-box { box-shadow:0 1px 3px rgba(0,0,0,.4) !important; }

/* ---- DARK: Configuración de la empresa (y otras pantallas con pestañas laterales):
        el contenedor .pos-tab-container y el menú .list-group quedaban en blanco. ---- */
.gu-dark .pos-tab-container { background:transparent !important; }
.gu-dark .list-group { background:transparent !important; }
.gu-dark .list-group-item {
    background:#1a2436 !important;
    border-color:#28344a !important;
    color:#c7d2e2 !important;
}
.gu-dark a.list-group-item:hover:not(.active),
.gu-dark a.list-group-item:focus:not(.active) {
    background:#22304a !important;
    color:#fff !important;
}
.gu-dark .list-group-item.active,
.gu-dark .list-group-item.active:hover,
.gu-dark .list-group-item.active:focus {
    background:#1d4ed8 !important;
    border-color:#1d4ed8 !important;
    color:#fff !important;
}
.gu-dark .list-group-item .badge { background:#0f1a2c !important; color:#c7d2e2 !important; }

/* ---- DARK: buscador y desplegable de los select2 (input blanco suelto) ---- */
.gu-dark .select2-dropdown,
.gu-dark .select2-results { background:#0f1a2c !important; border-color:#2b3a52 !important; }
.gu-dark .select2-results__option { background:#0f1a2c !important; color:#e2e8f0 !important; }
.gu-dark .select2-results__option--highlighted,
.gu-dark .select2-results__option[aria-selected="true"] { background:#1d4ed8 !important; color:#fff !important; }
.gu-dark .select2-search--dropdown { background:#0f1a2c !important; }
.gu-dark .select2-search__field { background:#0b1626 !important; color:#e2e8f0 !important; border:1px solid #2b3a52 !important; }

/* ---- DARK: autocompletado jQuery UI (buscador de productos del POS, compras,
        transferencias, etc.) que salía con fondo blanco. ---- */
.gu-dark .ui-autocomplete,
.gu-dark .ui-menu.ui-widget-content,
.gu-dark ul.ui-autocomplete.ui-front {
    background:#0f1a2c !important;
    border:1px solid #2b3a52 !important;
    color:#e6ebf2 !important;
    box-shadow:0 10px 28px rgba(0,0,0,.55) !important;
}
.gu-dark .ui-menu .ui-menu-item { border-color:#1e293b !important; }
.gu-dark .ui-menu .ui-menu-item,
.gu-dark .ui-menu .ui-menu-item-wrapper,
.gu-dark .ui-menu .ui-menu-item a { color:#e6ebf2 !important; }
/* contenido custom de los resultados (nombre, precio, stock) */
.gu-dark .ui-autocomplete .ui-menu-item .text-muted,
.gu-dark .ui-autocomplete .ui-menu-item small,
.gu-dark .ui-autocomplete .ui-menu-item span { color:#b7c2d4 !important; }
.gu-dark .ui-autocomplete .ui-menu-item b,
.gu-dark .ui-autocomplete .ui-menu-item strong { color:#f1f5f9 !important; }
/* item activo / con foco */
.gu-dark .ui-menu .ui-menu-item-wrapper.ui-state-active,
.gu-dark .ui-menu .ui-menu-item a.ui-state-focus,
.gu-dark .ui-menu .ui-menu-item.ui-state-focus,
.gu-dark .ui-menu .ui-state-active,
.gu-dark .ui-menu .ui-state-focus {
    background:#1d4ed8 !important;
    border-color:#1d4ed8 !important;
    color:#fff !important;
}
.gu-dark .ui-menu .ui-state-active *,
.gu-dark .ui-menu .ui-state-focus * { color:#fff !important; }
/* separador "no hay resultados" u opciones especiales */
.gu-dark .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper:hover { background:#22304a !important; color:#fff !important; }

/* ============================================================
   ONBOARDING — "Primeros pasos" (tarjeta dashboard + página + tour)
   ============================================================ */

/* ---- Tarjeta del dashboard ---- */
/* position/z-index: en modo oscuro el .content-header-custom tiene 300px de
   padding-bottom (navy) y .content-custom sube -310px; la tarjeta debe flotar
   por encima de ese navy (igual que los KPIs), si no queda tapada. */
.gu-onboarding{ position:relative; z-index:5; background:#fff; border:1px solid #e5e7eb; border-radius:14px;
    padding:16px 20px; box-shadow:0 1px 3px rgba(16,24,40,.06); margin:0 0 12px; }
.gu-dark .gu-onboarding{ background:#1a2436; border-color:#28344a; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.gu-onb-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gu-onb-title{ display:flex; align-items:center; gap:9px; font-size:15px; font-weight:700; color:#111827; }
.gu-onb-title i{ color:#2563eb; }
.gu-onb-title b{ color:#2563eb; font-weight:800; }
.gu-dark .gu-onb-title{ color:#e6ebf2; }
.gu-onb-pct{ font-size:12px; font-weight:600; color:#6b7280; background:#f1f5f9; border-radius:20px; padding:2px 10px; }
.gu-dark .gu-onb-pct{ color:#b7c2d4; background:#0f1a2c; }
.gu-onb-close{ background:none; border:none; font-size:22px; line-height:1; color:#9ca3af; cursor:pointer; padding:0 4px; }
.gu-onb-close:hover{ color:#ef4444; }
.gu-onb-bar{ height:8px; border-radius:20px; background:#eef2f7; margin:12px 0; overflow:hidden; }
.gu-dark .gu-onb-bar{ background:#0f1a2c; }
.gu-onb-bar span{ display:block; height:100%; border-radius:20px;
    background:linear-gradient(90deg,#2563eb,#22c55e); transition:width .5s ease; }
.gu-onb-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.gu-onb-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500;
    padding:5px 11px; border-radius:20px; text-decoration:none; border:1px solid transparent; transition:all .15s ease; }
.gu-onb-chip.done{ background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
.gu-onb-chip.pending{ background:#f8fafc; color:#475569; border-color:#e5e7eb; }
.gu-onb-chip.done i{ color:#10b981; }
.gu-onb-chip.pending i{ color:#cbd5e1; font-size:9px; }
.gu-onb-chip:hover{ transform:translateY(-1px); box-shadow:0 3px 8px rgba(16,24,40,.1); }
.gu-dark .gu-onb-chip.done{ background:rgba(16,185,129,.12); color:#6ee7b7; border-color:rgba(16,185,129,.3); }
.gu-dark .gu-onb-chip.pending{ background:#0f1a2c; color:#b7c2d4; border-color:#28344a; }
.gu-dark .gu-onb-chip.pending i{ color:#475569; }
.gu-onb-actions{ display:flex; flex-wrap:wrap; gap:9px; }
.gu-onb-actions .gu-qa{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:9px;
    font-size:13.5px; font-weight:600; background:#fff; border:1px solid #e5e7eb; color:#374151; cursor:pointer;
    text-decoration:none; transition:all .15s ease; }
.gu-onb-actions .gu-qa:hover{ border-color:#2563eb; color:#2563eb; }
.gu-onb-actions .gu-qa-primary{ background:#2563eb; border-color:#2563eb; color:#fff; }
.gu-onb-actions .gu-qa-primary:hover{ background:#1d4ed8; color:#fff; }
.gu-dark .gu-onb-actions .gu-qa{ background:#0f1a2c; border-color:#28344a; color:#c7d2e2; }
.gu-dark .gu-onb-actions .gu-qa:hover{ border-color:#3b82f6; color:#fff; }
.gu-dark .gu-onb-actions .gu-qa-primary{ background:#1d4ed8; border-color:#1d4ed8; color:#fff; }

/* ---- Página dedicada /onboarding ---- */
.gu-onb-header{ padding:16px 15px 6px !important; }
.gu-onb-header h1{ color:#1e293b; font-size:24px; font-weight:700; }
.gu-onb-header p{ color:#64748b; font-size:14px; }
.gu-onb-header h1 i{ color:#2563eb; }
.gu-dark .gu-onb-header h1{ color:#f1f5f9 !important; }
.gu-dark .gu-onb-header p{ color:#b7c2d4 !important; }
.gu-onb-page{ max-width:1000px; margin:0 auto; }
.gu-onb-hero{ display:flex; align-items:center; gap:26px; background:#fff; border:1px solid #e5e7eb;
    border-radius:16px; padding:24px 28px; box-shadow:0 1px 3px rgba(16,24,40,.06); margin-bottom:18px; }
.gu-dark .gu-onb-hero{ background:#1a2436; border-color:#28344a; }
.gu-onb-ring{ position:relative; width:104px; height:104px; border-radius:50%; flex:0 0 auto;
    background:conic-gradient(#2563eb calc(var(--pct)*1%), #e5e7eb 0); display:grid; place-items:center; }
.gu-dark .gu-onb-ring{ background:conic-gradient(#3b82f6 calc(var(--pct)*1%), #0f1a2c 0); }
.gu-onb-ring::before{ content:""; position:absolute; width:78px; height:78px; border-radius:50%; background:#fff; }
.gu-dark .gu-onb-ring::before{ background:#1a2436; }
.gu-onb-ring span{ position:relative; font-size:22px; font-weight:800; color:#111827; }
.gu-dark .gu-onb-ring span{ color:#e6ebf2; }
.gu-onb-hero-body h2{ margin:0 0 6px; font-size:22px; font-weight:700; color:#111827; }
.gu-dark .gu-onb-hero-body h2{ color:#f1f5f9; }
.gu-onb-hero-body p{ margin:0 0 14px; color:#6b7280; font-size:14px; }
.gu-dark .gu-onb-hero-body p{ color:#b7c2d4; }
.gu-onb-hero-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.gu-onb-steps{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:768px){ .gu-onb-steps{ grid-template-columns:1fr; } .gu-onb-hero{ flex-direction:column; text-align:center; } }
.gu-onb-step{ display:flex; gap:14px; background:#fff; border:1px solid #e5e7eb; border-radius:14px;
    padding:18px; box-shadow:0 1px 3px rgba(16,24,40,.05); transition:box-shadow .15s ease; }
.gu-onb-step:hover{ box-shadow:0 6px 18px rgba(16,24,40,.1); }
.gu-dark .gu-onb-step{ background:#1a2436; border-color:#28344a; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.gu-onb-step.done{ border-color:#a7f3d0; }
.gu-dark .gu-onb-step.done{ border-color:rgba(16,185,129,.35); }
.gu-onb-step-ic{ flex:0 0 auto; width:46px; height:46px; border-radius:11px; display:grid; place-items:center;
    font-size:19px; background:#eff6ff; color:#2563eb; }
.gu-onb-step.done .gu-onb-step-ic{ background:#ecfdf5; color:#10b981; }
.gu-dark .gu-onb-step-ic{ background:rgba(37,99,235,.15); color:#60a5fa; }
.gu-dark .gu-onb-step.done .gu-onb-step-ic{ background:rgba(16,185,129,.15); color:#34d399; }
.gu-onb-step-body{ flex:1 1 auto; min-width:0; }
.gu-onb-step-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.gu-onb-step-body h3{ margin:0 0 6px; font-size:15.5px; font-weight:700; color:#111827; }
.gu-dark .gu-onb-step-body h3{ color:#e6ebf2; }
.gu-onb-step-body p{ margin:0 0 12px; font-size:13px; color:#6b7280; line-height:1.5; }
.gu-dark .gu-onb-step-body p{ color:#b7c2d4; }
.gu-onb-badge{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
    padding:3px 9px; border-radius:20px; background:#f1f5f9; color:#64748b; white-space:nowrap; }
.gu-onb-badge.ok{ background:#ecfdf5; color:#059669; }
.gu-dark .gu-onb-badge{ background:#0f1a2c; color:#94a3b8; }
.gu-dark .gu-onb-badge.ok{ background:rgba(16,185,129,.15); color:#6ee7b7; }
.gu-onb-step-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.gu-onb-step-help{ font-size:12.5px; color:#2563eb; text-decoration:none; }
.gu-onb-step-help:hover{ text-decoration:underline; }
.gu-dark .gu-onb-step-help{ color:#60a5fa; }
/* distintas formas de hacer un paso (ej: cargar productos) */
.gu-onb-step-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.gu-onb-link{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
    padding:7px 12px; border-radius:8px; text-decoration:none; background:#f8fafc; color:#334155;
    border:1px solid #e5e7eb; transition:all .15s ease; }
.gu-onb-link i{ color:#2563eb; font-size:12px; }
.gu-onb-link:hover{ border-color:#2563eb; color:#2563eb; background:#eff6ff; }
.gu-onb-link.primary{ background:#2563eb; border-color:#2563eb; color:#fff; }
.gu-onb-link.primary i{ color:#fff; }
.gu-onb-link.primary:hover{ background:#1d4ed8; color:#fff; }
.gu-dark .gu-onb-link{ background:#0f1a2c; border-color:#28344a; color:#c7d2e2; }
.gu-dark .gu-onb-link i{ color:#60a5fa; }
.gu-dark .gu-onb-link:hover{ border-color:#3b82f6; color:#fff; }
.gu-dark .gu-onb-link.primary{ background:#1d4ed8; border-color:#1d4ed8; color:#fff; }
.gu-dark .gu-onb-link.primary i{ color:#fff; }

/* Paso con "métodos" (ej: las 3 formas de cargar productos) — ocupa todo el ancho */
.gu-onb-step--wide{ grid-column:1 / -1; }
/* al llegar desde un ancla (#onb-...), posicionar bien y destacar el paso */
.gu-onb-step{ scroll-margin-top:90px; }
.gu-onb-step:target{ animation:gu-onb-flash 1.8s ease; }
@keyframes gu-onb-flash{ 0%,100%{ box-shadow:0 1px 3px rgba(16,24,40,.05); } 15%,55%{ box-shadow:0 0 0 3px rgba(37,99,235,.55); } }
.gu-dark .gu-onb-step:target{ animation:gu-onb-flash-d 1.8s ease; }
@keyframes gu-onb-flash-d{ 0%,100%{ box-shadow:0 1px 3px rgba(0,0,0,.3); } 15%,55%{ box-shadow:0 0 0 3px rgba(96,165,250,.6); } }
.gu-onb-methods{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:8px 0 14px; }
@media (max-width:900px){ .gu-onb-methods{ grid-template-columns:1fr; } }
.gu-onb-method{ display:flex; gap:12px; background:#f8fafc; border:1px solid #e5e7eb; border-radius:11px; padding:14px; }
.gu-dark .gu-onb-method{ background:#0f1a2c; border-color:#28344a; }
.gu-onb-method-ic{ position:relative; flex:0 0 auto; width:40px; height:40px; border-radius:10px; display:grid; place-items:center; font-size:17px; background:#eff6ff; color:#2563eb; }
.gu-dark .gu-onb-method-ic{ background:rgba(37,99,235,.15); color:#60a5fa; }
.gu-onb-method-num{ position:absolute; top:-7px; left:-7px; width:19px; height:19px; border-radius:50%; background:#2563eb; color:#fff !important; font-size:11px; font-weight:800; display:grid; place-items:center; line-height:1; }
.gu-onb-method-body{ min-width:0; }
.gu-onb-method-body h4{ margin:0 0 5px; font-size:14px; font-weight:700; color:#111827; }
.gu-dark .gu-onb-method-body h4{ color:#e6ebf2; }
.gu-onb-method-body p{ margin:0 0 10px; font-size:12.5px; line-height:1.5; color:#64748b; }
.gu-dark .gu-onb-method-body p{ color:#b7c2d4; }

/* ---- Tour guiado (overlay + globo) ---- */
#gu-tour-overlay{ display:none; }
body.gu-tour-on #gu-tour-overlay{ display:block; position:fixed; inset:0; z-index:100000; }
#gu-tour-hole{ position:fixed; border-radius:10px; box-shadow:0 0 0 9999px rgba(15,23,42,.72);
    transition:all .25s ease; pointer-events:none; border:2px solid #3b82f6; }
#gu-tour-pop{ position:fixed; z-index:100001; width:330px; max-width:calc(100vw - 24px);
    background:#fff; border-radius:14px; padding:18px 20px; box-shadow:0 20px 50px rgba(0,0,0,.4);
    transition:top .25s ease, left .25s ease; }
.gu-dark #gu-tour-pop{ background:#1a2436; border:1px solid #28344a; }
#gu-tour-step{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#2563eb; margin-bottom:6px; }
#gu-tour-title{ margin:0 0 8px; font-size:17px; font-weight:700; color:#111827; }
.gu-dark #gu-tour-title{ color:#f1f5f9; }
#gu-tour-text{ margin:0 0 16px; font-size:13.5px; line-height:1.55; color:#475569; }
.gu-dark #gu-tour-text{ color:#c7d2e2; }
#gu-tour-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.gu-tour-nav-right{ display:flex; gap:8px; }
#gu-tour-nav button{ border:none; border-radius:8px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; }
#gu-tour-skip{ background:none; color:#9ca3af; padding:8px 6px; }
#gu-tour-skip:hover{ color:#ef4444; }
#gu-tour-prev{ background:#f1f5f9; color:#475569; }
.gu-dark #gu-tour-prev{ background:#26344c; color:#e2e8f0; }
#gu-tour-next{ background:#2563eb; color:#fff; }
#gu-tour-next:hover{ background:#1d4ed8; }
/* botón "Guía paso a paso" en los encabezados de formularios */
.gu-guide-btn{ margin-left:12px !important; vertical-align:middle; font-weight:600 !important; }
.gu-guide-btn i{ margin-right:5px; }

/* ============================================================
   MENSAJES DE VALIDACIÓN (jQuery Validate) — color llamativo
   para que se noten los campos requeridos, en ambos temas.
   ============================================================ */
label.error, span.error, .help-block.text-danger {
    color:#dc2626 !important;
    font-weight:600 !important;
    font-size:12.5px !important;
    display:inline-block;
    margin-top:4px;
    letter-spacing:.1px;
}
.gu-dark label.error, .gu-dark span.error { color:#f87171 !important; }
/* resaltar el campo que tiene el error */
.form-control.error, input.error, select.error, textarea.error,
.form-control.error:focus, input.error:focus {
    border-color:#dc2626 !important;
    box-shadow:0 0 0 3px rgba(220,38,38,.15) !important;
}
.gu-dark .form-control.error, .gu-dark input.error, .gu-dark select.error, .gu-dark textarea.error {
    border-color:#f87171 !important;
    box-shadow:0 0 0 3px rgba(248,113,113,.2) !important;
}
/* select2 con error */
.error + .select2-container .select2-selection { border-color:#dc2626 !important; }
.gu-dark .error + .select2-container .select2-selection { border-color:#f87171 !important; }

/* ============================================================
   INTERRUPTOR DE TEMA claro/oscuro — sol ☀ | switch | luna 🌙
   (más claro que un icono suelto: se entiende qué hace)
   ============================================================ */
.gu-theme-switch{ display:inline-flex !important; align-items:center; gap:7px; padding:0 10px !important;
    text-decoration:none !important; cursor:pointer; line-height:1; background:transparent !important; border:none !important; }
.gu-theme-switch:hover, .gu-theme-switch:focus{ text-decoration:none !important; }
.gu-theme-switch i{ font-size:13px; transition:color .2s ease; }
.gu-theme-switch .fa-sun{ color:#f59e0b; }
.gu-theme-switch .fa-moon{ color:#8391a8; }
.gu-theme-switch .gu-ts-track{ position:relative; display:inline-block; width:40px; height:22px;
    border-radius:22px; background:#c3cede; transition:background .2s ease; flex:0 0 auto; }
.gu-theme-switch .gu-ts-knob{ position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%;
    background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:left .22s ease; }
/* estado OSCURO: knob a la derecha, luna encendida, sol atenuado */
body.gu-dark .gu-theme-switch .gu-ts-track{ background:#2563eb; }
body.gu-dark .gu-theme-switch .gu-ts-knob{ left:21px; }
body.gu-dark .gu-theme-switch .fa-sun{ color:#5b6b86; }
body.gu-dark .gu-theme-switch .fa-moon{ color:#fbbf24; }
/* alineación en el navbar admin (li de 50px) */
.gu-theme-toggle-li .gu-theme-switch{ height:50px; }
/* en el header del POS */
.gu-theme-switch-pos{ margin:9px 8px 0 0; }
/* Grupo de utilidades del POS (Guía + tema), agrupado en la esquina y separado de los botones operativos */
.pos-header .gu-pos-utils{ display:inline-flex; align-items:center; gap:10px; margin:5px 4px 5px 10px; padding-left:12px; border-left:1px solid rgba(148,163,184,.35); }
.pos-header .gu-pos-utils .gu-theme-switch-pos{ margin:0 !important; }
.pos-header .gu-pos-utils #gu-start-tour{ white-space:nowrap; }

/* Texto oscuro invisible sobre oscuro (según auditor de contraste) */
.gu-dark .gu-rh-sub b { color:#e6ebf2 !important; }
.gu-dark .gu-rh-sub { color:#9fb0c7 !important; }
/* Badge verde de estado: texto blanco quedaba con poco contraste → texto verde oscuro */
.label.bg-light-green, .badge.bg-light-green, span.bg-light-green { color:#14532d !important; }
/* Callouts en oscuro: tinte oscuro semántico + texto claro (eran fondos brillantes) */
.gu-dark .callout, .gu-dark .callout small, .gu-dark .callout p, .gu-dark .callout h4, .gu-dark .callout a { color:#c7d2e2 !important; }
.gu-dark .callout { border-color:#28344a !important; }
.gu-dark .callout-info { background:#0e2a3a !important; border-left:4px solid #22a6c3 !important; }
.gu-dark .callout-warning { background:#33280f !important; border-left:4px solid #d97706 !important; }
.gu-dark .callout-danger { background:#331a1a !important; border-left:4px solid #dc2626 !important; }
.gu-dark .callout-success { background:#0f2a1f !important; border-left:4px solid #059669 !important; }
/* POS: fecha/hora del header (era oscuro sobre oscuro) */
.gu-dark .curr_datetime, .gu-dark .curr_datetime * { color:#cbd5e1 !important; }
/* POS: "Total a pagar" — info clave, que resalte (el bg-navy se perdía en la barra oscura) */
.gu-dark .pos-total { background:linear-gradient(135deg,#1d4ed8,#2563eb) !important; color:#ffffff !important; border:1px solid #3b82f6 !important; border-radius:8px !important; box-shadow:0 2px 12px rgba(37,99,235,.4) !important; }
.gu-dark .pos-total * { color:#ffffff !important; }


/* ===== Pantalla de Pagos: barra de totales + exportación ===== */
.gu-pay-summary{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
    gap:12px; margin:0 0 14px; padding:14px 18px;
    background:#ffffff; border:1px solid #e2e8f0; border-radius:10px;
    box-shadow:0 1px 3px rgba(15,23,42,.06);
}
.gu-pay-totals{ display:flex; flex-wrap:wrap; gap:26px; align-items:center; }
.gu-pay-tot{ display:flex; flex-direction:column; line-height:1.25; }
.gu-pay-tot-lbl{ font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:#64748b; }
.gu-pay-tot-lbl i{ margin-right:4px; opacity:.8; }
.gu-pay-tot-val{ font-size:22px; font-weight:800; color:#0f172a; }
.gu-pay-tot--count .gu-pay-tot-val{ font-size:18px; color:#475569; }
.gu-pay-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.gu-pay-actions .btn i{ margin-right:5px; }

/* Tema oscuro */
.gu-dark .gu-pay-summary{ background:#141d2e; border-color:#24324a; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.gu-dark .gu-pay-tot-lbl{ color:#94a3b8; }
.gu-dark .gu-pay-tot-val{ color:#f1f5f9; }
.gu-dark .gu-pay-tot--count .gu-pay-tot-val{ color:#cbd5e1; }

/* ============================================================
   REGISTRO PÚBLICO (/business/register) — 2026-07
   El form es grid Bootstrap 3 viejo (col + input-group + addons) y quedaba
   embutido/minúsculo dentro del contenedor de 420px del login nuevo.
   Acá lo ensanchamos y reestilizamos para que se vea prolijo y moderno.
   Todo scopeado a body.gu-register-page para no afectar el login.
   ============================================================ */
.gu-register-page .login-form-panel{
    justify-content: flex-start !important;
    padding: 84px 40px 48px !important;
    overflow-y: auto;
    height: 100vh;
}
.gu-register-page .form-container{ max-width: 820px !important; }

/* Título superior del form */
.gu-register-page .form-header{
    font-size: 24px; font-weight: 700; color: #0f172a;
    text-align: center; margin: 0 0 24px; letter-spacing: -0.3px;
}
.gu-register-page h3{ display: none; }  /* "Empresa" duplicado del partial */

/* Encabezados de sección (legend) */
.gu-register-page legend{
    font-size: 15px; font-weight: 700; color: #0f172a;
    border: 0; border-bottom: 1px solid #e2e8f0;
    padding-bottom: 8px; margin: 6px 0 18px; width: 100%;
}
.gu-register-page fieldset{ border: 0; padding: 0; margin: 0; }

/* Labels visibles */
.gu-register-page label{
    display: block; font-size: 13px; font-weight: 600;
    color: #334155; margin-bottom: 6px;
}
.gu-register-page .form-group{ margin-bottom: 16px; }

/* Inputs: borde, alto, radio (ganándole al override del layout que los deja sin borde) */
.gu-register-page .login-wrapper .form-control,
.gu-register-page .form-control{
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
    height: 46px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    background: #fff !important;
    box-shadow: none !important;
    width: 100%;
}
.gu-register-page textarea.form-control{ height: auto !important; min-height: 80px; }
.gu-register-page .form-control:focus{
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 3px rgba(14,165,233,.12) !important;
}
.gu-register-page .form-control::placeholder{ color: #94a3b8; }

/* input-group con ícono: layout flex para que el input NO quede chico */
.gu-register-page .input-group{ display: flex !important; width: 100%; }
.gu-register-page .input-group-addon{
    display: flex; align-items: center; justify-content: center;
    width: 46px; min-width: 46px; height: 46px;
    background: #f1f5f9; color: #64748b;
    border: 2px solid #e2e8f0; border-right: 0;
    border-radius: 10px 0 0 10px; font-size: 15px;
}
.gu-register-page .input-group > .form-control{
    border-radius: 0 10px 10px 0 !important; border-left: 0 !important;
    flex: 1 1 auto; width: auto;
}

/* select2 al mismo alto y estilo, y que llene el input-group */
.gu-register-page .input-group .select2-container{ flex: 1 1 auto; width: auto !important; }
.gu-register-page .select2-container--default .select2-selection--single{
    height: 46px !important; border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important; display: flex; align-items: center;
    padding: 0 10px;
}
.gu-register-page .input-group .select2-container--default .select2-selection--single{
    border-radius: 0 10px 10px 0 !important; border-left: 0 !important;
}
.gu-register-page .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: normal; color: #0f172a; padding: 0;
}
.gu-register-page .select2-container--default .select2-selection--single .select2-selection__arrow{ height: 44px; }

/* input file */
.gu-register-page input[type="file"]{
    border: 2px dashed #cbd5e1; border-radius: 10px;
    padding: 10px; width: 100%; font-size: 13px; background: #fff;
}

/* Wizard: header de pasos (1·2·3) y botones de navegación */
.gu-register-page .wizard > .steps{ margin-bottom: 8px; }
.gu-register-page .wizard > .actions{ margin-top: 18px; }
.gu-register-page .wizard > .actions a,
.gu-register-page .wizard > .actions a:hover{
    background: linear-gradient(135deg,#0ea5e9,#0284c7); color: #fff;
    border-radius: 10px; padding: 10px 22px; font-weight: 600; border: 0;
}
.gu-register-page .wizard > .actions .disabled a,
.gu-register-page .wizard > .actions .disabled a:hover{
    background: #e2e8f0; color: #94a3b8;
}

/* La columna izquierda de branding un poco más angosta para dar aire al form */
.gu-register-page .login-brand-panel{ flex: 0 0 38% !important; }

@media (max-width: 900px){
    .gu-register-page .form-container{ max-width: 100% !important; }
    .gu-register-page .col-md-6{ width: 100%; }
}

/* Correcciones registro (2026-07): el .content del wizard jQuery Steps venía con
   fondo oscuro (rgb(68,88,103)) que tapaba las labels; lo hacemos transparente
   para que herede el panel claro. Ocultamos el título fantasma (text-white). */
.gu-register-page .wizard > .content{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.gu-register-page .wizard > .content > .body{ padding: 0 !important; }
.gu-register-page .form-header{ display: none !important; }
.gu-register-page label{ display: block !important; }

/* Registro: widget de subida de logo (Krajee fileinput) contenido en su columna */
.gu-register-page .file-input{ width: 100% !important; max-width: 100%; }
.gu-register-page .file-caption-main{ display: flex !important; width: 100% !important; flex-wrap: nowrap; }
.gu-register-page .file-caption-main .file-caption.form-control{
    flex: 1 1 auto; width: auto !important; min-width: 0;
    border-radius: 10px 0 0 10px !important; border-right: 0 !important;
    display: flex; align-items: center;
}
.gu-register-page .file-caption-main .input-group-btn{
    display: flex !important; flex: 0 0 auto; width: auto !important;
}
.gu-register-page .file-caption-main .input-group-btn > .btn{
    height: 46px !important; margin: 0; border-radius: 0 !important;
    border: 2px solid #e2e8f0 !important; border-left: 0 !important;
    display: inline-flex; align-items: center; white-space: nowrap;
}
.gu-register-page .file-caption-main .input-group-btn > .btn:last-child{ border-radius: 0 10px 10px 0 !important; }

/* Registro — responsive (celular). Corrige que mis reglas con !important le ganaban
   al @media del layout, y apila todo en una columna cómoda. */
@media (max-width: 768px){
    .gu-register-page .login-form-panel{ padding: 24px 16px 40px !important; height: auto; }
    .gu-register-page .form-container{ max-width: 100% !important; }
    .gu-register-page .col-md-6,
    .gu-register-page .col-md-12,
    .gu-register-page .col-md-4{ width: 100% !important; float: none; }
    /* Header de pasos (1·2·3): apilar full-width para que no se apriete */
    .gu-register-page .wizard > .steps > ul{ display: flex; flex-direction: column; gap: 6px; padding: 0; }
    .gu-register-page .wizard > .steps > ul > li{ width: 100% !important; float: none; margin: 0; }
    .gu-register-page .wizard > .steps > ul > li > a{ margin: 0; border-radius: 8px; }
    .gu-register-page .wizard > .actions{ text-align: center; }
    .gu-register-page .wizard > .actions > ul{ display: flex; justify-content: center; gap: 10px; float: none; }
}