/* =========================================================
   Solución Factura — Theme Color Overrides
   Fecha: 2026-05-27
   Propósito: Sobrescribir colores de Bootstrap 3 y Gentelella
              con la nueva paleta corporativa SIN modificar
              el CSS base del servidor.
   ========================================================= */

/* ---------- VARIABLES CSS (para referencia interna) ---------- */
:root {
  --color-primary:        #083B8A;
  --color-primary-hover:  #062d6b;
  --color-primary-active: #042052;
  --color-info:           #03245B;
  --color-info-hover:     #021a42;
  --color-success:        #42B883;
  --color-success-hover:  #35996a;
  --color-success-active: #2c7f58;
  --color-warning:        #FF9F1C;
  --color-warning-hover:  #e68a0a;
  --color-warning-active: #c97608;
  --color-danger:         #E63946;
  --color-danger-hover:   #c42a36;
  --color-danger-active:  #a3222c;
  --color-accent:         #F5C542;
  --color-accent-hover:   #e0b132;
  --color-surface:        #FAF7F1;
  --color-surface-alt:    #F4F6F9;
  --color-warm-bg:        #FFF3D6;
  --color-white:          #FFFFFF;
}

/* =========================================================
   1. BOTONES BOOTSTRAP 3
   ========================================================= */
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  opacity: 0.65;
}

.btn-success {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: var(--color-white) !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  background-color: var(--color-success-hover) !important;
  border-color: var(--color-success-hover) !important;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
  opacity: 0.65;
}

.btn-danger {
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: var(--color-white) !important;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
  background-color: var(--color-danger-hover) !important;
  border-color: var(--color-danger-hover) !important;
}
.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover {
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  opacity: 0.65;
}

.btn-warning {
  background-color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
  color: var(--color-white) !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
  background-color: var(--color-warning-hover) !important;
  border-color: var(--color-warning-hover) !important;
}
.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover {
  background-color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
  opacity: 0.65;
}

.btn-info {
  background-color: var(--color-info) !important;
  border-color: var(--color-info) !important;
  color: var(--color-white) !important;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
  background-color: var(--color-info-hover) !important;
  border-color: var(--color-info-hover) !important;
}
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover {
  background-color: var(--color-info) !important;
  border-color: var(--color-info) !important;
  opacity: 0.65;
}

.btn-default {
  background-color: var(--color-white) !important;
  border-color: rgba(3, 36, 91, 0.18) !important;
  color: var(--color-info) !important;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
  background-color: var(--color-surface-alt) !important;
  border-color: rgba(3, 36, 91, 0.3) !important;
  color: var(--color-primary) !important;
}

/* Botones outline / ghost (si se usan) */
.btn-outline-primary { border-color: var(--color-primary) !important; color: var(--color-primary) !important; }
.btn-outline-primary:hover { background-color: var(--color-primary) !important; color: var(--color-white) !important; }
.btn-outline-success { border-color: var(--color-success) !important; color: var(--color-success) !important; }
.btn-outline-success:hover { background-color: var(--color-success) !important; color: var(--color-white) !important; }
.btn-outline-danger { border-color: var(--color-danger) !important; color: var(--color-danger) !important; }
.btn-outline-danger:hover { background-color: var(--color-danger) !important; color: var(--color-white) !important; }

/* =========================================================
   2. ALERTAS
   ========================================================= */
.alert-success {
  color: #ffffff !important;
  background-color: var(--color-success) !important;
  border-color: var(--color-success-hover) !important;
}
.alert-success .alert-link { color: var(--color-warm-bg) !important; }

.alert-danger {
  color: #ffffff !important;
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger-hover) !important;
}
.alert-danger .alert-link { color: var(--color-warm-bg) !important; }

.alert-warning {
  color: #ffffff !important;
  background-color: var(--color-warning) !important;
  border-color: var(--color-warning-hover) !important;
}
.alert-warning .alert-link { color: var(--color-warm-bg) !important; }

.alert-info {
  color: #ffffff !important;
  background-color: var(--color-info) !important;
  border-color: var(--color-info-hover) !important;
}
.alert-info .alert-link { color: var(--color-warm-bg) !important; }

/* =========================================================
   3. LABELS Y BADGES
   ========================================================= */
