/* Paleta del proyecto (CLAUDE.md). El modo oscuro sigue la preferencia del teléfono.
   Fuentes en WOFF2 solo con letras latinas (136 KB); los TTF quedan para las imágenes que dibuja el servidor. */
@font-face{font-family:"Josefin Sans";src:url(fuentes/JosefinSans.woff2) format("woff2"),url(fuentes/JosefinSans.ttf) format("truetype");font-weight:100 700;font-display:swap}
@font-face{font-family:"Mulish";src:url(fuentes/Mulish.woff2) format("woff2"),url(fuentes/Mulish.ttf) format("truetype");font-weight:200 900;font-display:swap}
@font-face{font-family:"Lora";src:url(fuentes/Lora.woff2) format("woff2"),url(fuentes/Lora.ttf) format("truetype");font-weight:400 700;font-display:swap}
@font-face{font-family:"Lora";src:url(fuentes/Lora-Italic.woff2) format("woff2"),url(fuentes/Lora-Italic.ttf) format("truetype");font-weight:400 700;font-style:italic;font-display:swap}

:root{
  --volcanic:#3D3D3D; --ice:#EBECEE; --lichen:#C4E326; --stone:#8A8C8F;
  --bg:var(--ice); --fg:var(--volcanic); --card:#FFFFFF; --acc:#4E6309; --muted:#5F6164; --line:#D3D5D8;
  --f-display:"Josefin Sans","Futura","Century Gothic",system-ui,sans-serif;
  --f-ui:"Mulish","Segoe UI",system-ui,sans-serif;
  --f-read:"Lora",Georgia,serif;
  --esc:1;
  /* Escalas: letra, espacio y radio. Ningún valor suelto fuera de estas listas. */
  --t-xs:12px; --t-s:14px; --t-m:16px; --t-l:18px; --t-xl:22px; --t-2xl:28px; --t-3xl:clamp(32px,9vw,40px);
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px;
  --r:12px; --r-pill:999px;
  --ls:.06em;
  --borde:0 0 0 transparent;
  /* Botón gris con icono verde (Lichen sobre Volcanic: 7,43). En oscuro el gris baja a #2A2A2A para separarse de la barra. */
  --centro:var(--volcanic); --centro-ic:var(--lichen);
  color-scheme:light;
}
:root[data-letra=grande]{--esc:1.15}
:root[data-letra=enorme]{--esc:1.3}
/* Modo oscuro: automático (preferencia del teléfono) o elegido en el menú (data-tema en <html>). */
@media (prefers-color-scheme:dark){:root:not([data-tema=claro]){
  --bg:#2A2A2A; --fg:var(--ice); --card:var(--volcanic); --acc:var(--lichen); --muted:#B0B2B5; --line:#56585B;
  --borde:inset 0 0 0 1px rgba(138,140,143,.4);
  --centro:#2A2A2A; --centro-ic:var(--lichen);
  color-scheme:dark}}
:root[data-tema=oscuro]{
  --bg:#2A2A2A; --fg:var(--ice); --card:var(--volcanic); --acc:var(--lichen); --muted:#B0B2B5; --line:#56585B;
  --borde:inset 0 0 0 1px rgba(138,140,143,.4);
  --centro:#2A2A2A; --centro-ic:var(--lichen);
  color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--t-m)/1.5 var(--f-ui)}
