/* ==================== TEMA OSCURO ====================
   Solo aplica con <html data-theme="dark"> (lo pone js/functions/theme.js
   según la preferencia del usuario). Sin ese atributo nada de este archivo
   coincide, así que el tema claro queda exactamente como estaba.

   - Paleta: variables --dk-* de abajo. Es el único lugar donde se definen
     los colores del tema oscuro.
   - theme-dark-auto.css (generado) traduce los colores de los CSS propios
     de la app a esta paleta.
   - Este archivo: variables existentes de la app, base del layout y
     librerías de terceros (Bootstrap, SB Admin 2, MDB, DataTables,
     Flatpickr, SweetAlert, Notyf) que el generador no cubre. Se carga
     después del generado, así que también sirve para corregirlo. */

html[data-theme="dark"] {
    color-scheme: dark;

    --dk-bg: #11161d;              /* fondo de página y sidebar */
    --dk-surface: #181e27;         /* tarjetas, tablas, modales (blanco en claro) */
    --dk-surface-2: #141a22;       /* rellenos sutiles (#f8f8f8 en claro) */
    --dk-surface-3: #212833;       /* hover, rellenos marcados */
    --dk-surface-4: #29313d;
    --dk-surface-5: #343d4b;
    --dk-border-soft: #232a34;
    --dk-border: #2d3540;
    --dk-border-strong: #3b4552;
    --dk-text-strong: #eef2f6;
    --dk-text: #d3dbe4;
    --dk-text-soft: #a6b2bf;
    --dk-text-muted: #7f8b99;

    /* Variables propias de la app (general.css, date-picker.css) */
    --White: var(--dk-surface);
    --Gray-100: var(--dk-surface-3);
    --Gray-300: var(--dk-border-strong);
    --Gray-500: var(--dk-text-muted);
    --Gray-700: var(--dk-text);
    --app-bg: var(--dk-bg);
    --app-surface: var(--dk-surface);
    --app-surface-soft: var(--dk-surface-2);
    --app-surface-accent: #16303d;
    --app-border: var(--dk-border);
    --app-border-strong: var(--dk-border-strong);
    --app-text: var(--dk-text);
    --app-text-soft: var(--dk-text-soft);
    --app-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    --app-shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.35);
    --spec-surface: var(--dk-surface);
    --spec-surface-soft: var(--dk-surface-2);
    --spec-border: var(--dk-border);
    --spec-text: var(--dk-text);
    --spec-text-soft: var(--dk-text-soft);
    --spec-primary-soft: #16303d;
    --dp-texto: var(--dk-text);
    --dp-texto-suave: var(--dk-text-soft);
    --dp-texto-apagado: var(--dk-text-muted);
    --dp-primario-suave: #16303d;
    --dp-borde: var(--dk-border);
}

/* ---------------- Base del layout ---------------- */
/* body#page-top = páginas con layout. Login y acceso denegado conservan su
   panel de marca (degradado azul de login.css). */
html[data-theme="dark"],
html[data-theme="dark"] body#page-top,
html[data-theme="dark"] #wrapper,
html[data-theme="dark"] #content-wrapper,
html[data-theme="dark"] #content {
    background: var(--dk-bg) !important;
    color: var(--dk-text);
}

/* Login y acceso denegado (body sin #page-top): conservan el panel de marca
   de login.css, un poco más profundo para el tema oscuro. Las reglas
   generadas para el body del layout también llegan aquí, por eso va
   explícito. */
html[data-theme="dark"] body:not(#page-top) {
    background: linear-gradient(135deg, #123a5a 0%, #15507a 40%, #0a74a3 100%) !important;
}

html[data-theme="dark"] .app-sidebar {
    background: var(--dk-bg) !important;
    border-right-color: var(--dk-border) !important;
}

/* Logo: el texto es oscuro sobre transparente. invert + hue-rotate aclara
   el texto y conserva el tono del degradado de la "C". */
html[data-theme="dark"] .app-sidebar-brand-logo-img,
html[data-theme="dark"] .theme-logo-invert {
    filter: invert(1) hue-rotate(180deg) brightness(1.1);
}

/* :where() deja estos defaults con la menor especificidad posible: cualquier
   regla propia de un componente (y su versión oscura generada) gana. */
html[data-theme="dark"] :where(h1, h2, h3, h4, h5, h6) {
    color: var(--dk-text-strong);
}

html[data-theme="dark"] :where(a:not(.btn):not(.nav-link):not(.collapse-item):not(.dropdown-item)) {
    color: #6cc3ea;
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .dropdown-divider {
    border-color: var(--dk-border) !important;
}

html[data-theme="dark"] ::placeholder {
    color: var(--dk-text-muted) !important;
    opacity: 1;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: var(--dk-surface-5);
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background-color: transparent;
}

/* ---------------- Utilidades de Bootstrap / SB Admin 2 ---------------- */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
    background-color: var(--dk-surface) !important;
}
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800 {
    color: var(--dk-text-strong) !important;
}
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-secondary {
    color: var(--dk-text-soft) !important;
}
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-400 {
    color: var(--dk-text-muted) !important;
}
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-left,
html[data-theme="dark"] .border-right {
    border-color: var(--dk-border) !important;
}
html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-sm {
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.45) !important;
}