.label-primary,
.badge-primary { background-color: var(--color-primary) !important; }
.label-success,
.badge-success { background-color: var(--color-success) !important; }
.label-danger,
.badge-danger { background-color: var(--color-danger) !important; }
.label-warning,
.badge-warning { background-color: var(--color-warning) !important; color: #fff !important; }
.label-info,
.badge-info { background-color: var(--color-info) !important; }
.label-default,
.badge-default { background-color: #9ca3af !important; }

.label-dark { background-color: var(--color-info) !important; }
.label-dark[href]:hover,
.label-dark[href]:focus { background-color: var(--color-info-hover) !important; }

/* =========================================================
   4. NAVBAR / TOP NAV
   ========================================================= */
.top_nav .nav .open > a,
.top_nav .nav .open > a:focus,
.top_nav .nav .open > a:hover,
.top_nav .nav > li > a:focus,
.top_nav .nav > li > a:hover {
  background-color: var(--color-surface-alt) !important;
}
.top_nav .navbar-right li a { color: #374151 !important; }

/* =========================================================
   5. SIDEBAR — manejado completamente por sidebar-modern.css
   No definir aquí estilos de .nav.side-menu / .nav.child_menu
   ni .left_col / .nav_title. El sidebar nuevo es dark navy
   con pills amarillos y se carga desde sidebar-modern.css.
   ========================================================= */

/* =========================================================
   6. TABLAS
   ========================================================= */
table.jambo_table thead {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}
table.jambo_table thead th {
  border-color: var(--color-primary-hover) !important;
}

/* Table hover striping opcional */
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--color-surface-alt) !important;
}
.table-hover > tbody > tr:hover {
  background-color: rgba(8, 59, 138, 0.04) !important;
}

/* =========================================================
   7. PANELES BOOTSTRAP 3
   ========================================================= */
.panel-primary { border-color: var(--color-primary) !important; }
.panel-primary > .panel-heading {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}
.panel-success { border-color: var(--color-success) !important; }
.panel-success > .panel-heading {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: var(--color-white) !important;
}
.panel-danger { border-color: var(--color-danger) !important; }
.panel-danger > .panel-heading {
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: var(--color-white) !important;
}
.panel-warning { border-color: var(--color-warning) !important; }
.panel-warning > .panel-heading {
  background-color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
  color: var(--color-white) !important;
}
.panel-info { border-color: var(--color-info) !important; }
.panel-info > .panel-heading {
  background-color: var(--color-info) !important;
  border-color: var(--color-info) !important;
  color: var(--color-white) !important;
}

/* =========================================================
   8. LIST GROUP
   ========================================================= */
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
a.list-group-item:hover,
a.list-group-item:focus,
button.list-group-item:hover,
button.list-group-item:focus {
  color: var(--color-primary) !important;
  background-color: var(--color-surface) !important;
}

/* =========================================================
   9. NAV PILLS / TABS
   ========================================================= */
.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
  background-color: var(--color-primary) !important;
}
.nav-pills > li > a:hover {
  background-color: rgba(8, 59, 138, 0.08) !important;
  color: var(--color-primary) !important;
}

/* Tabs */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  color: var(--color-primary) !important;
  border-top-color: var(--color-primary) !important;
}
.nav-tabs > li > a:hover {
  color: var(--color-primary) !important;
  border-color: transparent !important;
  background-color: rgba(8, 59, 138, 0.04) !important;
}

/* =========================================================
   10. PROGRESS BARS
   ========================================================= */
.progress-bar { background-color: var(--color-primary) !important; }
.progress-bar-success { background-color: var(--color-success) !important; }
.progress-bar-danger { background-color: var(--color-danger) !important; }
.progress-bar-warning { background-color: var(--color-warning) !important; }
.progress-bar-info { background-color: var(--color-info) !important; }

/* =========================================================
   11. PAGINATION
   ========================================================= */
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  color: var(--color-primary) !important;
  background-color: var(--color-surface) !important;
  border-color: #cdd4df !important;
}
.pagination > li > a,
.pagination > li > span { color: var(--color-primary) !important; }

/* =========================================================
   12. BREADCRUMBS
   ========================================================= */
.breadcrumb a { color: var(--color-primary) !important; }
.breadcrumb a:hover { color: var(--color-primary-hover) !important; }
.breadcrumb > .active { color: #6b7280 !important; }

/* =========================================================
   13. LINKS GLOBALES
   ========================================================= */
a {
  color: var(--color-primary);
}
a:hover,
a:focus {
  color: var(--color-primary-hover);
  text-decoration: none;
}

/* =========================================================
   14. DROPDOWN MENÚS
   ========================================================= */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: rgba(8, 59, 138, 0.06) !important;
  color: var(--color-primary) !important;
}

/* =========================================================
   15. WELLS
   ========================================================= */
.well {
  background-color: var(--color-surface) !important;
  border-color: #e8e4dc !important;
}

/* =========================================================
   16. TEXT UTILITIES (text-*)
   ========================================================= */
