/* =====================================================================
   Chinchester · Resolver examen en interfaz para NIÑOS (estilo Duolingo)
   Se carga en take-exam.php cuando el examen usa el tema "kids" (body.kids-exam).
   Cada tipo de pregunta tiene su color (atributo data-qtype de .exam-question).
   Solo animaciones cortas de transform: no afectan el rendimiento en celulares.
   ===================================================================== */

body.kids-exam {
    font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
    color: #3c3c3c;
    background-color: #f2f7ff;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(88, 204, 2, .10) 0 90px, transparent 91px),
        radial-gradient(circle at 88% 12%, rgba(28, 176, 246, .12) 0 120px, transparent 121px),
        radial-gradient(circle at 80% 85%, rgba(255, 200, 0, .14) 0 110px, transparent 111px),
        radial-gradient(circle at 8% 80%, rgba(206, 130, 255, .12) 0 100px, transparent 101px);
    background-attachment: scroll;
}

/* ---------- Tarjeta principal ---------- */
.kids-exam .kids-card {
    border-radius: 28px !important;
    border: 3px solid #e5e5e5;
    border-bottom-width: 8px;
    box-shadow: none !important;
}
.kids-exam h1 { font-weight: 900; letter-spacing: -.01em; color: #3c3c3c; }

/* ---------- Colores por tipo de pregunta ---------- */
.kids-exam .exam-question { --c: #1cb0f6; --c-dark: #1899d6; --c-soft: #ddf4ff; --c-text: #fff; }
.kids-exam .exam-question[data-qtype="true_false"]      { --c: #58cc02; --c-dark: #46a302; --c-soft: #e9fbdc; }
.kids-exam .exam-question[data-qtype="multiple_choice"] { --c: #1cb0f6; --c-dark: #1899d6; --c-soft: #ddf4ff; }
.kids-exam .exam-question[data-qtype="multiple_select"] { --c: #ce82ff; --c-dark: #a568cc; --c-soft: #f6e9ff; }
.kids-exam .exam-question[data-qtype="image_choice"]    { --c: #ff86d0; --c-dark: #e066b3; --c-soft: #ffe8f6; }
.kids-exam .exam-question[data-qtype="fill_blank"]      { --c: #ff9600; --c-dark: #e07f00; --c-soft: #fff0dc; }
.kids-exam .exam-question[data-qtype="short_answer"]    { --c: #00cd9c; --c-dark: #00a87f; --c-soft: #dcfbf2; }
.kids-exam .exam-question[data-qtype="matching"]        { --c: #ff6f61; --c-dark: #e0574a; --c-soft: #ffe7e4; }
.kids-exam .exam-question[data-qtype="ordering"]        { --c: #ffc800; --c-dark: #e5a800; --c-soft: #fff6d1; --c-text: #4b3a00; }
.kids-exam .exam-question[data-qtype="essay"]           { --c: #7c6cf6; --c-dark: #5f50d9; --c-soft: #ecebff; }

.kids-exam .exam-question {
    position: relative;
    background: #fff !important;
    border: 3px solid var(--c) !important;
    border-bottom-width: 7px !important;
    border-radius: 24px !important;
    transition: transform .2s ease, box-shadow .2s ease;
}
.kids-exam .exam-question .q-num {
    width: 44px !important; height: 44px !important; border-radius: 14px !important;
    font-size: 20px !important; font-weight: 900;
    background: var(--c) !important; color: var(--c-text) !important;
    border-bottom: 4px solid var(--c-dark);
}
.kids-exam .exam-question h3 > span:nth-child(2) { font-weight: 800; color: #777; }
.kids-exam .kq-type {
    display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 10px;
    padding: 5px 14px; border-radius: 999px; font-size: 14px; font-weight: 900;
    background: var(--c-soft); color: var(--c-dark);
}
.kids-exam .exam-question[data-qtype="ordering"] .kq-type { color: #8a6d00; }
.kids-exam .exam-question .q-text { font-size: 21px; font-weight: 800; line-height: 1.35; color: #3c3c3c; }

/* Pregunta respondida: estrellita y borde verde suave */
.kids-exam .exam-question .q-status { background: var(--c) !important; color: var(--c-text) !important; font-weight: 900; }
.kids-exam .exam-question.is-answered::after {
    content: '⭐'; position: absolute; top: -16px; right: -8px; font-size: 32px;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .15));
}
.kids-exam .exam-question.is-answered .q-num { background: var(--c) !important; }

/* ---------- Opciones: botones grandes con relieve ---------- */
.kids-exam .exam-question label:has(input) {
    border: 2px solid #e5e5e5 !important; border-bottom-width: 5px !important;
    border-radius: 16px !important; background: #fff !important;
    font-size: 18px; font-weight: 800; color: #4b4b4b; min-height: 56px;
    transition: transform .08s ease, background-color .15s, border-color .15s;
}
.kids-exam .exam-question label:has(input):hover { background: #f7f7f7 !important; }
.kids-exam .exam-question label:has(input):active { transform: translateY(2px); border-bottom-width: 3px !important; }
.kids-exam .exam-question label:has(input:checked) {
    border-color: var(--c) !important; background: var(--c-soft) !important; color: var(--c-dark);
}
.kids-exam .exam-question input[type="radio"],
.kids-exam .exam-question input[type="checkbox"] { accent-color: var(--c); width: 22px !important; height: 22px !important; }

/* Campos de texto, listas y áreas de escritura */
.kids-exam .exam-question input[type="text"],
.kids-exam .exam-question textarea,
.kids-exam .exam-question select {
    border: 3px solid #e5e5e5 !important; border-radius: 16px !important;
    font-size: 18px; font-weight: 700; padding: 14px 16px !important; background: #fff;
}
.kids-exam .exam-question input[type="text"]:focus,
.kids-exam .exam-question textarea:focus,
.kids-exam .exam-question select:focus { border-color: var(--c) !important; outline: none; box-shadow: 0 0 0 4px var(--c-soft) !important; }

/* Emparejar y ordenar con el color del tipo */
.kids-exam .exam-question .match-row > div:first-child { background: var(--c-soft) !important; border-color: var(--c) !important; border-radius: 16px !important; }
.kids-exam .exam-question .match-row > div:first-child span.rounded-full { background: var(--c) !important; color: var(--c-text) !important; }
.kids-exam .exam-question [draggable="true"] {
    border: 2px solid #e5e5e5 !important; border-bottom-width: 5px !important; border-radius: 16px !important; font-weight: 800; font-size: 17px;
}
.kids-exam .exam-question [draggable="true"] .bg-indigo-100 { background: var(--c) !important; color: var(--c-text) !important; }

/* ---------- Barra de progreso ---------- */
.kids-exam #exam-progress { background: #fff !important; border-bottom: 3px solid #e5e5e5 !important; }
.kids-exam #exam-progress .h-2\.5 { height: 16px !important; background: #e5e5e5 !important; }
.kids-exam #progress-bar {
    background: #58cc02 !important; position: relative;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12);
}
.kids-exam #progress-bar::after {
    content: ''; position: absolute; left: 8px; right: 8px; top: 4px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .35);
}
.kids-exam #exam-progress .text-xs { font-size: 14px; font-weight: 900; color: #4b4b4b; }

/* ---------- Cronómetro grande y notorio ---------- */
.kids-exam #timer { font-size: 44px !important; font-weight: 900; color: #1cb0f6 !important; line-height: 1; }
.kids-exam #timer-container.is-critical #timer { color: #ff4b4b !important; }
.kids-exam #timer-mini-box {
    font-size: 22px; padding: 8px 16px !important; border-radius: 16px !important;
    background: #1cb0f6 !important; color: #fff !important; border-bottom: 4px solid #1899d6;
}
.kids-exam #timer-mini-box.is-warn { background: #ff9600 !important; border-bottom-color: #e07f00; }
.kids-exam #timer-mini-box.is-critical { background: #ff4b4b !important; border-bottom-color: #ea2b2b; }

/* ---------- Botones grandes (empezar / enviar) ---------- */
.kids-exam .kids-button {
    border-radius: 18px !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 6px solid rgba(0, 0, 0, .2) !important;
    transition: transform .08s ease, filter .15s;
}
.kids-exam .kids-button.bg-green-600 { background: #58cc02 !important; border-bottom-color: #46a302 !important; }
.kids-exam .kids-button.bg-indigo-600 { background: #1cb0f6 !important; border-bottom-color: #1899d6 !important; }
.kids-exam .kids-button:hover { filter: brightness(1.05); }
.kids-exam .kids-button:active { transform: translateY(3px); border-bottom-width: 3px !important; }

/* Navegador de preguntas */
.kids-exam .q-nav-chip { border-radius: 12px !important; border-bottom-width: 4px !important; font-weight: 900; }
.kids-exam .q-nav-chip.is-answered { background: #1cb0f6 !important; border-color: #1899d6 !important; }

/* Formulario de inicio (nombre) */
.kids-exam input[name="student_name"], .kids-exam input[name="student_email"] {
    border: 3px solid #e5e5e5 !important; border-radius: 16px !important; font-size: 18px; font-weight: 700; padding: 14px 16px !important;
}

/* ---------- Animaciones cortas ---------- */
@media (prefers-reduced-motion: no-preference) {
    .kids-exam .exam-question.is-answered::after { animation: kidsStarPop .45s cubic-bezier(.34, 1.56, .64, 1); }
    .kids-exam .exam-question.q-flash { transform: scale(1.015); }
    .kids-exam .exam-question label:has(input:checked) { animation: kidsChoice .25s ease; }
}
@keyframes kidsStarPop { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
@keyframes kidsChoice { 50% { transform: scale(1.025); } }

/* ---------- Modo nocturno ---------- */
html.dark body.kids-exam { background-color: #131f24; color: #f1f7fb; }
html.dark .kids-exam .kids-card, html.dark .kids-exam .exam-question { background: #1b2a31 !important; }
html.dark .kids-exam .exam-question .q-text, html.dark .kids-exam h1 { color: #f1f7fb; }
html.dark .kids-exam .exam-question label:has(input),
html.dark .kids-exam .exam-question input[type="text"],
html.dark .kids-exam .exam-question textarea,
html.dark .kids-exam .exam-question select { background: #131f24 !important; border-color: #37464f !important; color: #f1f7fb; }
html.dark .kids-exam #exam-progress { background: #131f24 !important; border-color: #37464f !important; }
html.dark .kids-exam #exam-progress .text-xs { color: #dce6ec; }

/* El aviso antiguo del cronómetro (fondo rosado) no aplica aquí: se usa el color */
.kids-exam #timer { background: none !important; border: 0 !important; display: inline-block !important; }
.kids-exam #timer-container:not(.is-critical) #timer { animation: none !important; }
.kids-exam #timer-container.is-critical #timer { animation: timerBeat 1s ease-in-out infinite !important; }
@media (prefers-reduced-motion: reduce) { .kids-exam #timer-container.is-critical #timer { animation: none !important; } }
.kids-exam #timer.text-red-600 { color: #ff9600 !important; }

/* Celular: la estrella de "respondida" queda dentro de la tarjeta (con márgenes delgados se salía de la pantalla) */
@media (max-width: 639px) {
    .kids-exam .exam-question.is-answered::after { right: 4px; top: -14px; font-size: 26px; }
}