/* Sidebar: el submenú desplegado usa .bg-white de SB Admin */
html[data-theme="dark"] .sidebar .collapse-inner {
    background-color: transparent !important;
}

/* ---------------- Componentes de Bootstrap ---------------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .toast {
    background-color: var(--dk-surface);
    border-color: var(--dk-border);
    color: var(--dk-text);
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
    background-color: var(--dk-surface-2);
    border-color: var(--dk-border);
}

html[data-theme="dark"] .modal-content {
    background-color: var(--dk-surface);
    border-color: var(--dk-border);
    color: var(--dk-text);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--dk-border);
}
html[data-theme="dark"] .modal-backdrop.show {
    opacity: 0.7;
}
html[data-theme="dark"] .close {
    color: var(--dk-text);
    text-shadow: none;
}

html[data-theme="dark"] :where(.form-control, .custom-select, select, textarea,
    input[type="text"], input[type="search"], input[type="email"], input[type="number"],
    input[type="password"], input[type="date"], input[type="time"], input[type="tel"],
    input[type="url"]) {
    background-color: var(--dk-surface-2);
    border-color: var(--dk-border-strong);
    color: var(--dk-text);
}
html[data-theme="dark"] :where(.form-control:focus, .custom-select:focus) {
    background-color: var(--dk-surface-2);
    color: var(--dk-text-strong);
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled {
    background-color: var(--dk-surface-3) !important;
    color: var(--dk-text-muted) !important;
}
html[data-theme="dark"] select option {
    background-color: var(--dk-surface);
    color: var(--dk-text);
}
html[data-theme="dark"] .input-group-text {
    background-color: var(--dk-surface-3);
    border-color: var(--dk-border-strong);
    color: var(--dk-text-soft);
}
/* Autocompletado de Chrome: sin esto pinta el campo de amarillo/blanco */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--dk-text);
    -webkit-box-shadow: 0 0 0 1000px var(--dk-surface-2) inset;
}

html[data-theme="dark"] .dropdown-menu {
    background-color: var(--dk-surface);
    border-color: var(--dk-border);
    color: var(--dk-text);
}
html[data-theme="dark"] .dropdown-item {
    color: var(--dk-text);
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--dk-surface-3);
    color: var(--dk-text-strong);
}
html[data-theme="dark"] .dropdown-header {
    color: var(--dk-text-muted);
}

html[data-theme="dark"] .table {
    color: var(--dk-text);
}
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table thead th {
    border-color: var(--dk-border);
}
html[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--dk-surface-3);
    color: var(--dk-text-strong);
}
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--dk-surface-2);
}

html[data-theme="dark"] .nav-tabs {
    border-color: var(--dk-border);
}
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
    background-color: var(--dk-surface);
    border-color: var(--dk-border) var(--dk-border) var(--dk-surface);
    color: var(--dk-text-strong);
}

html[data-theme="dark"] .page-link {
    background-color: var(--dk-surface);
    border-color: var(--dk-border);
    color: var(--dk-text-soft);
}
html[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--dk-surface);
    border-color: var(--dk-border);
    color: var(--dk-text-muted);
}

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline-secondary {
    background-color: var(--dk-surface-3);
    border-color: var(--dk-border-strong);
    color: var(--dk-text);
}
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--dk-surface-4);
    color: var(--dk-text-strong);
}

html[data-theme="dark"] .progress {
    background-color: var(--dk-surface-3);
}
html[data-theme="dark"] .badge-light {
    background-color: var(--dk-surface-4);
    color: var(--dk-text);
}

/* ---------------- DataTables ---------------- */
/* aplicarEstilosCompactos() (catalog-base.js y sus copias en campañas,
   clientes, llamadas entrantes y bitácora) pinta th/td con estilos inline.
   Estas reglas reemplazan solo esos valores exactos; :where() las deja con
   la menor especificidad posible entre las !important. */
html[data-theme="dark"] :where(th[style*="rgb(248, 248, 248)"]) {
    background-color: var(--dk-surface-2) !important;
}
html[data-theme="dark"] :where(th[style*="rgb(116, 116, 116)"]) {
    color: var(--dk-text-soft) !important;
}
html[data-theme="dark"] :where(th[style*="rgb(236, 236, 236)"]) {
    border-bottom-color: var(--dk-border) !important;
}
html[data-theme="dark"] :where(td[style*="rgb(77, 77, 77)"]) {
    color: var(--dk-text) !important;
}
html[data-theme="dark"] :where(td[style*="rgb(242, 242, 242)"]) {
    border-top-color: var(--dk-border-soft) !important;
}

html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .dataTables_info,
html[data-theme="dark"] .dataTables_length,
html[data-theme="dark"] .dataTables_filter {
    color: var(--dk-text-soft);
}
html[data-theme="dark"] .dataTables_processing {
    background-color: var(--dk-surface) !important;
    color: var(--dk-text);
}

