/* ================================================================
   PÍLDORA "Posibilidades con Claude" — FORMATO VERTICAL 16:9
   Paleta y componentes IvanLabs reutilizados de la plantilla clásica;
   lo único nuevo es el "chasis" de navegación: en vez de sidebar +
   flechas izq/der, hay paneles a pantalla completa que se desplazan
   en vertical (abajo = siguiente, arriba = anterior).

   ESCALADO RESPONSIVE: el contenido NO usa tamaños fijos. La tipografía
   base se define en unidades del contenedor (cqh = 1% de la altura del
   escenario 16:9) y el resto (titulares, componentes, márgenes) en "em"
   relativos a esa base. Así todo crece en monitores grandes y se reduce
   en pequeños, siempre proporcional al escenario.
   ================================================================ */

:root {
    --primary: #569EF0;
    /* MEDIDO EN NAVEGADOR (2026-07-31, al maquetar la píldora 06): #2a75c0 da
       4,77:1 sobre BLANCO, pero el chasis casi nunca lo pinta sobre blanco: lo
       pinta sobre sus propios fondos azulados claros (#eef3f9 en tarjetas y
       tablas, #F4F6F8 en el escenario), donde baja a 4,27:1 y DEJA DE CUMPLIR
       AA. #2769ab sube a 5,10:1 ahí y 5,68:1 sobre blanco. Como también se usa
       de FONDO con texto blanco encima, oscurecerlo solo mejora esos casos. */
    --primary-dark: #2769ab;     /* AA sobre blanco Y sobre los fondos claros del chasis */
    --text: #333;
    --bg-body: #F4F6F8;
    --white: #fff;
    --stage: #0b1626;            /* fondo "cine" alrededor del 16:9 */
    --topbar-h: 0.5cqh;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
    font-family: 'Lato', sans-serif;
    color: var(--text);
    line-height: 1.6;
    background: var(--bg-body);   /* claro: si asomara un hilo, se ve limpio, no negro */
    min-height: 100vh;
    overflow: hidden;        /* el scroll real ocurre DENTRO de cada panel */
}

/* ================================================================
   ESCENARIO
   Llena TODO el contenedor (el iframe del LMS), sin bandas ni fondo
   "de cine": antes el escenario se bloqueaba a 16:9 y, cuando el
   contenedor no era 16:9 (caso típico en Moodle), dejaba franjas
   oscuras arriba/abajo. Ahora ocupa el 100%; el escalado sigue siendo
   proporcional gracias a container-type + unidades cq* (ver base en
   .slide-content, que usa cqmin para no deformarse en cualquier
   proporción).
   container-type: size -> habilita las unidades cqw/cqh/cqmin dentro.
   ================================================================ */
.deck {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--bg-body);
    overflow: hidden;
    container-type: size;     /* base del escalado responsive */
}

/* ---- Barra superior: marca + progreso ---- */
.deck-topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 30;
    display: flex;
    align-items: center;
}
.deck-brand {
    position: absolute;
    top: 1.8cqh; left: 2.2cqw;
    font-size: clamp(0.62rem, 1.35cqh, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary-dark);
    opacity: 0.6;
}
.deck-progress {
    width: 100%;
    height: max(4px, var(--topbar-h));
    background: rgba(0, 0, 0, 0.06);
}
.deck-progress-fill {
    height: 100%;
    width: 11%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.5s cubic-bezier(0.7, 0, 0.2, 1);
}

/* ---- Puntos de navegación (lateral derecho) ---- */
.deck-dots {
    position: absolute;
    top: 50%; right: 1.6cqw;
    transform: translateY(-50%);
    z-index: 30;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.1cqh;
}
.deck-dots button {
    width: clamp(9px, 1.05cqh, 16px);
    height: clamp(9px, 1.05cqh, 16px);
    border-radius: 50%;
    border: 2px solid var(--primary);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s;
}
.deck-dots button:hover { transform: scale(1.25); }
.deck-dots button.active {
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(86, 158, 240, 0.2);
}

/* ================================================================
   PISTA DE PANELES (se desplaza en vertical)
   ================================================================ */
.slides {
    position: absolute;
    inset: 0;
    transition: transform 0.7s cubic-bezier(0.7, 0, 0.2, 1);
    will-change: transform;
}
.slide {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}
/* El contenido se centra vertical cuando es corto y crece (con scroll)
   cuando es largo, gracias a min-height:100% + flex.
   TIPOGRAFÍA BASE proporcional al escenario (cqh): todo lo demás va en em. */
