/* Acompaña. Tres fondos (claro, crema, oscuro) y tres tamaños de letra. Nada de estilos en línea: la CSP no los deja. */
:root {
  --bg: #f2eadb; --card: #fbf4e6; --ink: #2b2620; --soft: #5f574a; --line: #8f7f62; --btn: #fbf4e6;
  --acc: #8a2b1d; --acc-txt: #ffffff; --llama: #ffb446; --glow: rgba(255, 170, 60, .5);
  --letra: 1;
  color-scheme: light;
}
html[data-fondo="claro"] { --bg: #ffffff; --card: #f6f2e9; --btn: #ffffff; --line: #8a8a8a; --soft: #555; }
html[data-fondo="oscuro"] {
  --bg: #17151c; --card: #201d26; --ink: #ece6da; --soft: #b8b0a2; --line: #7a7585; --btn: #24212b;
  --acc: #e6a08f; --acc-txt: #17151c; --llama: #ffc65a; --glow: rgba(255, 190, 80, .4); color-scheme: dark;
}
html[data-letra="grande"] { --letra: 1.2; }
html[data-letra="enorme"] { --letra: 1.5; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "PT Serif", Georgia, "Times New Roman", serif; font-size: calc(17px * var(--letra)); line-height: 1.4; min-height: 100vh; min-height: 100dvh; }
.app { max-width: 520px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 22px 18px calc(16px + env(safe-area-inset-bottom)); }
.sin-js { padding: 24px; text-align: center; }
button { font: inherit; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--btn); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 10px; cursor: pointer; min-height: 52px; touch-action: manipulation; }
button:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
button:disabled { opacity: .45; cursor: default; }
button.grande { font-size: 1.1em; min-height: 60px; }
button.pri { background: var(--acc); color: var(--acc-txt); border-color: var(--acc); font-weight: 600; }
button.peq { font-size: .85em; min-height: 44px; padding: 8px 6px; }
button.sel { outline: 3px solid var(--acc); outline-offset: 1px; }
button.enlace { background: none; border: none; color: var(--soft); text-decoration: underline; min-height: 44px; padding: 10px 6px; }
.centro { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.cifra { text-align: center; margin: 24px 0 8px; }
.cifra b { display: block; font-weight: 400; font-size: 1.15em; margin-bottom: 10px; }
.cifra span { color: var(--soft); font-size: .95em; }
.pregunta { text-align: center; font-size: 1.7em; margin: 16px 0 18px; }
.pregunta.mediana { font-size: 1.3em; margin-top: 0; }
.dos { display: grid; gap: 12px; }
.dos.abajo, .abajo { margin-top: auto; padding-top: 18px; }
.cuad { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cuad.tres { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.cuad.sep { margin-top: 14px; }
.etq { color: var(--soft); font-size: .95em; margin: 14px 0 8px; }
.pie { margin-top: auto; padding-top: 18px; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.luz { width: 92px; height: 92px; margin: 18px auto 20px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #fff6d8 0%, var(--llama) 45%, rgba(255, 180, 70, 0) 72%); box-shadow: 0 0 32px 14px var(--glow); animation: resp 3.1s ease-in-out infinite; }
.luz.clara { background: radial-gradient(circle at 50% 45%, #fff 0%, #eef6ff 50%, rgba(220, 235, 255, 0) 72%); box-shadow: 0 0 36px 16px rgba(190, 220, 255, .55); }
.luz.peq { width: 56px; height: 56px; margin: 10px auto 14px; box-shadow: 0 0 20px 8px var(--glow); }
.luz.clara.peq { box-shadow: 0 0 22px 10px rgba(190, 220, 255, .55); }
@keyframes resp { 0%, 100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .luz { animation: none; } .barra i { transition: none !important; } }
.estado-grande { text-align: center; font-size: 1.5em; margin: 6px 0 4px; }
.etiquetas { text-align: center; color: var(--soft); font-size: .95em; min-height: 1.4em; }
.texto { text-align: center; margin: 8px 0; }
.texto.suave { color: var(--soft); font-size: .95em; }
.texto.grande { font-size: 1.4em; }
.barra { height: 8px; border-radius: 4px; background: var(--card); border: 1px solid var(--line); overflow: hidden; margin: 16px 0; }
.barra i { display: block; height: 100%; width: 100%; background: var(--acc); transition: width 6s linear; }
.barra i.vacia { width: 0; }
.gestos { display: grid; gap: 10px; }
.desglose { list-style: none; padding: 0; margin: 10px 0 0; text-align: center; color: var(--soft); }
.desglose li { padding: 3px 0; }
.plegado { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: .92em; margin-bottom: 10px; }
.plegado summary { cursor: pointer; font-weight: 700; }
.plegado p { margin: 8px 0; }
.ajuste { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-family: system-ui, sans-serif; font-size: .9em; }
.ajuste .op { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.paises { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 50vh; overflow-y: auto; padding: 2px; }
.aparece { animation: aparece .35s ease-out; }
#app > .aparece { flex: 1; display: flex; flex-direction: column; }
@keyframes aparece { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aparece { animation: none; } }