/* ── Wrap principal ───────────────────────────────────────── */
.lexia-test-wrap {
    max-width:  1100px;
    margin:     0 auto;
    font-family: var(--lexia-font, system-ui, sans-serif);
}

/* ── Configuración ────────────────────────────────────────── */
.lexia-test-config {
    max-width:     680px;
    margin:        2rem auto;
    background:    #fff;
    border-radius: 16px;
    padding:       2rem;
    box-shadow:    0 4px 24px rgba(0,0,0,.08);
}
.lexia-test-config h2 {
    margin:      0 0 1.5rem;
    color:       var(--lexia-primary, #1a237e);
    font-size:   1.5rem;
}

.lexia-config-group { margin-bottom: 1.5rem; }
.lexia-config-label {
    display:       block;
    font-weight:   700;
    font-size:     .9rem;
    color:         var(--lexia-text-muted, #546e7a);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .6rem;
}
.lexia-config-area-label {
    font-weight:   700;
    font-size:     .85rem;
    margin:        .75rem 0 .4rem;
}

/* ── Chips ────────────────────────────────────────────────── */
.lexia-chips {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
}
.lexia-chip {
    padding:       6px 14px;
    border:        1px solid #ddd;
    border-radius: 20px;
    background:    #f5f5f5;
    font-size:     .9rem;
    cursor:        pointer;
    transition:    all .15s;
    white-space:   nowrap;
}
.lexia-chip:hover { border-color: var(--lexia-primary, #1a237e); }
.lexia-chip.active {
    background:   var(--lexia-primary, #1a237e);
    color:        #fff;
    border-color: var(--lexia-primary, #1a237e);
}
.lexia-chips--temas .lexia-chip { font-size: .8rem; }

/* ── Alerta ───────────────────────────────────────────────── */
.lexia-alert {
    background:    #fff3cd;
    border:        1px solid #ffc107;
    border-radius: 8px;
    padding:       .75rem 1rem;
    font-size:     .9rem;
    color:         #856404;
}

/* ── Header del test ──────────────────────────────────────── */
.lexia-test-header {
    background:    var(--lexia-primary, #1a237e);
    padding:       .6rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}
.lexia-hdr-row {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}
.lexia-badge {
    padding:       4px 10px;
    background:    rgba(255,255,255,.15);
    color:         #fff;
    border-radius: 20px;
    font-size:     .85rem;
    font-weight:   600;
}
.lexia-badge--ok  { background: rgba(76,175,80,.3); }
.lexia-badge--err { background: rgba(244,67,54,.3); }
.lexia-badge--time { margin-left: auto; }

/* ── Body del test ────────────────────────────────────────── */
.lexia-test-body {
    display: flex;
    gap:     1.5rem;
}
.lexia-pregunta-wrap {
    flex:       1;
    min-width:  0;
    background: #fff;
    border-radius: 12px;
    padding:    1.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.lexia-revision-wrap {
    flex:          0 0 200px;
    background:    #fff;
    border-radius: 12px;
    padding:       1rem;
    box-shadow:    0 2px 12px rgba(0,0,0,.07);
    align-self:    flex-start;
    position:      sticky;
    top:           1rem;
}

/* ── Pregunta ─────────────────────────────────────────────── */
.lexia-pregunta__enunciado {
    font-size:   1rem;
    line-height: 1.5;
    color:       var(--lexia-primary, #1a237e);
    margin:      0 0 1.2rem;
    display:     flex;
    gap:         .5rem;
    align-items: flex-start;
}
.lexia-pregunta__num {
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    width:          28px;
    height:         28px;
    background:     var(--lexia-primary, #1a237e);
    color:          #fff;
    border-radius:  50%;
    font-size:      .8rem;
    font-weight:    700;
    flex-shrink:    0;
}
.lexia-pregunta__id {
    color:     #aaa;
    font-size: .75rem;
    flex-shrink: 0;
}

/* ── Respuestas ───────────────────────────────────────────── */
.lexia-respuestas { display: flex; flex-direction: column; gap: 8px; }
.lexia-resp {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       10px 14px;
    border:        1px solid #e0e0e0;
    border-radius: 8px;
    cursor:        pointer;
    transition:    all .15s;
    font-size:     .95rem;
}
.lexia-resp:hover:not(.lexia-resp--ok):not(.lexia-resp--err) {
    border-color: var(--lexia-primary, #1a237e);
    background:   #f0f4ff;
}
.lexia-resp--ok  { background: #e8f5e9; border-color: #4caf50; }
.lexia-resp--err { background: #ffebee; border-color: #f44336; }

.lexia-resp__letra {
    width:          28px;
    height:         28px;
    background:     var(--lexia-primary, #1a237e);
    color:          #fff;
    border-radius:  50%;
    display:        flex;
    align-items:    center;
    justify-content:center;
    font-weight:    700;
    font-size:      .85rem;
    flex-shrink:    0;
}
.lexia-resp--ok  .lexia-resp__letra { background: #4caf50; }
.lexia-resp--err .lexia-resp__letra { background: #f44336; }
.lexia-resp__check { color: #4caf50; font-size: 1.2rem; margin-left: auto; }

/* ── Explicación ──────────────────────────────────────────── */
.lexia-explicacion {
    margin-top:   1rem;
    padding:      1rem 1.25rem;
    background:   #fff8e1;
    border-left:  4px solid #ffa000;
    border-radius: 0 8px 8px 0;
    font-size:    .9rem;
    line-height:  1.6;
}

/* ── Acciones pregunta ────────────────────────────────────── */
.lexia-pregunta__acciones {
    display:    flex;
    gap:        8px;
    margin-top: 1.5rem;
    flex-wrap:  wrap;
}

/* ── Panel revisión ───────────────────────────────────────── */
.lexia-revision {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   5px;
}
.lexia-rev-item {
    aspect-ratio:   1;
    display:        flex;
    align-items:    center;
    justify-content:center;
    border-radius:  6px;
    cursor:         pointer;
    font-size:      .75rem;
    font-weight:    700;
    background:     #f0f0f0;
    border:         1px solid #ddd;
    transition:     transform .1s;
}
.lexia-rev-item:hover        { transform: scale(1.1); }
.lexia-rev-item--actual      { border: 3px solid var(--lexia-primary, #1a237e); }
.lexia-rev-item--ok          { background: #c8e6c9; }
.lexia-rev-item--err         { background: #ffcdd2; }
.lexia-rev-item--cont        { background: #bbdefb; }
.lexia-rev-item--marcada     { border: 2px solid #ff9800; }

/* ── Resultado ────────────────────────────────────────────── */
.lexia-resultado {
    max-width:     900px;
    margin:        2rem auto;
    background:    #fff;
    border-radius: 16px;
    padding:       2rem;
    box-shadow:    0 4px 24px rgba(0,0,0,.08);
}
.lexia-resultado h2 {
    color:       var(--lexia-primary, #1a237e);
    margin:      0 0 1.5rem;
}

.lexia-resultado__stats {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(100px,1fr));
    gap:                   1rem;
    margin-bottom:         1rem;
}
.lexia-stat-box {
    text-align:    center;
    padding:       1rem;
    border-radius: 10px;
    background:    #f5f5f5;
    font-size:     2rem;
    font-weight:   800;
    color:         var(--lexia-primary, #1a237e);
    line-height:   1.1;
}
.lexia-stat-box small { display: block; font-size: .75rem; font-weight: 400; color: #777; margin-top: 4px; }
.lexia-stat-box--ok   { background: #e8f5e9; color: #2e7d32; }
.lexia-stat-box--err  { background: #ffebee; color: #c62828; }
.lexia-stat-box--nc   { background: #fff3e0; color: #e65100; }

/* ── Corrección ───────────────────────────────────────────── */
.lexia-correccion { display: flex; flex-direction: column; gap: 1rem; }
.lexia-cor-item {
    border-radius: 10px;
    overflow:      hidden;
    border:        1px solid #e0e0e0;
}
.lexia-cor-item--ok  { border-color: #a5d6a7; }
.lexia-cor-item--err { border-color: #ef9a9a; }
.lexia-cor-item--nc  { border-color: #ffe0b2; }

.lexia-cor-item__head {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             1rem;
    padding:         .75rem 1rem;
    background:      #fafafa;
    font-size:       .9rem;
}
.lexia-cor-item--ok  .lexia-cor-item__head { background: #f1f8e9; }
.lexia-cor-item--err .lexia-cor-item__head { background: #fff5f5; }

.lexia-cor-item__respuestas { padding: .75rem 1rem; display: flex; flex-direction: column; gap: 4px; }
.lexia-cor-resp { font-size: .85rem; padding: 4px 8px; border-radius: 4px; }
.lexia-cor-resp--ok  { background: #e8f5e9; color: #2e7d32; font-weight: 700; }
.lexia-cor-resp--err { background: #ffebee; color: #c62828; text-decoration: line-through; }
.lexia-cor-expl { font-size: .85rem; padding: .75rem 1rem; background: #fff8e1; border-top: 1px solid #ffe082; }

/* ── Respuestas en corrección (sin cursor pointer) ────────── */
.lexia-resp--review { cursor: default !important; }

/* Acertada — verde oscuro */
.lexia-resp--ok-dark {
    background:   #1b5e20 !important;
    border-color: #1b5e20 !important;
    color:        #fff !important;
}
.lexia-resp--ok-dark .lexia-resp__letra {
    background: #fff !important;
    color:      #1b5e20 !important;
}
.lexia-resp--ok-dark .lexia-resp__check { color: #fff !important; }

/* Correcta no elegida — verde claro */
.lexia-resp--ok {
    background:   #e8f5e9;
    border-color: #4caf50;
}
.lexia-resp--ok .lexia-resp__letra { background: #4caf50; }

/* Elegida incorrecta — rojo */
.lexia-resp--err {
    background:   #ffebee;
    border-color: #f44336;
}
.lexia-resp--err .lexia-resp__letra { background: #f44336; }

/* ── Tiempo por pregunta en corrección ────────────────────── */
.lexia-cor-tiempo {
    margin-top:  1rem;
    font-size:   .85rem;
    color:       var(--lexia-text-muted, #546e7a);
    text-align:  right;
    padding-top: .5rem;
    border-top:  1px solid #eee;
}

/* ── Navegación corrección ────────────────────────────────── */
.lexia-cor-nav {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      1.5rem;
    padding-top:     1rem;
    border-top:      1px solid #eee;
    gap:             1rem;
}
#lexia-cor-contador {
    font-weight: 700;
    color:       var(--lexia-primary, #1a237e);
    font-size:   .95rem;
}

/* ── Acciones resultado ───────────────────────────────────── */
.lexia-resultado__acciones {
    display:   flex;
    gap:       1rem;
    flex-wrap: wrap;
    margin:    1rem 0;
}

/* ── Header corrección — naranja ──────────────────────────── */
#lexia-fin-header {
    background: #e65100 !important;
}

/* Badge etiqueta Corrección */
.lexia-badge--label {
    background:  rgba(255,255,255,.25) !important;
    font-weight: 800 !important;
    font-size:   .95rem !important;
}

/* Badge sin respuesta */
.lexia-badge--nc { background: rgba(255,152,0,.4); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .lexia-test-body {
        flex-direction: column-reverse;
    }
    .lexia-revision-wrap {
        flex: none;
        position: static;
    }
    .lexia-resultado__stats {
        grid-template-columns: repeat(3,1fr);
    }
}
/* ── Cascada temario → temas ─────────────────────────────── */
.lexia-temario {
    margin: 6px 0;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    overflow: hidden;
}
.lexia-temario-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: rgba(255,255,255,.03);
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.lexia-temario-head:hover { background: rgba(255,255,255,.06); }
.lexia-temario-toggle {
    font-size: 12px;
    opacity: .7;
    width: 14px;
    flex: 0 0 14px;
}
.lexia-temario-nombre { font-weight: 600; flex: 1 1 auto; }
.lexia-temario-count {
    font-size: 12px;
    opacity: .6;
    flex: 0 0 auto;
}
/* Check del temario (tri-estado) */
.lexia-temario-check {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 2px solid rgba(255,255,255,.4);
    border-radius: 5px;
    position: relative;
    transition: background .15s, border-color .15s;
}
.lexia-temario-check.is-all {
    background: #4caf50;
    border-color: #4caf50;
}
.lexia-temario-check.is-all::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.lexia-temario-check.is-some {
    background: rgba(76,175,80,.35);
    border-color: #4caf50;
}
.lexia-temario-check.is-some::after {
    content: '';
    position: absolute;
    left: 3px; right: 3px; top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: #fff;
}
.lexia-temario-temas {
    padding: 10px 14px 12px;
    background: rgba(0,0,0,.15);
}