/* public/css/theme-switcher.css */

/* ==========================================================================
   1. Variables de Color y Transiciones
   ========================================================================== */
:root {
    /* Tema Claro */
    --bg-primary-light: #f5f7fb;
    --bg-secondary-light: #ffffff;
    --text-primary-light: #495057;
    --text-muted-light: #6c757d;
    --border-color-light: #dee2e6;
    --link-color-light: #3b7ddd;
    --table-striped-light: #f8f9fa;

    /* Tema Oscuro */
    --bg-primary-dark: #1c2128;
    --bg-secondary-dark: #2d333b;
    --text-primary-dark: #e6edf3;
    --text-muted-dark: #b0bac4;
    --border-color-dark: #444c56;
    --link-color-dark: #58a6ff;
    --table-striped-dark: #282e36;
    --table-hover-dark: #343a40;
}

/* Transiciones suaves */
* {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ==========================================================================
   2. Estilos Base y Componentes Generales
   ========================================================================== */
html.light-mode { color-scheme: light; }
.light-mode body { background-color: var(--bg-primary-light); color: var(--text-primary-light); }

html.dark-mode { color-scheme: dark; }
.dark-mode body { background-color: var(--bg-primary-dark); color: var(--text-primary-dark); }

/* Componentes base */
.dark-mode .main, .dark-mode .content { background-color: var(--bg-primary-dark); }
.dark-mode .navbar-bg { background-color: var(--bg-secondary-dark); border-bottom: 1px solid var(--border-color-dark); }
.dark-mode .sidebar { background: var(--bg-secondary-dark); border-right: 1px solid var(--border-color-dark); }
.dark-mode .sidebar-link, .dark-mode .sidebar-header { color: var(--text-muted-dark); }
.dark-mode .sidebar-link:hover, .dark-mode .sidebar-item.active .sidebar-link { color: var(--text-primary-dark); }
.dark-mode .card { background-color: var(--bg-secondary-dark); border: 1px solid var(--border-color-dark); }
.dark-mode .card-body { background-color: var(--bg-secondary-dark); }
.dark-mode .card-header, .dark-mode .card-footer { background-color: var(--bg-secondary-dark); border-color: var(--border-color-dark); }
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6,
.dark-mode .h1, .dark-mode .h2, .dark-mode .h3, .dark-mode .h4, .dark-mode .h5, .dark-mode .h6,
.dark-mode .text-dark, .dark-mode .card-title, .dark-mode .dropdown-item, .dark-mode .modal-title { color: var(--text-primary-dark) !important; }
.dark-mode p, .dark-mode span, .dark-mode label, .dark-mode .text-muted { color: var(--text-muted-dark); }
.dark-mode a { color: var(--link-color-dark); }
.dark-mode .dropdown-menu { background-color: var(--bg-secondary-dark); border: 1px solid var(--border-color-dark); }
.dark-mode .dropdown-divider { border-top: 1px solid var(--border-color-dark); }
.dark-mode .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.dark-mode .list-group-item.notification-unread { background-color: var(--bg-secondary-dark); }
.dark-mode .text-muted.small.mt-1 { color: #ffffff;; }



/* ==========================================================================
   3. Estilos Específicos por Página
   ========================================================================== */

/* --- Formularios --- */
.dark-mode .form-control, .dark-mode .form-select { background-color: var(--bg-primary-dark); color: var(--text-primary-dark); border: 1px solid var(--border-color-dark); }
.dark-mode .form-control:focus, .dark-mode .form-select:focus { background-color: var(--bg-primary-dark); color: var(--text-primary-dark); border-color: var(--link-color-dark); box-shadow: none; }
.dark-mode .upload-area { border-color: var(--border-color-dark); background-color: var(--bg-primary-dark); }
.dark-mode .upload-area:hover { background-color: var(--bg-secondary-dark); }

/* --- Tablas --- */
.dark-mode .table { color: var(--text-primary-dark); border-color: var(--border-color-dark); }
.dark-mode .table tr { background-color: var(--bg-secondary-dark) !important; }
.dark-mode .table th, .dark-mode .table td { background-color: inherit !important; border-color: var(--border-color-dark) !important; color: var(--text-primary-dark) !important; }
.dark-mode .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--table-striped-dark) !important; }
.dark-mode .table-hover > tbody > tr:hover { background-color: var(--table-hover-dark) !important; }

/* --- Modales --- */
.dark-mode .modal-content { background-color: var(--bg-secondary-dark) !important; }
.dark-mode .modal-header, .dark-mode .modal-footer { background-color: var(--bg-secondary-dark) !important; border-color: var(--border-color-dark) !important; }
.dark-mode .modal-body { background-color: var(--bg-secondary-dark) !important; }
.dark-mode .modal-content .card { background-color: var(--bg-primary-dark) !important; }
.dark-mode .modal-content .card-body { background-color: var(--bg-primary-dark) !important; }

