:root{--df-morado:#240a4a;--df-morado-claro:#3a1a6b;--df-azul:#4451a2;--df-azul-claro:#7080b8;--df-nube:#eef0f8;--tinta:#1a1526;--papel:#fff;--borde:#d8dbe8;--acento:var(--df-azul);--acento-suave:var(--df-nube);--alerta:#c62828;--exito:#2e8b3d;--apagado:#6b6880;--tactil:56px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{overscroll-behavior:none;height:100%;margin:0;overflow:hidden}body{color:var(--tinta);background:var(--papel);touch-action:manipulation;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.pantalla{height:100dvh;padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom);grid-template-rows:auto 1fr auto;gap:8px;display:grid}.barra{color:var(--apagado);justify-content:space-between;align-items:center;gap:12px;padding:10px 0 6px;font-size:13px;display:flex}.progreso{background:var(--borde);border-radius:2px;flex:1;height:4px;overflow:hidden}.progreso>i{background:var(--acento);height:100%;transition:width .12s linear;display:block}.senal{white-space:nowrap;align-items:center;gap:5px;display:inline-flex}.punto{background:var(--exito);border-radius:50%;width:8px;height:8px}.punto.sin-red{background:var(--alerta)}.enunciado{margin:4px 0 10px;font-size:clamp(19px,5vw,26px);font-weight:600;line-height:1.25}.codigo-pregunta{color:var(--apagado);font-size:13px;font-weight:500}.opciones{align-content:start;gap:8px;min-height:0;display:grid;overflow-y:auto}.opcion{min-height:var(--tactil);text-align:left;width:100%;color:var(--tinta);background:var(--papel);border:2px solid var(--borde);cursor:pointer;border-radius:12px;align-items:center;gap:12px;padding:12px 16px;font-size:17px;display:flex}.opcion:active{background:var(--acento-suave);border-color:var(--acento)}.opcion.elegida{background:var(--acento-suave);border-color:var(--acento);font-weight:600}.retrato{object-fit:cover;background:var(--df-nube);border-radius:50%;flex-shrink:0;width:56px;height:56px}.retrato-grande{object-fit:cover;background:var(--df-nube);border:3px solid var(--df-azul);border-radius:50%;width:132px;height:132px;margin:0 auto 10px;display:block}.rejilla-color .muestra{border-color:#d8dbe8}.rejilla-color{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));align-content:start;gap:10px;min-height:0;display:grid;overflow-y:auto}.muestra{border:3px solid var(--borde);cursor:pointer;border-radius:14px;min-height:84px;padding:0}.muestra.elegida{border-color:var(--tinta);transform:scale(.96)}.pie{gap:10px;padding:8px 0 12px;display:flex}.boton{min-height:var(--tactil);border:2px solid var(--borde);background:var(--papel);color:var(--tinta);cursor:pointer;border-radius:12px;flex:1;font-size:17px;font-weight:600}.boton.principal{background:var(--acento);border-color:var(--acento);color:#fff}.boton:disabled{opacity:.4}.campo{min-height:var(--tactil);border:2px solid var(--borde);border-radius:12px;width:100%;padding:12px 16px;font-size:17px}.logo-entrada{width:148px;height:auto;margin:0 auto 4px}.pantalla>.barra{border-bottom:1px solid var(--borde)}.boton.principal{background:var(--df-azul);border-color:var(--df-azul)}.opcion.elegida,.opcion:active{border-color:var(--df-azul)}.progreso>i{background:var(--df-azul)}.enunciado{color:var(--df-morado)}.centrado{text-align:center;place-content:center;gap:14px;padding:24px;display:grid}.aviso{color:var(--alerta);font-size:15px}.tenue{color:var(--apagado);font-size:14px}.tarjetas{gap:8px;display:grid}.tarjeta{border:2px solid var(--borde);border-radius:12px;justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.retrato.sin-foto,.retrato-grande.sin-foto{color:var(--df-azul);letter-spacing:.5px;border:2px dashed var(--borde);justify-content:center;align-items:center;font-weight:700;display:inline-flex}.retrato.sin-foto{font-size:15px}.retrato-grande.sin-foto{font-size:34px}.leer-en-voz{color:var(--df-morado);border-left:4px solid var(--df-azul);margin:0 0 16px;padding:4px 0 4px 14px;font-size:clamp(17px,4.4vw,21px);line-height:1.45}.punto.grabando{background:var(--alerta);animation:1.4s ease-in-out infinite latir}@keyframes latir{0%,to{opacity:1}50%{opacity:.25}}.enlace{color:var(--df-azul);cursor:pointer;background:0 0;border:none;padding:8px 4px;font-size:14px;font-weight:600;text-decoration:underline}