/* ===================================================
   SGI PORTAL - SISTEMA DE TEMAS POR ÁREA
   - Admin: Azul/Celeste (configurable)
   - Cliente: Naranja/Amarillo (configurable)
   - Tema Claro/Oscuro
   =================================================== */

/* ===== VARIABLES GLOBALES ===== */
:root {
    /* Colores base neutros */
    --bs-body-bg: #ffffff;
    --bs-body-color: #212529;
    --bs-border-color: #dee2e6;
    --bs-secondary-bg: #f8f9fa;

    /* Colores de enlaces y estados */
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;

    /* Sombras */
    --bs-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075);
    --bs-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

/* ===== TEMA OSCURO GLOBAL ===== */
[data-bs-theme="dark"] {
    --bs-body-bg: #0d1117;
    --bs-body-color: #c9d1d9;
    --bs-border-color: #30363d;
    --bs-secondary-bg: #161b22;

    --bs-link-color: #58a6ff;
    --bs-link-hover-color: #79c0ff;

    --bs-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.3);
    --bs-shadow: 0 .5rem 1rem rgba(0,0,0,.5);
}

/* ===== ÁREA ADMIN - TEMA AZUL/CELESTE ===== */
:root {
    /* Admin - Tema Claro */
    --admin-primary: #0d6efd;
    --admin-primary-dark: #0a58ca;
    --admin-primary-light: #6ea8fe;
    --admin-secondary: #17a2b8;
    --admin-accent: #20c997;

    /* Admin - Colores para componentes */
    --admin-navbar-bg: #0d47a1;
    --admin-navbar-color: #ffffff;
    --admin-sidebar-bg: #e3f2fd;
    --admin-card-border: #90caf9;
    --admin-table-header-bg: #bbdefb;
    --admin-btn-primary: #1976d2;
    --admin-btn-primary-hover: #1565c0;
}

[data-bs-theme="dark"] {
    /* Admin - Tema Oscuro */
    --admin-primary: #4a9eff;
    --admin-primary-dark: #2979ff;
    --admin-primary-light: #82b1ff;
    --admin-secondary: #26c6da;
    --admin-accent: #4db6ac;

    /* Admin - Colores para componentes oscuros */
    --admin-navbar-bg: #1565c0;
    --admin-navbar-color: #e3f2fd;
    --admin-sidebar-bg: #0d1f2d;
    --admin-card-border: #1976d2;
    --admin-table-header-bg: #1a3a52;
    --admin-btn-primary: #2196f3;
    --admin-btn-primary-hover: #42a5f5;
}

/* ===== ÁREA CLIENTE - TEMA NARANJA/AMARILLO ===== */
:root {
    /* Cliente - Tema Claro */
    --cliente-primary: #ff9800;
    --cliente-primary-dark: #f57c00;
    --cliente-primary-light: #ffb74d;
    --cliente-secondary: #ffc107;
    --cliente-accent: #ff6f00;

    /* Cliente - Colores para componentes */
    --cliente-navbar-bg: #e65100;
    --cliente-navbar-color: #ffffff;
    --cliente-sidebar-bg: #fff3e0;
    --cliente-card-border: #ffb74d;
    --cliente-table-header-bg: #ffe0b2;
    --cliente-btn-primary: #f57c00;
    --cliente-btn-primary-hover: #ef6c00;
}

[data-bs-theme="dark"] {
    /* Cliente - Tema Oscuro */
    --cliente-primary: #ffb74d;
    --cliente-primary-dark: #ff9800;
    --cliente-primary-light: #ffd54f;
    --cliente-secondary: #ffd740;
    --cliente-accent: #ffab40;

    /* Cliente - Colores para componentes oscuros */
    --cliente-navbar-bg: #bf360c;
    --cliente-navbar-color: #fff3e0;
    --cliente-sidebar-bg: #1f1308;
    --cliente-card-border: #f57c00;
    --cliente-table-header-bg: #3d2817;
    --cliente-btn-primary: #fb8c00;
    --cliente-btn-primary-hover: #ff9800;
}

/* ===== APLICAR ESTILOS POR ÁREA ===== */

/* Navbar Admin */
body.area-admin .navbar {
    background-color: var(--admin-navbar-bg) !important;
}

body.area-admin .navbar .nav-link {
    color: var(--admin-navbar-color) !important;
}

body.area-admin .navbar .nav-link:hover {
    color: var(--admin-primary-light) !important;
}

