/* =============================================================
   DARK MODE — Dashboard POS
   Variables de tema + overrides bajo [data-theme="dark"].
   Alcance: chrome global (topbar/sidebar) + contenido scopeado
   al dashboard mediante .theme-scope-dashboard.
   ============================================================= */

:root {
    --bg-page: #f4f6f9;
    --bg-card: #ffffff;
    --bg-elevated: #e9edf2;
    --text-primary: #1b1b1a;
    --text-secondary: #52514e;
    --text-muted: #8a8f98;
    --border-color: rgba(0, 0, 0, 0.08);
    --grid-line: rgba(137, 135, 129, 0.15);
    --track-bg: #e9edf2;

    /* KPI (modo claro: los usa Bootstrap por defecto, no forzamos) */
    --kpi-blue: #1d5fa8;
    --kpi-teal: #14848e;
    --kpi-green: #2f7d5b;
    --kpi-purple: #5b4a9e;
    --kpi-red: #b03a4a;
    --kpi-orange: #b57427;
    --kpi-violet: #5f52b5;
}

[data-theme="dark"] {
    --bg-page: #16181d;
    --bg-card: #1e2128;
    --bg-elevated: #262a33;
    --text-primary: #e8e8e6;
    --text-secondary: #a8a8a4;
    --text-muted: #75757a;
    --border-color: rgba(255, 255, 255, 0.08);
    --grid-line: rgba(255, 255, 255, 0.06);
    --track-bg: #262a33;
}

/* =============================================================
   BOTÓN TOGGLE (ghost circular) — global
   ============================================================= */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.theme-toggle-btn i {
    font-size: 18px;
    line-height: 1;
}
.theme-toggle-btn:hover {
    background-color: rgba(0, 0, 0, 0.06);
    color: var(--text-secondary);
}
[data-theme="dark"] .theme-toggle-btn {
    color: #cfcfcb;
}
[data-theme="dark"] .theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* =============================================================
   TRANSICIÓN DE ONDA EXPANSIVA (View Transitions API)
   ============================================================= */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}
/* El nuevo tema se dibuja encima y se revela con el clip-path
   animado por JS (WAAPI). El viejo queda debajo. */
::view-transition-new(root) {
    z-index: 1;
}
::view-transition-old(root) {
    z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}

/* Fallback sin View Transitions: transición suave de color */
[data-theme] body,
[data-theme] .topbar,
[data-theme] .left-sidebar,
[data-theme] .theme-scope-dashboard .card {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* =============================================================
   CHROME GLOBAL EN OSCURO (topbar + sidebar + body)
   ============================================================= */
[data-theme="dark"] body {
    background-color: var(--bg-page);
}

/* Topbar: superficie oscura (vence al skin del template) */
[data-theme="dark"] #main-wrapper .topbar,
[data-theme="dark"] #main-wrapper .topbar .top-navbar,
[data-theme="dark"] #main-wrapper .topbar .navbar-header,
[data-theme="dark"] #main-wrapper .topbar[data-navbarbg],
[data-theme="dark"] #main-wrapper .topbar .navbar-collapse[data-navbarbg] {
    background: var(--bg-card) !important;
}
[data-theme="dark"] #main-wrapper .topbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .topbar .nav-link,
[data-theme="dark"] .topbar .nav-link i {
    color: var(--text-secondary) !important;
}

