/* --- CONFIGURACIÓN GLOBAL RESPONSIVE --- */

/* Asegura que nada se salga de la pantalla (evita el scroll horizontal) */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
}
/* --- AJUSTE DE ESPACIO SUPERIOR --- */

/* Le damos aire al contenido principal para que no toque el borde superior */
main {
    padding-top: 3rem !important; /* 48px de espacio extra */
}

/* Si quieres que el título de la página (el "Admin Panel" o "Gestión de Usuarios") 
   también tenga su propio margen inferior para separarse de la tabla */
h2 {
    margin-bottom: 1.5rem !important;
}
/* Ajuste para el menú lateral */
aside {
    margin-top: 3rem !important; /* Baja el menú 48px */
    height: calc(100vh - 3rem) !important; /* Ajusta la altura para que no se corte abajo */
    border-top-right-radius: 1rem; /* Opcional: le da un toque estético */
}

.bg-glass { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); }

/* Ajustar el contenedor de Select2 al estilo del modal */
.select2-container .select2-selection--single {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    height: 45px !important;
    padding: 8px !important;
    color: white !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: white !important;
}
.select2-results__option {
    background-color: #1e293b !important; /* Color de tus inputs */
    color: white !important;
}
.select2-results__option--highlighted {
    background-color: #2563eb !important; /* Azul de tus botones */
}
/* Esto corrige el color del texto dentro del campo de búsqueda */
.select2-search--dropdown .select2-search__field {
    background-color: #1e293b !important; /* Fondo oscuro */
    color: #ffffff !important;           /* Texto blanco */
    border: 1px solid #334155 !important;
}

/* Esto asegura que el texto dentro de la lista también sea legible */
.select2-results__option {
    color: #ffffff !important;
    background-color: #1e293b !important;
}

/* Si quieres que el placeholder (el texto de ayuda) se vea bien */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8 !important;
}

@media (max-width: 640px) {
    /* Mantenemos tu lógica de tabla a tarjeta */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }
    
    thead { display: none; } 
    
    tr { 
        margin-bottom: 20px; 
        border: 1px solid rgba(255, 255, 255, 0.1); 
        padding: 15px; 
        border-radius: 12px;
        background: rgba(0, 0, 0, 0.2);
    }
    
    td { 
        text-align: right; 
        padding: 8px 0 !important;
        position: relative; 
        border: none !important;
    }
    
    td:before { 
        content: attr(data-label); 
        position: absolute; 
        left: 0; 
        font-weight: bold; 
        color: #94a3b8; /* Gris suave para las etiquetas */
    }
}
/* Fuerza el responsive total */
@media (max-width: 768px) {
    body, html {
        width: 100vw !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ocultar o reducir elementos que no caben en móvil */
    aside {
        width: 60px !important; /* Reduce el menú a solo iconos en móvil */
        transition: width 0.3s ease;
    }

    /* Forzar que todos los divs respeten el ancho de pantalla */
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
}