/* Videosala — minimalismo a propósito: en pantalla nunca hay más de un input,
   un botón grande y un grupo de controles. Todo lo demás se esconde. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --fondo: #0b1220;
  --superficie: #141d2f;
  --borde: #24304a;
  --texto: #f1f5f9;
  --apagado: #94a3b8;
  --acento: #0369a1;
  --acento-vivo: #0284c7;
  --peligro: #b91c1c;
  --peligro-vivo: #dc2626;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.oculto { display: none !important; }

.pantalla { height: 100%; display: flex; flex-direction: column; }

/* ---------- Entrada ---------- */

#entrada { align-items: center; justify-content: center; padding: 24px; }

.columna {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.paso { width: 100%; display: flex; flex-direction: column; gap: 20px; }

h1 {
  margin: 0;
  font-size: clamp(28px, 7vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* El input es el protagonista de su paso: enorme y centrado. */
.gigante {
  width: 100%;
  padding: 20px 18px;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  color: var(--texto);
  background: var(--superficie);
  border: 2px solid var(--borde);
  border-radius: 18px;
  outline: none;
}
.gigante::placeholder { color: #46536e; font-weight: 600; }
.gigante:focus { border-color: var(--acento-vivo); }

/* Ningún botón blanco: todos con cuerpo de color y sombra suave. */
.principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 20px 24px;
  font-size: 19px;
  font-weight: 900;
  color: #fff;
  background: var(--acento);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(2, 132, 199, .28);
}
.principal:hover { background: var(--acento-vivo); }
.principal:disabled { opacity: .55; cursor: default; }
.principal svg { width: 22px; height: 22px; }
.principal.peligro { background: var(--peligro); box-shadow: 0 6px 18px rgba(220, 38, 38, .28); }
.principal.peligro:hover { background: var(--peligro-vivo); }

.fantasma {
  background: none;
  border: 0;
  color: var(--apagado);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px;
}
.fantasma:hover { color: var(--texto); }

.puntitos { display: flex; gap: 8px; margin-top: 26px; }
.puntitos i { width: 8px; height: 8px; border-radius: 50%; background: var(--borde); }
.puntitos i.activo { background: var(--acento-vivo); }

/* El cupo se ve desde el primer segundo: se sabe cuánta gente cabe
   antes de invitar a nadie. */
.cupo { margin: 14px 0 0; color: var(--apagado); font-size: 15px; font-weight: 600; }

/* ---------- Sala ---------- */

#sala { position: relative; }

#barraSuperior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  font-weight: 700;
}
#nombreSala { color: var(--apagado); font-size: 15px; }

.contador {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--acento);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}
.contador.lleno { background: var(--peligro); }

/* La grilla se reparte SIEMPRE el alto disponible: nunca hay scroll ni la
   barra de controles se va abajo del pliegue. El número de columnas lo pone
   el JS según cuánta gente hay (--cols). */
.videos {
  flex: 1;
  display: grid;
  gap: 10px;
  padding: 0 12px;
  min-height: 0;
  overflow: hidden;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}
.videos.sin-propio .tile.propio { display: none; }
.tile.excedente { display: none; }

/* El "+38" que resume a los que no caben en pantalla. */
.tile.mas {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--superficie);
  color: var(--apagado);
  font-size: clamp(20px, 4vw, 34px);
  font-weight: 900;
}

.tile {
  position: relative;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
}
.tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile.propio video { transform: scaleX(-1); }

.tile .quien {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(11, 18, 32, .72);
  font-size: 13px;
  font-weight: 700;
}
.tile .sin-camara {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 900;
  color: var(--apagado);
  background: var(--superficie);
}

.vacio {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0 24px;
  max-width: 420px;
  text-align: center;
  color: var(--apagado);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  pointer-events: none;
}

#barraInferior {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  flex-wrap: wrap;
}
#barraInferior .principal { width: auto; padding: 16px 30px; }

/* Los secundarios van en UN grupo tipo control remoto, no como botones
   sueltos que compitan con el de colgar. */
.grupo {
  display: flex;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 56px;
  border: 0;
  border-right: 1px solid var(--borde);
  background: none;
  color: var(--texto);
  cursor: pointer;
}
.pill:last-child { border-right: 0; }
.pill:hover { background: #1c2740; }
.pill svg { width: 24px; height: 24px; }
/* El rojo es solo para lo que la gente necesita ver de una: que estás
   silenciado o sin cámara. Zen y esconder el propio video son preferencias,
   no alarmas: se marcan con el icono tachado y el fondo azul. */
.pill.alerta[aria-pressed="false"] { background: var(--peligro); color: #fff; }
.pill.encendido[aria-pressed="true"] { background: var(--acento); color: #fff; }

/* ---------- Modo zen ---------- */

body.zen #barraSuperior,
body.zen #barraInferior { display: none; }
body.zen .videos { padding: 0; gap: 4px; }
body.zen .tile { border-radius: 0; }

.salir-zen {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 29, 47, .82);
  color: var(--texto);
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s;
}
.salir-zen svg { width: 22px; height: 22px; }
body.zen .salir-zen { opacity: 0; }
body.zen.despierto .salir-zen { opacity: 1; }

/* ---------- Modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 8, 16, .78);
  z-index: 50;
}
.modal .caja {
  width: 100%;
  max-width: 380px;
  padding: 28px 24px;
  border-radius: 22px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  text-align: center;
}
.modal h2 { margin: 0 0 10px; font-size: 22px; font-weight: 800; }

/* Lo puesto en una línea, con su botón de Cambiar: la lista larga sale recién
   cuando se pide. */
.fila {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  width: 100%;
  padding: 14px 16px;
  margin-bottom: 10px;
  text-align: left;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 14px;
  color: var(--texto);
  cursor: pointer;
}
.fila:hover { border-color: var(--acento-vivo); }
.fila .que { font-size: 13px; font-weight: 700; color: var(--apagado); }
.fila .cual {
  grid-column: 1;
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fila .cambiar {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--acento);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.lista { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.opcion {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--fondo);
  color: var(--texto);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.opcion:hover { border-color: var(--acento-vivo); }
.opcion.puesta { background: var(--acento); border-color: var(--acento); color: #fff; }
.modal p { margin: 0 0 22px; color: var(--apagado); font-size: 16px; line-height: 1.5; }

@media (max-width: 520px) {
  /* En el teléfono nunca más de dos por fila: más chico que eso no se ve nada. */
  .videos { grid-template-columns: repeat(min(var(--cols, 1), 2), minmax(0, 1fr)); }
  #barraInferior .principal { padding: 16px 22px; }
  .pill { width: 54px; height: 52px; }
}