/* Variables de colores */
:root {
    --primary-color: #4c90af;
    --primary-hover-color: #455aa0;
    --background-color: #f0f0f0;
    --text-color: #333;
    --input-border-color: #ccc;
    --input-bg-color: #fff;
    --table-header-bg-color: #f2f2f2;
    --table-row-bg-color: #f9f9f9;
}

/* Estilos específicos para tablas responsive */
.responsive-table-wrapper {
    overflow-x: auto; /* Permite el desplazamiento horizontal */
    max-width: 100%; /* Asegura que el contenedor no exceda el ancho de la pantalla */
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
}

.responsive-table {
    width: 98%;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 16px;
    text-align: left;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    table-layout: auto; /* Permite que las columnas se ajusten al contenido */
}

.responsive-table th, .responsive-table td {
    padding: 8px;
    border: 1px solid var(--input-border-color);
    word-break: break-word; /* Asegura que las palabras largas se dividan en varias líneas */
    text-align: left;
    vertical-align: middle;
    white-space: nowrap; /* Evita que el contenido se envuelva, manteniendo cada celda en una sola línea */
    overflow: hidden; /* Esconde el contenido que se sale del borde */
    text-overflow: ellipsis; /* Añade "..." al final si el texto es demasiado largo */
}

.responsive-table th {
    background-color: var(--table-header-bg-color);
    font-weight: bold;
}

/* Estilos para formularios y contenedores generales */
form {
    max-width: 100%; /* Permite que el formulario ocupe todo el ancho disponible */
    overflow-x: auto; /* Permite el desplazamiento horizontal del formulario */
    white-space: nowrap; /* Evita que el formulario se contraiga demasiado */
}



/* Estilos para pantallas pequeñas */
@media (max-width: 480px) {
    .col-usuario {
        width: 25% !important; /* Aumentado el ancho para que quepa mejor */
    }

    .col-frentes-cargados {
        width: 48% !important; /* Aumentado el ancho para la columna de Frentes Cargados */
    }

    .col-frentes-faltantes {
        width: 25% !important; /* Ajustado el ancho para la columna de Frentes Faltantes */
    }

    .col-username {
        width: 20% !important; /* Ancho deseado para la columna de Nombre de Usuario */
    }

    .col-first-name {
        width: 20% !important; /* Ancho deseado para la columna de Nombre */
    }

    .col-last-name {
        width: 20% !important; /* Ancho deseado para la columna de Apellido */
    }

    .col-email {
        width: 30% !important; /* Ancho deseado para la columna de Email */
    }

    .col-is-staff {
        width: 10% !important; /* Ancho deseado para la columna de Es Staff */
    }

    .col-actions {
        width: 20% !important; /* Ancho deseado para la columna de Acciones */
    }
    select {
        width: 88%;

    }
    /*
    #addEmpleado, #guardarParteDiario {
        width: 100%;
        margin-top: 10px;
        display: block;
    }

    #parteDiarioForm {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }*/

}