/* venda.css — La Venda Psicológica (lectura mental con forzaje visual) */

/* Barra de salida (igual que el resto de efectos) */
.exit-bar { position:fixed; top:10px; right:10px; display:flex; gap:8px; z-index:60; }
.exit-bar.exit-bottom { top:auto; bottom:14px; right:50%; transform:translateX(50%); }
.exit-btn { font-size:12px; font-weight:600; padding:6px 11px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.92); color:var(--muted); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.08); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.exit-btn:active { transform:translateY(1px); }
.exit-btn.danger { color:var(--danger); border-color:#f3c9d2; }
#logout-btn { display:none; }

/* ===================== JUEGO ===================== */
.vp-screen { min-height:100svh; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 24%, #2a2360 0%, #1a1442 52%, #0b0920 100%); color:#ece9ff; }
.vp-inner { width:100%; max-width:540px; padding:22px 20px 40px; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.vp-title { font-size:22px; font-weight:800; letter-spacing:.5px; margin:0; }
.vp-status { font-size:14px; color:#b6ade8; margin:0; min-height:20px; transition:color .3s; }
.vp-status.is-ready { color:#c9b8ff; }
.vp-status.is-done  { color:#9fffd6; }
.vp-status.is-error { color:#ff8a9c; }

/* Frase de influencia */
.vp-prime { font-size:13px; font-style:italic; color:#9d93d6; min-height:18px; max-width:420px; margin:0; transition:opacity .3s; }

/* Orbe / ojo lector */
.vp-orb { position:relative; width:150px; height:150px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 45%, rgba(124,109,230,.30), rgba(20,16,52,.18) 70%);
  box-shadow:inset 0 0 40px rgba(124,109,230,.35), 0 0 34px rgba(80,60,180,.25); }
.vp-orb::before, .vp-orb::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(150,130,255,.35); pointer-events:none; }
.vp-orb.idle::before { animation:vpPulse 2.8s ease-out infinite; }
.vp-orb.idle::after  { animation:vpPulse 2.8s ease-out infinite 1.4s; }
@keyframes vpPulse { 0%{transform:scale(.7);opacity:.6;} 100%{transform:scale(1.25);opacity:0;} }
.vp-orb.scanning::before { animation:vpScan 1s linear infinite; border-color:rgba(201,184,255,.7); }
.vp-orb.scanning::after  { animation:vpScan 1s linear infinite .5s; border-color:rgba(201,184,255,.45); }
@keyframes vpScan { 0%{transform:scale(.5);opacity:.95;} 100%{transform:scale(1.4);opacity:0;} }
.vp-orb.deep { box-shadow:inset 0 0 56px rgba(201,184,255,.45), 0 0 56px rgba(124,109,230,.5); }

.vp-orb-symbol { width:96px; height:96px; color:#efeaff; opacity:0; transform:scale(.4); filter:blur(8px); }
.vp-orb-symbol svg { width:100%; height:100%; display:block; }
.vp-orb.revealed .vp-orb-symbol { animation:vpReveal 1.1s ease forwards; }
@keyframes vpReveal {
  0%   { opacity:0; transform:scale(.4) rotate(-8deg); filter:blur(10px); }
  60%  { opacity:1; filter:blur(0); }
  100% { opacity:1; transform:scale(1) rotate(0); filter:drop-shadow(0 0 10px rgba(201,184,255,.95)) drop-shadow(0 0 22px rgba(124,109,230,.7)); }
}

/* Rejilla 3×2 de símbolos */
.vp-symbols { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%; max-width:360px; transition:opacity .35s; }
.vp-symbols.dim { opacity:.35; }

/* Cuadrado brillante que recorre los símbolos (barrido / forzaje) */
.vp-scan { position:absolute; top:0; left:0; width:0; height:0; border-radius:16px; pointer-events:none; opacity:0; z-index:2; overflow:hidden;
  border:2px solid rgba(214,226,255,.85);
  box-shadow:0 0 16px rgba(160,190,255,.45), inset 0 0 16px rgba(180,205,255,.28);
  background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0) 60%);
  transition:top var(--gl,340ms) cubic-bezier(.5,0,.2,1), left var(--gl,340ms) cubic-bezier(.5,0,.2,1), width var(--gl,340ms) ease, height var(--gl,340ms) ease, opacity .3s ease; }
.vp-scan.snap { transition:none; }
.vp-scan::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.26) 50%, transparent 65%); background-size:220% 100%; animation:vpSheen 2.4s linear infinite; }
@keyframes vpSheen { 0%{ background-position:120% 0; } 100%{ background-position:-120% 0; } }
.vp-sym { position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; border-radius:16px; padding:14px;
  background:rgba(255,255,255,.045); border:1.5px solid rgba(150,130,255,.20); transition:transform .4s, border-color .35s, box-shadow .35s, background .35s; }
.vp-sym svg { width:100%; height:100%; color:#c3bbe8; transition:color .35s, filter .35s; }

/* Énfasis SUTIL del forzado (posición ya la da forcedLayout) */
.vp-sym.vp-hot svg { color:#efe4ff; filter:drop-shadow(0 0 6px rgba(214,196,255,.55)); }
.vp-sym.vp-hot { border-color:rgba(201,184,255,.45); background:rgba(150,120,255,.10); }
.vp-sym.vp-glow { animation:vpGlow 2.6s ease-in-out infinite; }
@keyframes vpGlow {
  0%,100% { box-shadow:0 0 0 rgba(201,184,255,0); }
  50%     { box-shadow:0 0 20px rgba(201,184,255,.30); }
}

/* Revelación sobre la rejilla */
.vp-sym.vp-picked { border-color:#9fffd6; background:rgba(120,255,200,.10); box-shadow:0 0 26px rgba(120,255,200,.5); transform:scale(1.12); }
.vp-sym.vp-picked svg { color:#d7ffef; filter:drop-shadow(0 0 10px rgba(120,255,200,.9)); }
.vp-symbols.revealmode .vp-sym:not(.vp-picked) { opacity:.3; filter:grayscale(.25); }

/* Botones */
.vp-btn { font-size:14px; font-weight:700; padding:12px 26px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(150,130,255,.4); background:rgba(124,109,230,.18); color:#ece9ff; transition:transform .1s, box-shadow .2s, opacity .2s; }
.vp-btn:hover { box-shadow:0 8px 22px rgba(108,92,231,.35); }
.vp-btn:active { transform:translateY(1px); }
.vp-btn[disabled] { opacity:.45; cursor:default; }
.vp-btn.primary { background:linear-gradient(135deg,#6c5ce7,#9a86ff); color:#160f36; border:none; }
.vp-btn.ghost { background:transparent; }
.vp-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* Hotspot secreto (esquina) + aviso sutil del forzado activo */
.vp-secret { position:fixed; left:0; bottom:0; width:64px; height:64px; z-index:55; background:transparent; border:none; cursor:default; -webkit-tap-highlight-color:transparent; }
.vp-hint { position:fixed; left:10px; bottom:12px; z-index:56; font-size:11px; color:rgba(201,184,255,.55); background:rgba(20,16,52,.6); border:1px solid rgba(150,130,255,.25); border-radius:8px; padding:3px 8px; opacity:0; transition:opacity .3s; pointer-events:none; }
.vp-hint.show { opacity:1; }

/* ===================== CONTROL ===================== */
.vp-ctrl-preview { width:118px; height:118px; border-radius:18px; display:flex; align-items:center; justify-content:center; border:1.5px dashed var(--line); color:var(--brand1); }
.vp-ctrl-preview svg { width:72px; height:72px; }
.vp-ctrl-preview.empty { color:var(--muted); font-size:40px; font-weight:700; }

.vp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; }
.vp-sym-btn { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 4px; border-radius:14px; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; color:#3a3550; transition:border-color .2s, box-shadow .2s, transform .1s; }
.vp-sym-btn svg { width:34px; height:34px; }
.vp-sym-btn span { font-size:11px; font-weight:600; }
.vp-sym-btn.sel { border-color:var(--brand1); box-shadow:0 0 0 3px rgba(108,92,231,.18); color:var(--brand1); }
.vp-sym-btn:active { transform:translateY(1px); }

.vp-force-note { width:100%; font-size:12px; color:var(--muted); background:#f3f0ff; border:1px solid #e6e0fb; border-radius:12px; padding:9px 12px; text-align:center; line-height:1.5; }
.vp-force-note b { color:var(--brand1); }
.vp-force-note .k { font-weight:700; color:var(--ink); }

@media (max-width:420px) {
  .vp-sym-btn span { font-size:10px; }
}