/* ═══════════════════════════════════════════════════════════════
   Aulas Guacurarí — Vista detalle de curso (curso.php)
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   Vista detalle de curso (curso.php)
   ══════════════════════════════════════════════════════════════════ */

/* ── Wrapper y breadcrumb ──────────────────────────────────────── */
.curso-detalle-wrap {
    max-width: 1000px;
    margin: 0 auto;
}

.curso-detalle-breadcrumb {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    color: var(--autoasistidos-text-muted);
    margin-bottom: 1.25rem;
}
.curso-detalle-breadcrumb-sep {
    font-size: .75rem;
    opacity: .6;
}

/* ── Header del curso ──────────────────────────────────────────── */
.curso-detalle-header {
    background: var(--autoasistidos-surface);
    border: 1px solid var(--autoasistidos-border);
    border-radius: var(--autoasistidos-radius);
    overflow: hidden;
    box-shadow: var(--autoasistidos-shadow);
    margin-bottom: 1.5rem;
}

.curso-detalle-header .curso-card-header {
    aspect-ratio: 3/1;
    border-radius: 0;
    /* Mismo ratio que .curso-card-header en catalogo.css (consistencia: una sola
       portada por curso se adapta igual en catálogo y en detalle, mobile y
       desktop). 3:1 es el formato nativo de diseño de la portada — ver
       img/portadas/LEEME.txt — no un crop de una foto en otra proporción, por
       lo que a especificación cumplida no hay recorte. A 1000px de ancho
       (max-width del wrap) el hero queda en 333px de alto. */
}

.curso-detalle-header-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.curso-detalle-header-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

.curso-detalle-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--autoasistidos-text);
    margin: 0 0 .75rem;
    line-height: 1.25;
}

.curso-detalle-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .875rem;
    color: var(--autoasistidos-text-muted);
}
.curso-detalle-attrs span {
    display: flex;
    align-items: center;
    gap: .3rem;
}

/* Descripción integrada en el card del header (ver curso-detalle-desc-wrap
   en curso.php): mismo ritmo vertical que el padding del header-body, sin
   fondo/borde/sombra propios porque ya no es una sección independiente. */
.curso-detalle-desc-inline {
    margin-top: 1.25rem;
}

/* ── Secciones ─────────────────────────────────────────────────── */
.curso-detalle-section {
    background: var(--autoasistidos-surface);
    border: 1px solid var(--autoasistidos-border);
    border-radius: var(--autoasistidos-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    box-shadow: var(--autoasistidos-shadow);
}
.curso-detalle-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--autoasistidos-text);
    margin: 0 0 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--autoasistidos-border);
}
.curso-detalle-desc {
    font-size: .9375rem;
    color: var(--autoasistidos-text);
    line-height: 1.6;
    margin: 0;
}

/* ── Instrucciones e avisos de evaluación ─────────────────────── */
.autoasistidos-eval-notice {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    border-radius: var(--autoasistidos-radius-sm);
    font-size: .9rem;
    margin-bottom: 1rem;
}
.autoasistidos-eval-notice i { font-size: 1.15rem; flex-shrink: 0; margin-top: .1rem; }

.autoasistidos-eval-notice--success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}
.autoasistidos-eval-notice--warn {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}
.autoasistidos-eval-notice--info {
    background: #e0f2fe;
    color: #075985;
    border: 1px solid #7dd3fc;
}

/* Estado "generando" — reemplaza al viejo botón manual "Rendir autoevaluación",
   ver abrirAutoevaluacion() en curso.js */
.eval-generando {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 1rem;
    color: var(--autoasistidos-text-muted);
}
.eval-generando .spinner-border {
    color: var(--autoasistidos-primary);
}
.eval-generando p {
    font-size: .95rem;
    margin: 0;
}

/* ── Cuestionario inline ───────────────────────────────────────── */
.eval-quiz-card {
    background: var(--autoasistidos-surface);
    border-radius: var(--autoasistidos-radius);
    box-shadow: var(--autoasistidos-shadow);
    overflow: hidden;
    margin-top: .75rem;
}
.eval-quiz-card-header {
    background: var(--autoasistidos-primary);
    color: #fff;
    padding: .85rem 1.1rem;
}
.eval-quiz-card-header h5 {
    margin: 0 0 .4rem;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
}
.eval-quiz-card-header p {
    margin: 0;
    font-size: .86rem;
    color: rgba(255,255,255,.82);
}
.eval-quiz-card-body {
    padding: 1.1rem 1.25rem;
}

.eval-pregunta {
    margin-bottom: 0;
    padding-bottom: 1.25rem;
    padding-top: 1.25rem;
    border-bottom: 2px solid var(--autoasistidos-border);
}
.eval-pregunta:first-child { padding-top: 0; }
.eval-pregunta:last-child { border-bottom: none; padding-bottom: 0; }


.eval-pregunta-texto {
    font-weight: 600;
    font-size: .95rem;
    color: var(--autoasistidos-text);
    margin-bottom: .85rem;
    line-height: 1.5;
    text-align: justify;
}