.slide-content {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(40px, 6cqh, 96px) clamp(34px, 6cqw, 130px);
    max-width: min(1500px, 84cqw);
    margin: 0 auto;
    /* Base que escala con el escenario. cqmin (1% de la dimensión MENOR)
       en vez de cqh: en 16:9 da lo mismo, pero si el iframe es estrecho o
       alto evita que el texto crezca y desborde. */
    font-size: clamp(15px, 2.15cqmin, 33px);
}

/* Tipografía de contenido (en em, relativa a la base de .slide-content) */
.slide-content h1 { font-size: 2.55em; line-height: 1.12; margin-bottom: 0.45em; }
.slide-content h1 span { color: var(--primary-dark); }
.slide-content h2 { font-size: 1.75em; color: var(--primary-dark); margin-bottom: 0.4em; line-height: 1.2; }
.slide-content > p { font-size: 1em; color: #555; margin-bottom: 0.5em; }
.slide-content ul { list-style: disc; padding-left: 1.4em; margin: 0.4em 0; }
.slide-content li { margin-bottom: 0.32em; color: #555; }
.slide-content code {
    background: #eef3f8;
    color: var(--primary-dark);
    padding: 0.05em 0.35em;
    border-radius: 5px;
    font-size: 0.9em;
}
.slide-content h3 { color: var(--primary-dark); }

/* ---- PORTADA ---- */
.slide-hero {
    background:
        radial-gradient(circle at 80% 15%, rgba(86, 158, 240, 0.18), transparent 55%),
        linear-gradient(135deg, #ffffff 0%, #eaf2fd 100%);
}
.hero-content { align-items: flex-start; text-align: left; }
.module-meta {
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8aa0b8;
    margin-bottom: 0.9em;
}
.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background: rgba(86, 158, 240, 0.12);
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 0.85em;
    padding: 0.4em 0.9em;
    border-radius: 50px;
    margin-bottom: 1em;
}
.scroll-hint { font-size: 0.82em; color: #8aa0b8; margin-top: 1.6em; }
.scroll-hint i { margin-right: 0.4em; }

.btn-primary {
    /* Blanco sobre --primary daba 2,78:1. Sobre --primary-dark da 5,68:1
       y sigue siendo el azul de marca. */
    background: var(--primary-dark);
    color: white;
    border: none;
    padding: 0.75em 1.8em;
    border-radius: 50px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 700;
    margin-top: 1.2em;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    transition: transform 0.2s, background 0.3s;
}
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); }

/* Tarjeta blanca genérica */
.card {
    background: var(--white);
    padding: 1.6em;
    border-radius: 12px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
    margin-bottom: 0.3em;
}

/* ================================================================
   CONTROLES DE NAVEGACIÓN VERTICAL (arriba / abajo)
   ================================================================ */
.deck-controls {
    position: absolute;
    right: 3.4cqw;
    bottom: 2.6cqh;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5cqh;
}
.deck-arrow {
    width: clamp(40px, 5cqh, 74px);
    height: clamp(40px, 5cqh, 74px);
    border-radius: 50%;
    border: none;
    background: var(--white);
    color: var(--primary-dark);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    font-size: clamp(0.95rem, 1.7cqh, 1.6rem);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s;
}
.deck-arrow:hover:not(:disabled) {
    background: var(--primary);
    color: white;
    transform: scale(1.08);
}
.deck-arrow:disabled { opacity: 0.3; cursor: default; }
.deck-counter {
    font-size: clamp(0.7rem, 1.3cqh, 1.1rem);
    font-weight: 700;
    color: var(--primary-dark);
    background: rgba(255, 255, 255, 0.85);
    padding: 0.15em 0.6em;
    border-radius: 20px;
}

/* ================================================================
   COMPONENTES REUTILIZADOS DE LA PLANTILLA IVANLABS
   (todos en "em": escalan con la tipografía base del panel)
   ================================================================ */

/* ---- DESTACADO ---- */
.highlight-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9em;
    padding: 1.1em 1.2em;
    margin: 1.1em 0;
    border-left: 0.3em solid var(--primary);
    background: var(--white);
    border-radius: 0 10px 10px 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.highlight-icon { font-size: 1.7em; color: var(--primary); flex-shrink: 0; display: flex; align-items: center; }
.highlight-content { display: contents; }
.highlight-content h3 { margin: 0; color: var(--primary-dark); font-size: 1.1em; flex-grow: 1; }
.highlight-content p { width: 100%; margin-top: 0.4em; color: #555; line-height: 1.6; font-size: 0.95em; }

/* ---- SLIDER ---- */
.slider-wrapper {
    position: relative;
    width: 100%;
    margin: 1.1em 0 0.3em;
    overflow: hidden;
    border-radius: 12px;
}
.slider-track {
    display: flex;
    align-items: stretch;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.slider-card {
    flex: 0 0 100%;
    width: 100%;
    background: var(--white);
    padding: 2.2em 3.4em;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.card-icon { font-size: 2.3em; color: var(--primary); margin-bottom: 0.5em; }
.slider-card h3 { margin: 0 0 0.4em; color: #333; font-size: 1.3em; }
.slider-card p { margin: 0 auto; max-width: 24em; color: #555; line-height: 1.7; font-size: 0.98em; }
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4em; height: 2.4em;
    border-radius: 50%;
    border: none;
    background: white;
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    transition: all 0.3s;
}
.slider-arrow:hover { background: var(--primary); color: white; scale: 1.1; }
.slider-arrow.prev { left: 0.7em; }
.slider-arrow.next { right: 0.7em; }

/* ---- TABS ---- */
.tabs-container {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin: 1.1em 0;
}
.tabs-header { display: flex; flex-wrap: wrap; background: #f8f9fa; border-bottom: 1px solid #eee; }
.tab-btn {
    flex: 1;
    padding: 0.8em 1em;
    border: none;
    background: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95em;
    /* #777 daba 4,25:1 sobre el gris de la cabecera de pestañas. */
    color: #5f6b78;
    transition: all 0.3s;
    border-bottom: 3px solid transparent;
}
.tab-btn.active { background: var(--white); color: var(--primary-dark); border-bottom-color: var(--primary); }
.tabs-content { padding: 1.4em; background: var(--white); }
.tab-pane { display: none; animation: fadeIn 0.3s; }
.tab-pane.active { display: block; }
.tab-pane h3 { margin-bottom: 0.4em; font-size: 1.15em; }
.tab-pane h3 i { color: #f1b32b; }
.tab-pane p { color: #555; margin-bottom: 0.4em; font-size: 0.97em; }

/* ---- ACORDEÓN ---- */
.accordion-container { background: #fff; border-radius: 12px; padding: 0.5em; margin: 1.1em 0 0.3em; box-shadow: 0 4px 18px rgba(0,0,0,0.06); }
.accordion-item { border-bottom: 1px solid #eee; }
.accordion-item:last-child { border-bottom: none; }
.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    padding: 0.9em 0.5em;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.02em;
    color: #333;
    transition: color 0.3s;
    text-align: left;
}
/* ---- Bloqueo de la pantalla final (se desbloquea al superar el test) ---- */
.deck-dots button.locked { opacity: 0.35; cursor: not-allowed; }
.deck-arrow.locked { opacity: 0.45; }
.deck-arrow.shake { animation: lockedShake 0.4s; }
@keyframes lockedShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* --primary-dark: el texto en hover/activo debe cumplir contraste AA (--primary no llega) */
.accordion-header:hover { color: var(--primary-dark); }
.accordion-header i { transition: transform 0.3s ease; font-size: 0.9em; }
.accordion-item.active .accordion-header { color: var(--primary-dark); }
.accordion-item.active .accordion-header i { transform: rotate(180deg); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0, 1, 0, 1); }
.accordion-item.active .accordion-body { max-height: 600px; transition: max-height 0.4s ease-in; }
.accordion-content { padding: 0 0.5em 1em; line-height: 1.6; color: #555; font-size: 0.97em; }

/* ---- FLIP CARDS ---- */
.flip-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 1em;
    margin: 1.1em 0 0.3em;
}
.flip-card { background: transparent; width: 100%; height: 10em; perspective: 1000px; }
.flip-card-inner {
    position: relative;
    width: 100%; height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
    cursor: pointer;
}
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%; height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1em;
}
.flip-card-front { background: var(--white); border: 2px solid #f0f4f8; }
.flip-card-front h3 { margin: 0; font-size: 1.15em; color: var(--text); }
.flip-card-front i { font-size: 2.4em; margin-bottom: 0.4em; color: var(--primary); }
.flip-card-back { background: var(--primary-dark); color: white; transform: rotateY(180deg); }
.flip-card-back p { margin: 0; font-size: 0.95em; line-height: 1.5; color: white; }
.flip-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; border-radius: 12px; }

/* ---- REPRODUCTOR DE AUDIO ---- */
.audio-player-card { margin-top: 1.1em; }
.audio-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9em; margin-bottom: 1.1em; }
.audio-icon-box {
    width: 2.8em; height: 2.8em;
    background: #f0f4f8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.4em;
}
.audio-details h3 { margin: 0 0 0.2em; color: var(--primary-dark); font-size: 1.1em; }
.audio-details p { margin: 0; font-size: 0.9em; color: #666; }
.audio-controls-ui { display: flex; align-items: center; gap: 0.9em; background: #f9f9f9; padding: 0.8em; border-radius: 50px; }
.play-btn {
    width: 2.5em; height: 2.5em;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1em;
    transition: transform 0.2s;
}
.play-btn:hover { transform: scale(1.1); background: var(--primary-dark); }
.progress-container { flex-grow: 1; height: 0.4em; background: #ddd; border-radius: 3px; cursor: pointer; position: relative; overflow: hidden; }
.progress-bar { height: 100%; width: 0%; background: var(--primary); border-radius: 3px; transition: width 0.1s linear; }
.time-display { font-size: 0.8em; font-weight: bold; color: #555; min-width: 3.4em; text-align: right; font-family: monospace; }
.audio-note { margin-top: 0.9em; font-size: 0.8em; color: #8aa0b8; }
.audio-note i { margin-right: 0.4em; }

/* ---- QUIZ ---- */
#quiz-container, #quiz-results { max-width: min(900px, 100%); margin: 0.9em auto 0; text-align: left; width: 100%; }
.question-text { font-size: 1.25em; color: var(--primary-dark); margin-bottom: 1em; font-weight: 700; line-height: 1.3; }
.options-grid { display: flex; flex-direction: column; gap: 0.6em; margin-bottom: 1em; }
.option-btn {
    display: block;
    width: 100%;
    padding: 0.75em 0.9em;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    font-size: 1em;
    color: #555;
    transition: all 0.2s ease;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
}
.option-btn:hover { border-color: var(--primary); background: white; transform: translateX(4px); }
.option-btn.selected { background: var(--primary-dark); color: white; border-color: var(--primary-dark); font-weight: bold; }
.quiz-nav { margin-top: 1em; display: flex; justify-content: space-between; border-top: 1px solid #eee; padding-top: 0.9em; }
.quiz-btn {
    background: var(--primary-dark);
    color: white;
    border: none;
    padding: 0.55em 1.3em;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1em;
    transition: background 0.3s;
}
.quiz-btn:hover { background: var(--primary); }
.btn-prev { background: #e9ecef; color: #666; }
.btn-prev:hover { background: #dee2e6; }
#quiz-results { padding: 1.8em; text-align: center; }
.score-text { color: var(--primary-dark); font-size: 1.25em; }
.result-icon { font-size: 3.6em; display: block; margin: 0.4em auto; }
.icon-success { color: #2ecc71; animation: bounce 1s infinite; }
.icon-fail { color: #e74c3c; animation: shake 0.5s; }
.feedback-msg { color: #555; margin: 0.7em 0; }
.btn-retry {
    background: var(--primary-dark);
    color: white;
    border: none;
    padding: 0.55em 1.3em;
    margin-top: 0.8em;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1em;
    transition: background 0.3s;
}
.btn-retry:hover { background: var(--primary); }
#confetti-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; }

/* ---- TARJETA DE CIERRE ---- */
.completion-card { text-align: center; max-width: 22em; margin: 0 auto; }
.completion-icon {
    width: 3em; height: 3em;
    margin: 0 auto 0.7em;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4em;
    box-shadow: 0 10px 30px rgba(86, 158, 240, 0.4);
}
.completion-title { color: var(--primary-dark); font-size: 1.9em; margin-bottom: 0.4em; }
.completion-message { font-size: 1.1em; color: #444; margin-bottom: 0.4em; }
.completion-submessage { color: #666; font-size: 0.97em; }

/* ---- Animaciones ---- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ================================================================
   RESPONSIVE
   En pantallas estrechas el 16:9 se vuelve pequeño; relajamos el
   formato para que sea legible (alto automático, ancho completo).
   ================================================================ */
@media (max-width: 760px) {
    body { padding: 0; overflow: auto; }
    .deck {
        width: 100%;
        aspect-ratio: auto;
        min-height: 100vh;
        border-radius: 0;
        container-type: normal;   /* en móvil escalamos por viewport, no por 16:9 */
    }
    .slide-content {
        padding: 70px 22px 90px;
        font-size: 16px;          /* base fija y legible en móvil */
        max-width: 100%;
    }
    .deck-brand { font-size: 0.7rem; top: 14px; left: 18px; }
    .deck-dots { display: none; }
    .deck-controls { right: 16px; bottom: 16px; gap: 6px; }
    .deck-arrow { width: 44px; height: 44px; font-size: 1.05rem; }
    .deck-counter { font-size: 0.75rem; }
}


/* ================================================================
   TEST — FEEDBACK AL RESPONDER
   Al pulsar una opción se bloquea la pregunta, se revela la correcta (✓) y,
   si se falló, se marca la elegida (✗); debajo aparece la caja de feedback
   con la explicación. Es lo que hace el test formativo y no un examen.

   Accesibilidad: el acierto/fallo NO depende solo del color — lleva icono
   (✓/✗) y texto, y la caja es aria-live para los lectores de pantalla.

   Promovido desde la serie "Aplicaciones de Claude" (2026-07-17): vivía en
   las píldoras 01/03/00 mientras la plantilla declaraba `feedback` en el
   quizData sin pintarlo nunca (campo muerto). Ahora está aquí, que es su
   sitio, y lo hereda cualquier píldora nueva.
   ================================================================ */



/* ================================================================
   TEST — FEEDBACK AL RESPONDER
   Al pulsar una opción se bloquea la pregunta, se revela la correcta (✓) y,
   si se falló, se marca la elegida (✗); debajo aparece la caja de feedback
   con la explicación. Es lo que hace el test formativo y no un examen.

   Accesibilidad: acertar/fallar NO depende solo del color — lleva icono
   (✓/✗) y texto, y la caja es `aria-live` para los lectores de pantalla.

   Promovido desde la serie "Aplicaciones de Claude" (2026-07-17): vivía en
   las píldoras 01/03/00 mientras esta plantilla declaraba `feedback` en el
   quizData sin pintarlo nunca (campo muerto). Ahora está aquí, que es su
   sitio, y lo hereda cualquier píldora nueva.
   ================================================================ */
.option-btn { position: relative; }
.option-btn:hover { border-color: var(--primary); background: white; transform: translateX(4px); }
.option-btn.selected { background: var(--primary-dark); color: white; border-color: var(--primary-dark); font-weight: bold; }
/* Estados tras responder (no dependen solo del color: llevan icono ✓ / ✗) */
.option-btn.answered { cursor: default; }
.option-btn.answered:hover { transform: none; }
.option-btn.correct { background: #e8f8ef; border-color: #2ecc71; color: #1e7e44; font-weight: bold; }
.option-btn.incorrect { background: #fdecea; border-color: #e74c3c; color: #b0301f; font-weight: bold; }
.opt-mark { position: absolute; right: 0.8em; top: 50%; transform: translateY(-50%); font-size: 1.05em; }
.option-btn.correct .opt-mark { color: #2ecc71; }
.option-btn.incorrect .opt-mark { color: #e74c3c; }

/* Caja de feedback que aparece al responder cada pregunta */
.quiz-feedback { display: none; margin: 0.2em 0 0.6em; padding: 0.9em 1.1em; border-radius: 10px; border-left: 0.3em solid #ccc; font-size: 0.97em; line-height: 1.5; }
.quiz-feedback.show { display: block; animation: fadeIn 0.25s; }
.quiz-feedback.ok { background: #e8f8ef; border-left-color: #2ecc71; }
.quiz-feedback.ko { background: #fdecea; border-left-color: #e74c3c; }
.quiz-feedback .fb-title { font-weight: 700; display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.3em; }
.quiz-feedback.ok .fb-title { color: #1e7e44; }
.quiz-feedback.ko .fb-title { color: #b0301f; }
.quiz-feedback .fb-text { color: #444; }


/* =============================================================
 * PIEZA TEXTO + IMAGEN  ·  portada del chasis SPA al formato 16:9
 * -------------------------------------------------------------
 * El chasis vertical NO traía ninguna regla para imágenes: la pieza
 * `texto-imagen` solo existía en la plantilla base de la SPA con sidebar.
 * Copiada de `.claude/skills/frontend-designer/templates/base/style.css`
 * y devuelta también a `_plantillas/formato-vertical-16-9/` para que la
 * siguiente píldora de este formato ya la tenga.
 *
 * REGLAS QUE NO SE TOCAN (vienen de la pieza original):
 *  · El lado se cambia con `order`, NUNCA reordenando el HTML: al colapsar
 *    a una columna el orden de lectura sigue siendo "texto, imagen". Con el
 *    marcado invertido, un lector de pantalla se encontraría la imagen antes.
 *  · La imagen decorativa lleva `alt=""`; si aporta información, deja de ser
 *    decorativa (alt descriptivo + pie).
 *  · `width`/`height` en el HTML con la proporción REAL del archivo, para
 *    que el hueco reservado sea el que ocupa y la página no pegue un salto.
 * ============================================================= */
.texto-imagen {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: center;
    margin: 1.2em 0;
}

.texto-imagen-texto > :first-child { margin-top: 0; }
.texto-imagen-texto > :last-child { margin-bottom: 0; }

.texto-imagen-media {
    margin: 0;
}

.texto-imagen-media img {
    display: block;
    width: 100%;
    height: auto;
}

.texto-imagen-media figcaption {
    margin-top: 0.5rem;
    font-size: 0.85em;
    color: #555;
    line-height: 1.4;
}

@media (min-width: 800px) {
    .texto-imagen {
        grid-template-columns: 1fr minmax(0, 0.55fr);
        gap: 28px;
    }
    /* Lado invertido SOLO por `order` (ver nota de arriba). */
    .texto-imagen--invertido { grid-template-columns: minmax(0, 0.55fr) 1fr; }
    .texto-imagen--invertido .texto-imagen-texto { order: 2; }
    .texto-imagen--invertido .texto-imagen-media { order: 1; }
}


/* =============================================================
 * VÍDEO EMBEBIDO  ·  primera píldora de la serie que lleva vídeo dentro
 * -------------------------------------------------------------
 * El MP4 vive en `media/` y SÍ entra en el SCORM: así la píldora se
 * reproduce dentro del LMS sin depender de una URL externa (y sin romperse
 * si el curso se mueve o se abre sin conexión).
 *
 * NUNCA poner `width="1920" height="1080"` en el <video>: fuerza píxeles y
 * aparecen franjas negras. Manda el CSS.
 * ============================================================= */
.video-card {
    margin: 1.2em 0;
    background: var(--white);
    border: 1px solid #e3e9f0;
    border-radius: 14px;
    padding: 0.9rem;
    box-shadow: 0 6px 20px rgba(44, 62, 80, .07);
}

/* `aspect-ratio` + `width: auto` en vez de `width: 100%`: si se deja al 100 %
   y solo se limita el alto, la CAJA queda más ancha que el vídeo y aparecen
   bandas negras a los lados (medido: caja de 986×310 para un vídeo que a esa
   altura ocupa 551). Así la caja mide exactamente lo que el vídeo. */
.video-card video {
    display: block;
    aspect-ratio: 16 / 9;
    width: auto;
    max-width: 100%;
    max-height: 46vh;
    margin: 0 auto;
    border-radius: 10px;
    background: #000;
}

.video-card figcaption {
    margin-top: 0.6rem;
    font-size: 0.85em;
    color: #5f6b78;
}


/* =============================================================
 * BLOQUE DE CÓDIGO  ·  para mostrar un fragmento de configuración
 * -------------------------------------------------------------
 * Gris muy claro y texto casi negro (#263238 sobre #f5f7fa ≈ 13:1): un
 * bloque de código con poco contraste es el clásico que se cuela en las
 * auditorías porque "es solo código".
 * ============================================================= */
.slide-content pre.codigo {
    background: #f5f7fa;
    border: 1px solid #e3e9f0;
    border-left: 4px solid var(--primary);
    border-radius: 0 8px 8px 0;
    padding: 0.9em 1.1em;
    margin: 1em 0;
    overflow-x: auto;
    font-size: 0.78em;
    line-height: 1.6;
}

.slide-content pre.codigo code {
    font-family: "Consolas", "Monaco", "Courier New", monospace;
    color: #263238;
    background: none;
    padding: 0;
    white-space: pre;
}