/* ==========================================================================
   092 OPOTEST - DESIGN SYSTEM & MOBILE RESPONSIVE OPTIMIZATION
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800&display=swap');

/* --- GLOBAL RESET & ROOT OVERFLOW PROTECTION --- */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

.ays-quiz-category-selective-main-container,
.ays-quiz-container,
.ays-quiz-wrap {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: #1a1b21 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* Eliminate excessive top margin under main header */
.site-content,
.inside-article,
.entry-content,
.elementor-section,
.elementor-column,
.elementor-widget-container,
.ays-quiz-wrap {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ==========================================================================
   MOCKUP 1: GENERADOR DE TEST (DESKTOP & MOBILE RESPONSIVE)
   ========================================================================== */

.ays-quiz-category-selective-main-container {
    width: 92% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 10px 10px 110px 10px !important; /* Bottom space for sticky bar */
    box-sizing: border-box !important;
}

.ays-quiz-category-selective-header-container {
    text-align: center !important;
    margin-bottom: 30px !important;
    margin-top: 10px !important;
    padding: 0 5px !important;
}

.ays-quiz-category-selective-header-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    color: #0A0A0A !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
    line-height: 1.2 !important;
}

.ays-quiz-category-selective-subtitle {
    font-size: 1.05rem !important;
    color: #444651 !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    line-height: 1.55 !important;
}

/* --- GRID SYSTEM --- */
.ays-quiz-category-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 1024px) {
    .ays-quiz-category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 680px) {
    .ays-quiz-category-selective-main-container {
        width: 96% !important;
        padding: 5px 5px 120px 5px !important;
    }
    .ays-quiz-category-selective-header-text {
        font-size: 1.65rem !important;
    }
    .ays-quiz-category-selective-subtitle {
        font-size: 0.925rem !important;
    }
    .ays-quiz-category-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* --- GLASS CARD DESIGN --- */
.ays-quiz-category-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(229, 231, 235, 1) !important;
    border-radius: 0.75rem !important; /* 12px */
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0px 4px 20px rgba(10, 10, 10, 0.05) !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.ays-quiz-category-card:hover,
.ays-quiz-category-card:focus-within {
    border-color: #1E3A8A !important;
    box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2), 0px 8px 24px rgba(10, 10, 10, 0.08) !important;
    transform: translateY(-2px) !important;
}

.ays-quiz-category-card-header {
    margin-bottom: 14px !important;
}

.ays-quiz-category-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #1a1b21 !important;
    line-height: 1.45 !important;
    cursor: pointer !important;
    display: block !important;
    word-break: break-word !important;
}

.ays-quiz-category-card-body {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: auto !important;
    flex-wrap: nowrap !important;
}

.ays-quiz-category-selective-text-input {
    width: 84px !important;
    padding: 8px 8px !important;
    background-color: #f4f3fa !important;
    border: 1px solid #c5c5d3 !important;
    border-radius: 0.375rem !important; /* 6px */
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #1a1b21 !important;
    text-align: center !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.ays-quiz-category-selective-text-input:focus {
    border-color: #1E3A8A !important;
    box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2) !important;
    background-color: #ffffff !important;
}

.ays-quiz-cat-max {
    font-size: 0.75rem !important;
    color: #757682 !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
    text-align: right !important;
}

/* --- STICKY BOTTOM ACTION BAR --- */
.opotest-sticky-action-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    border-top: 1px solid #e3e1e9 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
    padding: 14px 16px !important;
    z-index: 9999 !important;
    box-sizing: border-box !important;
}

.opotest-action-bar-inner {
    max-width: 1280px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
}

.opotest-counter-pill {
    padding: 10px 18px !important;
    background-color: #f4f3fa !important;
    border-radius: 9999px !important;
    color: #0A0A0A !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid #e3e1e9 !important;
    box-sizing: border-box !important;
}

.opotest-check-icon {
    flex-shrink: 0 !important;
}