main{max-width:520px;margin:0 auto;padding:16px 16px 48px;display:flex;flex-direction:column;gap:16px;min-height:100dvh}
a{color:var(--acc);font-weight:800;text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
a,button,[data-v]{-webkit-tap-highlight-color:transparent}
/* Respuesta al toque: todo lo que se pulsa se hunde un poco. */
.btn,.btn-compartir,.chip,.seguir,.nav-i,.nav-centro .circulo,.libro,.menu-lista a,.menu-lista button,.seg button{transition:transform .1s ease,filter .1s ease}
.btn:active,.btn-compartir:active,.chip:active,.seguir:active,.libro:active,.nav-centro:active .circulo{transform:scale(.98);filter:brightness(.92)}
.nav-i:active,.menu-lista a:active,.menu-lista button:active,.seg button:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.top{display:flex;justify-content:space-between;align-items:center;font-size:var(--t-s);min-height:32px}
.brand{font-family:var(--f-display);font-size:var(--t-l);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls);display:flex;align-items:center;gap:8px;color:var(--fg)}
.brand img{width:22px;height:22px;display:block}
.logo-o{display:none!important}
@media (prefers-color-scheme:dark){:root:not([data-tema=claro]) .logo-c{display:none!important}:root:not([data-tema=claro]) .logo-o{display:block!important}}
:root[data-tema=oscuro] .logo-c{display:none!important}
:root[data-tema=oscuro] .logo-o{display:block!important}
.top .brand:only-child{margin-right:auto}
.top a{white-space:nowrap}
.top a.atras{display:inline-flex;align-items:center;min-height:44px;padding-right:16px;margin:-6px 0}
.top a + .brand{font-size:var(--t-s);white-space:nowrap}

/* Tres voces: Josefin solo para la marca y el veredicto; Lora para títulos y texto bíblico; Mulish para la interfaz. */
h1{font-family:var(--f-read);font-size:var(--t-3xl);line-height:1.12;font-weight:600;margin:var(--s2) 0 0;text-wrap:balance;letter-spacing:-.01em}
h1 em{font-style:italic;color:var(--acc)}
.sub{color:var(--muted);margin:0}
.lbl{font-size:var(--t-s);font-weight:800;color:var(--muted);margin:0}
.lbl.sec,.sec{margin-top:var(--s4)}
.nw{white-space:nowrap}

form{display:flex;flex-direction:column;gap:var(--s2)}
textarea{width:100%;min-height:96px;resize:vertical;background:var(--card);color:var(--fg);border:1.5px solid var(--line);border-radius:var(--r);padding:12px var(--s3);font:var(--t-m)/1.4 var(--f-ui)}
textarea::placeholder{color:var(--muted)}
textarea:focus{border-color:var(--fg);outline:none}
.btn{display:flex;justify-content:center;align-items:center;gap:var(--s2);border:0;border-radius:var(--r-pill);padding:14px var(--s4);font:800 var(--t-m) var(--f-ui);background:var(--lichen);color:var(--volcanic);cursor:pointer;text-decoration:none}
.btn:hover{text-decoration:none;filter:brightness(.96)}
.btn.ghost{background:transparent;color:var(--fg);border:1.5px solid var(--fg)}
.row{display:flex;gap:var(--s2)}.row>*{flex:1}
.acciones{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s2)}
.oculto{position:absolute;left:-9999px}
.ir{flex-direction:row;gap:var(--s2)}
.ir input{flex:1;min-width:0;background:var(--card);color:var(--fg);border:1.5px solid var(--line);border-radius:var(--r-pill);padding:12px var(--s3);font:var(--t-m) var(--f-ui)}
.ir input::placeholder{color:var(--muted)}
.ir .btn{padding:12px var(--s4)}
.seguir{background:var(--card);box-shadow:var(--borde);border-radius:var(--r);padding:var(--s3);color:var(--fg);font-weight:700}
.seguir b{color:var(--acc)}

.aviso{background:var(--card);border-left:4px solid var(--lichen);border-radius:var(--r);padding:12px var(--s3);margin:0;font-size:var(--t-m)}
.chips{display:flex;flex-direction:column;gap:var(--s2)}
.chip{display:block;min-height:44px;background:var(--card);box-shadow:var(--borde);color:var(--fg);border-radius:var(--r);padding:10px var(--s3);font-weight:600;font-size:var(--t-m)}
.chip:hover{text-decoration:none;outline:1.5px solid var(--line)}
.foot{margin-top:auto;font-size:var(--t-s);color:var(--muted)}
.foot a{color:var(--stone);text-decoration:underline;display:inline-block;padding:12px 0;margin:-12px 0}

