/* ==============================================================
   ZONA LIVE · IDENTIDAD VISUAL GLOBAL
   Paleta basada en el logo: azul marino, rojo, blanco y plateado.
   Este archivo se carga al final para reemplazar la antigua paleta
   morada sin alterar la estructura ni la funcionalidad del sistema.
   ============================================================== */

:root {
  --zl-navy-950: #05152e;
  --zl-navy-900: #081f42;
  --zl-navy-800: #0b2d5c;
  --zl-navy-700: #0e417f;
  --zl-blue-600: #13549a;
  --zl-red-700: #a90d24;
  --zl-red-600: #c8102e;
  --zl-red-500: #e31b36;
  --zl-red-400: #f03a50;
  --zl-silver-300: #c6ceda;
  --zl-silver-200: #dbe1e9;
  --zl-silver-100: #eef2f7;
  --zl-white: #ffffff;
  --zl-shadow: rgba(5, 21, 46, 0.22);
  --zl-navy-gradient: linear-gradient(105deg, #05152e 0%, #081f42 56%, #0e417f 100%);
  --zl-red-gradient: linear-gradient(135deg, #a90d24 0%, #e31b36 100%);
  --zl-brand-gradient: linear-gradient(135deg, #081f42 0%, #0e417f 58%, #c8102e 100%);
}

/* ---------- Cabecera principal ---------- */
.cabecera-m,
.main-header.cabecera-m,
.main-header .navbar.cabecera-m,
.skin-blue .main-header .navbar,
.skin-blue .main-header .logo {
  background-color: var(--zl-navy-900) !important;
  background-image: var(--zl-navy-gradient) !important;
}

.cabecera-m .logo,
.main-header .logo,
.skin-blue .main-header .logo {
  background-color: var(--zl-navy-950) !important;
  background-image: linear-gradient(110deg, #05152e 0%, #0b2d5c 100%) !important;
  border-right: 1px solid rgba(255,255,255,.10) !important;
}

.main-header .logo:hover,
.skin-blue .main-header .logo:hover {
  background: #071a38 !important;
}

.main-header .navbar .sidebar-toggle:hover,
.cabecera-m .btn-menup:hover,
.cabecera-m .navbar-nav > li > a:hover,
.cabecera-m .navbar-nav > li > a:focus,
.cabecera-m .navbar-nav > .open > a {
  background: rgba(255,255,255,.09) !important;
}

.cabecera-m .btn-menup,
.cabecera-m .navbar-nav > li > a,
.cabecera-m .logo,
.cabecera-m .logo b,
.cabecera-m .logo span {
  color: #fff !important;
}

/* Botones/píldoras de la barra superior */
.btn-modo-sistema {
  background: var(--zl-red-gradient) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 4px 12px rgba(169,13,36,.26) !important;
}

.cabecera-m #tipocambio,
.cabecera-m .btn-primary#tipocambio {
  background: var(--zl-red-gradient) !important;
  border-color: var(--zl-red-600) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(169,13,36,.22) !important;
}

.cabecera-m .label-warning {
  background-color: var(--zl-red-500) !important;
}

.main-header .navbar-custom-menu .user-image {
  border: 2px solid var(--zl-silver-300) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.14) !important;
}

/* ---------- Menú lateral ---------- */
.main-sidebar .sidebar i,
.sidebar-menu > li > a > i,
.sidebar-menu .treeview-menu > li > a > i {
  color: var(--zl-navy-800) !important;
}

.sidebar-menu > li > a:hover {
  background: rgba(8,31,66,.07) !important;
  color: var(--zl-navy-950) !important;
}

.sidebar-menu > li.active:not(.treeview) > a,
.sidebar-menu > li.menu-ini-p.active > a {
  background: var(--zl-red-gradient) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(200,16,46,.26) !important;
  border-left: 0 !important;
}

.sidebar-menu > li.active:not(.treeview) > a i,
.sidebar-menu > li.active:not(.treeview) > a span,
.sidebar-menu > li.menu-ini-p.active > a i,
.sidebar-menu > li.menu-ini-p.active > a span {
  color: #fff !important;
}

.sidebar-menu > li.treeview.active > a,
.sidebar-menu > li.treeview.menu-open > a {
  background: rgba(8,31,66,.08) !important;
  color: var(--zl-navy-950) !important;
  box-shadow: inset 4px 0 0 var(--zl-red-500) !important;
}

.sidebar-menu > li.treeview.active > a i,
.sidebar-menu > li.treeview.active > a span,
.sidebar-menu > li.treeview.menu-open > a i,
.sidebar-menu > li.treeview.menu-open > a span {
  color: var(--zl-navy-900) !important;
}

.sidebar-menu .treeview .treeview-menu > li.active > a,
.sidebar-menu .treeview .treeview-menu > li.active > a > span,
.sidebar-menu .treeview .treeview-menu > li.active > a > i {
  color: var(--zl-red-600) !important;
  background-color: rgba(200,16,46,.08) !important;
}

body.sidebar-collapse .sidebar-menu > li:hover > a {
  background: var(--zl-navy-gradient) !important;
  color: #fff !important;
}

body.sidebar-collapse .sidebar-menu > li:hover > a i,
body.sidebar-collapse .sidebar-menu > li:hover > a span {
  color: #fff !important;
}

body.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
  background: var(--zl-navy-950) !important;
  border-top: 3px solid var(--zl-red-500) !important;
}

body.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu a,
body.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu a i {
  color: #e8edf5 !important;
}

body.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu li.active a {
  background: rgba(227,27,54,.16) !important;
  color: #fff !important;
}

.bg-menu {
  color: var(--zl-red-500) !important;
}

.user-panel2 .img-user,
.user-panel2 img.img-circle {
  border-color: var(--zl-red-500) !important;
  box-shadow: 0 0 0 4px rgba(8,31,66,.10) !important;
}

/* ---------- Acciones del dashboard ---------- */
.btns-dash #contenedor-menur a {
  border-right-color: var(--zl-red-500) !important;
}

