/* DISEÑO AUTOGLOW: Minimalista & Mobile First */
:root {
    --primary: #2c3e50; /* Azul oscuro elegante */
    --accent: #e74c3c; /* Rojo AutoGlow para botones */
    --bg-light: #f8f9fa;
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

body {
    background-color: var(--bg-light);
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: #333;
}

/* Tarjeta Flotante (Estilo iPhone) */
.card-modern {
    background: white;
    border: none;
    border-radius: 24px; /* Bordes muy redondeados */
    box-shadow: var(--card-shadow);
    padding: 2rem;
    margin-bottom: 20px;
    transition: transform 0.2s;
}

    .card-modern:hover {
        transform: translateY(-2px); /* Efecto de elevación */
    }

/* Títulos */
.glow-title {
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

/* Inputs y Selects Bonitos */
.form-control-lg {
    border-radius: 16px;
    border: 2px solid #eee;
    padding: 1rem;
    font-size: 1.1rem;
    background-color: #fff;
}

    .form-control-lg:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(44, 62, 80, 0.1);
    }

/* Botón Principal */
.btn-glow {
    background-color: var(--primary);
    color: white;
    border-radius: 50px;
    padding: 15px 40px;
    font-weight: 700;
    letter-spacing: 1px;
    width: 100%;
    border: none;
    box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3);
    transition: all 0.3s ease;
}

    .btn-glow:hover {
        background-color: #1a252f;
        transform: scale(1.02);
    }

/* Etiquetas */
.label-modern {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    font-weight: 700;
    margin-bottom: 8px;
    display: block;
}



/* --- AGREGAR AL FINAL DE SITE.CSS --- */

/* Estilos del Contenedor Principal (Wrapper) */
#wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
    overflow-x: hidden;
}

/* Estilos del Menú Lateral (Sidebar) */
#sidebar-wrapper {
    min-width: 260px;
    max-width: 260px;
    background-color: var(--primary); /* Usa tu azul oscuro */
    color: white;
    min-height: 100vh;
    transition: all 0.3s;
}

.sidebar-heading {
    padding: 2rem 1.5rem;
    font-size: 1.5rem;
    font-weight: 800;
    text-align: center;
    letter-spacing: -1px;
    background: rgba(0,0,0,0.1);
    color: white;
}

.list-group-item-action {
    background-color: transparent;
    color: rgba(255,255,255,0.7);
    border: none;
    padding: 15px 25px;
    font-weight: 500;
    transition: all 0.2s;
}

    .list-group-item-action:hover {
        background-color: rgba(255,255,255,0.1);
        color: #fff;
        padding-left: 30px; /* Efecto de desplazamiento al pasar el mouse */
    }

    .list-group-item-action.active {
        background-color: var(--accent); /* Usa tu rojo */
        color: white;
        font-weight: bold;
    }

/* Ajuste para el contenido derecho */
#page-content-wrapper {
    width: 100%;
    padding: 20px;
}

/* Iconos grandes del Dashboard */
.icon-big {
    font-size: 2.5rem;
    color: var(--accent);
    opacity: 0.8;
}

/* Solo para celulares (pantallas menores a 768px) */
@media (max-width: 768px) {
    /* Ocultar la barra lateral para que no estorbe */
    .sidebar {
        display: none;
    }

    /* Que el contenido use todo el ancho */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* =========================================
   MODO OBSCURO (DARK MODE)
   ========================================= */

/* 1. Definimos los colores por defecto (Modo Claro) en variables */
:root {
    --bg-body: #f8f9fa; /* Fondo gris clarito */
    --text-main: #212529; /* Texto casi negro */
    --bg-card: #ffffff; /* Fondo de tarjetas blanco */
    --border-color: #dee2e6; /* Bordes grises */
    --input-bg: #ffffff; /* Fondo de inputs blanco */
    --input-text: #495057; /* Texto de inputs */
    --primary-accent: #0d6efd; /* Color primario (azul original) */
}

/* 2. Definimos los colores para cuando la clase .dark-mode esté activa */
body.dark-mode {
    --bg-body: #121212; /* Fondo negro casi total */
    --text-main: #e0e0e0; /* Texto blanco grisáceo */
    --bg-card: #1e1e1e; /* Tarjetas gris obscuro */
    --border-color: #2d2d2d; /* Bordes más obscuros */
    /* 👇 AQUÍ ESTÁ TU TOQUE MORADO 👇 */
    --input-bg: #2d2d2d; /* Inputs gris obscuro */
    --input-text: #e0e0e0; /* Texto blanco */
    --primary-accent: #9c27b0; /* Un morado vibrante */
}

/* 3. Aplicamos las variables a los elementos */
body {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
    transition: background-color 0.3s, color 0.3s; /* Transición suave */
}

.card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

/* Estilos específicos para inputs en modo obscuro */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: var(--input-bg);
    border-color: var(--primary-accent); /* Borde morado */
    color: var(--input-text);
}

    body.dark-mode .form-control:focus {
        box-shadow: 0 0 0 0.25rem rgba(156, 39, 176, 0.25); /* Sombra morada al hacer clic */
    }

/* Cambiar color de iconos y textos en el sidebar */
body.dark-mode #sidebar-wrapper .list-group-item {
    color: rgba(255,255,255,0.8);
}

    body.dark-mode #sidebar-wrapper .list-group-item:hover {
        color: #fff;
    }
