/* ============================================================
   PANTALLA DE PREGUNTA VIVA (2026-10-18) — companion de
   js/modules/tarot-pregunta-viva.js. Monocroma: marfil sobre negro, sin
   acentos de color por tirada (antes dorado, azul, rosa…).
   ============================================================ */
html body #screen-pregunta,
html body #screen-pregunta[data-tirada]{--intent-accent:rgba(237,237,235,.82);--pv-ink:#EDEDEB;--pv-mut:rgba(237,237,235,.55);--pv-low:rgba(237,237,235,.14)}
html body #screen-pregunta .pregunta-inner::before,html body #screen-pregunta[data-tirada] .pregunta-inner::before{content:none;display:none}
html body #screen-pregunta .wordmark-enter{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}

/* 1. Título pequeño único */
.pv-kicker{font:600 10.5px 'Space Grotesk',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--pv-mut);margin:0 auto 4px}

/* 2. Orbe que respira */
.pv-orbe{position:relative;width:74px;height:74px;margin:18px auto 18px}
.pv-orbe .pregunta-isotipo{position:absolute;inset:14px;width:auto;height:auto;margin:0;background-color:var(--pv-ink) !important;filter:none !important;opacity:1 !important;transform:none}
.pv-orbe-halo{position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(237,237,235,.2),transparent 65%);animation:pv-respira 4.5s ease-in-out infinite;transition:inset .6s ease,background .6s ease}
.pv-orbe-anillo{position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(237,237,235,.24);transition:border-color .5s ease,transform .6s ease}
.pv-orbe-anillo--fuera{inset:-16px;border-style:dashed;border-color:rgba(237,237,235,.12);animation:pv-gira 40s linear infinite}
#screen-pregunta.pv-escribiendo .pv-orbe-halo{inset:-24px;background:radial-gradient(circle,rgba(237,237,235,.36),transparent 62%)}
#screen-pregunta.pv-escribiendo .pv-orbe-anillo{border-color:rgba(237,237,235,.6)}
#screen-pregunta.pv-escribiendo .pv-orbe-anillo--fuera{border-color:rgba(237,237,235,.24);animation-duration:14s}
@keyframes pv-respira{0%,100%{opacity:.75;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes pv-gira{to{transform:rotate(360deg)}}

/* 3. Caja con borde de luz */
.pv-caja{position:relative;max-width:460px;margin:0 auto;border-radius:var(--r-l);padding:1px;text-align:left;
  background:conic-gradient(from var(--pv-a,200deg),rgba(237,237,235,.08),rgba(237,237,235,.7) 10%,rgba(237,237,235,.08) 24%,rgba(237,237,235,.08));animation:pv-borde 7s linear infinite}
@property --pv-a{syntax:'<angle>';inherits:false;initial-value:200deg}
@keyframes pv-borde{to{--pv-a:560deg}}
.pv-caja:focus-within{background:conic-gradient(from var(--pv-a,200deg),rgba(237,237,235,.25),rgba(237,237,235,.95) 12%,rgba(237,237,235,.25) 30%,rgba(237,237,235,.25))}
.pv-caja-in{border-radius:var(--r-m);background:rgba(13,13,18,.97);padding:14px 14px 10px;cursor:text}
html body #screen-pregunta .pv-caja .pregunta-textarea{display:block;max-width:none;width:100%;min-height:58px;padding:2px 2px 0;border:0;border-radius:0;background:transparent !important;box-shadow:none !important;
  text-align:left;font:400 19px/1.38 'Fraunces',Georgia,serif;color:var(--pv-ink)}
html body #screen-pregunta .pv-caja .pregunta-textarea::placeholder{color:rgba(237,237,235,.42);font-weight:300}
html body #screen-pregunta .pv-caja .pregunta-textarea-extra{margin:10px 0 0;padding-top:12px;border-top:1px dashed rgba(237,237,235,.16)}
html body #screen-pregunta .pregunta-contador{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pv-caja-pie{display:flex;align-items:center;gap:10px;margin-top:12px}
.pv-mic{width:36px;height:36px;border-radius:50%;border:1px solid var(--pv-low);background:none;color:var(--pv-ink);display:grid;place-items:center;cursor:pointer;position:relative}
.pv-mic svg{width:16px;height:16px}
.pv-mic.is-escuchando{background:var(--pv-ink);color:#08080c}
.pv-mic.is-escuchando::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--pv-ink);animation:pv-late 1.4s ease-out infinite}
@keyframes pv-late{from{opacity:.8;transform:scale(.85)}to{opacity:0;transform:scale(1.35)}}
.pv-contador{margin-left:auto;width:26px;height:26px}
.pv-contador circle{fill:none;stroke-width:2.2}
.pv-contador-fondo{stroke:rgba(237,237,235,.14)}
.pv-contador-lleno{stroke:var(--pv-ink);stroke-linecap:round;stroke-dasharray:62.83;stroke-dashoffset:62.83;transition:stroke-dashoffset .25s ease}
.pv-contador.is-casi .pv-contador-lleno{stroke:#e0a39a}
.pv-ir{width:38px;height:38px;border-radius:50%;border:0;background:rgba(237,237,235,.12);color:var(--pv-mut);font:500 18px 'Space Grotesk',sans-serif;display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s,transform .25s}
#screen-pregunta.pv-escribiendo .pv-ir{background:var(--pv-ink);color:#08080c}
.pv-ir:active{transform:scale(.92)}

/* 6. Ayuda para preguntar mejor */
.pv-pista{display:flex;align-items:flex-start;gap:10px;max-width:460px;margin:12px auto 0;padding:12px 12px 12px 14px;border-radius:var(--r-s);background:rgba(237,237,235,.05);border:1px solid rgba(237,237,235,.1);text-align:left;animation:pv-entra .35s ease both}
.pv-pista[hidden]{display:none}
.pv-pista-ic{flex:none;width:17px;height:17px;margin-top:1px;background:var(--pv-ink);-webkit-mask:url('../../assets/branding/veloris-isotipo-mask.svg') center/contain no-repeat;mask:url('../../assets/branding/veloris-isotipo-mask.svg') center/contain no-repeat}
.pv-pista-txt{margin:0;flex:1;font:400 13px/1.45 'Space Grotesk',sans-serif;color:var(--pv-mut)}
.pv-pista-txt b{color:var(--pv-ink);font-weight:500}
.pv-pista-usar{flex:none;align-self:center;padding:7px 12px;border-radius:999px;border:1px solid var(--pv-ink);background:var(--pv-ink);color:#08080c;font:600 10.5px 'Space Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.pv-pista-quitar{flex:none;align-self:center;border:0;background:none;color:var(--pv-mut);font-size:18px;line-height:1;padding:2px 2px 4px;cursor:pointer}
@keyframes pv-entra{from{opacity:0;transform:translateY(4px)}}

/* 4. Temas en una fila */
html body #screen-pregunta .pregunta-sugerencias{max-width:460px;gap:12px;margin-top:20px;min-width:0}
html body #screen-pregunta .pregunta-sugerencias > *{min-width:0;max-width:100%}
.pv-temas-k{display:flex;justify-content:space-between;align-items:baseline;font:600 10.5px 'Space Grotesk',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--pv-mut);margin-bottom:-2px}
.pv-desliza{letter-spacing:.1em}
.pv-desliza[hidden]{display:none}
html body #screen-pregunta .pregunta-temas{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:2px 20px !important;max-width:none !important;width:calc(100% + 40px);scroll-snap-type:x proximity;scroll-padding-inline:20px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 28px),transparent)}
html body #screen-pregunta .pregunta-temas::-webkit-scrollbar{display:none}
html body #screen-pregunta .pregunta-temas > span{display:none}
html body #screen-pregunta .pregunta-tema{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:9px 15px;border-radius:999px;border:1px solid var(--pv-low);background:rgba(237,237,235,.03);color:var(--pv-ink);font:500 14px 'Space Grotesk',sans-serif;transition:background .25s,color .25s,border-color .25s,transform .2s}
html body #screen-pregunta .pregunta-tema:active{transform:scale(.96)}
html body #screen-pregunta .pregunta-tema[aria-pressed="true"]{background:var(--pv-ink);color:#08080c;border-color:var(--pv-ink)}
.pregunta-tema--persona::before{display:none !important}
.pv-ic{font-style:normal;font-size:13px;opacity:.7;width:13px;text-align:center}
.pregunta-tema[aria-pressed="true"] .pv-ic{opacity:1;font-size:0}
.pregunta-tema[aria-pressed="true"] .pv-ic::before{content:'✓';font-size:13px}

/* 5. Ideas para tocar (y los comienzos de cada tema) */
.pv-ideas{display:flex;flex-direction:column;gap:8px}
.pv-ideas-k,html body #screen-pregunta .pregunta-comienzos > span{font:600 10.5px 'Space Grotesk',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--pv-mut);text-align:left}
.pv-idea,html body #screen-pregunta .pregunta-comienzos button{display:block;width:100%;text-align:left;padding:11px 14px;border-radius:var(--r-s);border:1px dashed rgba(237,237,235,.18) !important;background:transparent;color:rgba(237,237,235,.78) !important;font:italic 300 15px/1.35 'Fraunces',Georgia,serif !important;cursor:pointer;animation:pv-entra .35s ease both;transition:border-color .2s,color .2s,background .2s}
.pv-idea:nth-of-type(2){animation-delay:.06s}
.pv-idea:hover,.pv-idea:focus-visible,html body #screen-pregunta .pregunta-comienzos button:hover{border-style:solid !important;border-color:rgba(237,237,235,.45) !important;color:var(--pv-ink) !important;background:rgba(237,237,235,.04)}
.pv-idea i,html body #screen-pregunta .pregunta-comienzos i{font-style:normal;display:inline-block;min-width:40px;margin:0 3px;border-bottom:1px solid rgba(237,237,235,.5);color:transparent}
html body #screen-pregunta .pregunta-hueco-aviso{color:var(--pv-mut)}

/* 7. Mantén para barajar */
.pv-mazo{display:flex;justify-content:center;height:50px;margin:22px auto 4px;padding-left:18px}
.pv-mazo i{display:block;width:30px;height:46px;border-radius:5px;margin-left:-18px;background:#0e0e13 url('../../assets/branding/veloris-card-back-dark.svg') center/cover;border:1px solid rgba(237,237,235,.32);box-shadow:0 4px 10px rgba(0,0,0,.5);transition:transform .3s ease}
.pv-mazo-pista{margin:2px 0 0;text-align:center;font:500 10px 'Space Grotesk',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(237,237,235,.4)}
.pv-mazo.is-barajando i{animation:pv-baraja .32s ease-in-out infinite alternate}
.pv-mazo.is-barajando i:nth-child(2){animation-delay:.05s}.pv-mazo.is-barajando i:nth-child(3){animation-delay:.1s}.pv-mazo.is-barajando i:nth-child(4){animation-delay:.15s}.pv-mazo.is-barajando i:nth-child(5){animation-delay:.2s}
@keyframes pv-baraja{from{transform:translate(-4px,0) rotate(-4deg)}to{transform:translate(5px,-6px) rotate(5deg)}}
html body #screen-pregunta .pregunta-actions{margin-top:10px;flex-direction:column;gap:6px}
html body #screen-pregunta #btn-elegir-cartas.pv-mantener{width:100%;max-width:460px;min-height:58px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;
  background-image:linear-gradient(rgba(8,8,12,.16),rgba(8,8,12,.16));background-repeat:no-repeat;background-size:0% 100%;transition:background-size .2s ease}
html body #screen-pregunta #btn-elegir-cartas.pv-mantener.is-llenando{background-size:100% 100%;transition:background-size .7s linear}
html body #screen-pregunta #btn-elegir-cartas.pv-mantener.is-lleno{box-shadow:0 0 0 6px rgba(237,237,235,.18),0 0 40px rgba(237,237,235,.35)}
.pv-mantener-aviso{margin:6px 0 0;text-align:center;font:400 12.5px 'Space Grotesk',sans-serif;color:var(--pv-mut);animation:pv-entra .3s ease both}
.pv-mantener-aviso[hidden]{display:none}

@media(max-width:720px){
  html body #screen-pregunta .enter-title{font-size:31px}
}
@media(prefers-reduced-motion:reduce){
  .pv-caja,.pv-orbe-halo,.pv-orbe-anillo--fuera,.pv-mazo.is-barajando i{animation:none}
}