/* Bachillerato — hoja de cuaderno nocturna */
:root {
  --bg: #0a0a18;
  --bg2: #14142c;
  --bg3: #1d1d3a;
  --border: rgba(255,255,255,0.09);
  --text: #e2e8f0;
  --text2: #94a3b8;
  --purple: #7c3aed;
  --purple-l: #a78bfa;
  --amber: #f0c060;
  --green: #22c55e;
  --red: #ef4444;
  --ff-head: 'Outfit', 'Inter', system-ui, sans-serif;
  --ff-body: 'Inter', system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-body);
  padding-bottom: 60px;
}

/* letras flotando de fondo */
.letras-bg { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.letras-bg span {
  position: absolute; font-family: var(--ff-head); font-weight: 800;
  color: rgba(167,139,250,0.07); user-select: none;
  animation: flotar linear infinite;
}
@keyframes flotar {
  from { transform: translateY(110vh) rotate(-8deg); }
  to   { transform: translateY(-20vh) rotate(8deg); }
}

.top-bar {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; gap: 12px;
}
.top-brand { color: var(--text2); text-decoration: none; font-size: 14px; font-weight: 600; }
.top-brand:hover { color: var(--text); }
.top-title { font-family: var(--ff-head); font-weight: 800; letter-spacing: 5px; color: var(--amber); font-size: 15px; }

#app { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 12px 16px; }

.loading { text-align: center; padding: 90px 0; color: var(--text2); }
.spinner { font-size: 40px; animation: girar 1.6s ease-in-out infinite; display: inline-block; }
@keyframes girar { 50% { transform: rotate(180deg) scale(1.2); } }

#toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  padding: 10px 20px; border-radius: 12px; font-size: 14px; opacity: 0;
  transition: all .25s; z-index: 999; pointer-events: none; max-width: 90vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err { border-color: rgba(239,68,68,0.5); background: #2a1220; }

/* botones */
.btn-primary, .btn-secondary, .btn-ghost {
  font-family: var(--ff-body); font-weight: 700; border-radius: 12px; cursor: pointer;
  border: none; font-size: 14.5px; padding: 11px 20px; transition: all .2s;
}
.btn-primary { background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; }
.btn-primary:hover { filter: brightness(1.15); }
.btn-primary:disabled { opacity: .5; cursor: default; }
.btn-secondary { background: var(--bg3); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: #26264a; }
.btn-ghost { background: none; color: var(--text2); border: 1px dashed var(--border); }
.btn-ghost:hover { color: var(--text); }

/* landing */
.landing-hero { text-align: center; padding: 34px 0 20px; }
.landing-hero h1 { font-family: var(--ff-head); font-size: clamp(34px, 7vw, 58px); letter-spacing: 6px; color: var(--amber); }
.landing-hero .tagline { color: var(--text2); margin-top: 8px; font-size: 15px; }
.hero-abc { font-size: 34px; letter-spacing: 8px; margin-bottom: 4px; }
.action-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; max-width: 760px; margin: 24px auto; }
.action-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 18px;
  padding: 22px; display: flex; flex-direction: column; gap: 10px;
}
.action-card h3 { font-family: var(--ff-head); font-size: 17px; }
.action-card p { color: var(--text2); font-size: 13.5px; line-height: 1.5; flex: 1; }
.action-card input {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); padding: 10px 12px; font-size: 16px; letter-spacing: 3px;
  text-transform: uppercase; text-align: center; outline: none;
}

/* lobby */
.lobby { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; margin-top: 10px; }
.lobby-code { display: flex; align-items: center; gap: 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; margin-bottom: 14px; flex-wrap: wrap; }
.lobby-code-label { color: var(--text2); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.lobby-code-value { font-family: var(--ff-head); font-weight: 800; font-size: 26px; letter-spacing: 5px; color: var(--amber); }
.copy-btn { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); border-radius: 9px; padding: 7px 12px; font-size: 12.5px; cursor: pointer; }
.copy-btn:hover { color: var(--text); }
.panel { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; margin-bottom: 14px; }
.panel h4 { font-size: 12px; letter-spacing: 2px; color: var(--text2); margin-bottom: 12px; }
.seat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.seat { display: flex; align-items: center; gap: 9px; background: var(--bg3); border-radius: 12px; padding: 9px 11px; position: relative; }
.seat.is-me { outline: 2px solid var(--purple); }
.seat.empty { justify-content: center; color: var(--text2); font-size: 12.5px; border: 1px dashed var(--border); background: none; }
.player-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #26264a; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.p-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
.p-meta { font-size: 11px; color: var(--text2); }
.host-tag { position: absolute; top: -7px; right: 8px; background: var(--amber); color: #201500; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 8px; }

.pills { display: flex; flex-wrap: wrap; gap: 7px; }
.pill {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text2);
  border-radius: 100px; padding: 6px 14px; font-size: 13px; cursor: pointer; font-weight: 600;
}
.pill.sel { background: var(--purple); border-color: var(--purple); color: #fff; }
.pill:disabled { opacity: .5; cursor: default; }
.cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }
.cat-custom-row { display: flex; gap: 7px; margin-top: 9px; }
.cat-custom-row input {
  flex: 1; background: var(--bg3); border: 1px solid var(--border); border-radius: 9px;
  color: var(--text); padding: 8px 11px; font-size: 13px; outline: none;
}

