/* =========================================================
       1. FONDOS GLOBALES Y TIPOGRAFÍA
       ========================================================= */
    body, html, .wrapper, .main__content, .content-wrapper {
        background-color: #ffffff !important; 
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    }

    /* =========================================================
       2. ESTILOS DE FORMULARIO (Inputs, Selects, Textareas)
       ========================================================= */
    body .main__content .form-control,
    body .main__content input[type="text"],
    body .main__content input[type="date"],
    body .main__content input[type="time"],
    body .main__content textarea,
    body .main__content select {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
        font-size: 14px !important;
        padding: 10px 12px !important;
        border: 1px solid #dcdcdc !important; 
        border-radius: 4px !important;
        width: 100% !important;
        color: #333333 !important;
        background-color: #f4f7f6 !important; 
        box-shadow: none !important;
        transition: all 0.3s ease !important;
        box-sizing: border-box !important;
        height: auto !important; 
    }

    body .main__content .form-control:focus,
    body .main__content input[type="text"],
    body .main__content input[type="date"],
    body .main__content input[type="time"],
    body .main__content textarea,
    body .main__content select:focus {
        border-color: #2e7d32 !important; 
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.15) !important;
        background-color: #ffffff !important; 
    }
body .main__content .selectize-control.form-control {
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }
    /* =========================================================
       3. ESTILOS DE TABLA (Ahora más compacta)
       ========================================================= */
    .table-wrapper { 
        width: 100%; 
        overflow-x: auto; 
        border: 1px solid #dcdcdc;
        background-color: #ffffff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    }

    .sindu-table {
        width: 100%;
        min-width: 600px;
        border-collapse: collapse;
        background-color: #ffffff !important;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    }

    .sindu-table th {
        background-color: #444444 !important; 
        color: #ffffff;
        padding: 10px 15px; /* <-- Reducido para quitar altura excesiva */
        font-size: 12px; 
        font-weight: 600; 
        text-transform: uppercase;
        letter-spacing: 0.8px; 
        text-align: left;
        border: 1px solid #555555;
        border-bottom: 1px solid #222222 !important; 
        white-space: nowrap !important;
    }

    .sindu-table td {
        padding: 10px 15px; /* <-- Reducido para filas más compactas */
        font-size: 14px;
        border: 1px solid #dcdcdc;
        vertical-align: middle;
        color: #333333;
        background-color: #ffffff !important;
    }

    .sindu-table tbody tr:nth-child(even) td {
        background-color: #f4f7f6 !important; 
        background-image: none !important;
    }

    .sindu-table tbody tr:hover td {
        background-color: #e8ecef !important;
        background-image: none !important;
        transition: background-color 0.2s ease;
    }

    /* Ajustes para que las primeras 2 columnas (Checkbox e ID) no ocupen espacio de más */
    .sindu-table th:nth-child(1),
    .sindu-table th:nth-child(2) {
        text-align: center !important;
        padding: 10px !important; 
        width: 1% !important; 
        border-top: 1px solid #555555 !important; 
    }

    .sindu-table td:nth-child(1),
    .sindu-table td:nth-child(2) {
        text-align: center !important;
        padding: 10px !important;
        width: 1% !important;
    }

    /* =========================================================
       4. SELECTOR DE DÍAS (Chips / Píldoras)
       ========================================================= */
    .day-selector { 
        display: flex; 
        gap: 8px; 
        flex-wrap: wrap;
    }

    .day-item { 
        cursor: pointer;
        user-select: none;
    }

    .day-item input[type="checkbox"] { 
        display: none; 
    }

    .day-chip {
        display: inline-block;
        padding: 5px 10px;
        border-radius: 15px;
        background-color: #edf2f7;
        color: #4a5568;
        font-size: 13px;
        font-weight: 600;
        transition: all 0.2s ease;
        border: 1px solid #e2e8f0;
    }

    .day-item input[type="checkbox"]:checked + .day-chip {
        background-color: #2e7d32 !important; 
        color: white;
        border-color: #2e7d32 !important;
        box-shadow: 0 2px 4px rgba(46, 125, 50, 0.2);
    }

    .day-item:hover .day-chip {
        filter: brightness(0.95);
    }

    /* =========================================================
       5. WIDGET DESPLEGABLE DE AUSENCIAS
       ========================================================= */
    .widget-ausencias {
        background-color: #ffffff;
        border: 1px solid #dcdcdc;
        border-radius: 8px;
        margin-bottom: 25px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.04);
        overflow: hidden; 
    }

    .widget-ausencias summary {
        padding: 12px 20px; /* Un poco más compacto aquí también */
        font-size: 15px;
        font-weight: 600;
        color: #333333;
        cursor: pointer;
        list-style: none; 
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f4f7f6; 
        transition: background-color 0.2s ease;
        user-select: none;
    }

    .widget-ausencias summary::-webkit-details-marker { 
        display: none; 
    }

    .widget-ausencias summary::after {
        content: "▼";
        font-size: 0.8em;
        color: #2e7d32; 
        transition: transform 0.3s ease;
    }

    .widget-ausencias[open] summary {
        border-bottom: 1px solid #dcdcdc;
        background-color: #ffffff;
    }

    .widget-ausencias[open] summary::after {
        transform: rotate(-180deg);
    }
    
    /* =========================================================
       6. CORRECCIONES ESPECÍFICAS: TABLA DE AUSENCIAS
       ========================================================= */
    /* 1. Liberamos el ancho de 1% que estaba aplastando 'Usuario' y 'Tipo' */
    .widget-ausencias .sindu-table th:nth-child(1),
    .widget-ausencias .sindu-table td:nth-child(1),
    .widget-ausencias .sindu-table th:nth-child(2),
    .widget-ausencias .sindu-table td:nth-child(2) {
        width: auto !important; 
        text-align: left !important; 
        white-space: normal !important;
    }

    /* 2. Forzamos a que 'Usuario' tenga un ancho mínimo razonable para que el nombre no se parta feo */
    .widget-ausencias .sindu-table th:nth-child(1),
    .widget-ausencias .sindu-table td:nth-child(1) {
        min-width: 200px !important;
    }

    /* 3. Ajustamos 'Desde', 'Hasta' y 'Estado' para que se encojan al tamaño de su texto y no dejen espacios en blanco */
    .widget-ausencias .sindu-table th:nth-child(4),
    .widget-ausencias .sindu-table td:nth-child(4),
    .widget-ausencias .sindu-table th:nth-child(5),
    .widget-ausencias .sindu-table td:nth-child(5),
    .widget-ausencias .sindu-table th:nth-child(6),
    .widget-ausencias .sindu-table td:nth-child(6) {
        width: 1% !important; 
        white-space: nowrap !important; 
        text-align: center !important;
    }
    /* =========================================================
       8. AJUSTES DEL MENÚ DESPLEGABLE (SELECTIZE DROPDOWN)
       ========================================================= */
       
    /* 1. Control del ancho y posición sobre otros elementos */
    body .main__content .selectize-dropdown {
        min-width: 200px !important; /* Forzamos un ancho mínimo para que los textos largos quepan */
        width: auto !important; /* Permite que el cuadro crezca si el texto lo requiere */
        z-index: 9999 !important; /* Garantiza que siempre esté por encima de la tabla y los botones */
        border: 1px solid #dcdcdc !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; /* Sombra más definida para separarlo del fondo */
        border-radius: 4px !important;
    }

    /* 2. Darle "respiro" (padding) a cada elemento de la lista */
    body .main__content .selectize-dropdown .selectize-dropdown-content .option {
        padding: 10px 15px !important;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
        font-size: 14px !important;
        color: #333333 !important;
        background-color: #ffffff !important;
        cursor: pointer !important;
        border-bottom: 1px solid #f4f7f6 !important; /* Línea divisoria muy sutil entre opciones */
    }

    /* 3. Cambiar el feo fondo oscuro por defecto al pasar el cursor o seleccionar */
    body .main__content .selectize-dropdown .selectize-dropdown-content .option.active,
    body .main__content .selectize-dropdown .selectize-dropdown-content .option:hover,
    body .main__content .selectize-dropdown .selectize-dropdown-content .option.selected {
        background-color: #2e7d32 !important; /* Tu color verde para mantener la coherencia */
        color: #ffffff !important; /* Letra blanca para que contraste bien con el verde */
    }
    
   /* =========================================================
       9. CONTROL DE DESBORDAMIENTO (TABLAS Y BUSCADORES)
       ========================================================= */
       
    /* 1. Estilo base para todas las cajas (incluyendo el buscador) */
    body .main__content .table-wrap,
    body .main__content .table-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
        margin-bottom: 20px !important;
        border: 1px solid #dcdcdc !important;
        border-radius: 4px;
        
        /* LA CLAVE: Visible por defecto para que los menús NO se corten */
        overflow: visible !important; 
    }

    /* 2. SOLO aplicar el scroll a las cajas que tienen una tabla de datos adentro */
    body .main__content .table-wrap:has(table),
    body .main__content .table-wrapper:has(table) {
        overflow-x: auto !important;
    }

    /* 3. Asegurar que la tabla mantenga su tamaño real dentro del scroll */
    body .main__content .table-wrap table,
    body .main__content .table-wrapper table,
    body .main__content .sindu-table {
        width: 100% !important;
        max-width: none !important; 
        min-width: 800px !important; /* Fuerza tamaño mínimo de columnas */
        border-collapse: collapse !important;
    }

    /* 4. Asegurarnos de que el menú desplegable verde siempre flote por encima de todo */
    body .main__content .selectize-dropdown {
        position: absolute !important;
        z-index: 99999 !important;
    }
 /* =========================================================
       11. ARREGLO DEL SCROLL Y MENÚ CORTADO EN LA BÚSQUEDA
       ========================================================= */

    /* 1. Forzamos a los contenedores de búsqueda a que permitan que el contenido sobresalga */
    body .main__content .form-wrap,
    body .main__content .search-wrapper,
    body .main__content .table-wrap:has(> form[name="showt2"]) {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    /* 2. Por si la propia etiqueta <form> es la que tiene la jaula */
    body .main__content form {
        overflow: visible !important;
    }

    /* 3. Aseguramos que el menú verde siempre flote por encima de cualquier otro elemento */
    body .main__content .selectize-dropdown {
        position: absolute !important;
        z-index: 99999 !important;
    }
   /* =========================================================
       FORZAR FONDO BLANCO EN CONTENEDOR DE BOTONES Y SUS PADRES
       ========================================================= */
    body .main__content .settings__form_submit,
    body .main__content .settings__form_submit parent,
    body .main__content form div:has(.settings__form_submit) {
        background-color: #ffffff !important;
        background: #ffffff !important;
        box-shadow: none !important;
        border: none !important;
    }
/* =========================================================
       FONDO BLANCO PARA TEXTBOX Y PASSWORD EN LOGIN
       ========================================================= */
    body .form-group .form-control,
    body .form-group input[type="text"],
    body .form-group input[type="password"],
    body .form-group .input-group .form-control {
        background-color: #ffffff !important;
        background: #ffffff !important;
    }

    /* Mantener el fondo blanco también cuando el input esté activo/enfocado */
    body .form-group .form-control:focus,
    body .form-group input[type="text"]:focus,
    body .form-group input[type="password"]:focus {
        background-color: #ffffff !important;
        background: #ffffff !important;
    }
    /* =========================================================
       ELIMINAR FONDO AZUL/AMARILLO DE AUTOCOMPLETADO (GLOBAL)
       ========================================================= */
    input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus, 
    input:-webkit-autofill:active,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
        -webkit-text-fill-color: #333333 !important;
        transition: background-color 5000s ease-in-out 0s !important;
    }