/* ===== TÍTULO DE LA PÁGINA ===== */
/* Más aire por encima del título */
.page-header {
    margin-top: 40px !important;
}

.page-header h1.entry-title {
    margin-top: 20px !important;
}

/* ===== BARRA DE PROGRESO/BREADCRUMBS BOXED ===== */
/* Limitar ancho de breadcrumbs de LearnDash para que coincida con el contenido */
.learndash-wrapper.learndash-wrapper--lesson .ld-lesson-status {
    max-width: 1140px; /* Ajusta según el max-width de tu tema */
    margin: 30px auto 30px auto; /* Margen superior e inferior para separar elementos */
    padding-left: 15px;
    padding-right: 15px;
}

/* Para contenedores de Elementor, usar el mismo ancho */
.elementor .learndash-wrapper.learndash-wrapper--lesson .ld-lesson-status {
    max-width: var(--container-max-width, 1140px);
    margin: 30px auto 30px auto;
    padding-left: var(--padding-left, 15px);
    padding-right: var(--padding-right, 15px);
}

/* Responsive para tablets */
@media (max-width: 1200px) {
    .learndash-wrapper.learndash-wrapper--lesson .ld-lesson-status {
        max-width: 960px;
        padding-left: 20px;
        padding-right: 20px;
        margin: 25px auto 25px auto;
    }
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .learndash-wrapper.learndash-wrapper--lesson .ld-lesson-status {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        margin: 20px auto 20px auto;
    }
    
    .page-header {
        margin-top: 20px !important;
    }
}



/* ===== MENSAJES DE RESPUESTA CORRECTA/INCORRECTA ===== */
/* Contenedor de respuesta cuando es incorrecta */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_response:has(.wpProQuiz_incorrect[style*="display: block"]),
.learndash-wrapper .wpProQuiz_content .wpProQuiz_response:has(.wpProQuiz_incorrect:not([style*="display: none"])) {
    border: 2px solid #C12323 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background: transparent !important;
}

/* Contenedor de respuesta cuando es correcta */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_response:has(.wpProQuiz_correct[style*="display: block"]),
.learndash-wrapper .wpProQuiz_content .wpProQuiz_response:has(.wpProQuiz_correct:not([style*="display: none"])) {
    border: 2px solid #28a745 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background: transparent !important;
}

/* Fallback para navegadores que no soporten :has() */
.wpProQuiz_response {
    border-radius: 0 !important;
    background-color: transparent !important;
}

/* Cuando la respuesta incorrecta está visible */
.wpProQuiz_response:not(:has(.wpProQuiz_correct[style*="display: block"])) {
    border: 2px solid #C12323 !important;
}

/* Cuando la respuesta correcta está visible */
.wpProQuiz_response:has(.wpProQuiz_correct[style*="display: block"]) {
    border: 2px solid #28a745 !important;
}

/* ===== BOTONES DEL QUIZ ===== */
/* Border-radius y borde desde el principio */
body .learndash-wrapper .wpProQuiz_content .wpProQuiz_button:not(.wpProQuiz_button_reShowQuestion):not(.wpProQuiz_button_restartQuiz),
body .learndash-wrapper .wpProQuiz_content .wpProQuiz_button2,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button2,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_certificate a.btn-blue,
input.wpProQuiz_button,
input.wpProQuiz_QuestionButton,
input[type="button"].wpProQuiz_button,
input[type="button"].wpProQuiz_QuestionButton {
    border-radius: 0 !important;
    border: 2px solid #C12323 !important;
}

/* Hover en botones - solo cambia fondo y color de texto */
body .learndash-wrapper .wpProQuiz_content .wpProQuiz_button:not(.wpProQuiz_button_reShowQuestion):not(.wpProQuiz_button_restartQuiz):hover,
body .learndash-wrapper .wpProQuiz_content .wpProQuiz_button2:hover,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button:hover,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button2:hover,
.learndash-wrapper .wpProQuiz_content .wpProQuiz_certificate a.btn-blue:hover,
input.wpProQuiz_button:hover,
input.wpProQuiz_QuestionButton:hover,
input[type="button"].wpProQuiz_button:hover,
input[type="button"].wpProQuiz_QuestionButton:hover {
    background-color: transparent !important;
    background: transparent !important;
    color: #C12323 !important;
}

/* =================================================
   LEARNDASH QUIZ CUSTOM STYLING
   Color principal: #C12323
   ================================================= */

/* ===== RECUADROS DE RESPUESTAS (LABELS) ===== */
/* Selector específico para sobrescribir el CSS de LearnDash */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item) label {
    border: 2px solid #000 !important; /* Borde negro por defecto */
    border-radius: 0 !important; /* Sin border radius */
}

/* Cuando está seleccionado (clase is-selected) */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item) label.is-selected {
    border-color: #C12323 !important; /* Borde color principal cuando seleccionado */
}

/* Cuando tiene focus */
.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item) label:focus-within {
    border-color: #C12323 !important; /* Borde color principal cuando focus */
}



/* ===== RADIO BUTTONS Y CHECKBOXES ===== */
/* Cuando están marcados (checked) usar color principal */
.wpProQuiz_questionInput:checked {
    accent-color: #C12323 !important;
}