/* Navbar Cliente */
body.area-cliente .navbar {
    background-color: var(--cliente-navbar-bg) !important;
}

body.area-cliente .navbar .nav-link {
    color: var(--cliente-navbar-color) !important;
}

body.area-cliente .navbar .nav-link:hover {
    color: var(--cliente-primary-light) !important;
}

/* Títulos y encabezados Admin */
body.area-admin h2, 
body.area-admin .text-info {
    color: var(--admin-primary) !important;
}

body.area-admin hr.text-info {
    border-color: var(--admin-primary) !important;
    opacity: 0.25;
}

/* Títulos y encabezados Cliente */
body.area-cliente h2,
body.area-cliente .text-info {
    color: var(--cliente-primary) !important;
}

body.area-cliente hr.text-info {
    border-color: var(--cliente-primary) !important;
    opacity: 0.25;
}

/* Botones primarios Admin */
body.area-admin .btn-primary {
    background-color: var(--admin-btn-primary);
    border-color: var(--admin-btn-primary);
}

body.area-admin .btn-primary:hover {
    background-color: var(--admin-btn-primary-hover);
    border-color: var(--admin-btn-primary-hover);
}

/* Botones primarios Cliente */
body.area-cliente .btn-primary {
    background-color: var(--cliente-btn-primary);
    border-color: var(--cliente-btn-primary);
}

body.area-cliente .btn-primary:hover {
    background-color: var(--cliente-btn-primary-hover);
    border-color: var(--cliente-btn-primary-hover);
}

/* Cards Admin */
body.area-admin .card {
    border-color: var(--admin-card-border);
}

body.area-admin .card-header {
    background-color: var(--admin-table-header-bg);
    border-bottom-color: var(--admin-card-border);
}

/* Cards Cliente */
body.area-cliente .card {
    border-color: var(--cliente-card-border);
}

body.area-cliente .card-header {
    background-color: var(--cliente-table-header-bg);
    border-bottom-color: var(--cliente-card-border);
}

/* Tablas Admin */
body.area-admin .table thead {
    background-color: var(--admin-table-header-bg);
    color: var(--admin-primary-dark);
}

body.area-admin .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--admin-sidebar-bg);
}

/* Tablas Cliente */
body.area-cliente .table thead {
    background-color: var(--cliente-table-header-bg);
    color: var(--cliente-primary-dark);
}

body.area-cliente .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--cliente-sidebar-bg);
}

/* Badges personalizados */
body.area-admin .badge.bg-primary {
    background-color: var(--admin-primary) !important;
}

body.area-cliente .badge.bg-primary {
    background-color: var(--cliente-primary) !important;
}

/* Links */
body.area-admin a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--admin-primary);
}

body.area-admin a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: var(--admin-primary-dark);
}

body.area-cliente a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--cliente-primary);
}

body.area-cliente a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: var(--cliente-primary-dark);
}

/* Toggle de tema - botón personalizado */
.theme-toggle {
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.theme-toggle i {
    font-size: 1.25rem;
}

/* Transiciones suaves */
body, .navbar, .card, .table, .btn {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Footer */
.footer {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* Mejoras de contraste en tema oscuro */
[data-bs-theme="dark"] .table {
    --bs-table-bg: #161b22;
    --bs-table-striped-bg: #0d1117;
    --bs-table-hover-bg: #1c2128;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .card {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #0d1117;
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #161b22;
    border-color: var(--bs-link-color);
    color: var(--bs-body-color);
}

/* Banner de impostación con tema */
body.area-admin .alert-info {
    background-color: var(--admin-primary-light);
    border-color: var(--admin-primary);
    color: var(--admin-primary-dark);
}

body.area-cliente .alert-warning {
    background-color: var(--cliente-primary-light);
    border-color: var(--cliente-primary);
    color: var(--cliente-primary-dark);
}

[data-bs-theme="dark"] body.area-admin .alert-info {
    background-color: rgba(74, 158, 255, 0.2);
    border-color: var(--admin-primary);
    color: var(--admin-primary-light);
}

[data-bs-theme="dark"] body.area-cliente .alert-warning {
    background-color: rgba(255, 183, 77, 0.2);
    border-color: var(--cliente-primary);
    color: var(--cliente-primary-light);
}

/* Responsive: ajustes para móviles */
@media (max-width: 768px) {
    .theme-toggle {
        padding: 0.25rem;
    }

    .theme-toggle i {
        font-size: 1rem;
    }
}