/* Soy Ateo — Cuestionarios. Mismo aspecto que mTouch Quiz (medidas, colores y piezas), sin depender del tema. */

.saq{--saq-md:#333399;--saq-o:#0066FF;--saq-m:#0099FF;--saq-c:#D0DAFD;--saq-mc:#EFF2FF;--saq-raya:rgba(128,128,128,.07);text-align:left;margin:1em 0;font-size:16px;line-height:1.5}
.saq *,.saq *::before,.saq *::after{box-sizing:border-box}
.saq [hidden]{display:none!important}
.saq-titulo{text-align:center}
.saq-titulo h2{margin:8px 0 16px}
.saq-reloj{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.saq-aviso-js{text-align:center;font-weight:600}
.saq-instrucciones{margin-bottom:1em}
.saq-instrucciones p:last-child{margin-bottom:0}

/* Botones redondeados (Empezar, Lista, Ver resultados, Volver) */
.saq .saq-boton{display:block;cursor:pointer;font-weight:600;font-size:125%;line-height:1.5;text-align:center;width:8em;max-width:100%;margin:0 auto;border:0;border-radius:2em;padding:.5em;color:#fff;background:var(--saq-o);font-family:inherit;text-transform:none;letter-spacing:normal;box-shadow:none}
.saq .saq-boton:hover,.saq .saq-boton:focus-visible{color:#fff;background:var(--saq-m)}
.saq .saq-boton.saq-grande{font-size:200%;margin-top:.5em;margin-bottom:.5em}
.saq button:focus-visible,.saq .saq-opcion:focus-visible{outline:3px solid var(--saq-md);outline-offset:2px}

/* Resultado */
.saq-resultado{border-radius:1em;margin:1em 0;padding:.5em;color:var(--saq-md);background:var(--saq-c)}
.saq-resultado:focus{outline:none}
.saq-resultado-texto p{margin:0 0 .6em}
.saq-resultado-texto p:last-child{margin-bottom:0}
.saq-resaltadas{margin-top:1em;font-size:75%;font-weight:600;text-align:center}

/* Diapositivas: una pregunta a la vista, o todas si es de una sola página */
.saq-diapos{position:relative}
.saq-pasos .saq-diapo{display:none}
.saq-pasos .saq-diapo.saq-actual{display:block;animation:saq-entra .35s ease-out}
.saq-pasos .saq-diapo.saq-actual.saq-desde-izq{animation-name:saq-entra-izq}
@keyframes saq-entra{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes saq-entra-izq{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.saq-pasos .saq-diapo.saq-actual{animation:none}}

/* Cabecera de la pregunta: «Pregunta 1» y el sello */
.saq-cabecera{display:flex;align-items:center;flex-wrap:wrap;gap:3.6px 7.2px;margin:.5em 0;padding:0 0 .1em;border-bottom:.1em solid var(--saq-o);background:var(--saq-raya);font-size:14.4px;line-height:1.5;min-height:28px}
.saq-etiqueta{font-weight:600}
.saq-sello{display:none;text-align:center;padding:0 .5em;border-radius:2em;font-weight:600;text-transform:uppercase;border:1px solid}
.saq-sello.saq-bien,.saq-sello.saq-mal,.saq-sello.saq-parcial{display:inline-block}
.saq-sello.saq-bien{color:#fff;background:#006633;border-color:#006633}
.saq-sello.saq-mal{color:#fff;background:#B5281E;border-color:#B5281E}
.saq-sello.saq-parcial{color:#fff;background:#0099FF;border-color:#0099FF}
.saq-enunciado{padding-right:2em}
.saq-enunciado p{margin:0}

/* Respuestas */
.saq ul.saq-respuestas{list-style:none;margin:14.4px 0 15px;padding:0 14.4px 0 0;width:85%;font-size:14.4px;line-height:1.5}
.saq li.saq-fila{margin:0;padding:0;list-style:none;background:linear-gradient(to right,var(--saq-c) 54px,transparent 54px)}
.saq li.saq-fila:nth-child(odd){background:linear-gradient(to right,var(--saq-c) 54px,var(--saq-raya) 54px)}
.saq li.saq-fila:hover{background:var(--saq-mc);color:#000}
.saq li.saq-fila::before,.saq li.saq-fila::marker{content:none}
.saq-opcion{display:flex;align-items:center;cursor:pointer;padding:7.2px 0;min-height:54px}
.saq-marca{flex:0 0 54px;display:flex;align-items:center;justify-content:center}
.saq-letra{width:40px;height:40px;display:block;border-radius:40px;font-size:30px;line-height:40px;text-align:center;font-family:Arial,Helvetica,sans-serif;color:#fff;background:var(--saq-o);user-select:none}
.saq-opcion:hover .saq-letra{background:var(--saq-m)}
.saq .saq-letra.saq-elegida{background:#333;color:#fff}
.saq .saq-opcion:hover .saq-letra.saq-elegida{background:#666}
.saq-texto{flex:1;margin-left:3.6px}
.saq-texto p{margin:0}
.saq-con-marca .saq-letra{display:none}
.saq-con-marca .saq-icono{display:block!important}
.saq-icono{width:40px;height:40px;max-width:none;margin:0;border:0;box-shadow:none}
.saq li.saq-fila.saq-marcada{background:#CCC;color:#000;font-weight:600}

/* Pista y explicación */
.saq-pista{margin:0 8px 7.2px auto;width:min(70%,calc(100% - 70px));padding:.5em;border:1px solid var(--saq-o);border-radius:1em;color:var(--saq-md);background:var(--saq-c)}
.saq-pista-titulo{font-size:125%}
.saq-explicacion{margin:1em 0 3em 3em;width:80%;padding:.5em;border:1px solid #003300;border-radius:1em;color:#003300;background:#ADE0C1;font-size:16px}
.saq-explicacion-titulo{display:block;padding-bottom:.25em;font-weight:600}
.saq-explicacion-texto p{margin:0 0 .6em}
.saq-explicacion-texto p:last-child{margin-bottom:0}

/* Petición de resultados, estado y navegación */
.saq-pedir-resultado{text-align:center;margin-top:.5em}
.saq-estado{text-align:center;margin:.5em 0}
.saq-navegacion{display:grid;grid-template-columns:80px 1fr 80px;align-items:center;background:var(--saq-raya);margin:0 0 15px;min-height:60px}
.saq .saq-flecha{background:none;border:0;padding:0 8px;margin:0;cursor:pointer;font-size:48px;line-height:1;color:var(--saq-md);font-family:inherit;box-shadow:none}
.saq .saq-flecha:hover,.saq .saq-flecha:focus-visible{background:none;color:var(--saq-o)}
.saq .saq-flecha.saq-oculta{visibility:hidden}
.saq .saq-adelante{justify-self:end}

/* Lista de preguntas */
.saq-lista .saq-boton{margin-top:1em;margin-bottom:1em}
.saq-sombreadas{display:block;width:25em;max-width:100%;text-align:center;font-weight:600;border:1px solid var(--saq-o);border-radius:2em;margin:.5em auto;color:var(--saq-md);background:var(--saq-c)}
.saq-rejilla{display:grid;grid-template-columns:repeat(5,1fr);width:95%;margin:0 auto;font-weight:600;border-top:1px solid var(--saq-md);border-left:1px solid var(--saq-md)}
.saq .saq-celda{cursor:pointer;text-align:center;padding:1em 0;font-size:200%;line-height:1.5;border:0;border-right:1px solid var(--saq-md);border-bottom:1px solid var(--saq-md);border-radius:0;background:#fff;color:var(--saq-md);font-weight:400;font-family:inherit;margin:0;box-shadow:none}
.saq .saq-celda:hover{background:var(--saq-mc);color:var(--saq-md)}
.saq .saq-celda.saq-completa{color:var(--saq-md);background:var(--saq-c)}
.saq .saq-celda.saq-c-bien{background:#006633;color:#fff}
.saq .saq-celda.saq-c-mal{background:#B5281E;color:#fff}
.saq .saq-celda.saq-c-parcial{background:#0099FF;color:#fff}
.saq .saq-celda.saq-c-actual{outline:3px solid var(--saq-md);outline-offset:-5px}

@media (max-width:600px){
	.saq ul.saq-respuestas{width:100%;padding-right:0}
	.saq-enunciado{padding-right:0}
	.saq-pista,.saq-fila .saq-pista{width:auto;margin:0 6px 7.2px 60px}
	.saq-explicacion{width:auto;margin:1em 0 2em}
	.saq .saq-boton.saq-grande{font-size:160%}
	.saq .saq-celda{font-size:150%;padding:.6em 0}
	.saq-navegacion{grid-template-columns:60px 1fr 60px}
}

/* Los 21 colores de mTouch Quiz: muy oscuro, oscuro, medio, claro, muy claro */
.saq-color-blue{--saq-md:#333399;--saq-o:#0066FF;--saq-m:#0099FF;--saq-c:#D0DAFD;--saq-mc:#EFF2FF}
.saq-color-green{--saq-md:#004A07;--saq-o:#00930E;--saq-m:#40AE4B;--saq-c:#BFE4C3;--saq-mc:#E6F5E7}
.saq-color-red{--saq-md:#6C0C18;--saq-o:#D81830;--saq-m:#E25264;--saq-c:#F5C5CB;--saq-mc:#FCE8EB}
.saq-color-orange{--saq-md:#D95700;--saq-o:#FF6600;--saq-m:#FF8D40;--saq-c:#FFD9BF;--saq-mc:#FFF0E6}
.saq-color-yellow{--saq-md:#D9D900;--saq-o:#FFD700;--saq-m:#FFFF7E;--saq-c:#FFFFBF;--saq-mc:#FFFFE6}
.saq-color-indigo{--saq-md:#270747;--saq-o:#2E0854;--saq-m:#63467F;--saq-c:#CBC1D4;--saq-mc:#EBE7EE}
.saq-color-violet{--saq-md:#4F2F4F;--saq-o:#7B637B;--saq-m:#A898A8;--saq-c:#D3CBD3;--saq-mc:#EEEBEE}
.saq-color-fuchsia{--saq-md:#D900D9;--saq-o:#FF40FF;--saq-m:#FF80FF;--saq-c:#FFBFFF;--saq-mc:#FFE6FF}
.saq-color-khaki{--saq-md:#5C3317;--saq-o:#9F9F5F;--saq-m:#E2E2CF;--saq-c:#ECECE0;--saq-mc:#F5F5EF}
.saq-color-burgundy{--saq-md:#4F0304;--saq-o:#9E0508;--saq-m:#B74446;--saq-c:#CF8384;--saq-mc:#E7C0C1}
.saq-color-black{--saq-md:#000000;--saq-o:#000000;--saq-m:#808080;--saq-c:#BFBFBF;--saq-mc:#E6E6E6}
.saq-color-lightblue{--saq-md:#0147FA;--saq-o:#ADD8E6;--saq-m:#C2E2ED;--saq-c:#D7ECF3;--saq-mc:#EAF5F9}
.saq-color-teal{--saq-md:#004040;--saq-o:#008080;--saq-m:#40A0A0;--saq-c:#80C0C0;--saq-mc:#BFDFDF}
.saq-color-lightgreen{--saq-md:#002600;--saq-o:#90EE90;--saq-m:#ACF3AC;--saq-c:#C8F7C8;--saq-mc:#E3FBE3}
.saq-color-lightpink{--saq-md:#BF8991;--saq-o:#FFB6C1;--saq-m:#FFC9D1;--saq-c:#FFDBE1;--saq-mc:#FFEDEF}
.saq-color-darkgreen{--saq-md:#002600;--saq-o:#003300;--saq-m:#406640;--saq-c:#809A80;--saq-mc:#BFCCBF}
.saq-color-brown{--saq-md:#442110;--saq-o:#87421F;--saq-m:#A57257;--saq-c:#C4A190;--saq-mc:#E1D0C7}
.saq-color-purple{--saq-md:#400040;--saq-o:#800080;--saq-m:#A040A0;--saq-c:#C080C0;--saq-mc:#DFBFDF}
.saq-color-navy{--saq-md:#121247;--saq-o:#23238E;--saq-m:#5A5AAB;--saq-c:#9292C7;--saq-mc:#C8C8E3}
.saq-color-darkpink{--saq-md:#67083B;--saq-o:#CD1076;--saq-m:#DA4C99;--saq-c:#E788BB;--saq-mc:#F2C3DD}
.saq-color-lavender{--saq-md:#664D66;--saq-o:#CC99CC;--saq-m:#D9B3D9;--saq-c:#E6CDE6;--saq-mc:#F2E5F2}