* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: linear-gradient(135deg,#fff4ce,#e3f6ff 60%,#f1e6ff); color: #243052; font: 1.15rem/1.5 system-ui,sans-serif; }
main { width: min(860px, calc(100% - 28px)); margin: 24px auto 40px; }
header,.resultado { text-align: center; }
h1 { color: #4b278d; font-size: clamp(2rem,6vw,3rem); line-height: 1.1; margin: 12px 0 22px; }
h2 { color: #4b278d; line-height: 1.2; margin: 8px 0 16px; }
.etiqueta { display: inline-block; margin: 0 0 8px; background: #eee3ff; color: #442472; padding: 6px 15px; border-radius: 20px; font-weight: 700; overflow-wrap: anywhere; }
.tarjeta { background: white; border: 2px solid #eee4ff; border-radius: 24px; padding: clamp(16px,4vw,32px); box-shadow: 0 8px 26px #3d297318; }
#inicio label,#avance { display: block; font-weight: 700; }
#nombre { display: block; width: 100%; padding: 12px; margin: 8px 0 18px; font: inherit; border: 2px solid #a496c2; border-radius: 12px; }
button { background: #5430a0; color: white; border: 0; border-radius: 14px; padding: 12px 20px; min-height: 48px; font: inherit; font-weight: 750; cursor: pointer; }
button:disabled { opacity: .65; cursor: wait; }
.secundario { background: #e7edff; color: #293975; }
:focus-visible { outline: 3px solid #0667a5; outline-offset: 3px; }
progress { display: block; width: 100%; height: 18px; margin: 5px 0 20px; accent-color: #138260; }
#lectura { background: #e6f8ef; border-radius: 14px; padding: 12px; margin-bottom: 18px; }
#cuento { display: block; width: 100%; height: auto; margin: 10px auto 0; border-radius: 10px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-size: clamp(1.3rem,4vw,1.75rem); line-height: 1.25; font-weight: 800; padding: 0 0 10px; }
.dibujos { max-width: 100%; height: auto; }
.opcion { display: flex; align-items: center; gap: 12px; border: 2px solid #a9bbec; background: #f2f5ff; border-radius: 14px; padding: 12px; margin: 8px 0; cursor: pointer; }
.opcion:has(input:checked) { background: #e0f7e9; border-color: #167450; }
input[type=radio] { width: 22px; height: 22px; flex: 0 0 22px; accent-color: #167450; }
.acciones { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
#aviso { color: #8b2443; font-weight: 700; }
.resultado { overflow-wrap: anywhere; }
#nota { font-size: clamp(2.5rem,9vw,4rem); color: #126849; font-weight: 850; margin: 12px 0; }

#cuento { width: min(100%, 650px); margin-top: 0; }
.pregunta { scroll-margin-top: 12px; }
legend { font-size: clamp(1.55rem, 4vw, 2rem); }
.opcion { font-size: clamp(1.3rem, 3.1vw, 1.55rem); min-height: 64px; }
.imagen-opcion { width: clamp(64px, 16vw, 128px); height: auto; border-radius: 8px; }
.boton { display: inline-block; padding: 12px 18px; border-radius: 14px; background: #5430a0; color: #fff; font-weight: 750; text-decoration: none; }
.boton.secundario { background: #e7edff; color: #293975; }
.acceso-admin { margin-top: 18px; text-align: right; }
.admin-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.campo-admin { display: block; margin: 8px 0 16px; padding: 10px; font: inherit; width: min(100%, 420px); }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid #ddd5ed; padding: 10px; text-align: left; overflow-wrap: anywhere; }
th { background: #eee3ff; }
th:last-child, td:last-child { text-align: center; }