/* --- Calendario --- */
.dark-mode .calendar-container { background-color: var(--bg-secondary-dark) !important; }
.dark-mode .weekdays div { background-color: var(--bg-secondary-dark); border-color: var(--border-color-dark); color: var(--text-muted-dark); }
.dark-mode .days div { background-color: var(--bg-secondary-dark); border-color: var(--border-color-dark); }
.dark-mode .days div:hover { background-color: var(--table-hover-dark); }
.dark-mode .days div.today { background-color: var(--link-color-dark); color: #fff; }
.dark-mode .days div.has-events { border-color: var(--link-color-dark); font-weight: bold; }
.dark-mode .nav-button { background-color: var(--bg-primary-dark); border: 1px solid var(--border-color-dark); color: var(--text-primary-dark); }
.dark-mode .btn-secondary { background-color: #373b41; border-color: #444c56; color: #e6edf3; }

/* --- Galería --- */
.dark-mode .nav-tabs { border-bottom-color: var(--border-color-dark); }
.dark-mode .nav-tabs .nav-link { color: var(--text-muted-dark); border-color: transparent; }
.dark-mode .nav-tabs .nav-link:hover { border-color: var(--border-color-dark); }
.dark-mode .nav-tabs .nav-link.active { color: var(--text-primary-dark); background-color: var(--bg-primary-dark); border-color: var(--border-color-dark) var(--border-color-dark) transparent; }
.dark-mode .tab-content, .dark-mode .tab-pane { background-color: var(--bg-primary-dark); }
.dark-mode .accordion-button { background-color: var(--bg-secondary-dark); color: var(--text-primary-dark); }
.dark-mode .accordion-button:not(.collapsed) { background-color: var(--table-hover-dark); }
.dark-mode .accordion-body { background-color: var(--bg-primary-dark); }

/* --- [CORRECCIÓN] Prospectos (Kanban Board - mis-prospectos.html) --- */
.dark-mode .kanban-board { background-color: var(--bg-primary-dark); }
.dark-mode .kanban-column { background-color: var(--bg-secondary-dark); border: 1px solid var(--border-color-dark); }
.dark-mode .kanban-column-header h5 { color: var(--text-primary-dark); }
.dark-mode .kanban-card { background-color: var(--bg-primary-dark) !important; border: 1px solid var(--border-color-dark) !important; box-shadow: none !important; }
.dark-mode .kanban-card:hover { background-color: var(--table-hover-dark) !important; }
.dark-mode .kanban-card-title { color: var(--text-primary-dark); }
.dark-mode .kanban-card-meta span, .dark-mode .kanban-card-meta i { color: var(--text-muted-dark); }
.dark-mode .prospect-card {background-color: var(--bg-secondary-dark); }
/* --- [CORRECCIÓN] Prospectos (page-prospectos.html) --- */
.dark-mode .card-header .search-section, .dark-mode .card-header .search-container, .dark-mode .card-header .search-box { background-color: var(--bg-secondary-dark); }
.dark-mode .modal-left { background-color: var(--bg-primary-dark) !important; }
.dark-mode .modal-right { background-color: var(--bg-secondary-dark) !important; }
.dark-mode .modal-left h1, .dark-mode .modal-right label { color: var(--text-primary-dark); }
.dark-mode .close-button { color: var(--text-primary-dark); }
.dark-mode #prospectoModal .modal-header, .dark-mode #prospectoModal .modal-body, .dark-mode #prospectoModal .modal-footer { background-color: var(--bg-secondary-dark) !important; }
.dark-mode .contact-stats-container { border-bottom-color: var(--border-color-dark); }
.dark-mode .details-grid .label { color: var(--text-muted-dark); }
.dark-mode .details-grid .value { color: var(--text-primary-dark); }
.dark-mode .observations small { color: var(--text-muted-dark); }
.dark-mode .observations p { color: var(--text-primary-dark); }
.dark-mode .modal-footer button { background-color: var(--bg-primary-dark); color: var(--text-primary-dark); border-color: var(--border-color-dark); }
.dark-mode .modal-footer button:hover { background-color: var(--table-hover-dark); }
.dark-mode #seguimientoModal .modal-header, .dark-mode #seguimientoModal .modal-body { background-color: var(--bg-secondary-dark) !important; }
.dark-mode .package-item { background: var(--bg-secondary-dark); border-color: var(--border-color-dark); }
.dark-mode .package-title { color: var(--text-primary-dark); }
.dark-mode .package-info { color: var(--text-muted-dark); }
.dark-mode .search-input-container { background-color: var(--bg-secondary-dark) !important; }
.dark-mode .modal-body{background-color: var(--bg-secondary-dark);}

/* DASHBOARD*/
.dark-mode .detail-item{background-color: #444c56}
.dark-mode .package-info{background-color: #444c56}
.dark-mode .comision-body{background-color: #6c757d}

/*PAGE HISTORIAL COMISIONES*/
.dark-mode .empty-state.no-approved {background-color: var(--bg-secondary-dark);}
.dark-mode .badge.bg-warning.me-2 {color: #171616;}

/*PAGE USUARIOS*/
.dark-mode .user-name{color: #ffffff;}

/*ADMINISTRAR PUBLICACIONES*/
.dark-mode .dataTables_wrapper {background-color: var(--bg-secondary-dark);}
.dark-mode .row{background-color: var(--bg-secondary-dark);}

/*CREAR PUBLICACION*/
.dark-mode #content-sidebar {background-color: #282e36;}
.dark-mode #content-sidebar .form-group {background-color:#6c757d;}
.dark-mode #content-sidebar .form-group:hover {background-color:#81888d;}
.dark-mode #content-sidebar .input-group input {background-color:#adadad;}
.dark-mode #content-sidebar .form-group.media-library {background-color:#6c757d !important;}

/*COMISIONES*/
.dark-mode .search-section{background-color: var(--bg-secondary-dark);}
.dark-mode .resumen-item {background-color:#6c757d;}

/*PERFIL*/
.dark-mode .col-lg-6 {background-color: var(--bg-primary-dark);}



/* ==========================================================================
   4. Interruptor de Tema (Theme Switcher)
   ========================================================================== */
.theme-switcher { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; }
.theme-switcher .fas { color: #f39c12; }
.dark-mode .theme-switcher .fa-sun { color: #999; }
.dark-mode .theme-switcher .fa-moon { color: var(--link-color-dark); }
.switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 28px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--link-color-dark); }
input:focus + .slider { box-shadow: 0 0 1px var(--link-color-dark); }
input:checked + .slider:before { transform: translateX(22px); }