.eval-opciones {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.eval-opcion {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .95rem;
    border-radius: var(--autoasistidos-radius-sm);
    background: var(--autoasistidos-bg);
    border: 1.5px solid var(--autoasistidos-border);
    cursor: pointer;
    transition: background var(--autoasistidos-transition), border-color var(--autoasistidos-transition);
    font-size: .9rem;
    color: var(--autoasistidos-text);
    user-select: none;
    line-height: 1.55;
}
.eval-opcion:hover {
    background: var(--autoasistidos-primary-lt);
    border-color: var(--autoasistidos-primary);
}
.eval-opcion:has(input:checked) {
    background: var(--autoasistidos-primary-lt);
    border-color: var(--autoasistidos-primary);
}
.eval-opcion input { flex-shrink: 0; accent-color: var(--autoasistidos-primary); }
/* Agrupa letra + checkbox para poder reacomodarlos juntos por breakpoint
   (fila en desktop, columna con la letra arriba en mobile) sin duplicar
   el checkbox ni la letra en el markup. */
.eval-opcion-marker {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}
/* Letra A/B/C: referencia rápida para escanear opciones largas, no indica
   "única respuesta correcta" (el checkbox de al lado sigue permitiendo
   marcar varias) — solo ayuda a ubicarse dentro de una lista de opciones
   con texto extenso. */
.eval-opcion-letra {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    color: var(--autoasistidos-text-muted);
    background: var(--autoasistidos-border);
    transition: background var(--autoasistidos-transition), color var(--autoasistidos-transition);
}
.eval-opcion:has(input:checked) .eval-opcion-letra {
    background: var(--autoasistidos-primary);
    color: #fff;
}
.eval-opcion-texto { flex: 1; text-align: justify; }

.eval-quiz-footer {
    padding-top: 1.25rem;
    display: flex;
    justify-content: flex-end;
}
/* Mismo naranja sólido que el CTA "Realizar autoevaluación" del sidebar
   (.visor-item--eval, var(--autoasistidos-eval-cta) en theme.css) — color
   exclusivo del flujo de autoevaluación, distinto del azul del resto del
   portal. Sin degradé, aplica igual en desktop y mobile. */
#eval-btn-submit {
    background: var(--autoasistidos-eval-cta);
}
#eval-btn-submit:hover:not(:disabled) {
    background: var(--autoasistidos-eval-cta-dk);
}

/* ── Historial de intentos ─────────────────────────────────────── */
.curso-intentos-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.curso-intentos-tabla th,
.curso-intentos-tabla td {
    padding: .6rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--autoasistidos-border);
}
.curso-intentos-tabla th {
    font-weight: 600;
    color: var(--autoasistidos-text-muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.curso-intentos-tabla tbody tr:last-child td { border-bottom: none; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .curso-detalle-title { font-size: 1.2rem; }
    .curso-detalle-section { padding: 1rem; }
    .curso-detalle-header-body { padding: 1rem; }
}

/* ── Autoevaluación mobile: paginada de a una pregunta ─────────────
   Mismo breakpoint que el resto del visor mobile (680px, ver visor.css).
   El scroll continuo con las 5-6 preguntas seguidas era difícil de leer
   (texto justificado con ríos en columna angosta) y no daba noción de
   cuánto faltaba — acá se pagina de a una (evalPagerInit/Render/Nav en
   curso.js) con el mismo botón circular que ya usa el visor para navegar
   contenidos (.visor-nav-btn, ver visor.css), en vez de inventar un
   control nuevo. Desktop sigue con el scroll continuo sin cambios. */
@media (max-width: 680px) {
    /* .visor-tipo-eval (visor.css) trae padding: 24px 28px — bien para el
       botón "Ver contenidos" y los avisos sueltos, pero la card del
       cuestionario ya tiene su propio padding interno (card-header/body,
       opciones) así que el padding del contenedor padre es doble borde
       muerto acá. Se cancela con margin negativo para que la card llegue
       a los bordes de pantalla. */
    .eval-quiz-card {
        margin-left: -28px;
        margin-right: -28px;
    }

    .eval-quiz-card-header { padding: .65rem .9rem; }
    .eval-quiz-card-header p { font-size: .78rem; }

    .eval-quiz-pager {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: .75rem .9rem;
        border-bottom: 1px solid var(--autoasistidos-border);
    }
    .eval-quiz-pager-info { flex: 1; min-width: 0; }
    .eval-quiz-pager-label {
        display: block;
        font-size: .78rem;
        font-weight: 700;
        color: var(--autoasistidos-text-muted);
        margin-bottom: .3rem;
    }
    .eval-quiz-pager-track {
        height: 5px;
        border-radius: 999px;
        background: var(--autoasistidos-border);
        overflow: hidden;
    }
    .eval-quiz-pager-fill {
        height: 100%;
        background: var(--autoasistidos-primary);
        border-radius: 999px;
        transition: width .25s ease;
    }

    /* Toggleada por evalPagerRender() — oculta todas las preguntas menos
       la del índice actual. */
    .eval-pregunta--oculta { display: none; }

    /* Justify genera ríos de espacio horribles en columna angosta —
       en desktop la card es lo bastante ancha para que no se note. */
    .eval-pregunta-texto,
    .eval-opcion-texto { text-align: left; }

    /* Letra arriba del checkbox (pedido: al lado quedaba raro) — se apilan
       en columna solo en mobile, en desktop siguen en fila. */
    .eval-opcion-marker { flex-direction: column; gap: .35rem; }

    /* Checkbox propio (nada de cuadrado gris default del navegador),
       centrado contra el bloque de texto — align-items:center ya viene
       de la regla base de .eval-opcion, se mantiene igual en mobile. */
    .eval-checkbox {
        appearance: none;
        -webkit-appearance: none;
        width: 22px;
        height: 22px;
        border: 2px solid var(--autoasistidos-border);
        border-radius: 6px;
        background: #fff;
        position: relative;
        cursor: pointer;
    }
    .eval-checkbox:checked {
        background: var(--autoasistidos-primary);
        border-color: var(--autoasistidos-primary);
    }
    .eval-checkbox:checked::after {
        content: '';
        position: absolute;
        left: 6px;
        top: 2px;
        width: 6px;
        height: 11px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }
}