:root{
    --avanzo-blue:#042f63;
    --avanzo-blue-2:#0b5fa5;
    --avanzo-soft:#eef6ff;
    --avanzo-border:#cddbea;
    --avanzo-text:#062b57;
    --avanzo-muted:#526885;
    --avanzo-ok:#147a3f;
    --avanzo-ok-bg:#e7f8ee;
    --avanzo-error:#b33124;
    --avanzo-error-bg:#fff0ed;
    --avanzo-amber:#f59f20;
    --avanzo-shadow:0 18px 45px rgba(4,47,99,.13);
}

.avanzo-page{
    background:linear-gradient(135deg,#f7fbff 0%,#edf6ff 58%,#fffaf0 100%);
    min-height:100vh;
    padding:20px 14px 58px;
}

.avanzo-wrap{
    max-width:1180px;
    margin:0 auto;
}

.avanzo-page-head{
    background:#fff;
    border:1px solid var(--avanzo-border);
    border-radius:24px;
    box-shadow:var(--avanzo-shadow);
    padding:24px;
    margin-bottom:24px;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.avanzo-page-head::after{
    content:"";
    position:absolute;
    top:-58px;
    right:-48px;
    width:142px;
    height:142px;
    border-radius:999px;
    background:rgba(255,183,53,.18);
    pointer-events:none;
}

.avanzo-page-head-compact{
    min-height:118px;
}

.avanzo-page-title{
    position:relative;
    z-index:1;
}

.avanzo-page-title .retos-kicker{
    margin-bottom:8px;
}

.avanzo-page-title h1{
    color:var(--avanzo-text);
    font-size:clamp(2rem,4vw,3.15rem);
    line-height:.95;
    margin:0 0 8px;
    letter-spacing:-.03em;
}

.avanzo-page-title p{
    color:var(--avanzo-muted);
    font-weight:800;
    margin:0;
    line-height:1.45;
}

.avanzo-head-back{
    position:relative;
    z-index:1;
    white-space:nowrap;
}

.avanzo-practice-shell{
    display:block;
}

.avanzo-practice-card{
    background:#fff;
    border:1px solid var(--avanzo-border);
    border-radius:24px;
    box-shadow:var(--avanzo-shadow);
    overflow:hidden;
}

.avanzo-practice-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    padding:22px 24px;
    border-bottom:1px solid var(--avanzo-border);
    background:#fbfdff;
}

.avanzo-practice-head h2{
    color:var(--avanzo-text);
    font-size:clamp(1.5rem,3vw,2.2rem);
    line-height:1.05;
    margin:10px 0 8px;
}

.avanzo-practice-head p{
    color:var(--avanzo-muted);
    font-weight:800;
    line-height:1.5;
    margin:0;
}

.avanzo-demo-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#edf6ff;
    color:var(--avanzo-blue);
    border:1px solid var(--avanzo-border);
    border-radius:999px;
    padding:10px 14px;
    font-weight:900;
    white-space:nowrap;
}

.avanzo-area-tabs{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
    padding:18px 24px;
    border-bottom:1px solid var(--avanzo-border);
    background:#fff;
}

.avanzo-area-tab{
    border:1px solid var(--avanzo-border);
    background:#f8fbff;
    color:var(--avanzo-text);
    border-radius:12px;
    padding:13px 12px;
    font-weight:900;
    cursor:pointer;
    transition:.16s ease;
    min-height:46px;
}

.avanzo-area-tab:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 20px rgba(4,47,99,.07);
}

.avanzo-area-tab.active{
    color:#fff;
    background:linear-gradient(135deg,var(--avanzo-blue),var(--avanzo-blue-2));
    border-color:transparent;
    box-shadow:0 10px 20px rgba(4,47,99,.20);
}

.avanzo-question-panel{
    padding:24px;
}

.avanzo-question-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.avanzo-question-meta span,
.avanzo-question-tags span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#edf6ff;
    color:var(--avanzo-blue);
    border:1px solid #d8e8f7;
    border-radius:999px;
    padding:9px 12px;
    font-weight:900;
    font-size:.84rem;
}

.avanzo-question-box{
    background:#f8fbff;
    border:1px solid var(--avanzo-border);
    border-radius:18px;
    padding:28px 32px;
    min-height:205px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:14px;
}