/* Sidebar: un paso más oscuro que el contenido (vence al skin) */
[data-theme="dark"] #main-wrapper .left-sidebar,
[data-theme="dark"] #main-wrapper .left-sidebar[data-sidebarbg],
[data-theme="dark"] #main-wrapper .left-sidebar[data-sidebarbg] ul,
[data-theme="dark"] #main-wrapper .scroll-sidebar,
[data-theme="dark"] #main-wrapper .sidebar-nav,
[data-theme="dark"] #main-wrapper .sidebar-nav ul {
    background: #191c22 !important;
}
[data-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link,
[data-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link i {
    color: var(--text-secondary);
}
[data-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link:hover,
[data-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link:hover i {
    background-color: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}
[data-theme="dark"] .sidebar-nav ul .sidebar-item.selected > .sidebar-link,
[data-theme="dark"] .sidebar-nav ul .sidebar-item .sidebar-link.active,
[data-theme="dark"] .sidebar-nav ul .sidebar-item > .sidebar-link.active {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
/* Panel de perfil del sidebar: velo oscuro sobre la imagen de fondo */
[data-theme="dark"] .user-profile {
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .user-profile .profile-text > a {
    color: #ffffff !important;
}

/* =============================================================
   CONTENIDO GLOBAL EN OSCURO (todas las vistas)
   ============================================================= */
[data-theme="dark"] .page-wrapper {
    background-color: var(--bg-page);
    color: var(--text-primary);
}
[data-theme="dark"] .card {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}
[data-theme="dark"] .card .card-title,
[data-theme="dark"] .card h1,
[data-theme="dark"] .card h2,
[data-theme="dark"] .card h3,
[data-theme="dark"] .card h4,
[data-theme="dark"] .card h5,
[data-theme="dark"] .card h6 {
    color: var(--text-primary);
}
[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .text-dark {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="dark"] .page-titles .text-themecolor {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .breadcrumb-item,
[data-theme="dark"] .breadcrumb-item.active,
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .breadcrumb-item a {
    color: #6ab0f3 !important;
}
[data-theme="dark"] .page-titles {
    background: var(--bg-page);
    box-shadow: none;
}
[data-theme="dark"] hr {
    border-color: var(--border-color);
}

/* =============================================================
   COMPONENTES COMUNES (tablas, formularios, modales, etc.)
   ============================================================= */
/* Tablas */
[data-theme="dark"] .table {
    color: var(--text-primary);
    border-color: var(--border-color);
}
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    border-color: var(--border-color);
}
[data-theme="dark"] .table thead th {
    color: var(--text-secondary);
    border-color: var(--border-color);
}
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
}
[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}
[data-theme="dark"] .table-bordered,
[data-theme="dark"] .table-bordered th,
[data-theme="dark"] .table-bordered td {
    border-color: var(--border-color);
}

/* Formularios */
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] textarea.form-control {
    background-color: var(--bg-elevated);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .custom-select:focus {
    background-color: var(--bg-elevated);
    border-color: #6ab0f3;
    color: var(--text-primary);
    box-shadow: 0 0 0 0.15rem rgba(106, 176, 243, 0.25);
}
[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted);
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
}
[data-theme="dark"] .input-group-text {
    background-color: var(--bg-elevated);
    border-color: var(--border-color);
    color: var(--text-secondary);
}
[data-theme="dark"] label,
[data-theme="dark"] .col-form-label {
    color: var(--text-secondary);
}
[data-theme="dark"] .form-text {
    color: var(--text-muted);
}

/* Modales */
[data-theme="dark"] .modal-content {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--border-color);
}
[data-theme="dark"] .modal-header .close,
[data-theme="dark"] .close {
    color: var(--text-primary);
    text-shadow: none;
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--bg-elevated);
    color: #ffffff;
}
[data-theme="dark"] .dropdown-divider {
    border-color: var(--border-color);
}

/* List group */
[data-theme="dark"] .list-group-item {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Nav tabs */
[data-theme="dark"] .nav-tabs {
    border-color: var(--border-color);
}
[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary);
}
[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--bg-card);
    border-color: var(--border-color) var(--border-color) var(--bg-card);
    color: var(--text-primary);
}

/* Paginación */
[data-theme="dark"] .page-link {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* DataTables */
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
    color: var(--text-secondary);
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bg-elevated) !important;
    border-color: var(--border-color) !important;
    color: #ffffff !important;
}

/* Superficies utilitarias claras del template */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light {
    background-color: var(--bg-card) !important;
    color: var(--text-primary);
}
[data-theme="dark"] .bg-info-light {
    background-color: var(--bg-elevated) !important;
}

/* =============================================================
   TARJETAS KPI: estilo neutro oscuro (color solo como acento)
   ============================================================= */
[data-theme="dark"] .theme-scope-dashboard .card.bg-success,
[data-theme="dark"] .theme-scope-dashboard .card.bg-info,
[data-theme="dark"] .theme-scope-dashboard .card.bg-danger,
[data-theme="dark"] .theme-scope-dashboard .card.bg-warning,
[data-theme="dark"] .theme-scope-dashboard .card.bg-primary,
[data-theme="dark"] .theme-scope-dashboard .card.kpi-purple {
    background-color: var(--bg-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}
/* Hover: aclarar el fondo a #262a33 */
[data-theme="dark"] .theme-scope-dashboard .card.card-hover.bg-success:hover,
[data-theme="dark"] .theme-scope-dashboard .card.card-hover.bg-info:hover,
[data-theme="dark"] .theme-scope-dashboard .card.card-hover.bg-danger:hover,
[data-theme="dark"] .theme-scope-dashboard .card.card-hover.bg-warning:hover,
[data-theme="dark"] .theme-scope-dashboard .card.card-hover.bg-primary:hover,
[data-theme="dark"] .theme-scope-dashboard .card.card-hover.kpi-purple:hover {
    background-color: #262a33 !important;
    filter: none;
}
/* Número principal */
[data-theme="dark"] .theme-scope-dashboard .card.bg-success h3,
[data-theme="dark"] .theme-scope-dashboard .card.bg-info h3,
[data-theme="dark"] .theme-scope-dashboard .card.bg-danger h3,
[data-theme="dark"] .theme-scope-dashboard .card.bg-warning h3,
[data-theme="dark"] .theme-scope-dashboard .card.bg-primary h3,
[data-theme="dark"] .theme-scope-dashboard .card.kpi-purple h3 {
    color: #ffffff !important;
    font-size: 26px;
    font-weight: 600;
}
/* Label superior */
[data-theme="dark"] .theme-scope-dashboard .card.bg-success h5,
[data-theme="dark"] .theme-scope-dashboard .card.bg-info h5,
[data-theme="dark"] .theme-scope-dashboard .card.bg-danger h5,
[data-theme="dark"] .theme-scope-dashboard .card.bg-warning h5,
[data-theme="dark"] .theme-scope-dashboard .card.bg-primary h5,
[data-theme="dark"] .theme-scope-dashboard .card.kpi-purple h5 {
    color: rgba(255, 255, 255, 0.55) !important;
    font-weight: 400;
    font-size: 14px;
}
/* Sub-valores (segundo monto, proyección, ganancia promedio) */
[data-theme="dark"] .theme-scope-dashboard .card.bg-success small,
[data-theme="dark"] .theme-scope-dashboard .card.bg-info small,
[data-theme="dark"] .theme-scope-dashboard .card.bg-danger small,
[data-theme="dark"] .theme-scope-dashboard .card.bg-warning small,
[data-theme="dark"] .theme-scope-dashboard .card.bg-primary small,
[data-theme="dark"] .theme-scope-dashboard .card.kpi-purple small {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 13px;
}
/* Chip del ícono (contenedor .round) */
[data-theme="dark"] .theme-scope-dashboard .card.bg-success .round,
[data-theme="dark"] .theme-scope-dashboard .card.bg-info .round,
[data-theme="dark"] .theme-scope-dashboard .card.bg-danger .round,
[data-theme="dark"] .theme-scope-dashboard .card.bg-warning .round,
[data-theme="dark"] .theme-scope-dashboard .card.bg-primary .round,
[data-theme="dark"] .theme-scope-dashboard .card.kpi-purple .round {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
[data-theme="dark"] .theme-scope-dashboard .card .round i {
    font-size: 20px !important;
    opacity: 1;
}
/* Color de acento por tarjeta (ícono + chip al ~13%) */
[data-theme="dark"] .theme-scope-dashboard .card.bg-success .round { background-color: rgba(45, 212, 191, 0.13); }
[data-theme="dark"] .theme-scope-dashboard .card.bg-success .round i { color: #2dd4bf !important; }
[data-theme="dark"] .theme-scope-dashboard .card.bg-info .round { background-color: rgba(96, 165, 250, 0.13); }
[data-theme="dark"] .theme-scope-dashboard .card.bg-info .round i { color: #60a5fa !important; }
[data-theme="dark"] .theme-scope-dashboard .card.kpi-purple .round { background-color: rgba(167, 139, 250, 0.13); }
[data-theme="dark"] .theme-scope-dashboard .card.kpi-purple .round i { color: #a78bfa !important; }
[data-theme="dark"] .theme-scope-dashboard .card.bg-danger .round { background-color: rgba(248, 113, 113, 0.13); }
[data-theme="dark"] .theme-scope-dashboard .card.bg-danger .round i { color: #f87171 !important; }
[data-theme="dark"] .theme-scope-dashboard .card.bg-warning .round { background-color: rgba(251, 191, 36, 0.13); }
[data-theme="dark"] .theme-scope-dashboard .card.bg-warning .round i { color: #fbbf24 !important; }
[data-theme="dark"] .theme-scope-dashboard .card.bg-primary .round { background-color: rgba(139, 127, 240, 0.13); }
[data-theme="dark"] .theme-scope-dashboard .card.bg-primary .round i { color: #8b7ff0 !important; }
/* Badges internos (chip de proyección) */
[data-theme="dark"] .theme-scope-dashboard .card .badge {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

/* Bordes más redondeados en los cards que contienen gráficos */
.theme-scope-dashboard .card:has(canvas),
.theme-scope-dashboard .card:has(.chart),
.theme-scope-dashboard .card:has(.barras-categorias),
.theme-scope-dashboard .card:has(#basic-pie) {
    border-radius: 16px;
}

/* Chips del selector de fechas */
[data-theme="dark"] .theme-scope-dashboard .chip-rango {
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
}
[data-theme="dark"] .theme-scope-dashboard .chip-rango:hover {
    background-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .theme-scope-dashboard .chip-rango.active {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
    font-weight: 500;
}

/* Botones de meses (Enero–Diciembre) */
[data-theme="dark"] .theme-scope-dashboard .mes-btn {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .theme-scope-dashboard .mes-btn:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}
[data-theme="dark"] .theme-scope-dashboard .mes-btn.active,
[data-theme="dark"] .theme-scope-dashboard .mes-btn:focus,
[data-theme="dark"] .theme-scope-dashboard .mes-btn:active {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: var(--text-primary) !important;
}