/* Web v2 (Task 10): «Más opciones» (app/ultra.js · openEntry, spec 4.9, ronda-3/lamina-A-mas-opciones.png). Hoja inferior con su asa en
   el celular y diálogo centrado de 520 px en el computador, como el selector de prueba (app/diagnostico.css). «Evaluación» en lima es la
   acción principal; «Práctica» va debajo con borde. Sin flechas. Solo variables del tema; toques de 44 px o más; corta y quieta con
   prefers-reduced-motion. */
.rd-op-fondo { position: fixed; inset: 0; z-index: 89; display: flex; align-items: flex-end; justify-content: center; background: var(--velo);
  overscroll-behavior: contain; animation: rd-op-velo .2s ease-out; }
html:has(.rd-op-fondo) { overflow: hidden; }
.rd-op-hoja { position: relative; display: flex; flex-direction: column; gap: 12px; width: 100%; box-sizing: border-box; max-height: 92vh; overflow-y: auto;
  padding: 32px 20px calc(24px + env(safe-area-inset-bottom, 0px)); border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--surface); color: var(--ink);
  overscroll-behavior: contain; box-shadow: var(--shadow-lg); animation: rd-op-sube .28s cubic-bezier(.22, 1, .36, 1); }
.rd-op-hoja::before { content: ""; position: absolute; top: 10px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 999px; background: var(--line-strong); }
.rd-op-hoja:focus { outline: none; }
.rd-op-hoja .rd-op-cerrar { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); cursor: pointer; }
.rd-op-hoja .rd-op-cerrar svg { width: 22px; height: 22px; }
.rd-op-hoja .rd-op-ceja { margin: 0; padding-right: 56px; font-size: 13px; font-weight: 800; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; color: var(--ink-2); }
.rd-op-hoja h2 { margin: 0; padding-right: 8px; font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.rd-op-hoja .rd-op-datos { margin: 0 0 4px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.rd-op-hoja .rd-op-eval, .rd-op-hoja .rd-op-prac { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; min-height: 64px; margin: 0;
  padding: 16px 20px; box-sizing: border-box; border-radius: 20px; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, filter .12s ease; }
.rd-op-hoja .rd-op-eval { border: 0; background: var(--accent); color: var(--accent-ink); }
.rd-op-hoja .rd-op-prac { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.rd-op-hoja .rd-op-eval b, .rd-op-hoja .rd-op-prac b { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.rd-op-hoja .rd-op-eval span, .rd-op-hoja .rd-op-prac span { font-size: 14px; line-height: 1.4; }
.rd-op-hoja .rd-op-prac span { color: var(--ink-2); }
.rd-op-hoja .rd-op-eval b svg { width: 20px; height: 20px; flex: none; }
.rd-op-hoja .rd-op-eval:hover { filter: brightness(1.04); }
.rd-op-hoja .rd-op-prac:hover { background: var(--surface-2); }
.rd-op-hoja .rd-op-eval:active, .rd-op-hoja .rd-op-prac:active { transform: scale(.985); }
.rd-op-hoja .rd-op-eval:focus-visible, .rd-op-hoja .rd-op-prac:focus-visible, .rd-op-hoja .rd-op-cerrar:focus-visible,
.rd-op-hoja .rd-op-cuad:focus-visible, .rd-op-hoja .rd-op-abrir:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.rd-op-hoja .rd-op-candado { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 18px; border-radius: 16px; background: var(--surface-2);
  font-size: 15px; line-height: 1.45; color: var(--ink); }
.rd-op-hoja .rd-op-candado svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--ink-2); }
.rd-op-hoja .rd-op-cuad { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; font-size: 15px; font-weight: 800; color: var(--accent-text); text-decoration: none; }
.rd-op-hoja .rd-op-cuad:hover { text-decoration: underline; text-underline-offset: 3px; }
.rd-op-hoja .rd-op-abrir { display: flex; align-items: center; align-self: stretch; min-height: 56px; padding: 0 20px; border-radius: 20px; background: var(--accent);
  color: var(--accent-ink); font-size: 17px; font-weight: 800; text-decoration: none; }
.rd-op-hoja .rd-op-abrir:hover { text-decoration: none; filter: brightness(1.04); }
.rd-op-hoja .rd-op-texto, .rd-op-hoja .rd-op-nota, .rd-op-hoja .rd-op-aviso { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.rd-op-hoja .rd-op-aviso { font-size: 14px; }
@media (min-width: 761px) {
  .rd-op-fondo { align-items: center; padding: 20px; }
  .rd-op-hoja { max-width: 520px; padding: 24px 24px 26px; border-radius: var(--r-xl); animation-name: rd-op-aparece; }
  .rd-op-hoja::before { display: none; }
}
@keyframes rd-op-velo { from { opacity: 0; } }
@keyframes rd-op-sube { from { transform: translateY(100%); } }
@keyframes rd-op-aparece { from { opacity: 0; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) {
  .rd-op-fondo, .rd-op-hoja { animation: none; }
  .rd-op-hoja .rd-op-eval, .rd-op-hoja .rd-op-prac { transition: none; }
}