/* ESTILOS PARA RESALTADO COMPLETO DE CAMPOS CON ERROR */
.has-error {
    background-color: #f2dede !important;
    border: 1px solid #ebccd1 !important;
    border-radius: 4px;
    padding: 10px 15px !important;
    margin-bottom: 15px !important;
}

.has-error .form-control,
.has-error .form-control:focus {
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.has-error select.form-control,
.has-error select.form-control:focus {
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23721c24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

.has-error .input-group .form-control {
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
}

.has-error .input-group-text {
    background-color: #f5c6cb !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
}

.has-error .control-label {
    color: #721c24 !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

.has-error .help-block,
.has-error .form-text {
    color: #721c24 !important;
    font-weight: bold !important;
}

/* Para checkboxes y radios dentro de errores */
.has-error .checkbox,
.has-error .radio-inline {
    color: #721c24 !important;
}

.has-error .checkbox input[type="checkbox"],
.has-error .radio-inline input[type="radio"] {
    border-color: #721c24 !important;
}

/* Animación para llamar atención */
@keyframes errorPulse {
    0% { background-color: #f8d7da; }
    50% { background-color: #f1b0b7; }
    100% { background-color: #f8d7da; }
}

.has-error .form-control {
    animation: errorPulse 2s infinite;
}

/* Para cuando el campo está deshabilitado */
.has-error .form-control:disabled {
    background-color: #e9ecef !important;
    opacity: 0.8 !important;
}

/* Estilo específico para textareas */
.has-error textarea.form-control {
    min-height: 80px;
    background-color: #f8d7da !important;
}

/* Para los placeholders en campos con error */
.has-error .form-control::placeholder {
    color: #a07178 !important;
    opacity: 0.8 !important;
}

/* Si usas Bootstrap 3 */
.form-group.has-error {
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
}

.form-group.has-error .form-control {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

/* Estilo para SweetAlert de error */
.sweet-alert-error .swal2-title {
    color: #721c24 !important;
}

.sweet-alert-error .swal2-content {
    color: #721c24 !important;
    background-color: #f8d7da !important;
    border: 1px solid #f5c6cb !important;
    border-radius: 4px !important;
    padding: 15px !important;
    text-align: left !important;
    white-space: pre-line !important;
}

.sweet-alert-error .swal2-confirm {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

/* Hacer que los campos sean más prominentes */
.form-control.error-highlight {
    background-color: #f8d7da !important;
    border: 2px solid #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5) !important;
}

/* Para campos específicos que siempre deben verse */
#nombre1.has-error,
#apellido1.has-error,
#sede.has-error,
#jornada.has-error,
#pais.has-error,
#paisnac.has-error,
#fechanac.has-error {
    background-color: #f8d7da !important;
    border: 2px solid #dc3545 !important;
    color: #721c24 !important;
    font-weight: bold !important;
}

/* ============================================
   ESTILOS UNIFICADOS PARA MODALES DE REPORTES
   MISMO ESTILO QUE MODAL PERIODOS
   ============================================ */

.modal-reporte .modal-header {
    padding: 6px 15px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #2c3e50 !important;  /* Azul oscuro como en la imagen */
    border-bottom: 1px solid #1a2a3a;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.modal-reporte .modal-header .modal-title {
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    line-height: 1.2;
    text-align: center;
    color: #ffffff !important;  /* Texto blanco */
}

.modal-reporte .modal-header .close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    padding: 0;
    margin: 0;
    line-height: 1;
    opacity: 0.8;
    color: #ffffff !important;  /* Botón cerrar blanco */
}

.modal-reporte .modal-header .close:hover {
    opacity: 1;
}