:root {
    --sidebar-width: 260px;
    --bg-dark: #0B0B0B;
    --card-bg: #161616;
    --accent: #0d6efd;
    --text-muted: #adb5bd;
}

body {
    background-color: var(--bg-dark);
    color: white;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    margin: 0;
    overflow-x: hidden;
}

/* --- ESTRUCTURA BASE --- */
#sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0; /* Por defecto abierto en PC */
    background: #111;
    transition: all 0.3s ease;
    z-index: 1050;
    border-right: 1px solid #222;
}

#content {
    width: 100%;
    padding-left: var(--sidebar-width); /* Espacio para barra en PC */
    transition: all 0.3s ease;
    min-height: 100vh;
}

/* --- LÓGICA DE APERTURA/CIERRE (PC) --- */

/* Cuando añadimos .active, escondemos la barra en PC */
#sidebar.active {
    left: calc(var(--sidebar-width) * -1);
}

#sidebar.active + #content {
    padding-left: 0;
}

/* --- AJUSTES PARA MÓVIL (Tablet y Smartphone) --- */
@media (max-width: 768px) {
    #sidebar {
        left: calc(var(--sidebar-width) * -1); /* Por defecto cerrado en móvil */
    }

    #content {
        padding-left: 0; /* Sin espacio lateral en móvil */
    }

    /* En móvil, .active significa MOSTRAR la barra por encima */
    #sidebar.active {
        left: 0 !important;
    }

    /* El contenido no se mueve en móvil, la barra lo tapa */
    #sidebar.active + #content {
        padding-left: 0;
    }

    #sidebarCollapse {
        color: white;
    }
}

/* --- CABECERA SIDEBAR Y LOGO --- */
.sidebar-header {
    padding: 30px 20px;
    text-align: center;
    background: #000;
    position: relative;
}

.sidebar-header img {
    width: 35px !important;
    height: auto;
    filter: drop-shadow(0 0 8px rgba(13, 110, 253, 0.2));
    display: block;
    margin: 0 auto;
}

/* --- ENLACES Y COMPONENTES --- */
.components li a {
    padding: 12px 25px;
    display: flex;
    align-items: center;
    color: var(--text-muted);
    text-decoration: none !important;
    font-size: 0.95rem;
    font-weight: 500;
    transition: 0.2s;
    border-left: 4px solid transparent;
}

.components li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.components li.active > a {
    color: #fff;
    background: var(--accent);
    border-left: 4px solid #fff;
}

.components li a i {
    font-size: 1.1rem;
    width: 25px;
    margin-right: 10px;
}

.menu-label {
    color: #555;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    padding: 25px 25px 10px;
}

/* --- INTERFAZ SUPERIOR --- */
.top-navbar {
    background: var(--card-bg);
    height: 60px;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 999;
}

#sidebarCollapse {
    z-index: 1100;
    position: relative;
}

.rounded-card {
    background: var(--card-bg);
    border: 1px solid #333;
    border-radius: 15px;
    padding: 20px;

.form-control {
    font-size: 16px !important;
}
/* --- AJUSTES DE FORMULARIO PARA MÓVIL --- */
@media (max-width: 768px) {
    input, 
    select, 
    textarea, 
    .form-control, 
    .form-select {
        font-size: 16px !important; /* Tamaño mínimo para evitar el zoom automático en iOS/Android */
        padding: 12px !important;    /* Espacio interno para que sea fácil de pulsar con el dedo */
    }

    label {
        font-size: 14px; /* Las etiquetas pueden ser un poco más pequeñas */
        margin-bottom: 5px;
    }

    .btn {
        padding: 12px; /* Botones más grandes para dedos */
        font-size: 16px;
    }
}
/* --- ESTILOS GLOBALES DE FORMULARIO OSCURO (DARK MODE) --- */

/* 1. Fondo negro, texto blanco y borde gris para TODOS los inputs */
input, 
select, 
textarea, 
.form-control, 
.form-select {
    background-color: #080808 !important; /* Negro casi puro */
    color: #FFFFFF !important;           /* Blanco puro */
    border: 1px solid #333 !important;    /* Borde gris oscuro sutil */
    border-radius: 12px !important;       /* Bordes redondeados modernos */
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* 2. Color del texto placeholder (el texto de ayuda tenue) */
input::placeholder, 
textarea::placeholder {
    color: #666 !important; /* Gris medio para que se diferencie del texto escrito */
    opacity: 1;
}

/* 3. Estilo al hacer foco (clic) en el input */
input:focus, 
select:focus, 
textarea:focus, 
.form-control:focus, 
.form-select:focus {
    background-color: #000000 !important; /* Negro puro al escribir */
    border-color: #0d6efd !important;     /* Borde azul Patcoo */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15) !important; /* Brillo azul sutil */
    color: #FFFFFF !important;
}

/* 4. TRUCO CRÍTICO: Invertir color de iconos nativos (Calendario, Reloj, Flechas) */
/* Esto funciona en Chrome, Edge, Safari (iOS) y la mayoría de Android */

/* Inversa para inputs de fecha, tiempo, etc. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(1) !important; /* Invierte el negro del icono a blanco */
    cursor: pointer;
    opacity: 0.8;
}

/* Ajuste para selectores antiguos de Webkit */
input[type="date"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-inner-spin-button {
    filter: invert(1);
}

/* 5. Estilos para los Selects (Listas desplegables) */
.form-select {
    /* Bootstrap usa una imagen SVG para la flecha, la cambiamos por una blanca */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-size: 16px 12px;
}

/* Estilo para las opciones dentro del Select (en PC) */
select option {
    background-color: #161616;
    color: white;
}
.table-responsive .table {
    min-width: 600px; /* Obliga a que la tabla tenga un ancho mínimo para no amontonar las columnas */
}
#content {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ocupa el 100% de la altura de la ventana */
}

.main-footer {
    margin-top: auto; /*  empuja el footer al fondo si hay poco contenido */
}