/* sonido.css — El Sonido Invisible (detección de "vibración mental") */

/* 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 ===================== */
.so-screen { min-height:100svh; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 26%, #103a4e 0%, #0d2740 52%, #070f22 100%); color:#e8f6ff; }
.so-inner { width:100%; max-width:540px; padding:22px 20px 40px; display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; }
.so-title { font-size:22px; font-weight:800; letter-spacing:.5px; margin:0; }
.so-status { font-size:14px; color:#8fc7e0; margin:0; min-height:20px; transition:color .3s; }
.so-status.is-ready { color:#9fe0ff; }
.so-status.is-done  { color:#7cffc4; }
.so-status.is-error { color:#ff8a9c; }

/* Visualizador de ondas (barras) */
.so-wave { display:flex; align-items:flex-end; justify-content:center; gap:5px; height:120px; width:100%; max-width:300px; }
.so-wave .bar { flex:1; max-width:12px; border-radius:6px; background:linear-gradient(180deg,#5ce1ff,#2a7fd6);
  height:16%; opacity:.55; transform-origin:bottom; }
.so-wave.idle .bar { animation:soIdle 2.6s ease-in-out infinite; }
.so-wave.scanning .bar { animation:soScan .7s ease-in-out infinite; opacity:1; box-shadow:0 0 12px rgba(92,225,255,.5); }
.so-wave.done .bar { animation:none; height:22%; opacity:.35; }
.so-wave .bar:nth-child(1){ animation-delay:0s; }
.so-wave .bar:nth-child(2){ animation-delay:.08s; }
.so-wave .bar:nth-child(3){ animation-delay:.16s; }
.so-wave .bar:nth-child(4){ animation-delay:.24s; }
.so-wave .bar:nth-child(5){ animation-delay:.32s; }
.so-wave .bar:nth-child(6){ animation-delay:.40s; }
.so-wave .bar:nth-child(7){ animation-delay:.32s; }
.so-wave .bar:nth-child(8){ animation-delay:.24s; }
.so-wave .bar:nth-child(9){ animation-delay:.16s; }
.so-wave .bar:nth-child(10){ animation-delay:.08s; }
.so-wave .bar:nth-child(11){ animation-delay:0s; }
@keyframes soIdle { 0%,100%{ height:14%; } 50%{ height:40%; } }
@keyframes soScan { 0%,100%{ height:18%; } 50%{ height:100%; } }

/* Tarjetas de los 5 sonidos */
.so-cards { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; width:100%; }
.so-card { width:88px; padding:12px 6px 10px; border-radius:16px; display:flex; flex-direction:column; align-items:center; gap:7px;
  background:rgba(255,255,255,.05); border:1.5px solid rgba(120,190,230,.22); opacity:.55; transition:opacity .3s, transform .3s, border-color .3s, box-shadow .3s; }
.so-card svg { width:34px; height:34px; color:#bfe6f7; }
.so-card span { font-size:11px; color:#9fc4d8; font-weight:600; }
.so-card.playing { opacity:1; transform:translateY(-4px) scale(1.04); border-color:rgba(92,225,255,.7); box-shadow:0 0 18px rgba(92,225,255,.35); }
.so-card.playing svg { color:#eaffff; filter:drop-shadow(0 0 7px rgba(92,225,255,.9)); }
.so-card.revealed { opacity:1; transform:translateY(-4px) scale(1.08); border-color:#7cffc4; box-shadow:0 0 26px rgba(124,255,196,.55); background:rgba(124,255,196,.10); }
.so-card.revealed svg { color:#ceffe8; filter:drop-shadow(0 0 10px rgba(124,255,196,.95)); }
.so-card.revealed span { color:#bfffe0; }

/* Botones */
.so-btn { font-size:14px; font-weight:700; padding:12px 26px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(120,200,235,.4); background:rgba(92,225,255,.16); color:#eafaff; transition:transform .1s, box-shadow .2s, opacity .2s; }
.so-btn:hover { box-shadow:0 8px 22px rgba(42,127,214,.35); }
.so-btn:active { transform:translateY(1px); }
.so-btn[disabled] { opacity:.45; cursor:default; }
.so-btn.primary { background:linear-gradient(135deg,#2a7fd6,#5ce1ff); color:#05233a; border:none; }
.so-btn.ghost { background:transparent; }
.so-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* ===================== CONTROL ===================== */
.so-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(--brand2); }
.so-ctrl-preview svg { width:70px; height:70px; }
.so-ctrl-preview.empty { color:var(--muted); font-size:40px; font-weight:700; }

.so-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; width:100%; }
.so-sound-btn { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; border-radius:14px; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; color:#37506a; transition:border-color .2s, box-shadow .2s, transform .1s; }
.so-sound-btn svg { width:30px; height:30px; }
.so-sound-btn span { font-size:10.5px; font-weight:600; }
.so-sound-btn.sel { border-color:var(--brand2); box-shadow:0 0 0 3px rgba(26,115,232,.16); color:var(--brand2); }
.so-sound-btn:active { transform:translateY(1px); }

/* Nota del forzaje por defecto (panel de control) */
.so-force-note { width:100%; font-size:12px; color:var(--muted); background:#f3f7ff; border:1px solid #e0e9fb;
  border-radius:12px; padding:9px 12px; text-align:center; line-height:1.5; }
.so-force-note b { color:var(--brand2); }
.so-force-note .k { font-weight:700; color:var(--ink); }

@media (max-width:420px) {
  .so-card { width:78px; }
  .so-sound-btn span { font-size:9.5px; }
}