.avanzo-question-tags{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.avanzo-question-tags span{
    background:#fff;
}

.avanzo-question-box h3{
    color:var(--avanzo-text);
    font-size:clamp(1.28rem,2.4vw,1.75rem);
    line-height:1.45;
    margin:0;
    letter-spacing:-.01em;
}

.avanzo-question-text-base{
    background:#ffffff;
    border:1px solid var(--avanzo-border);
    border-left:5px solid var(--avanzo-blue-2);
    border-radius:14px;
    color:var(--avanzo-text);
    font-size:1rem;
    font-weight:800;
    line-height:1.7;
    padding:16px 18px;
    white-space:pre-line;
}

.avanzo-question-visual{
    background:#fff;
    border:1px solid var(--avanzo-border);
    border-radius:16px;
    padding:12px;
    margin-top:6px;
}

.avanzo-question-visual img{
    display:block;
    width:100%;
    max-width:680px;
    margin:0 auto;
    height:auto;
    border-radius:12px;
}

.avanzo-options{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin:22px 0 12px;
}

.avanzo-option-btn{
    border:1px solid var(--avanzo-border);
    background:#fff;
    color:var(--avanzo-text);
    border-radius:16px;
    padding:14px 16px;
    min-height:66px;
    cursor:pointer;
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    align-items:center;
    column-gap:16px;
    text-align:left;
    transition:.16s ease;
    overflow:hidden;
}

.avanzo-option-btn:hover:not(:disabled){
    transform:translateY(-1px);
    box-shadow:0 12px 24px rgba(4,47,99,.09);
    border-color:#9fc3e7;
}

.avanzo-option-btn:disabled{
    cursor:default;
}

.avanzo-option-letter{
    width:34px;
    height:34px;
    min-width:34px;
    border-radius:999px;
    display:grid;
    place-items:center;
    justify-self:center;
    border:2px solid var(--avanzo-blue-2);
    color:var(--avanzo-blue);
    font-weight:900;
    background:#fff;
}

.avanzo-option-text{
    display:block;
    min-width:0;
    width:100%;
    font-size:1rem;
    line-height:1.45;
    color:var(--avanzo-text);
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
    padding-left:2px;
}

.avanzo-option-btn.selected{
    box-shadow:0 0 0 3px rgba(11,95,165,.12);
}

.avanzo-option-btn.is-correct{
    background:var(--avanzo-ok-bg);
    border-color:#94d6af;
}

.avanzo-option-btn.is-correct .avanzo-option-letter{
    background:var(--avanzo-ok);
    border-color:var(--avanzo-ok);
    color:#fff;
}

.avanzo-option-btn.is-wrong{
    background:var(--avanzo-error-bg);
    border-color:#efb5ac;
}

.avanzo-option-btn.is-wrong .avanzo-option-letter{
    background:var(--avanzo-error);
    border-color:var(--avanzo-error);
    color:#fff;
}

.avanzo-feedback{
    border:1px solid var(--avanzo-border);
    background:#f8fbff;
    color:var(--avanzo-text);
    border-radius:14px;
    padding:14px 16px;
    font-weight:800;
    line-height:1.55;
    min-height:54px;
}

.avanzo-feedback.info{
    background:#edf6ff;
    color:#173d6b;
}

.avanzo-feedback.correct{
    background:var(--avanzo-ok-bg);
    border-color:#9ad9b5;
    color:#0f6333;
}

.avanzo-feedback.wrong{
    background:var(--avanzo-error-bg);
    border-color:#efb5ac;
    color:#93271d;
}

.avanzo-practice-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:16px;
    flex-wrap:wrap;
}

.avanzo-practice-actions .retos-btn,
.avanzo-practice-actions .retos-home-btn{
    min-width:170px;
}

.avanzo-next-disabled{
    opacity:.55;
    box-shadow:none!important;
    pointer-events:none;
}

.avanzo-summary{
    margin:0 24px 24px;
    border:1px solid var(--avanzo-border);
    border-radius:18px;
    background:#fbfdff;
    padding:18px;
}

.avanzo-summary h3{
    margin:0 0 14px;
    color:var(--avanzo-text);
    font-size:1.25rem;
}

.avanzo-summary-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.avanzo-summary-grid div{
    background:#fff;
    border:1px solid #d8e8f7;
    border-radius:14px;
    padding:14px;
}

.avanzo-summary-grid strong{
    display:block;
    color:var(--avanzo-blue);
    font-size:1.7rem;
    line-height:1;
}

.avanzo-summary-grid span{
    display:block;
    color:var(--avanzo-muted);
    font-weight:900;
    margin-top:5px;
}