/* Para navegadores que no soporten accent-color */
.wpProQuiz_questionInput[type="radio"]:checked {
    background-color: #C12323 !important;
    border-color: #C12323 !important;
}

.wpProQuiz_questionInput[type="checkbox"]:checked {
    background-color: #C12323 !important;
    border-color: #C12323 !important;
}

/* ===== OTROS ELEMENTOS CON COLOR PRINCIPAL ===== */
/* Headers del quiz */
.wpProQuiz_header {
    color: #C12323 !important;
}

/* Barra de progreso */
.course_progress_blue,
.sending_progress_bar {
    background-color: #C12323 !important;
}

/* Navegación de preguntas en revisión - solo cuando están activas/resueltas */
.wpProQuiz_reviewQuestion ol li.wpProQuiz_reviewQuestionSolved {
    background-color: #C12323 !important;
    border-color: #C12323 !important;
}



/**
 * CSS para validación de contraseñas con ojito
 * Gravity Forms - Formulario de Registro
 */

/* Contenedor de password con posición relativa para el ojito */
#field_16_18 .ginput_container,
#field_16_19 .ginput_container {
    position: relative;
}

/* Botón del ojito */
.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #666;
    transition: color 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.password-toggle:hover {
    color: #333;
}

.password-toggle.active {
    color: #0073aa;
}

/* Asegurar que el input tenga espacio para el ojito */
#input_16_18,
#input_16_19 {
    padding-right: 45px !important;
}

/* Mensajes de validación */
.password-validation-message,
.password-match-message {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.4;
    display: none;
}

.success-message {
    color: #28a745;
    font-weight: 500;
}

.error-message {
    color: #dc3545;
    font-weight: 500;
}

/* Estados de los campos */
.gfield_success .ginput_container input {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 1px rgba(40, 167, 69, 0.25) !important;
}

.gfield_error .ginput_container input {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.25) !important;
}

/* Animaciones suaves */
.password-validation-message,
.password-match-message {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsivo */
@media (max-width: 768px) {
    .password-toggle {
        right: 10px;
    }
    
    #input_16_18,
    #input_16_19 {
        padding-right: 40px !important;
    }
    
    .password-validation-message,
    .password-match-message {
        font-size: 13px;
    }
}

/* Indicador de fortaleza visual (opcional) */
.password-strength-bar {
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
    display: none;
}

.password-strength-fill {
    height: 100%;
    transition: width 0.3s ease, background-color 0.3s ease;
    width: 0%;
}

.password-strength-weak .password-strength-fill {
    width: 33%;
    background-color: #dc3545;
}

.password-strength-medium .password-strength-fill {
    width: 66%;
    background-color: #ffc107;
}

.password-strength-strong .password-strength-fill {
    width: 100%;
    background-color: #28a745;
}





/* Modificar bordes existentes en el listado de cursos */
.ld-course-list-items .ld-item-list {
    border-color: #000 !important;
    border-width: 2px !important;
    border-radius: 0 !important;
}

.ld-course-list-items .ld-item-list-item {
    border-color: #000 !important;
    border-width: 2px !important;
    border-radius: 0 !important;
}

.ld-course-list-items .ld-item-list-item-preview {
    border-radius: 0 !important;
}

/* Por si el borde está en el wrapper */
.ld-course-list-items .learndash-wrapper {
    border-color: #000 !important;
    border-width: 2px !important;
    border-radius: 0 !important;
}

/* Estilos del enlace */
.ld-course-list-items .ld-item-name {
    color: #000;
    text-decoration: none;
}

.ld-course-list-items .ld-item-name:hover {
    text-decoration: underline;
}



/* Cambia el color del botón "Inicie sesión para inscribirse" y su texto */
.elementor-17992 .elementor-element.elementor-element-3b1f223 .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled .ld-course-status-segment.ld-course-status-seg-action .ld-course-status-action a.ld-button,

.elementor-17992 .elementor-element.elementor-element-3b1f223 .learndash-wrapper .ld-course-status.ld-course-status-not-enrolled .ld-course-status-segment.ld-course-status-seg-action .ld-course-status-action a.ld-button:hover {
    
    background-color: #c12323 !important; /* Tu nuevo color rojo */
    color: #FFFFFF !important; /* Color de texto blanco para legibilidad */
}







/* Hacer que la lista de clases tenga formato boxed */
.learndash-wrapper--course > .ld-item-list.ld-lesson-list {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Responsive para tablets */
@media (max-width: 1024px) {
    .learndash-wrapper--course > .ld-item-list.ld-lesson-list {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* Responsive para móviles */
@media (max-width: 767px) {
    .learndash-wrapper--course > .ld-item-list.ld-lesson-list {
        padding-left: 15px;
        padding-right: 15px;
    }
}





/* --- ESTILOS PARA EL ACORDEÓN MÓVIL (BOTÓN PERSONALIZADO) --- */
@media (max-width: 767px) {
    .mobile-tab h4.collapsible-title {
        position: relative;
        padding-right: 45px;
        cursor: pointer;
    }
    .mobile-tab h4.collapsible-title::after {
        content: '−';
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        background-color: #C12323;
        color: white;
        width: 28px;
        height: 28px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: bold;
        line-height: 1;
        transition: all 0.3s ease;
    }
    .mobile-tab.collapsed h4.collapsible-title::after {
        content: '+';
    }
}