.searched{font-family:var(--f-read);font-style:italic;font-size:var(--t-xl);line-height:1.3;margin:0}
/* Veredicto: un mismo molde para los tres; solo cambian el signo y el color de la franja. */
.verdict{background:var(--card);box-shadow:var(--borde);border-radius:var(--r);border-top:4px solid var(--fg);padding:var(--s3);display:flex;gap:var(--s3);align-items:center;margin-top:var(--s2)}
.verdict .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:800 var(--t-xl) var(--f-ui);flex:none;border:2px solid var(--fg)}
.verdict b{display:block;font-family:var(--f-display);text-transform:uppercase;font-size:var(--t-xl);font-weight:600;letter-spacing:var(--ls);line-height:1.1}
.verdict small{display:block;font-size:var(--t-s);font-weight:700;color:var(--muted);margin-top:var(--s1)}
.v-tal_cual{border-top-color:var(--lichen)} .v-tal_cual .ic{background:var(--centro);border-color:var(--centro);color:var(--lichen)}
.v-parafrasis{border-top-color:var(--stone)} .v-parafrasis .ic{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.v-no_esta{border-top-color:var(--fg)} .v-no_esta .ic{background:transparent;color:var(--fg)}
/* Entrada breve del veredicto y su versículo: es el momento que se comparte. */
@keyframes revela{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.verdict{animation:revela .24s ease-out both}
.verdict + .verse{animation:revela .24s ease-out .08s both}
@media (prefers-reduced-motion:reduce){.verdict,.verdict + .verse{animation:none}}

.verse{background:var(--card);box-shadow:var(--borde);border-radius:var(--r);padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);margin:0}
.verse .ref{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);font-size:var(--t-s);font-weight:800}
.verse .ref span:first-child{font-family:var(--f-read);font-size:var(--t-m);font-weight:600}
.verse .ref span:last-child{color:var(--muted);font-weight:600}
.verse p{font-family:var(--f-read);font-size:calc(var(--t-l)*var(--esc));line-height:1.5;margin:0}
.verse sup{font-family:var(--f-ui);font-size:var(--t-xs);font-weight:800;color:var(--muted);margin-right:2px}
mark{color:inherit;background:linear-gradient(transparent 55%, rgba(196,227,38,.65) 55%)}
@media (prefers-color-scheme:dark){:root:not([data-tema=claro]) mark{background:none;box-shadow:inset 0 -2px 0 var(--lichen)}}
:root[data-tema=oscuro] mark{background:none;box-shadow:inset 0 -2px 0 var(--lichen)}
.note{font-size:calc(var(--t-l)*var(--esc));margin:0}
.origin{border-left:3px solid var(--lichen);padding:2px 0 2px var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.origin ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:var(--s1);font-size:var(--t-m)}
.src{font-size:var(--t-s);color:var(--muted);margin:0}
.src a{font-weight:800}
.otra{border-top:1px solid var(--line);padding-top:var(--s4);margin-top:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.otra h2{font-family:var(--f-read);font-size:var(--t-2xl);font-weight:600;line-height:1.15;margin:0}
.otra h2 em{font-style:italic;color:var(--acc)}
.hecho{font-size:var(--t-s);color:var(--muted);text-align:center;min-height:1.5em;margin:0}

/* Pantalla 3: contexto del pasaje */
.title-ref{font-family:var(--f-read);font-size:var(--t-3xl);font-weight:600;line-height:1.12;margin:0;text-wrap:balance;letter-spacing:-.01em}
.cap{font-family:var(--f-ui);font-size:var(--t-s);color:var(--muted)}
.leer summary{cursor:pointer;font-weight:800;color:var(--acc);padding:4px 0}
.leer[open] summary{margin-bottom:var(--s2)}
.ctx{margin:0;display:flex;flex-direction:column}
.ctx div{display:grid;grid-template-columns:96px 1fr;gap:var(--s3);padding:12px 0;border-top:1px solid var(--line);font-size:calc(var(--t-l)*var(--esc));line-height:1.5}
.ctx div:last-child{border-bottom:1px solid var(--line)}
.ctx dt{font-weight:800;color:var(--muted);font-size:var(--t-s);padding-top:3px}
.ctx dd{margin:0}
.costumbres{display:flex;flex-direction:column;gap:var(--s2)}
.costumbres p:not(.lbl){margin:0;font-size:calc(var(--t-l)*var(--esc))}
.hearers{background:var(--volcanic);color:var(--ice);border-radius:var(--r);padding:var(--s3);font-size:calc(var(--t-l)*var(--esc));line-height:1.5}
.hearers b{display:block;color:var(--lichen);font-size:var(--t-s);margin-bottom:var(--s1)}
@media (prefers-color-scheme:dark){:root:not([data-tema=claro]) .hearers{background:#1c1c1c;outline:1px solid var(--line)}}
:root[data-tema=oscuro] .hearers{background:#1c1c1c;outline:1px solid var(--line)}

/* Panel de revisión */
.p-h{font-family:var(--f-read);font-size:var(--t-xl);font-weight:600;margin:var(--s3) 0 0}
.p-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.p-lista li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 0;border-top:1px solid var(--line)}
.p-lista span{font-size:var(--t-s);color:var(--muted)}
.p-lista em{font-style:normal;font-size:var(--t-xs);font-weight:800;grid-row:1/3;grid-column:2;align-self:center}
.p-lista em.pend{color:var(--fg);background:var(--lichen);color:var(--volcanic);border-radius:var(--r-pill);padding:3px 10px}
.p-lista em.ok{color:var(--muted)}
.p-form label{display:flex;flex-direction:column;gap:var(--s2);font-weight:800;font-size:var(--t-s)}
.p-form textarea{min-height:72px;font-weight:400}
.p-form input{min-height:44px;background:var(--card);color:var(--fg);border:1.5px solid var(--line);border-radius:var(--r);padding:10px 12px;font:600 var(--t-m) var(--f-ui)}
.p-par{display:flex;flex-direction:column;gap:var(--s2)}
.p-form textarea{field-sizing:content}

/* Pantalla 4: Mi sermón */
.resumen{font-family:var(--f-ui)!important;font-size:var(--t-m)!important}
.pasos{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:var(--s1);font-size:var(--t-m)}
.p-form label.acepto{flex-direction:row;align-items:flex-start;gap:var(--s2);font-weight:400;font-size:var(--t-s)}
.p-form label.acepto a{display:inline-block;padding:12px 0;margin:-12px 0}
.p-form label.acepto input{width:22px;height:22px;flex:none;margin:0;padding:0;accent-color:var(--volcanic)}
.p-form input[type=email],.p-form input[name=pasaje]{width:100%}
.previa{border-top:1px solid var(--line);padding:10px 0}
.previa summary{cursor:pointer;font-weight:800;color:var(--acc);padding:4px 0}
.previa .fecha{font-weight:400;color:var(--muted)}
.previa[open] summary{margin-bottom:var(--s2)}

/* Animación de entrada (solo en el inicio, una vez por visita, y no si el teléfono pide menos movimiento) */
#intro{display:none}
.con-intro #intro{display:flex;position:fixed;inset:0;z-index:50;background:var(--bg);align-items:center;justify-content:center;animation:intro-sale .3s ease 1.6s forwards}
.con-intro body{overflow:hidden}
.intro-fila{display:flex;align-items:center;color:var(--fg);padding:0 12px}
.intro-q{height:2.1rem;width:auto;fill:currentColor;flex:none;animation:intro-q .35s ease both}
.intro-hueco{display:block;overflow:hidden;white-space:nowrap;flex:none;width:0;max-width:0}
.intro-hueco>span{display:block}
.intro-hueco-cruz{animation:intro-cruz-hueco 1.5s ease both}
.intro-hueco-nombre{animation:intro-nombre-hueco 1.5s ease both}
.intro-cruz{height:4.4rem;width:auto;margin:0 1.1rem;display:block;fill:var(--acc);animation:intro-cruz 1.5s ease both}
.intro-nombre{font-family:var(--f-display);font-size:clamp(20px,6.4vw,28px);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls);margin:0 .6rem;display:block;animation:intro-nombre 1.5s ease both}
@keyframes intro-q{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes intro-cruz-hueco{0%,10%{width:0;max-width:0}28%,46%{width:4.1rem;max-width:4.1rem}60%,100%{width:0;max-width:0}}
@keyframes intro-cruz{0%,12%{opacity:0;transform:scale(.6)}30%,46%{opacity:1;transform:none}56%,100%{opacity:0;transform:scale(.6)}}
@keyframes intro-nombre-hueco{0%,60%{width:0;max-width:0}82%,100%{width:auto;max-width:20rem}}
@keyframes intro-nombre{0%,66%{opacity:0}84%,100%{opacity:1}}
@keyframes intro-sale{to{opacity:0;visibility:hidden}}

/* Barra inferior */
body.con-nav main{padding-bottom:112px}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--card);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 80px 1fr 1fr;align-items:end;padding:6px 6px calc(8px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto}
.nav-i,.nav-centro{display:flex;flex-direction:column;align-items:center;gap:3px;font:700 var(--t-xs) var(--f-ui);color:var(--muted);text-decoration:none;padding:6px 2px;min-height:48px}
.nav-i:hover,.nav-centro:hover{text-decoration:none}
.nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-i.on{color:var(--fg)}
.nav-i.on svg{stroke:var(--acc)}
.nav-i.on span{border-bottom:2px solid var(--lichen);padding-bottom:1px}
.nav-centro{padding-top:0}
/* El círculo central sobresale poco de la barra y lleva su etiqueta debajo, como las demás. */
.nav-centro .circulo{display:grid;place-items:center;width:56px;height:56px;margin-top:-22px;border-radius:50%;background:var(--centro);border:4px solid var(--card);box-shadow:0 3px 10px rgba(0,0,0,.22)}
.nav-centro svg{width:26px;height:26px;stroke-width:2;stroke:var(--centro-ic)}
.nav-centro.on{color:var(--fg)}
.nav-centro.on span{border-bottom:2px solid var(--lichen);padding-bottom:1px}
.con-intro .nav{display:none}

/* Inicio: versículo del día, compartir y libro recomendado */
.dia{position:relative;margin:0;border-radius:var(--r);overflow:hidden;color:var(--ice);min-height:250px;display:flex;flex-direction:column;justify-content:center;gap:var(--s3);padding:var(--s5) var(--s4);box-shadow:var(--borde)}
.dia-fondo{position:absolute;inset:0}
/* Las líneas del fondo quedan a los lados; detrás del texto, un velo para que se lea limpio. */
.dia::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 95% 75% at 40% 55%,rgba(42,42,42,.92) 30%,rgba(42,42,42,.35) 80%,rgba(42,42,42,0))}
.dia blockquote,.dia figcaption{z-index:1}
.dia-fondo svg{width:100%;height:100%;display:block}
.dia blockquote,.dia figcaption{position:relative;margin:0}
.dia blockquote{font-family:var(--f-read);font-size:var(--t-xl);line-height:1.4;text-wrap:pretty}
.dia figcaption{font-weight:800;font-size:var(--t-s);color:var(--lichen)}
.dia figcaption span{font-weight:600;color:#B0B2B5}
.btn-compartir{display:flex;justify-content:center;align-items:center;gap:var(--s2);border:0;border-radius:var(--r-pill);padding:14px var(--s4);font:800 var(--t-m) var(--f-ui);background:var(--volcanic);color:var(--ice);cursor:pointer;box-shadow:var(--borde)}
.h-inicio{margin-top:var(--s1)}
.ejemplo{font-size:var(--t-s);margin-top:calc(-1*var(--s1))}
.ejemplo a{display:inline-block;padding:13px 0;margin:-13px 0}
.btn-compartir svg{width:20px;height:20px;fill:none;stroke:var(--lichen);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.libro{display:flex;flex-direction:column;gap:var(--s2);background:var(--card);border-radius:var(--r);padding:var(--s3);color:var(--fg);text-decoration:none;border:1.5px solid var(--line)}
.libro:hover{text-decoration:none;border-color:var(--fg)}
.libro b{font-family:var(--f-read);font-size:var(--t-xl);font-weight:600;line-height:1.2}
.libro .autor{font-size:var(--t-s);color:var(--muted);font-weight:700}
.libro .desc{font-size:var(--t-m)}
.libro .ver{font-weight:800;color:var(--acc);font-size:var(--t-s)}
.libro.vacio{border-style:dashed;color:var(--muted)}

/* Biblia: lector */
.libros-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.libros-grid .chip{text-align:center;padding:12px 8px}
.caps-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2)}
.caps-grid .chip{text-align:center;padding:12px 0}
.lectura{display:flex;flex-direction:column;gap:var(--s2)}
.lectura p{margin:0;font-family:var(--f-read);font-size:calc(var(--t-l)*var(--esc));line-height:1.6;border-radius:var(--r);padding:2px 6px;margin:0 -6px;cursor:pointer}
.lectura p.sel{background:var(--card);box-shadow:inset 3px 0 0 var(--lichen)}
.acciones-v{display:flex;gap:var(--s2)}.acciones-v>*{flex:1;padding:12px}
.pista{font-size:var(--t-s)}
.lectura p{scroll-margin-top:16px}
.lectura sup{font:800 var(--t-xs) var(--f-ui);color:var(--muted);margin-right:4px}
.paginas .btn{padding:12px}