.text-primary { color: var(--color-primary) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger  { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info    { color: var(--color-info) !important; }
.text-muted   { color: #9ca3af !important; }

/* =========================================================
   17. BG UTILITIES (bg-*)
   ========================================================= */
.bg-primary { background-color: var(--color-primary) !important; color: var(--color-white) !important; }
.bg-success { background-color: var(--color-success) !important; color: var(--color-white) !important; }
.bg-danger  { background-color: var(--color-danger) !important; color: var(--color-white) !important; }
.bg-warning { background-color: var(--color-warning) !important; color: var(--color-white) !important; }
.bg-info    { background-color: var(--color-info) !important; color: var(--color-white) !important; }

/* =========================================================
   18. PACE LOADER
   ========================================================= */
.pace {
  border: 1px solid var(--color-success) !important;
}
.pace .pace-progress {
  background: var(--color-primary) !important;
}

/* =========================================================
   19. TOOLTIP / POPOVER (si aplica)
   ========================================================= */
.tooltip-inner {
  background-color: var(--color-primary) !important;
}
.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow {
  border-top-color: var(--color-primary) !important;
}
.tooltip.right .tooltip-arrow {
  border-right-color: var(--color-primary) !important;
}
.tooltip.left .tooltip-arrow {
  border-left-color: var(--color-primary) !important;
}
.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: var(--color-primary) !important;
}

/* =========================================================
   20. FORM STATES / INPUT FOCUS
   ========================================================= */
.form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 0.15rem rgba(8, 59, 138, 0.15) !important;
}
.has-success .form-control {
  border-color: var(--color-success) !important;
}
.has-success .form-control:focus {
  border-color: var(--color-success-hover) !important;
  box-shadow: 0 0 0 0.15rem rgba(66, 184, 131, 0.15) !important;
}
.has-error .form-control {
  border-color: var(--color-danger) !important;
}
.has-error .form-control:focus {
  border-color: var(--color-danger-hover) !important;
  box-shadow: 0 0 0 0.15rem rgba(230, 57, 70, 0.15) !important;
}
.has-warning .form-control {
  border-color: var(--color-warning) !important;
}
.has-warning .form-control:focus {
  border-color: var(--color-warning-hover) !important;
  box-shadow: 0 0 0 0.15rem rgba(255, 159, 28, 0.15) !important;
}

/* =========================================================
   21. MODALES
   ========================================================= */
.modal-header {
  border-bottom: 1px solid #e5e7eb !important;
}
.modal-footer {
  border-top: 1px solid #e5e7eb !important;
}

/* =========================================================
   22. ADD-TO-CART / WIDGET CARDS
   ========================================================= */
.add-to-cart:hover .x_content,
.add-to-cart.active .x_content {
  background: var(--color-primary) !important;
  border-radius: 5px;
}
.add-to-cart:hover h3,
.add-to-cart.active h3,
.add-to-cart:hover p,
.add-to-cart.active p {
  color: var(--color-white) !important;
}
.add-to-cart:hover .green,
.add-to-cart.active .green {
  color: var(--color-white) !important;
}

/* =========================================================
   23. FOOTER APP
   ========================================================= */
.footer-app,
.footer-app a {
  color: #6b7280 !important;
}
.footer-app a {
  font-weight: bold !important;
}

/* =========================================================
   24. NOTAS / CALLOUTS / INFO BOXES
   ========================================================= */
.note-about-import {
  background-color: rgba(245, 197, 66, 0.12) !important;
  border: 1px solid rgba(245, 197, 66, 0.25) !important;
}
.note-about-import .icon {
  color: var(--color-primary) !important;
}
.note-about-import p {
  color: var(--color-primary) !important;
}

/* =========================================================
   25. MOBILE BOTTOM NAV (colores del theme)
   ========================================================= */
.mobile-bottom-nav {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-top: 1px solid #e5e7eb !important;
}
.mobile-nav-item.active {
  background-color: rgba(8, 59, 138, 0.08) !important;
}
.mobile-nav-item.active i {
  color: var(--color-primary) !important;
}
.mobile-nav-item.active span {
  color: #111827 !important;
}

/* =========================================================
   26. SELECT2 / SWITCHERY (acento)
   ========================================================= */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
  border-color: var(--color-primary) !important;
}

/* =========================================================
   27. SWEETALERT2 (si usa clases propias)
   ========================================================= */
.swal2-confirm.swal2-styled {
  background-color: var(--color-primary) !important;
  border-left-color: var(--color-primary) !important;
  border-right-color: var(--color-primary) !important;
}
.swal2-cancel.swal2-styled {
  background-color: #9ca3af !important;
}

/* =========================================================
   28. IMAGEN MINI / THUMBNAIL BORDES
   ========================================================= */
img.mini {
  background: var(--color-surface) !important;
  border: 1px solid #e5e7eb !important;
}

/* =========================================================
   29. EXCEL BUTTON OVERRIDE
   ========================================================= */
a.btn-excel { color: var(--color-white) !important; }
.btn-excel {
  background: var(--color-success) !important;
  border: 1px solid var(--color-success-hover) !important;
  color: var(--color-white) !important;
}
.btn-excel:hover,
.btn-excel:focus,
.btn-excel:active,
.btn-excel.active,
.open .dropdown-toggle.btn-excel {
  background: var(--color-success-hover) !important;
  color: var(--color-white) !important;
}

/* =========================================================
   30. ENVIRONMENT BADGES
   ========================================================= */
.env-local span {
  color: #7a5c00 !important;
  background: rgba(245, 197, 66, 0.5) !important;
}
.env-demo span {
  background: rgba(230, 57, 70, 0.8) !important;
}