/* ============================================================
   TEMA VISUAL GLOBAL — AZUL ELÉCTRICO
   Un solo archivo controla el color de todo el sistema.
   Se carga DESPUÉS de adminlte.min.css y plantilla.css para
   que estas reglas tengan la última palabra (cascada por orden).
   No se toca AdminLTE ni Bootstrap directamente: solo se
   sobreescriben colores mediante variables CSS + selectores
   ya existentes de esas librerías.
   ============================================================ */

:root {
    --color-primario: #006CFF;
    --color-primario-oscuro: #003B8E;
    --color-primario-suave: #EAF3FF;
    --color-blanco: #FFFFFF;
    --color-texto: #1F2937;
    --color-primario-rgb: 0, 108, 255;
}

/* ---------- Tipografía base y texto ---------- */
body, .content-wrapper {
    color: var(--color-texto);
}

.text-primary {
    color: var(--color-primario) !important;
}

/* ---------- Botones ---------- */
.btn-primary {
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
    color: var(--color-blanco) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--color-primario-oscuro) !important;
    border-color: var(--color-primario-oscuro) !important;
}
.btn-outline-primary {
    color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}
.btn-outline-primary:hover {
    background-color: var(--color-primario) !important;
    color: var(--color-blanco) !important;
}
.btn-link {
    color: var(--color-primario);
}

/* ---------- Fondo / borde utilitarios de Bootstrap ---------- */
.bg-primary {
    background-color: var(--color-primario) !important;
}
.border-primary {
    border-color: var(--color-primario) !important;
}

/* ---------- Navbar superior ---------- */
.main-header.navbar {
    background-color: var(--color-blanco);
    border-bottom: 1px solid var(--color-primario-suave);
}
.navbar-white .nav-link {
    color: var(--color-texto);
}
.navbar-white .nav-link:hover {
    color: var(--color-primario);
}

/* ---------- Sidebar (menú lateral) ---------- */
[class*="sidebar-dark-"] {
    background-color: var(--color-primario-oscuro) !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-treeview > .nav-item > .nav-link.active {
    background-color: var(--color-primario) !important;
    color: var(--color-blanco) !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover {
    background-color: rgba(255, 255, 255, .08);
}
.brand-link {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

/* ---------- Cards ---------- */
.card-primary:not(.card-outline) > .card-header {
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}
.card-primary.card-outline {
    border-top-color: var(--color-primario) !important;
}
.card-header {
    background-color: var(--color-blanco);
}

/* ---------- Formularios: foco e inputs ---------- */
.form-control:focus,
.form-select:focus,
.custom-select:focus {
    border-color: var(--color-primario) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--color-primario-rgb), .18) !important;
}
.form-check-input:checked {
    background-color: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}
.input-group-text {
    background-color: var(--color-primario-suave);
    color: var(--color-primario-oscuro);
    border-color: #d5e1f2;
}

/* ---------- Badges ---------- */
.badge-primary {
    background-color: var(--color-primario) !important;
}
.badge-info {
    background-color: var(--color-primario-suave) !important;
    color: var(--color-primario-oscuro) !important;
}

/* ---------- Tablas / DataTables ---------- */
table.dataTable thead th,
.table thead th {
    color: var(--color-primario-oscuro);
    border-bottom: 2px solid var(--color-primario-suave) !important;
}
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: var(--color-primario-suave) !important;
}

/* ---------- Encabezados de tabla con fondo azul eléctrico ----------
   La regla ".table thead th" de arriba fuerza texto azul oscuro en TODO
   encabezado de tabla, sin importar el fondo del <thead>. Eso rompe el
   contraste cuando el encabezado usa fondo azul (clases .bg-main o
   .bg-primary, usadas en comprobantes, paquetes, créditos, caja, arqueo
   y la mayoría de tablas del sistema): el texto queda azul oscuro sobre
   azul, casi ilegible. Esta regla es más específica y con !important,
   así que gana sobre la regla genérica de arriba y restaura el texto
   blanco en cualquier encabezado con fondo azul eléctrico. */
thead.bg-main th,
thead.bg-primary th,
tr.bg-main th,
tr.bg-primary th,
.table thead.bg-main th,
.table thead.bg-primary th,
table.dataTable thead.bg-main th,
table.dataTable thead.bg-primary th,
th.bg-main,
th.bg-primary {
    color: var(--color-blanco) !important;
    font-weight: 600;
}

/* ---------- Salvavidas: respeta .text-white en cualquier encabezado ----------
   Mismo problema de fondo: si un <thead>/<tr> usa .text-white junto a un
   fondo de color (ej. bg-warning, bg-secondary, bg-info, bg-success), la
   regla genérica de arriba también lo pisaba. Se restaura el comportamiento
   esperado de Bootstrap sin tocar la estructura de esas tablas. */
thead.text-white th,
tr.text-white th {
    color: var(--color-blanco) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
    color: var(--color-blanco) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--color-primario-suave) !important;
    border-color: var(--color-primario-suave) !important;
    color: var(--color-primario-oscuro) !important;
}

/* ---------- Modales ---------- */
.modal-header.bg-primary,
.modal-header {
    border-bottom: 1px solid var(--color-primario-suave);
}
.modal-header.bg-primary {
    background-color: var(--color-primario) !important;
    color: var(--color-blanco) !important;
}

/* ---------- Enlaces ---------- */
a {
    color: var(--color-primario);
}
a:hover {
    color: var(--color-primario-oscuro);
}

/* ---------- SweetAlert2: botón de confirmación por defecto ---------- */
.swal2-styled.swal2-confirm {
    background-color: var(--color-primario) !important;
}

/* ---------- Breadcrumb activo ---------- */
.breadcrumb-item.active {
    color: var(--color-primario);
}

/* ---------- Scrollbar (navegadores basados en Chromium) ---------- */
::-webkit-scrollbar-thumb {
    background: var(--color-primario-suave);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primario);
}