/* Modal Styles */
.user-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    border-radius: 15px;
}

.user-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 10px;
    width: 90%;
    max-width: 1200px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.user-modal-header {
    background: darkblue;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.user-modal-header h2 {
    font-size: 20px; /* Disminuye el tamaño de la fuente del título */
}

.user-modal-body {
    padding: 20px;
    overflow-x: auto;
}

.user-modal-footer {
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.user-modal-footer button {
    background: darkblue;
}

/* Redondear los bordes de los botones en el modal de usuarios */
#userModal .user-modal-footer button {
    border-radius: 12px; /* Ajusta el radio según prefieras */
    padding: 10px 20px; /* Opcional: mejora el espacio interno del botón */
    border: none; /* Elimina el borde predeterminado */
    cursor: pointer; /* Añade el puntero para indicar clic */
}

/* Opcional: estilos adicionales para botones individuales */
#userSaveBtn {
    background-color: darkblue; /* Color de fondo para Guardar */
    color: white; /* Color del texto */
}

#userCloseModalBtn {
    background-color: darkblue; /* Color de fondo para Cerrar */
    color: white; /* Color del texto */
}

/* Opcional: efecto hover */
#userModal .user-modal-footer button:hover {
    opacity: 0.8; /* Suaviza el efecto visual al pasar el mouse */
}

/* Resaltar una fila cuando el cursor pasa por encima */
#userTable tbody tr:hover {
    background-color: #e0f7fa; /* Color de fondo claro para el hover */
    cursor: pointer; /* Cambiar el cursor a pointer para indicar interactividad */
}

/* Encabezamientos de las columnas */
#userTable thead th {
    background-color: darkblue; /* Fondo azul */
    color: white; /* Texto blanco */
    text-align: center;
    font-weight: bold;
}

/* Hover en encabezamientos de columnas (opcional) */
#userTable thead th:hover {
    background-color: #0056b3; /* Azul más oscuro en hover */
    color: white;
}

/* Ocultar el control de selección "Mostrar _MENU_ registros" */
.dataTables_length {
    display: none;
}

#userTable tfoot input {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}

.dataTables_info.filtered {
    display: none;
}

/* Disminuir tamaño de fuente en las filas de la tabla */
#userTable tbody td {
    font-size: 12px; /* Ajusta el tamaño de la fuente según lo necesites */
}

.btn {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 5px;  /* Redondear bordes */
    color: #fff; /* Texto blanco */
    cursor: pointer;
}

.btn-excel  {
    background-color: darkblue !important;
    font-size: 14px !important;
    color: white !important;
}

/* Cambiar color cuando se pasa el ratón por encima */
.btn-excel:hover {
    background-color: lightblue !important; /* Verde más oscuro */
}

/* ESTILOS DIALOGO EDICION USUARIO */
.editModalHeader {
    background-color: darkblue; /* Azul oscuro */
    color: white; /* Texto blanco */
    text-align: center; /* Centra el contenido del encabezado */
    padding: 0.2rem; /* Espaciado interno */
}

.editModalHeader .modal-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
}


/* Estilos para los labels del modal */
#editModal label {
    font-weight: bold; /* Hacer el texto en negrita */
}

/* Estilos para los controles de entrada (input, select, radio buttons) */
#editModal input,
#editModal select,
#editModal .custom-control-label {
    border: 2px solid darkblue; /* Borde azul oscuro */
    border-radius: 5px; /* Bordes redondeados */
    padding: 5px; /* Añadir algo de espacio dentro del control */
}

/* Cambiar el borde de los controles de texto al enfocar */
#editModal input:focus,
#editModal select:focus {
    border-color: #0d1a2b; /* Color de borde más oscuro cuando se hace foco */
    outline: none; /* Eliminar el borde del foco predeterminado */
}

/* Estilos para los radio buttons */
#editModal input[type="radio"]:checked + .custom-control-label::before {
    background-color: darkblue; /* Fondo azul oscuro cuando está seleccionado */
    border-color: darkblue; /* Borde azul oscuro cuando está seleccionado */
}

/* Cambiar el borde de los radio buttons al enfocar */
#editModal input[type="radio"]:focus + .custom-control-label::before {
    border-color: #0d1a2b; /* Borde más oscuro cuando se hace foco */
}

/* Estilos para el modal */
/* Estilos para el botón */
#editModal .btn {
    background-color: darkblue; /* Fondo azul oscuro para los botones */
    color: white; /* Texto blanco para los botones */
    border: none; /* Sin borde alrededor de los botones */
    padding: 10px 20px; /* Añadir algo de espacio dentro del botón */
    border-radius: 5px; /* Bordes redondeados en los botones */
    cursor: pointer; /* Cambiar el cursor cuando pasas sobre el botón */
}

/* Cambiar color de fondo al pasar el mouse sobre el botón */
#editModal .btn:hover {
    background-color: blue !important; /* Fondo más oscuro cuando se pasa el mouse */
}

/* Estilos para el borde del modal */
#editModal .modal-content {
    border: 2px solid dar; /* Borde azul oscuro */
    border-radius: 10px; /* Bordes redondeados */
}

/* Estilo para el input de usuario no editable */
#editModal input#editUsuario {
    border: none; /* Quitar el borde */
    background-color: #f0f0f0; /* Fondo gris claro para indicar que no es editable */
    cursor: not-allowed; /* Cambiar el cursor para indicar que no se puede editar */
}

#editNombre {
    width: 180px; /* Cambia el valor a tu preferencia */
}

#editModalLabel {
    font-size: 20px; /* Cambia el tamaño según tus preferencias */
    background-color:darkblue;
}

#editModal input,
#editModal select,
#editModal textarea {
    font-size: 12px; /* Tamaño de fuente deseado */
}

/* Estilo cuando el botón está deshabilitado */
#saveChangesBtn:disabled {
    background-color: #d6d6d6; /* Color de fondo gris cuando está deshabilitado */
    border-color: #cccccc; /* Color del borde gris */
    cursor: not-allowed; /* Cambiar el cursor a uno que indique que no se puede interactuar */
}