/* styles.css - Reset basado en el original del usuario, con correcciones */

/* Variables para fácil ajuste */
:root {
  --sidebar-width-expanded: 250px;
  --sidebar-width-collapsed: 60px;
  --sidebar-bg: #2a3f54;
  --text-color-light: #ffffff;
  --hover-bg: #1a2a38; /* Usado en tu CSS original para hover */
  --transition-speed: 0.3s;
}

body {
    background-color: #f4f6f9; /* Fondo general suave */
    /* Padding superior para dejar espacio al botón fijo */
    padding-top: 60px; /* Ajusta si el botón es más alto/bajo */
    /* La transición se aplica al elemento que se mueve (.page-wrapper) */
     transition: margin-left var(--transition-speed) ease-in-out;
}

/* Estilos para el sidebar (de tu CSS original) */
.sidebar {
    width: var(--sidebar-width-expanded);
    position: fixed;
    top: 0; /* Desde arriba */
    left: 0;
    height: 100%;
    background: var(--sidebar-bg);
    color: var(--text-color-light);
    transition: width var(--transition-speed) ease-in-out;
    z-index: 1000; /* Asegura que esté sobre el contenido normal */
    overflow-x: hidden;
    padding-top: 60px; /* Espacio para el botón fijo */
}

/* Estado colapsado (de tu CSS original) */
body.sidebar-mini .sidebar {
    width: var(--sidebar-width-collapsed);
}
body.sidebar-mini .sidebar-nav ul li a span {
    display: none;
}
body.sidebar-mini .sidebar-nav ul li a {
    justify-content: center;
    padding-left: 5px; /* Ajustar padding en modo mini */
    padding-right: 5px;
}
body.sidebar-mini .sidebar-nav ul li a i {
    margin-right: 0;
}

/* Navegación (de tu CSS original) */
.sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar-nav ul li a {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: var(--text-color-light);
    text-decoration: none;
    transition: background 0.3s;
    white-space: nowrap; /* Evitar que el texto se parta */
}
.sidebar-nav ul li a:hover {
    background: var(--hover-bg);
}
.sidebar-nav ul li a i { /* Ajustado para seleccionar <i> */
    font-size: 18px;
    margin-right: 10px;
    width: 20px; /* Ancho fijo para alinear */
    text-align: center;
    flex-shrink: 0; /* Evitar que el ícono se encoja */
}

/* Contenido Principal (de tu CSS original, con corrección de margen) */
.page-wrapper {
    /* CLAVE: Aplicar el margen izquierdo correcto */
    margin-left: var(--sidebar-width-expanded);
    padding: 25px; /* Padding interno */
    transition: margin-left var(--transition-speed) ease-in-out;
    min-height: 100vh; /* Altura mínima */
    background: #ffffff; /* Fondo blanco */
    position: relative; /* Para asegurar flujo normal */
    z-index: 1; /* Detrás del sidebar y botón */
    box-sizing: border-box;
}

/* Ajuste colapsado (de tu CSS original) */
body.sidebar-mini .page-wrapper {
    margin-left: var(--sidebar-width-collapsed);
}

/* Estilos para el botón de hamburguesa (de tu CSS original, con ajustes) */
.sidebartoggler {
    position: fixed !important; /* FIJO a la ventana */
    top: 15px !important;
    left: 15px !important;
    z-index: 1100 !important; /* ENCIMA de todo */
    background: var(--sidebar-bg) !important; /* Fondo visible */
    color: var(--text-color-light) !important; /* Ícono blanco */
    border: 1px solid var(--hover-bg); /* Borde sutil */
    padding: 8px 12px !important;
    cursor: pointer;
    border-radius: 5px;
    font-size: 24px !important; /* Ícono más grande */
    font-family: 'themify', sans-serif !important; /* Asegurar fuente */
    line-height: 1 !important;
    display: block !important; /* Asegurar visibilidad */
}
.sidebartoggler:hover {
    background: var(--hover-bg) !important;
}

/* Footer (Estilo básico) */
.footer {
    padding: 15px 0;
    text-align: center;
    border-top: 1px solid #dee2e6;
    margin-top: 30px;
    color: #6c757d;
    font-size: 0.9em;
    background-color: #f8f9fa;
    width: 100%;
}

/* Ajustes Select2 (Sin cambios) */
.select2-container { width: 100% !important; } 
.select2-container--default .select2-selection--single { height: calc(1.5em + .75rem + 2px) !important; padding: .375rem .75rem !important; border: 1px solid #ced4da !important; border-radius: .25rem !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.5 !important; padding-left: 0 !important; color: #495057 !important; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #6c757d !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(1.5em + .75rem) !important; top: 1px !important; right: 0.5rem !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #007bff !important; color: white !important; }
.select2-dropdown { border: 1px solid #ced4da !important; border-radius: .25rem !important; }