/* HUD de partida */
.game-hud {
  display: flex; align-items: center; gap: 14px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 14px; padding: 10px 16px; flex-wrap: wrap;
}
.hud-round { font-size: 12.5px; color: var(--text2); font-weight: 700; letter-spacing: 1px; }
.hud-letra {
  font-family: var(--ff-head); font-weight: 800; font-size: 34px; line-height: 1;
  background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff;
  width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 6px 18px rgba(124,58,237,0.45);
}
.hud-frase { flex: 1; font-size: 14px; color: var(--text2); min-width: 120px; }
.hud-timer { font-family: var(--ff-head); font-weight: 800; font-size: 26px; min-width: 52px; text-align: right; }
.hud-timer.low { color: var(--red); animation: latido .8s infinite; }
@keyframes latido { 50% { transform: scale(1.15); } }
.hud-bar { height: 5px; background: var(--bg3); border-radius: 100px; margin-top: 8px; overflow: hidden; }
#hud-bar-fill { height: 100%; background: linear-gradient(90deg, #7c3aed, #f0c060); border-radius: 100px; transition: width .25s linear; }

.game { display: grid; grid-template-columns: 170px minmax(0, 1fr) 250px; gap: 14px; margin-top: 12px; }
.players-col { display: flex; flex-direction: column; gap: 8px; }
.pl-card { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--border); border-radius: 11px; padding: 7px 9px; font-size: 12.5px; }
.pl-card.is-me { outline: 2px solid var(--purple); }
.pl-card .pts { margin-left: auto; font-weight: 800; color: var(--amber); }
.pl-card .listo { margin-left: auto; }
.pl-card img, .pl-card .ph { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #26264a; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }

/* hoja de respuestas */
.hoja { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 18px; }
.hoja-fila { display: flex; flex-direction: column; gap: 4px; margin-bottom: 13px; }
.hoja-fila label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text2); font-weight: 700; }
.hoja-fila input {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); padding: 11px 13px; font-size: 16px; outline: none; transition: border-color .2s;
}
.hoja-fila input:focus { border-color: var(--purple-l); }
.hoja-fila input.ok { border-color: rgba(34,197,94,0.55); }
.hoja-fila input.mal { border-color: rgba(239,68,68,0.45); }
.btn-basta {
  width: 100%; padding: 15px; font-family: var(--ff-head); font-size: 20px; font-weight: 800;
  letter-spacing: 3px; border: none; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, #dc2626, #f97316); color: #fff; transition: all .2s;
}
.btn-basta:disabled { background: var(--bg3); color: var(--text2); cursor: default; }
.btn-basta:not(:disabled):hover { transform: scale(1.02); box-shadow: 0 8px 24px rgba(220,38,38,0.4); }
.basta-aviso { text-align: center; padding: 9px; background: rgba(220,38,38,0.14); border: 1px solid rgba(239,68,68,0.4); border-radius: 11px; font-weight: 700; margin-bottom: 10px; animation: latido 1s infinite; }