.opotest-orange-btn,
.ays-quiz-category-selective-submit-bttn {
    background-color: #FFA500 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0.375rem !important; /* 6px */
    padding: 12px 28px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(255, 165, 0, 0.3) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

.opotest-orange-btn:hover,
.ays-quiz-category-selective-submit-bttn:hover {
    background-color: #ff9500 !important;
    box-shadow: 0 4px 12px rgba(255, 165, 0, 0.4) !important;
    transform: translateY(-1px) !important;
}

.ays-quiz-category-selective-submit-bttn:disabled {
    background-color: #FFA500 !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

@media (max-width: 680px) {
    .opotest-action-bar-inner {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .opotest-counter-pill {
        width: 100% !important;
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }
    .opotest-orange-btn,
    .ays-quiz-category-selective-submit-bttn {
        width: 100% !important;
        padding: 11px 16px !important;
        font-size: 0.925rem !important;
    }
}

/* Secondary Actions below Test */
.opotest-secondary-actions {
    text-align: center !important;
    margin-top: 25px !important;
    padding-bottom: 20px !important;
}

.ays-quiz-category-selective-restart-bttn {
    background-color: #ffffff !important;
    color: #757682 !important;
    border: 1px solid #e3e1e9 !important;
    border-radius: 6px !important;
    padding: 8px 18px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.ays-quiz-category-selective-restart-bttn:hover {
    color: #1E3A8A !important;
    border-color: #1E3A8A !important;
    background-color: #f4f3fa !important;
}

/* ==========================================================================
   MOCKUP 2: EXAM / QUESTION INTERFACE (MAX WIDTH & RESPONSIVE)
   ========================================================================== */

/* Main quiz card container */
.ays-quiz-container {
    width: 94% !important;
    max-width: 1200px !important;
    margin: 12px auto !important;
    background: #ffffff !important;
    border: 1px solid #e3e1e9 !important;
    border-radius: 0.75rem !important; /* 12px rounded-xl */
    box-shadow: 0px 4px 20px rgba(10, 10, 10, 0.05) !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

@media (max-width: 680px) {
    .ays-quiz-container {
        width: 98% !important;
        margin: 8px auto !important;
        border-radius: 0.5rem !important;
    }
}

/* STEP-BY-STEP DISPLAY: Hide non-active steps that are DIRECT children of the form.
   Cloned questions inside .ays_quiz_results are grandchildren, so they are NOT affected. */
.ays-quiz-container form > .step {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.ays-quiz-container form > .step:not(.active-step) {
    display: none !important;
}

.ays-quiz-container form > .step.active-step {
    display: block !important;
}

/* RESULTS CONTAINER & QUESTIONS REVIEW DISPLAY */
.ays_quiz_results,
.ays_quiz_results_page,
.ays-quiz-after-finish,
.enable_questions_result {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ays_quiz_results .step,
.ays_quiz_results .ays_question_result,
.ays_quiz_results_page .step,
.ays-quiz-after-finish .step,
.enable_questions_result .step {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-bottom: 24px !important;
    border-bottom: 1px solid #e3e1e9 !important;
    padding-bottom: 20px !important;
    width: 100% !important;
}

/* RESULTS SCORE CARD & STATS STYLING */
.ays_score,
p.ays_score,
.ays_score_display {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1E3A8A !important;
    background: #f4f3fa !important;
    border: 2px solid #1E3A8A !important;
    border-radius: 0.75rem !important;
    padding: 16px 24px !important;
    display: inline-block !important;
    margin: 16px auto 24px auto !important;
    text-align: center !important;
}

.ays_score_message,
.ays_score_percent,
.ays_message {
    text-align: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 1rem !important;
    color: #1a1b21 !important;
}

/* TOP PROGRESS & TOPIC HEADER BAR */
.opotest-exam-header {
    width: 100% !important;
    padding: 16px 28px !important;
    border-bottom: 1px solid #e3e1e9 !important;
    background-color: #ffffff !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    clear: both !important;
}

.opotest-progress-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.opotest-progress-label {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #757682 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.opotest-progress-bar-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.opotest-progress-track {
    width: 120px !important;
    height: 8px !important;
    background-color: #e3e1e9 !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
}

.opotest-progress-fill {
    height: 100% !important;
    background-color: #22C55E !important;
    border-radius: 9999px !important;
    transition: width 0.3s ease !important;
}

.opotest-step-count {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #444651 !important;
}

.opotest-topic-badge {
    background-color: #dce1ff !important;
    color: #00164e !important;
    padding: 5px 14px !important;
    border-radius: 9999px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
}

/* HIDE REDUNDANT NATIVE QUESTION COUNTER & CATEGORY BOX */
p.ays-quiz-question-category-box,
p.ays-question-counter,
.ays-question-counter,
.ays-quiz-question-count,
.ays-questions-count,
.ays_question_count,
.ays-field-count,
.ays-quiz-question-number,
.ays-step-count {
    display: none !important;
}

/* Question Inner Container */
.ays-abs-fs,
.ays-start-page {
    padding: 24px 32px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

@media (max-width: 680px) {
    .opotest-exam-header {
        padding: 12px 14px !important;
    }
    .opotest-progress-track {
        width: 80px !important;
    }
    .ays-abs-fs,
    .ays-start-page {
        padding: 16px 14px !important;
    }
}

/* Question Title (SEMIBOLD & CURSIVA & MISMO TAMAÑO QUE RESPUESTAS: 0.975rem) */
.ays-quiz-container .ays-fs-title,
.ays-quiz-container .ays-quiz-question-text,
.ays-quiz-container .ays_quiz_question,
.ays-quiz-container .ays-question-text {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.975rem !important;
    font-weight: 600 !important; /* Semibold */
    font-style: italic !important; /* Cursiva */
    color: #1a1b21 !important;
    line-height: 1.45 !important;
    margin-bottom: 20px !important;
    margin-top: 6px !important;
    text-align: left !important;
    word-break: break-word !important;
}

.ays-quiz-container .ays-fs-title p,
.ays-quiz-container .ays-quiz-question-text p,
.ays-quiz-container .ays_quiz_question p {
    font-size: 0.975rem !important;
    font-weight: 600 !important;
    font-style: italic !important;
    color: #1a1b21 !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

@media (max-width: 680px) {
    .ays-quiz-container .ays-fs-title,
    .ays-quiz-container .ays-quiz-question-text,
    .ays-quiz-container .ays_quiz_question,
    .ays-quiz-container .ays-question-text,
    .ays-quiz-container .ays-fs-title p,
    .ays-quiz-container .ays-quiz-question-text p {
        font-size: 0.925rem !important;
        margin-bottom: 14px !important;
    }
}

/* Options Container */
.ays-quiz-answers {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

/* Single Option Item */
.ays-quiz-container .ays-field {
    display: flex !important;
    align-items: flex-start !important;
    padding: 14px 18px !important;
    border: 1px solid #c5c5d3 !important;
    border-radius: 0.5rem !important; /* 8px */
    background-color: #ffffff !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

@media (max-width: 680px) {
    .ays-quiz-container .ays-field {
        padding: 12px 14px !important;
    }
}

.ays-quiz-container .ays-field:hover {
    border-color: #1E3A8A !important;
    background-color: #f4f3fa !important;
}

.ays-quiz-container .ays-field input[type="radio"],
.ays-quiz-container .ays-field input[type="checkbox"] {
    margin-top: 3px !important;
    margin-right: 12px !important;
    width: 18px !important;
    height: 18px !important;
    accent-color: #1E3A8A !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.ays-quiz-container .ays-field label {
    font-size: 0.975rem !important;
    color: #1a1b21 !important;
    line-height: 1.45 !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    flex-grow: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    word-break: break-word !important;
}

/* --- STATE: INCORRECT ANSWER (RED) --- */
.ays-quiz-container .ays-field.wrong_div,
.ays-quiz-container .ays-field.wrong,
.ays-quiz-container .ays-field.checked_wrong_div {
    border-color: #EF4444 !important;
    background-color: rgba(239, 68, 68, 0.08) !important;
}

/* Remove background from ALL inner elements to prevent double-layer red */
.ays-quiz-container .ays-field.wrong_div label,
.ays-quiz-container .ays-field.wrong_div span,
.ays-quiz-container .ays-field.wrong_div div,
.ays-quiz-container .ays-field.wrong label,
.ays-quiz-container .ays-field.wrong span,
.ays-quiz-container .ays-field.wrong div,
.ays-quiz-container .ays-field.checked_wrong_div label,
.ays-quiz-container .ays-field.checked_wrong_div span,
.ays-quiz-container .ays-field.checked_wrong_div div {
    background: transparent !important;
    background-color: transparent !important;
    color: #93000a !important;
    font-weight: 500 !important;
}

.ays-quiz-container .ays-field.wrong_div input,
.ays-quiz-container .ays-field.wrong input,
.ays-quiz-container .ays-field.checked_wrong_div input {
    accent-color: #EF4444 !important;
}

/* Override Quiz Maker's native label.wrong / label.correct background */
.ays-quiz-container label.wrong,
.ays-quiz-container label.answered.wrong,
.ays-quiz-container .ays-field label.wrong {
    background: transparent !important;
    background-color: transparent !important;
}


/* --- STATE: CORRECT ANSWER (GREEN) --- */
.ays-quiz-container .ays-field.correct_div,
.ays-quiz-container .ays-field.correct,
.ays-quiz-container .ays-field.checked_answer_div {
    border-color: #22C55E !important;
    background-color: rgba(34, 197, 94, 0.1) !important;
}

/* Inner elements of correct answers - keep native styling */
.ays-quiz-container .ays-field.correct_div label,
.ays-quiz-container .ays-field.correct label,
.ays-quiz-container .ays-field.checked_answer_div label {
    color: #1a1b21 !important;
    font-weight: 500 !important;
}

.ays-quiz-container .ays-field.correct_div input,
.ays-quiz-container .ays-field.correct input,
.ays-quiz-container .ays-field.checked_answer_div input {
    accent-color: #22C55E !important;
}

/* --- FUNDAMENTO JURÍDICO (EXPLANATION BLOCK) --- */
.ays_questtion_explanation,
.right_answer_text,
.wrong_answer_text {
    margin: 20px 0 16px 0 !important;
    padding: 16px 18px !important;
    background-color: #f4f3fa !important;
    border-left: 4px solid #1E3A8A !important;
    border-radius: 0 0.5rem 0.5rem 0 !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    display: block !important;
}

/* Hide completely if empty or whitespace-only */
.ays_questtion_explanation:empty,
.right_answer_text:empty,
.wrong_answer_text:empty {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Hide right/wrong answer text by default - they often render as empty blue bars */
.right_answer_text,
.wrong_answer_text {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.opotest-fundamento-title {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #1E3A8A !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
}

.ays_questtion_explanation p,
.right_answer_text p,
.wrong_answer_text p {
    font-size: 0.925rem !important;
    color: #444651 !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    word-break: break-word !important;
}

/* --- ACTION BUTTONS & PREV / NEXT / FINISH STYLING --- */
.ays_buttons_div {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 20px !important;
}

input.ays_next,
button.ays_next,
input.ays_previous,
button.ays_previous,
input.ays_finish,
button.ays_finish,
input[name="ays_finish_quiz"] {
    background-color: #22C55E !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0.5rem !important; /* 8px */
    padding: 12px 32px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

/* Finish button (Ver resultados) ALWAYS VISIBLE on last step */
input.ays_finish,
button.ays_finish,
input[name="ays_finish_quiz"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

input.ays_next:hover,
button.ays_next:hover,
input.ays_previous:hover,
button.ays_previous:hover,
input.ays_finish:hover,
button.ays_finish:hover,
input[name="ays_finish_quiz"]:hover {
    background-color: #16a34a !important;
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Hide native Quiz Maker elements */
.ays_timer_container,
.ays-quiz-timer,
.ays-timer,
.ays-time-count,
.ays_quizn_ancnoxneri_qanak,
.ays_quiz_reports,
.ays_question_report,
.ays-quiz-open-report-window,
#ays-quiz-question-report-modal {
    display: none !important;
}

/* --- IMPUGNACIÓN CONTAINER --- */
.ays-impugnacion-container {
    background-color: #fef9e7 !important;
    border: 1px solid #f5d66b !important;
    border-radius: 0.5rem !important;
    padding: 12px 16px !important;
    margin: 14px 0 !important;
    display: block !important;
    clear: both !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* HIDE ALL "VOLVER A PAGINA BIENVENIDA" LINKS GLOBALLY */
a[href*="pagina-bienvenida"],
a[href*="bienvenida"] {
    display: none !important;
}