/* Ajustar el navbar superior */
body.dark-mode .navbar {
    background-color: var(--bg-card) !important;
    border-bottom-color: var(--border-color) !important;
}

body.dark-mode .navbar-brand, body.dark-mode .nav-link, body.dark-mode #darkModeToggle {
    color: var(--text-main) !important;
}

/* ================================================= */
/* MODO NOCHE ADMIN (GLOBAL)            */
/* ================================================= */

/* Colores por defecto (Variables CSS) */
:root {
    --admin-bg: #f4f6f9;
    --admin-card-bg: #ffffff;
    --admin-text: #212529;
    --admin-border: #dee2e6;
}

/* Colores cuando activamos [data-theme="dark"] */
[data-theme="dark"] {
    --admin-bg: #1a1a2e; /* Fondo General Obscuro */
    --admin-card-bg: #252540; /* Fondo de Tarjetas */
    --admin-text: #e0e0e0; /* Texto Claro */
    --admin-border: #3f3f5f; /* Bordes tenues */
}

/* Aplicamos las variables al cuerpo y estructura */
body {
    background-color: var(--admin-bg) !important;
    color: var(--admin-text) !important;
    transition: background-color 0.3s, color 0.3s;
}

/* Tarjetas (Los cuadros blancos del dashboard) */
.card {
    background-color: var(--admin-card-bg) !important;
    color: var(--admin-text) !important;
    border-color: var(--admin-border) !important;
}

/* Tablas */
[data-theme="dark"] .table {
    color: var(--admin-text) !important;
    border-color: var(--admin-border) !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    color: var(--admin-text);
    background-color: rgba(255,255,255,0.05); /* Rayas sutiles */
}

/* Inputs y Formularios en el Admin */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #151525;
    border-color: #3f3f5f;
    color: #fff;
}

    [data-theme="dark"] .form-control:focus,
    [data-theme="dark"] .form-select:focus {
        background-color: #1a1a2e;
        color: #fff;
        border-color: #0d6efd; /* Azul brillante al escribir */
    }

/* Encabezados y Títulos */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: #fff !important;
}


/* ================================================= */
/* AJUSTE VISUAL BOTÓN TEMA (COMO EN LA FOTO) */
/* ================================================= */
/* Cuando el tema es obscuro, resaltamos el botón en la barra de navegación */
[data-theme="dark"] .navbar .btn-link.nav-link[onclick="toggleAdminTheme()"] {
    background-color: rgba(13, 110, 253, 0.15); /* Fondo azul tenue */
    border-radius: 10px; /* Bordes redondeados */
    padding: 8px 14px; /* Un poco más de espacio */
    transition: all 0.3s ease;
}

/* Aseguramos que el icono se vea bien centrado */
.navbar .btn-link.nav-link[onclick="toggleAdminTheme()"] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================================================= */
/* LOGICA DE MENÚ (SIDEBAR) CORREGIDA */
/* ================================================= */

#wrapper {
    overflow-x: hidden;
    display: flex;
}

#sidebar-wrapper {
    min-height: 100vh;
    margin-left: -16rem; /* Oculto en celular por defecto */
    width: 16rem;
    transition: margin 0.25s ease-out, width 0.25s ease-out;
    background-color: #212529; /* Color obscuro original estándar */
}

    #sidebar-wrapper .sidebar-heading {
        padding: 0.875rem 1.25rem;
        font-size: 1.2rem;
    }

#page-content-wrapper {
    min-width: 100vw;
    width: 100%; /* El contenido ocupa todo */
}

/* --- COMPORTAMIENTO EN PC (PANTALLA GRANDE) --- */
@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0; /* Siempre visible en PC */
    }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }

    /* ESTADO: MENÚ CONTRAÍDO (SOLO ICONOS) EN PC */
    body.sb-sidenav-toggled #sidebar-wrapper {
        width: 4.5rem; /* Ancho flaquito */
    }

        /* Ocultar textos cuando está flaquito */
        body.sb-sidenav-toggled #sidebar-wrapper .link-text,
        body.sb-sidenav-toggled #sidebar-wrapper .sidebar-heading,
        body.sb-sidenav-toggled #sidebar-wrapper .text-uppercase,
        body.sb-sidenav-toggled #sidebar-wrapper form button span {
            display: none !important;
        }

        /* Centrar los iconos para que se vean bien */
        body.sb-sidenav-toggled #sidebar-wrapper .list-group-item {
            text-align: center;
            padding: 1rem 0; /* Ajuste para que no se vean botones gigantes */
        }

            body.sb-sidenav-toggled #sidebar-wrapper .list-group-item i {
                margin-right: 0 !important; /* Quitar margen al icono */
                font-size: 1.3rem;
            }

        /* Ajuste para el botón de cerrar sesión en modo icono */
        body.sb-sidenav-toggled #sidebar-wrapper .btn-outline-light {
            padding: 0.5rem;
            border-radius: 50% !important;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
        }
}

/* --- COMPORTAMIENTO EN CELULAR --- */
@media (max-width: 767.98px) {
    /* Cuando se activa en celular, empuja el contenido o se pone encima */
    body.sb-sidenav-toggled #sidebar-wrapper {
        margin-left: 0; /* Aparece el menú completo */
    }

    /* El botón de hamburguesa en celular no hace el menú pequeño, lo oculta/muestra */
}