/* revisión */
.rev-cat { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 13px 15px; margin-bottom: 11px; }
.rev-cat h5 { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--amber); margin-bottom: 9px; }
.rev-fila { display: flex; align-items: center; gap: 9px; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 14px; flex-wrap: wrap; }
.rev-fila:last-child { border-bottom: none; }
.rev-quien { color: var(--text2); font-size: 12.5px; min-width: 90px; max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rev-resp { font-weight: 700; flex: 1; min-width: 80px; }
.rev-resp.vacia { color: var(--text2); font-weight: 400; font-style: italic; }
.rev-resp.anulada { text-decoration: line-through; color: var(--red); }
.rev-obj {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text2);
  border-radius: 9px; padding: 5px 10px; font-size: 12px; cursor: pointer; font-weight: 600;
}
.rev-obj.activo { background: rgba(239,68,68,0.2); border-color: var(--red); color: #fca5a5; }
.rev-votos { font-size: 11.5px; color: var(--red); font-weight: 700; }

/* tabla de puntos / podio */
.tabla-pts { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-pts th { text-align: left; color: var(--text2); font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; padding: 6px 8px; }
.tabla-pts td { padding: 7px 8px; border-top: 1px solid rgba(255,255,255,0.05); }
.tabla-pts .tot { font-weight: 800; color: var(--amber); text-align: right; }
.podio { text-align: center; padding: 10px 0 4px; }
.podio .ganador { font-family: var(--ff-head); font-size: 26px; font-weight: 800; color: var(--amber); }
.podio .medalla { font-size: 46px; }

/* chat */
.chat-panel { display: flex; flex-direction: column; min-height: 300px; max-height: 460px; }
.chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; font-size: 13px; padding-right: 4px; }
.chat-messages .m b { color: var(--purple-l); }
.chat-input { display: flex; gap: 6px; margin-top: 9px; }
.chat-input input { flex: 1; background: var(--bg3); border: 1px solid var(--border); border-radius: 9px; color: var(--text); padding: 8px 11px; font-size: 13px; outline: none; min-width: 0; }
.chat-input button { background: var(--purple); border: none; color: #fff; border-radius: 9px; padding: 8px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.chat-lock { color: var(--text2); font-size: 12.5px; text-align: center; padding: 14px 6px; }

@media (max-width: 900px) {
  .lobby { grid-template-columns: 1fr; }
  .game { grid-template-columns: 1fr; }
  .players-col { flex-direction: row; flex-wrap: wrap; }
  .pl-card { flex: 1 1 130px; }
}

/* ── Barra del ¡BASTA! (fuera de la hoja: en celular queda siempre abajo) ── */
.centro-escritura { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.basta-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.basta-barra .btn-basta { flex: 1; width: auto; }
.basta-progreso {
  font-family: var(--ff-head); font-weight: 800; font-size: 15px; color: var(--text2);
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 12px; min-width: 58px; text-align: center; font-variant-numeric: tabular-nums;
}
.basta-ayuda { width: 100%; color: var(--text2); font-size: 12px; text-align: center; }
.hud-exit { display: none; }

/* ── Celular escribiendo: pantalla pegada a la zona visible ────────────────
   /js/visor-juego.js pone --vv-top/--vv-h (lo que se ve, con o sin teclado).
   #app se fija ahí: arriba la letra y el reloj, en el medio la hoja (se
   desplaza por dentro) y abajo el ¡BASTA!. Con el teclado abierto no se
   pierde nada de vista. */
@media (max-width: 760px), (max-height: 500px) {
  body.escribiendo { overflow: hidden; overscroll-behavior: none; }
  body.escribiendo .top-bar { display: none; }
  body.escribiendo #app {
    position: fixed; left: 0; right: 0;
    top: var(--vv-top, 0px); height: var(--vv-h, 100dvh);
    max-width: none; margin: 0;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 8px calc(6px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; overflow: hidden;
  }
  body.escribiendo #app > div:first-child { flex: none; }
  body.escribiendo .game-hud { padding: 6px 10px; gap: 10px; flex-wrap: nowrap; }
  body.escribiendo .hud-letra { width: 44px; height: 44px; font-size: 28px; border-radius: 12px; }
  body.escribiendo .hud-frase { font-size: 12.5px; min-width: 0; line-height: 1.3; }
  body.escribiendo .hud-round { font-size: 11px; white-space: nowrap; }
  body.escribiendo .hud-timer { font-size: 22px; min-width: 38px; }
  body.escribiendo .hud-exit {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; padding: 0; border-radius: 8px; font-size: 14px; cursor: pointer;
    background: var(--bg3); border: 1px solid var(--border); color: var(--text2);
  }
  body.escribiendo .hud-bar { margin-top: 5px; }

  body.escribiendo .game { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
  /* jugadores: una tira horizontal con quién ya completó */
  body.escribiendo .players-col { flex: none; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 2px; }
  body.escribiendo .pl-card { flex: 0 0 auto; padding: 4px 8px; font-size: 12px; max-width: 150px; }
  body.escribiendo .pl-card img, body.escribiendo .pl-card .ph { width: 20px; height: 20px; font-size: 10px; }
  /* el chat está cerrado mientras se escribe: fuera, más espacio para la hoja */
  body.escribiendo .side-col { display: none; }

  body.escribiendo .centro-escritura { flex: 1; min-height: 0; gap: 6px; }
  body.escribiendo .hoja {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; padding: 10px 12px; border-radius: 14px;
  }
  body.escribiendo .hoja-fila { margin-bottom: 10px; }
  body.escribiendo .basta-barra { flex: none; flex-wrap: nowrap; gap: 8px; }
  body.escribiendo .basta-ayuda { display: none; }
  body.escribiendo .btn-basta { padding: 12px; font-size: 18px; letter-spacing: 2px; }
  body.escribiendo .basta-progreso { padding: 10px 8px; min-width: 50px; font-size: 14px; }
  body.escribiendo .basta-aviso { padding: 7px; font-size: 13px; margin-bottom: 8px; }

  /* teclado abierto: fuera lo accesorio, la hoja se queda con el espacio */
  body.escribiendo.kb-abierto .players-col, body.escribiendo.kb-abierto .hud-bar { display: none; }
  body.escribiendo.kb-abierto .game-hud { padding: 4px 8px; }
  body.escribiendo.kb-abierto .hud-letra { width: 36px; height: 36px; font-size: 22px; }
  body.escribiendo.kb-abierto .hud-frase { display: none; }
  body.escribiendo.kb-abierto .game { margin-top: 4px; }
  body.escribiendo.kb-abierto .btn-basta { padding: 9px; font-size: 16px; }
  body.escribiendo.kb-abierto .basta-progreso { padding: 7px 6px; }
}