/* ══════════════════════════════════════════════════════
   TRIVIA HAPPY HOUSE · Estilos compartidos
   ══════════════════════════════════════════════════════ */
:root{
  --bg:#0e1030; --bg2:#1a1348; --panel:#191c46; --panel2:#232766;
  --txt:#f2f3ff; --muted:#a3a7d4; --line:#343a80;
  --oro:#ffd166; --verde:#2ecc71; --rojo:#ff5d6c; --azul:#4cc9f0; --morado:#b892ff;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  background:radial-gradient(1200px 700px at 50% -10%,var(--bg2),var(--bg) 60%);
  background-attachment:fixed;color:var(--txt);min-height:100vh;padding:16px;
  -webkit-text-size-adjust:100%;
}
body.centrado{display:flex;align-items:center;justify-content:center}
.wrap{max-width:1200px;margin:0 auto}
.caja{max-width:430px;width:100%;background:linear-gradient(160deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:0 18px 45px rgba(0,0,0,.4)}
h1{font-size:1.7rem;letter-spacing:.4px;margin-bottom:6px}
h2{font-size:1.2rem;margin-bottom:12px}
h3{font-size:1rem;margin-bottom:8px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.sub{color:var(--muted);font-size:.94rem;line-height:1.45}
.tip{color:var(--muted);font-size:.84rem;margin-top:10px;line-height:1.5}
a{color:var(--azul)}

/* ---- Tarjetas ---- */
.card{background:linear-gradient(160deg,var(--panel),var(--panel2));border:1px solid var(--line);
  border-radius:20px;padding:22px;box-shadow:0 14px 34px rgba(0,0,0,.3);margin-bottom:16px}

/* ---- Botones ---- */
button,.btn{font-family:inherit;cursor:pointer;border:none;border-radius:13px;font-weight:700;
  padding:13px 22px;font-size:1rem;transition:transform .12s,filter .15s;
  background:linear-gradient(135deg,#6b5cff,#9b6bff);color:#fff;text-decoration:none;display:inline-block;text-align:center}
button:hover,.btn:hover{filter:brightness(1.13)}
button:active,.btn:active{transform:scale(.97)}
button:disabled{opacity:.35;cursor:not-allowed;filter:none;transform:none}
.btn-oro{background:linear-gradient(135deg,#ffb703,#ffd166);color:#3a2a00}
.btn-verde{background:linear-gradient(135deg,#1f9d55,#2ecc71);color:#04220f}
.btn-rojo{background:linear-gradient(135deg,#c0392b,#ff5d6c);color:#2a0206}
.btn-gris{background:#2c3170;color:var(--txt)}
.btn-sm{padding:8px 14px;font-size:.85rem;border-radius:10px}
.ancho{width:100%;margin-top:14px}
.grande{padding:20px 40px;font-size:1.3rem;border-radius:17px}

/* ---- Formularios ---- */
label{display:block;color:var(--muted);font-size:.85rem;font-weight:700;margin:14px 0 6px;
  text-transform:uppercase;letter-spacing:.6px}
input,select,textarea{font-family:inherit;background:#11143a;border:1px solid var(--line);color:var(--txt);
  border-radius:12px;padding:13px 15px;font-size:1rem;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--morado);outline-offset:1px}
textarea{resize:vertical;min-height:70px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row>.crece{flex:1;min-width:180px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---- Campo de contraseña con botón de ojo ---- */
.campo-clave{position:relative;display:block}
.campo-clave input{padding-right:50px}
.ver-clave{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;padding:0;display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--muted);border:none;border-radius:10px;
  box-shadow:none;cursor:pointer;transition:color .15s,background .15s}
.ver-clave:hover{background:#2c3170;color:var(--txt);filter:none}
.ver-clave:active{transform:translateY(-50%)}
.ver-clave svg{display:block;width:21px;height:21px}

/* ---- Avisos ---- */
.alerta{background:#3a2a00;border:1px solid var(--oro);color:var(--oro);border-radius:12px;
  padding:13px 15px;font-size:.92rem;font-weight:600;margin:14px 0;line-height:1.5}
.alerta.rojo{background:#3a0a12;border-color:var(--rojo);color:#ffb3ba}
.alerta.verde{background:#042a16;border-color:var(--verde);color:#9ff5c4}

/* ---- Categorías ---- */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.cat{display:flex;align-items:center;gap:10px;background:#11143a;border:2px solid var(--line);
  border-radius:14px;padding:12px;cursor:pointer;user-select:none}
.cat.on{border-color:var(--morado);background:#221a56}
.cat .em{font-size:1.4rem}
.cat .nm{font-weight:700;font-size:.92rem}
.cat .ct{color:var(--muted);font-size:.76rem}

/* ---- Insignias ---- */
.badge{border-radius:999px;padding:7px 17px;font-weight:800;font-size:.88rem;letter-spacing:.4px;
  display:inline-block;color:#0e1030}
.pill{background:#2c3170;border:1px solid var(--line);border-radius:999px;padding:5px 12px;
  font-size:.8rem;font-weight:700;display:inline-block}
.pill.on{background:var(--verde);color:#04220f;border-color:var(--verde)}
.pill.off{background:#2c3170;color:var(--muted)}

/* ---- Pregunta ---- */
.hud{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.prog{color:var(--muted);font-weight:700}
.pregunta{font-size:1.9rem;line-height:1.32;font-weight:700;text-align:center;padding:20px 8px}
.pistas{display:grid;gap:10px;max-width:660px;margin:0 auto 16px}
.pista{background:#11143a;border-left:5px solid var(--oro);border-radius:12px;padding:14px 17px;
  font-size:1.1rem;animation:aparece .35s}
.pista .n{color:var(--oro);font-weight:800;margin-right:8px}
@keyframes aparece{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---- Cronómetro ---- */
.crono{position:relative;width:190px;height:190px;margin:6px auto 18px}
.crono svg{transform:rotate(-90deg);display:block;width:100%;height:100%}
.crono .num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:4.2rem;font-weight:800;font-variant-numeric:tabular-nums}
.crono.alerta .num{color:var(--rojo);animation:pulso .5s infinite}
@keyframes pulso{50%{transform:scale(1.1)}}

/* ---- Multimedia ---- */
.media{max-width:720px;margin:0 auto 16px}
.media img{width:100%;max-height:45vh;object-fit:contain;border-radius:16px;border:1px solid var(--line);display:block}
.media iframe{width:100%;aspect-ratio:16/9;border-radius:16px;border:1px solid var(--line);background:#000}

/* ---- Respuesta revelada ---- */
.respuesta{background:linear-gradient(135deg,#146c43,#2ecc71);color:#03210f;border-radius:18px;
  padding:24px;text-align:center;margin-bottom:14px;animation:aparece .35s}
.respuesta .lbl{font-size:.8rem;font-weight:800;letter-spacing:2px;opacity:.75}
.respuesta .txt{font-size:2rem;font-weight:800;margin:8px 0;line-height:1.25}
.respuesta .extra{font-size:.98rem;opacity:.88;font-weight:600}

/* ---- Marcador ---- */
.marcador{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.mitem{background:#11143a;border:1px solid var(--line);border-radius:14px;padding:12px;
  display:flex;justify-content:space-between;align-items:center;gap:8px}
.mitem .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mitem .pts{color:var(--oro);font-weight:800;font-size:1.3rem}
.mitem.lider{border-color:var(--oro);background:#2a2210}
.mitem.respondio{border-color:var(--verde)}

/* ---- Listas del panel ---- */
.lista{display:grid;gap:9px}
.fila{background:#11143a;border:1px solid var(--line);border-radius:14px;padding:13px;
  display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.fila .crece{flex:1;min-width:150px}
.fila .link{font-family:ui-monospace,Consolas,monospace;font-size:.78rem;color:var(--muted);
  word-break:break-all;background:#0a0c26;border-radius:8px;padding:6px 9px;margin-top:5px}
.fila.ok{border-color:var(--verde)}
.fila.mal{border-color:var(--rojo)}
.orden{width:34px;height:34px;border-radius:50%;background:#2c3170;display:flex;align-items:center;
  justify-content:center;font-weight:800;flex-shrink:0}
.orden.p1{background:var(--oro);color:#3a2a00}

/* ---- Podio ---- */
.podio{display:grid;gap:10px;max-width:620px;margin:18px auto}
.prow{display:flex;align-items:center;gap:14px;background:#11143a;border:1px solid var(--line);
  border-radius:16px;padding:15px 20px}
.prow.p1{border-color:var(--oro);background:linear-gradient(135deg,#3a2a00,#5a4200)}
.prow .pos{font-size:1.7rem;width:44px;text-align:center}
.prow .nm{flex:1;font-size:1.2rem;font-weight:700}
.prow .pts{font-size:1.4rem;font-weight:800;color:var(--oro)}

/* ---- Pestañas ---- */
.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.tab{background:#2c3170;color:var(--muted);padding:11px 20px;border-radius:12px;cursor:pointer;font-weight:700}
.tab.on{background:linear-gradient(135deg,#6b5cff,#9b6bff);color:#fff}
.oculto{display:none !important}

/* ══════════════ VISTA TELEVISOR ══════════════ */
body.tv{padding:0;overflow:hidden}
body.tv .tvwrap{height:100vh;display:flex;flex-direction:column;padding:2.2vh 3vw}
body.tv .hud{margin-bottom:1.5vh}
body.tv .badge{font-size:1.5vw;padding:1vh 2vw}
body.tv .prog{font-size:1.5vw}
body.tv .centro{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vh;min-height:0}
body.tv .pregunta{font-size:3.4vw;padding:0;max-width:88vw}
body.tv .pista{font-size:2vw;padding:1.4vh 2vw}
body.tv .pistas{max-width:80vw;width:100%}
body.tv .crono{width:20vh;height:20vh;margin:0}
body.tv .crono svg{width:100%;height:100%}
body.tv .crono .num{font-size:9vh}
body.tv .media{max-width:52vw;max-height:45vh;margin:0}
body.tv .media img{max-height:45vh;width:auto;max-width:100%}
body.tv .respuesta .txt{font-size:3.6vw}
body.tv .respuesta .extra{font-size:1.4vw}
body.tv .opciones-tv{display:grid;grid-template-columns:1fr 1fr;gap:1.4vh 2vw;width:82vw}
body.tv .optv{background:#11143a;border:2px solid var(--line);border-radius:1.4vh;padding:1.6vh 2vw;
  font-size:2.1vw;font-weight:700;display:flex;gap:1.4vw;align-items:center}
body.tv .optv .letra{background:#2c3170;border-radius:50%;width:4.4vh;height:4.4vh;display:flex;
  align-items:center;justify-content:center;font-weight:800;flex-shrink:0;font-size:2vw}
body.tv .optv.buena{border-color:var(--verde);background:#04331c}
body.tv .barra{display:flex;gap:1vw;justify-content:center;flex-wrap:wrap;padding-top:1.5vh}
body.tv .jug{background:#11143a;border:2px solid var(--line);border-radius:999px;
  padding:.9vh 1.6vw;font-size:1.5vw;font-weight:700;display:flex;gap:.8vw;align-items:center}
body.tv .jug.listo{border-color:var(--verde);background:#04331c}
body.tv .jug .p{color:var(--oro);font-weight:800}
body.tv .codigo{position:fixed;bottom:1.4vh;right:2vw;font-size:1.2vw;color:var(--muted);letter-spacing:2px}

/* ══════════════ CELULAR ══════════════ */
@media(max-width:640px){
  body{padding:12px}
  .pregunta{font-size:1.4rem}
  /* Cronómetro compacto en celular: versión mini flotante */
  .crono{
    width:70px;height:70px;
    position:fixed;
    top:12px;right:12px;
    margin:0;
    z-index:100;
    background:var(--panel);
    border-radius:50%;
    box-shadow:0 4px 20px rgba(0,0,0,.5);
    border:2px solid var(--line);
  }
  .crono svg{width:100%;height:100%}
  .crono .num{font-size:1.6rem}
  .crono.alerta{border-color:var(--rojo)}
  .respuesta .txt{font-size:1.45rem}
  .grid2{grid-template-columns:1fr}
  h1{font-size:1.4rem}
  /* Fotos más pequeñas en celular */
  .media img{max-height:35vh}
}


/* ══════════════ SISTEMA DE UNIRSE POR QR ══════════════ */

/* ---- Spinner de carga ---- */
.spinner{
  width:48px;height:48px;
  border:5px solid var(--line);
  border-top-color:var(--oro);
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Página unirse.php ---- */
#vistaFormulario h2,
#vistaEspera h2,
#vistaRechazado h2{
  font-size:1.4rem;
  margin-bottom:8px;
}

#inputNombre{
  font-size:1.2rem;
  padding:16px;
  text-align:center;
}

#nombreEspera{
  font-size:1.5rem;
  color:var(--oro);
  margin-bottom:8px;
}

/* ---- Solicitudes pendientes en admin ---- */
#listaSolicitudes .fila{
  background:linear-gradient(135deg,#1a1348,#232766);
  border-color:var(--oro);
  animation:aparece .3s;
}

#listaSolicitudes .fila:hover{
  background:#2a1c5a;
}

/* ---- Código QR en admin ---- */
#qrContainer{
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}

#urlUnirse{
  background:#0a0c26;
  color:var(--muted);
}

/* ---- Ajustes responsivos para QR ---- */
@media(max-width:640px){
  #qrContainer{
    margin-top:16px;
  }
  
  #qrCode{
    width:120px !important;
    height:120px !important;
  }
  
  .card .row[style*="flex-start"]{
    flex-direction:column;
    align-items:stretch;
  }
}

/* ---- Indicador de nueva solicitud ---- */
@keyframes nuevaSolicitud{
  0%{box-shadow:0 0 0 0 rgba(255,209,102,.5)}
  70%{box-shadow:0 0 0 12px rgba(255,209,102,0)}
  100%{box-shadow:0 0 0 0 rgba(255,209,102,0)}
}

#listaSolicitudes .fila.nueva{
  animation:nuevaSolicitud 1s ease-out, aparece .3s;
}

/* ---- Botones de acción en solicitudes ---- */
#cardSolicitudes .btn-verde,
#cardSolicitudes .btn-rojo{
  min-width:100px;
}

/* ---- Chip de jugador conectado (TV) ---- */
.chip{
  background:var(--panel2);
  border:1px solid var(--line);
  color:var(--txt);
  transition:all .2s;
}

.chip.nuevo{
  animation:aparece .4s;
  border-color:var(--verde);
  background:#04331c;
}


/* ---- Reproductor de audio oculto (Adivina la canción) ---- */
.audio-player{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  min-height:20vh;
}
.audio-visual{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2vh;
  padding:4vh 6vw;
  background:linear-gradient(160deg,var(--panel),var(--panel2));
  border:2px solid var(--oro);
  border-radius:3vw;
  box-shadow:0 0 40px rgba(255,209,102,.3);
}
.audio-icon{
  font-size:8vw;
  animation:pulsar 1s ease-in-out infinite;
}
@keyframes pulsar{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.1);opacity:.8}
}
.audio-bars{
  display:flex;
  align-items:flex-end;
  gap:.8vw;
  height:6vw;
}
.audio-bars .bar{
  width:1.2vw;
  background:linear-gradient(to top,var(--oro),var(--verde));
  border-radius:.5vw;
  animation:onda 1s ease-in-out infinite;
}
.audio-bars .bar:nth-child(1){animation-delay:0s;height:30%}
.audio-bars .bar:nth-child(2){animation-delay:.1s;height:60%}
.audio-bars .bar:nth-child(3){animation-delay:.2s;height:100%}
.audio-bars .bar:nth-child(4){animation-delay:.3s;height:60%}
.audio-bars .bar:nth-child(5){animation-delay:.4s;height:30%}
@keyframes onda{
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(.4)}
}
.audio-text{
  font-size:2vw;
  color:var(--oro);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.15vw;
}


/* ══════════════ MODOS DE JUEGO AUTOMÁTICO ══════════════ */

/* ---- Selector de modo de juego ---- */
.modo-juego{
  background:linear-gradient(160deg,#1a1a4a,#252966);
  border:2px solid var(--line);
  border-radius:16px;
  padding:14px 18px;
  margin-bottom:16px;
}

.modo-juego label{
  margin:0 0 10px 0;
  display:flex;
  align-items:center;
  gap:8px;
}

.modo-opciones{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.modo-btn{
  flex:1;
  min-width:140px;
  padding:12px 16px;
  background:#2c3170;
  border:2px solid var(--line);
  border-radius:12px;
  color:var(--txt);
  font-weight:700;
  font-size:.9rem;
  cursor:pointer;
  transition:all .2s;
  text-align:center;
}

.modo-btn:hover{
  background:#3a3f8a;
  border-color:var(--morado);
}

.modo-btn.activo{
  background:linear-gradient(135deg,#6b5cff,#9b6bff);
  border-color:#9b6bff;
  color:#fff;
}

.modo-btn .icono{
  font-size:1.3rem;
  display:block;
  margin-bottom:4px;
}

.modo-btn .desc{
  font-size:.75rem;
  font-weight:400;
  color:var(--muted);
  margin-top:4px;
}

.modo-btn.activo .desc{
  color:rgba(255,255,255,.8);
}

/* ---- Botón de pausa para modo completamente automático ---- */
.btn-pausa{
  background:linear-gradient(135deg,#ff9500,#ffb700);
  color:#3a2a00;
  animation:brillar 2s infinite;
}

.btn-pausa.pausado{
  background:linear-gradient(135deg,#1f9d55,#2ecc71);
  animation:none;
}

@keyframes brillar{
  0%,100%{box-shadow:0 0 0 0 rgba(255,183,0,.5)}
  50%{box-shadow:0 0 20px 4px rgba(255,183,0,.3)}
}

/* ---- Indicador de modo activo ---- */
.modo-indicador{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#2c3170;
  border:1px solid var(--line);
  border-radius:20px;
  padding:6px 14px;
  font-size:.85rem;
  font-weight:600;
}

.modo-indicador.auto{
  border-color:var(--morado);
  background:#2a1a56;
}

.modo-indicador.full-auto{
  border-color:var(--oro);
  background:#3a2a00;
  animation:brillar 2s infinite;
}

.modo-indicador .punto{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--verde);
  animation:latido 1s infinite;
}

@keyframes latido{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.8)}
}

/* ---- Contador de auto-avance ---- */
.auto-contador{
  text-align:center;
  font-size:1.1rem;
  color:var(--oro);
  font-weight:700;
  margin:10px 0;
  padding:10px;
  background:#2a2210;
  border:1px solid var(--oro);
  border-radius:12px;
  animation:aparece .3s;
}

.auto-contador .segundos{
  font-size:1.8rem;
  display:block;
  margin-top:4px;
}

/* ---- Ajustes responsivos para modos ---- */
@media(max-width:640px){
  .modo-opciones{
    flex-direction:column;
  }
  
  .modo-btn{
    min-width:100%;
  }
}