@media (max-width:900px){
    .avanzo-page-head,
    .avanzo-practice-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .avanzo-head-back{
        width:100%;
    }

    .avanzo-area-tabs{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .avanzo-options{
        grid-template-columns:1fr;
    }
}

@media (max-width:620px){
    .avanzo-page{
        padding:14px 10px 42px;
    }

    .avanzo-page-head,
    .avanzo-practice-card{
        border-radius:18px;
    }

    .avanzo-page-head,
    .avanzo-practice-head,
    .avanzo-area-tabs,
    .avanzo-question-panel{
        padding:16px;
    }

    .avanzo-page-title h1{
        font-size:2rem;
    }

    .avanzo-area-tabs{
        grid-template-columns:1fr;
    }

    .avanzo-question-box{
        padding:20px;
        min-height:180px;
    }

    .avanzo-practice-actions .retos-btn,
    .avanzo-practice-actions .retos-home-btn{
        width:100%;
        min-width:0;
    }

    .avanzo-summary{
        margin:0 16px 16px;
    }

    .avanzo-summary-grid{
        grid-template-columns:1fr;
    }
}

/* AVANZO v20260619.08 — navegación secuencial, saltar preguntas y respuestas amplias */
.avanzo-nav-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    flex-wrap:wrap;
}

.avanzo-secondary-btn{
    background:#fff!important;
    color:var(--avanzo-blue)!important;
    border:1px solid var(--avanzo-border)!important;
    box-shadow:none!important;
}

.avanzo-secondary-btn:hover:not(:disabled){
    transform:translateY(-1px);
    box-shadow:0 10px 20px rgba(4,47,99,.07)!important;
}

.avanzo-practice-actions button:disabled{
    opacity:.55;
    cursor:default;
    transform:none!important;
    box-shadow:none!important;
}

.avanzo-summary-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

@media (max-width:900px){
    .avanzo-practice-actions{
        align-items:stretch;
    }

    .avanzo-nav-actions{
        width:100%;
        justify-content:stretch;
    }

    .avanzo-nav-actions .retos-btn,
    .avanzo-nav-actions .retos-home-btn{
        flex:1 1 220px;
    }

    .avanzo-summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:620px){
    .avanzo-nav-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .avanzo-summary-grid{
        grid-template-columns:1fr;
    }
}


/* AVANZO v20260619.08 — opciones con espacio amplio para evitar cortes o sobreposición */
.avanzo-options{
    grid-template-columns:repeat(2,minmax(300px,1fr));
    align-items:stretch;
}

.avanzo-option-btn{
    width:100%;
    min-height:72px;
    padding:16px 20px;
    grid-template-columns:46px minmax(0,1fr);
    column-gap:18px;
}

.avanzo-option-letter{
    grid-column:1;
    grid-row:1;
}

.avanzo-option-text{
    grid-column:2;
    grid-row:1;
    display:block;
    min-width:0;
    max-width:100%;
    font-weight:900;
    line-height:1.45;
    text-align:left;
}

@media (max-width:760px){
    .avanzo-options{
        grid-template-columns:1fr;
    }
}

@media (max-width:420px){
    .avanzo-option-btn{
        grid-template-columns:40px minmax(0,1fr);
        column-gap:12px;
        padding:14px;
    }
}


/* AVANZO v20260619.09 — opciones tipo etiqueta deshabilitada, sin cortes ni sobreposición */
.avanzo-options{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.avanzo-option-btn{
    display:flex;
    align-items:stretch;
    gap:12px;
    width:100%;
    min-height:70px;
    height:auto;
    padding:10px;
    overflow:visible;
    border-radius:16px;
    background:#fff;
}

.avanzo-option-letter{
    flex:0 0 38px;
    width:38px;
    height:38px;
    min-width:38px;
    margin-top:6px;
    border-radius:999px;
    display:grid;
    place-items:center;
    border:2px solid var(--avanzo-blue-2);
    color:var(--avanzo-blue);
    background:#fff;
    font-weight:900;
    line-height:1;
}

.avanzo-option-text{
    flex:1 1 auto;
    min-width:0;
    width:100%;
    max-width:none;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    background:#f8fbff;
    border:1px solid #d8e8f7;
    border-radius:12px;
    padding:10px 14px;
    color:var(--avanzo-text);
    font-weight:900;
    font-size:1rem;
    line-height:1.5;
    text-align:left;
    white-space:normal;
    overflow:visible;
    overflow-wrap:anywhere;
    word-break:normal;
}

.avanzo-option-btn:hover:not(:disabled) .avanzo-option-text{
    border-color:#9fc3e7;
    background:#ffffff;
}

.avanzo-option-btn.is-correct .avanzo-option-text{
    background:#f3fbf6;
    border-color:#94d6af;
    color:#0f6333;
}

.avanzo-option-btn.is-wrong .avanzo-option-text{
    background:#fff7f5;
    border-color:#efb5ac;
    color:#93271d;
}

@media (max-width:760px){
    .avanzo-options{
        grid-template-columns:1fr;
    }
}

@media (max-width:420px){
    .avanzo-option-btn{
        gap:10px;
        padding:9px;
    }

    .avanzo-option-letter{
        flex-basis:36px;
        width:36px;
        height:36px;
        min-width:36px;
    }

    .avanzo-option-text{
        padding:10px 12px;
        font-size:.95rem;
    }
}