.btns-dash #contenedor-menur a:hover,
.dashboard-header button:hover {
  background: rgba(8,31,66,.06) !important;
  color: var(--zl-navy-900) !important;
}

.btns-dash #contenedor-menur a i,
.dashboard-header button i {
  color: var(--zl-navy-800) !important;
}

/* ---------- Botones Bootstrap / controles ---------- */
.btn-primary,
.label-primary,
.bg-primary,
.bootstrap-switch-primary,
.toggle.btn-primary {
  background-color: var(--zl-navy-800) !important;
  border-color: var(--zl-navy-900) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: var(--zl-navy-700) !important;
  border-color: var(--zl-navy-950) !important;
  color: #fff !important;
}

.btn-danger,
.label-danger,
.bg-red,
.bg-danger {
  background-color: var(--zl-red-600) !important;
  border-color: var(--zl-red-700) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: var(--zl-red-500) !important;
  border-color: var(--zl-red-700) !important;
}

.btn-info,
.label-info,
.bg-aqua,
.bg-light-blue {
  background-color: var(--zl-blue-600) !important;
  border-color: var(--zl-navy-800) !important;
}

/* Clases moradas de AdminLTE y Font Awesome */
.bg-purple,
.btn-purple,
.label-purple,
.small-box.bg-purple,
.info-box-icon.bg-purple {
  background-color: var(--zl-navy-800) !important;
  background-image: var(--zl-navy-gradient) !important;
  border-color: var(--zl-navy-900) !important;
  color: #fff !important;
}

.text-purple,
.fa.text-purple,
i.text-purple {
  color: var(--zl-red-500) !important;
}

/* ---------- Tablas, paginación y búsqueda ---------- */
.table .icon-search,
.input-group-search .icon-search {
  background: var(--zl-brand-gradient) !important;
  border-color: var(--zl-navy-800) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--zl-red-gradient) !important;
  border-color: var(--zl-red-600) !important;
  color: #fff !important;
}

.pagination > li > a,
.pagination > li > span {
  color: var(--zl-navy-800) !important;
}

.table > thead > tr > th,
.tabla-items thead,
.tablaVentas thead,
.tablaGuias thead,
.tablaCotizaciones thead {
  border-bottom-color: var(--zl-silver-300) !important;
}

/* ---------- Formularios ---------- */
.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--zl-blue-600) !important;
  box-shadow: 0 0 0 3px rgba(19,84,154,.12) !important;
  outline: none !important;
}

.input-group-addon:has(.text-purple),
.input-group-addon:has(i.text-purple) {
  border-color: var(--zl-silver-300) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected],
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--zl-navy-800) !important;
  color: #fff !important;
}

/* ---------- Pestañas, fechas y rangos ---------- */
.nav-tabs-custom > .nav-tabs > li.active,
.nav-tabs > li.active > a,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  border-top-color: var(--zl-red-500) !important;
  background-color: var(--zl-navy-800) !important;
  color: #fff !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td span.active,
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker .ranges li.active {
  background-color: var(--zl-red-600) !important;
  background-image: none !important;
  color: #fff !important;
}

/* ---------- Modales y paneles ---------- */
.modal-header[style*="#0b2d5c"],
.modal-header[style*="#0b2d5c"],
.modal-header[style*="#0e417f"],
.modal-header.bg-purple {
  background: var(--zl-navy-gradient) !important;
  color: #fff !important;
  border-bottom: 3px solid var(--zl-red-500) !important;
}

h4[style*="#0b2d5c"],
.text-purple {
  color: var(--zl-red-600) !important;
}

.box.box-primary {
  border-top-color: var(--zl-navy-800) !important;
}

.box.box-danger {
  border-top-color: var(--zl-red-500) !important;
}

/* ---------- Elementos personalizados antiguos ---------- */
.btn-dos,
.btn-radius,
.btn-radius:link,
.btn-radius:visited,
.btn-radius:hover,
.btn-radius:active {
  background: var(--zl-brand-gradient) !important;
  color: #fff !important;
}

.contenedor-widget .bg-fa,
.contenedor-widget .bg-nv,
.contenedor-widget .bg-nd {
  background-color: var(--zl-navy-800) !important;
}

.contenedor-widget .bg-bo,
.contenedor-widget .bg-nc,
.contenedor-widget .bg-tn {
  background-color: var(--zl-red-600) !important;
}

/* Alertas, tarjetas y detalles que antes usaban violeta */
.pos-loading-spinner,
.loading-spinner {
  border-top-color: var(--zl-red-500) !important;
}

/* ---------- Modo oscuro ---------- */
body[style*="rgb(32, 32, 32)"] .sidebar-menu > li.treeview.active > a,
body.dark-mode .sidebar-menu > li.treeview.active > a {
  background: rgba(255,255,255,.07) !important;
  color: #fff !important;
}

body[style*="rgb(32, 32, 32)"] .sidebar-menu > li.treeview.active > a i,
body[style*="rgb(32, 32, 32)"] .sidebar-menu > li.treeview.active > a span,
body.dark-mode .sidebar-menu > li.treeview.active > a i,
body.dark-mode .sidebar-menu > li.treeview.active > a span {
  color: #fff !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .cabecera-m,
  .main-header .navbar,
  .main-header .logo {
    background: var(--zl-navy-gradient) !important;
  }

  .main-header .logo {
    border-right: 0 !important;
  }

  .btns-dash #contenedor-menur a {
    border-right: 4px solid var(--zl-red-500) !important;
  }
}