/* UI.errorEnTabla (alerts.js): bloque de error con estilos inline */
html[data-theme="dark"] .ui-tabla-error {
    background: var(--dk-surface) !important;
}
html[data-theme="dark"] .ui-tabla-error-icono {
    background: #3a1d1f !important;
}
html[data-theme="dark"] .ui-tabla-error-titulo {
    color: var(--dk-text-strong) !important;
}
html[data-theme="dark"] .ui-tabla-error-detalle {
    color: var(--dk-text-muted) !important;
}
html[data-theme="dark"] .ui-tabla-error-btn {
    background: transparent !important;
    border-color: #4ca8d4 !important;
    color: #6cc3ea !important;
}
html[data-theme="dark"] .ui-tabla-error-btn:hover {
    background: #16303d !important;
}

/* ---------------- Flatpickr ---------------- */
html[data-theme="dark"] .flatpickr-calendar {
    background: var(--dk-surface);
    border-color: var(--dk-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .flatpickr-calendar.arrowTop::after {
    border-bottom-color: var(--dk-surface);
}
html[data-theme="dark"] .flatpickr-calendar.arrowBottom::after {
    border-top-color: var(--dk-surface);
}
html[data-theme="dark"] .flatpickr-months .flatpickr-month,
html[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
html[data-theme="dark"] .flatpickr-current-month input.cur-year,
html[data-theme="dark"] span.flatpickr-weekday,
html[data-theme="dark"] .flatpickr-weekdays {
    background: var(--dk-surface);
    color: var(--dk-text);
    fill: var(--dk-text);
}
html[data-theme="dark"] .flatpickr-months .flatpickr-prev-month,
html[data-theme="dark"] .flatpickr-months .flatpickr-next-month {
    color: var(--dk-text);
    fill: var(--dk-text);
}
html[data-theme="dark"] .flatpickr-day {
    color: var(--dk-text);
}
html[data-theme="dark"] .flatpickr-day:hover,
html[data-theme="dark"] .flatpickr-day:focus {
    background: var(--dk-surface-3);
    border-color: var(--dk-surface-3);
}
html[data-theme="dark"] .flatpickr-day.prevMonthDay,
html[data-theme="dark"] .flatpickr-day.nextMonthDay,
html[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
html[data-theme="dark"] .flatpickr-day.flatpickr-disabled:hover {
    color: var(--dk-text-muted);
}
html[data-theme="dark"] .flatpickr-time input,
html[data-theme="dark"] .flatpickr-time .flatpickr-am-pm {
    color: var(--dk-text);
    background: var(--dk-surface);
}
html[data-theme="dark"] .flatpickr-time {
    border-top-color: var(--dk-border) !important;
}

/* ---------------- SweetAlert (swal) ---------------- */
html[data-theme="dark"] .swal-modal {
    background-color: var(--dk-surface);
    border: 1px solid var(--dk-border);
}
html[data-theme="dark"] .swal-title {
    color: var(--dk-text-strong);
}
html[data-theme="dark"] .swal-text {
    color: var(--dk-text-soft);
}
html[data-theme="dark"] .swal-footer {
    background-color: transparent;
}
html[data-theme="dark"] .swal-button--cancel {
    background-color: var(--dk-surface-3);
    color: var(--dk-text);
}
html[data-theme="dark"] .swal-icon--success::before,
html[data-theme="dark"] .swal-icon--success::after,
html[data-theme="dark"] .swal-icon--success__hide-corners {
    background-color: var(--dk-surface);
}

/* ---------------- Pestaña superior de la vista ---------------- */
/* En claro el borde inferior blanco de la pestaña tapa la línea del
   contenedor (margin-bottom:-1px) y ambos se ven como una sola pieza; el
   generador lo mapeó a color de borde, así que aquí se iguala al panel. */
html[data-theme="dark"] .workspace-tab {
    border-bottom-color: var(--dk-surface);
}

/* ---------------- Inicio: hero y ola ---------------- */
/* El azul del hero se oscurece para no encandilar sobre el fondo oscuro; la
   ola trae fill="#f8f8f8" en el SVG, así que se iguala al fondo de la página. */
html[data-theme="dark"] .hero-section {
    background: linear-gradient(135deg, #0e2438 0%, #123552 55%, #0b4d70 100%);
}
html[data-theme="dark"] .hero-wave svg path {
    fill: var(--dk-surface-2);
}

/* ---------------- Selector de tema (menú de perfil) ---------------- */
.theme-toggle-item {
    justify-content: space-between;
}
.theme-toggle-item .theme-toggle-label {
    display: flex;
    align-items: center;
    gap: inherit;
}
.theme-toggle-switch {
    position: relative;
    width: 30px;
    height: 17px;
    border-radius: 999px;
    background: #cfd8e1;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}
.theme-toggle-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform 0.2s ease;
}
html[data-theme="dark"] .theme-toggle-switch {
    background: #4ca8d4;
}
html[data-theme="dark"] .theme-toggle-switch::after {
    transform: translateX(13px);
}