/* Menú de ajustes (botón de tres rayas arriba a la derecha) */
main{position:relative}
.menu-btn{position:absolute;top:16px;right:16px;width:44px;height:44px;margin:-6px;border:0;border-radius:var(--r);background:none;color:var(--fg);display:grid;place-items:center;cursor:pointer}
.menu-btn:hover{background:var(--line)}
.menu-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
body:has(.menu-btn) .top{padding-right:44px}
.menu{border:0;padding:0;margin:0 0 0 auto;width:min(340px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;background:var(--bg);color:var(--fg);box-shadow:-8px 0 30px rgba(0,0,0,.3)}
.menu::backdrop{background:rgba(0,0,0,.5)}
.menu-in{padding:var(--s3) var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s4);min-height:100%}
.menu-cab{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-read);font-size:var(--t-xl);font-weight:600}
.menu-cab button{width:44px;height:44px;border:0;border-radius:var(--r);background:none;color:var(--fg);font-size:var(--t-2xl);line-height:1;cursor:pointer}
.menu h3{font:800 var(--t-s) var(--f-ui);color:var(--muted);margin:0 0 var(--s2)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s1);background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:var(--s1)}
.seg button{border:0;border-radius:var(--s2);background:none;color:var(--fg);font:700 var(--t-s) var(--f-ui);padding:10px 4px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--lichen);color:var(--volcanic)}
.menu-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.menu-lista li{border-top:1px solid var(--line)}
.menu-lista a,.menu-lista button{display:flex;justify-content:space-between;width:100%;padding:14px 0;border:0;background:none;color:var(--fg);font:700 var(--t-m) var(--f-ui);text-align:left;cursor:pointer;text-decoration:none}
.menu-lista .pronto{padding:14px 0;color:var(--muted);font-weight:700;display:flex;justify-content:space-between}
.menu-lista .pronto em{font-style:normal;font-size:var(--t-xs);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 10px;align-self:center}
.menu-pie{margin-top:auto;font-size:var(--t-s);color:var(--muted)}

/* Espera mientras se comprueba una frase */
.espera:empty{display:none}
.espera{margin:0;min-height:1.5em;font-size:var(--t-s);color:var(--muted);text-align:center}
.espera:not(:empty)::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc);margin-right:var(--s2);vertical-align:1px;animation:late 1s ease-in-out infinite}
@keyframes late{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.espera::before{animation:none}}