/* =============================================================================
   TEM · componente «test de recursos» (match de 4 recursos) · 10-nov-2026 (Leo)
   Lo usan la portada (#iman) y la landing de @theceo.ia (/adolfo/). Requiere tokens.css
   e interfaz.css. Lógica en test-recursos.js. Reglas: Gerencia/web/MANUAL_WEB_v2.md.
   ============================================================================= */
/* ficha y controles (también los usa el formulario #califica de la portada) */
.ficha{background:var(--tem-white);border-radius:var(--tem-r-lg);padding:var(--tem-s-5);display:grid;gap:var(--tem-s-4);min-width:0}
@media (min-width:760px){.ficha{padding:var(--tem-s-6)}}
.ficha .tem-input,.ficha .tem-select{min-height:var(--tem-h-control-lg)}
.ficha fieldset{border:0;padding:0;margin:0;display:grid;gap:var(--tem-s-2)}
.ficha legend{padding:0;margin-bottom:var(--tem-s-2)}
.opciones{display:flex;flex-wrap:wrap;gap:var(--tem-s-2)}
.op{position:relative;display:inline-flex}
.op input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.op span{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--tem-s-4);border:1px solid var(--tem-line-strong);border-radius:var(--tem-r-pill);font-size:var(--tem-ui-small);font-weight:500;color:var(--tem-ink-2);background:var(--tem-white);transition:border-color var(--tem-dur-ui) var(--tem-ease-ui),color var(--tem-dur-ui) var(--tem-ease-ui),background var(--tem-dur-ui) var(--tem-ease-ui)}
.op input:hover + span{border-color:var(--tem-ink-2)}
.op input:checked + span{border-color:var(--tem-ink);color:var(--tem-ink);background:var(--tem-canvas)}
.op input:focus-visible + span{box-shadow:var(--tem-foco)}
.check{display:flex;gap:var(--tem-s-3);align-items:flex-start;font-size:var(--tem-ui-small);line-height:1.45;color:var(--tem-ink-2);cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--tem-ink)}
.check b{font-weight:500;color:var(--tem-ink)}
.hp{position:absolute;left:-9999px}
.ficha__msg{min-height:1.4em;font-size:var(--tem-ui-small);color:var(--tem-ink-2)}
.ficha .tem-btn{justify-self:start}
@media (max-width:559px){.ficha .tem-btn{justify-self:stretch}}

/* test: un paso a la vista, avance al tocar, barra de progreso en tinta */
.test{align-content:start}
.test__top{display:grid;gap:var(--tem-s-2)}
.test__barra{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--tem-s-1)}
.test__barra i{height:4px;border-radius:2px;background:var(--tem-line);transition:background var(--tem-dur-ui) var(--tem-ease-ui)}
.test__barra i.is-on{background:var(--tem-ink)}
.ficha .paso{display:grid;gap:var(--tem-s-4)}
.ficha .paso[hidden]{display:none}
.paso__t,.res__t{outline:none;margin:0}
.paso__t{margin-bottom:var(--tem-s-1)}
.filas-op{display:grid;gap:var(--tem-s-2)}
@media (min-width:560px){.filas-op--2{grid-template-columns:1fr 1fr}}
.op--fila{display:flex}
.op--fila span{flex:1;min-height:var(--tem-h-control-lg);padding:var(--tem-s-2) var(--tem-s-4);border-radius:var(--tem-r-sm);font-size:var(--tem-ui-body);color:var(--tem-ink);line-height:1.35}
.op--fila input:hover + span{border-color:var(--tem-ink)}
.paso__nav{display:flex;align-items:center;justify-content:space-between;gap:var(--tem-s-3)}
.paso__nav:has(> :only-child){justify-content:flex-end}
.paso__atras{margin-left:calc(var(--tem-s-3) * -1)}
.ficha .paso__nav .tem-btn{justify-self:auto}
/* "Siguiente" solo aparece si se navega con teclado; con mouse o dedo el paso avanza solo */
.js-test:not(.kbd) .paso__sig{display:none}
.js-test:not(.kbd) .paso__nav:has(> .paso__sig:only-child){display:none}
.res__t{font-size:var(--h2,var(--tem-web-h2-movil));line-height:1.15;letter-spacing:var(--tem-tr-titulo);text-wrap:balance}
.res__por{color:var(--tem-ink-2);max-width:48ch}
.res__rec{display:grid;gap:var(--tem-s-1);padding-block:var(--tem-s-4);border-block:1px solid var(--tem-line)}
.res__nombre{font-size:var(--tem-ui-title);font-weight:500;line-height:1.3;letter-spacing:var(--tem-tr-ui-titulo)}
.res__cambiar{background:none;border:0;padding:0;font:inherit;color:var(--tem-ink);cursor:pointer}
.ok__wa{display:grid;gap:var(--tem-s-3);padding-top:var(--tem-s-4);border-top:1px solid var(--tem-line)}
/* con JS se ve un paso a la vez; sin JS quedan todos a la vista */
.js-test .paso:not(.is-on){display:none}
.js-test .paso.is-on{animation:paso-in 220ms var(--tem-ease-ui)}
@keyframes paso-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js-test .paso.is-on{animation:none}.op span,.test__barra i{transition:none}}
/* el aviso vacío no ocupa espacio (sigue en el DOM para lectores de pantalla) */
.test .ficha__msg:empty{min-height:0;margin-top:calc(var(--tem-s-4) * -1)}