/* =====================================================================
   Sala Trading — estilos base (24-10: marca del sello)
   Look: noche limpia, dorado y mucho aire. Nada de tarjetas de adorno: las partes se
   separan con líneas finas y espacio. El único adorno es el sello de lacre de cada sala.
   Letras: Geist (títulos y texto) y JetBrains Mono (precios y números que se alinean).
   Las reglas para seguir este estilo están en CLAUDE.md, sección «Diseño».
   ===================================================================== */

:root {
  --fondo: #0B1026;
  /* Superficie: campos, menús y el marco del video */
  --panel: #121838;
  --panel-2: #19204A;
  --panel-3: #151C44;
  --texto: #EDEBFF;
  --tenue: #9AA0C8;
  /* El texto suave en números, para sus tonos transparentes (líneas, fondos al pasar el mouse) */
  --suave-rgb: 154, 160, 200;
  --borde: rgba(154, 160, 200, 0.16);
  --verde: #7FD6E6;
  --rojo: #F0767A;
  /* El acento de la sala (cada cliente pone el suyo); usa rgba(var(--oro-rgb), x) para sus tonos */
  --oro: #E8C872;
  --oro-rgb: 232, 200, 114;
  /* Botones: el acento con el texto que mejor se lea encima (colores-sala.js lo calcula por sala) */
  --boton: var(--oro);
  --boton-texto: #0B1026;
  --violeta: #8C7CF0;
  /* Papel y tinta del sello (la Bitácora usa el papel) */
  --papel: #F0ECE3;
  --tinta: #1B2244;
  /* Indicadores del gráfico: BUY / TP en verde suave, SELL / SL en coral (tonos tenues para las cajas) */
  /* 14-10: los colores de sus indicadores en TradingView */
  --compra: #00CC44;
  --compra-rgb: 0, 204, 68;
  --venta: #CC0000;
  --venta-rgb: 204, 0, 0;
  --entrada: #FF8C00;
  --entrada-rgb: 255, 140, 0;
  --radio: 12px;
  --radio-chico: 8px;
  --titulos: "Geist", "Segoe UI", system-ui, sans-serif;
  --cuerpo: "Geist", "Segoe UI", system-ui, sans-serif;
  --numeros: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--titulos);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

.tenue { color: var(--tenue); }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  background: var(--boton);
  color: var(--boton-texto);
  border: 0;
  border-radius: var(--radio-chico);
  font: 600 15px var(--cuerpo);
  cursor: pointer;
  text-decoration: none;
}

.boton:hover { filter: brightness(1.08); }

.enlace {
  background: none;
  border: 0;
  color: var(--tenue);
  font: 500 13px var(--cuerpo);
  cursor: pointer;
  padding: 10px 4px;
}

.enlace:hover { color: var(--texto); }

/* Rótulo chico encima de un dato: en minúsculas normales, sin letras espaciadas */
.etiqueta {
  font-size: 13px;
  font-weight: 500;
  color: var(--tenue);
}

/* ---------- Marca (sello + nombre) ----------
   app.js pone el logo: el que subió la sala, el sello oficial (panel maestro) o el lacre
   de la sala hecho con sello.js. */
.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.marca-sello {
  display: block;
  width: 34px;
  height: 34px;
  flex: none;
}

.marca-sello svg,
.marca-sello img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Logo propio del cliente (marca blanca) */
.marca-logo {
  height: 36px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  flex: none;
  border-radius: 6px;
}

.marca-nombre {
  font-family: var(--titulos);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------- Pantalla de acceso ----------
   La misma en el estilo propio y en el neutro: el sello de la sala, el nombre y el mensaje. */
.acceso {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: var(--fondo);
}

.acceso-caja {
  position: relative;
  flex: 0 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.acceso-caja .marca {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.acceso-caja .marca-sello {
  width: 84px;
  height: 84px;
}

.acceso-caja .marca-logo {
  height: 64px;
  max-width: 220px;
}

.acceso-caja .marca-nombre {
  font-size: 17px;
  color: var(--tenue);
}

.acceso-caja h1 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.acceso-caja p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--tenue);
}

.acceso-caja p:empty { display: none; }

.acceso-caja .boton { align-self: flex-start; }

.acceso-reglas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
  color: var(--tenue);
  font-size: 13px;
}

/* 24-10 (Edwin): el lema «PACIENCIA · DISCIPLINA · GESTIÓN», en mayúsculas espaciadas
   (excepción pedida por él a la regla de rótulos en minúsculas) y separado por puntos medios. */
.acceso-lema {
  gap: 8px 0;
  font-family: var(--cuerpo);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
}

.acceso-lema span + span::before {
  content: "·";
  margin: 0 0.75em;
  opacity: 0.7;
}

/* ---------- Estructura ---------- */
.app {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.menu {
  background: var(--fondo);
  border-right: 1px solid var(--borde);
  padding: 26px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.menu .marca { padding: 0 10px 28px; }

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  background: none;
  border: 0;
  border-radius: var(--radio-chico);
  padding: 0 12px;
  color: var(--tenue);
  font: 500 15px var(--cuerpo);
  cursor: pointer;
  text-align: left;
}

.menu-item svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.menu-item:hover { background: rgba(var(--suave-rgb), 0.07); color: var(--texto); }

.menu-item.activo {
  background: rgba(var(--suave-rgb), 0.1);
  color: var(--texto);
  font-weight: 600;
}

/* La sección activa lleva el acento solo en su ícono */
.menu-item.activo svg { stroke: var(--oro); }

/* 24-10: panel del dueño. Rótulo «Plataforma» con la línea fina arriba: separa «Clientes»
   de las secciones de los clientes (en el teléfono queda solo una rayita vertical). */
.menu-grupo {
  margin: 14px 12px 4px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
  color: var(--tenue);
  font-size: 12px;
  font-weight: 500;
}

.punto-vivo {
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rojo);
  animation: latido 1.2s infinite;
}

.menu-pie {
  margin-top: auto;
  padding: 14px 10px 0;
  border-top: 1px solid var(--borde);
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--panel-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--texto);
  flex: none;
}

.menu-usuario {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.menu-usuario strong {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-usuario span { font-size: 12px; color: var(--tenue); }

.menu-pie .enlace { margin-left: auto; }

.contenido {
  padding: 40px 48px 56px;
  min-width: 0;
}

.seccion-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.seccion-cabeza h2 {
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* Un bloque de contenido: sin caja, separado por una línea fina arriba */
.tarjeta {
  padding: 18px 0 0;
  border-top: 1px solid var(--borde);
}

/* ---------- Estado del live (junto al título) ---------- */
.insignia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 14px var(--cuerpo);
  color: var(--tenue);
}

.insignia::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(var(--suave-rgb), 0.5);
}

.insignia.vivo { color: var(--rojo); }

.insignia.vivo::before {
  background: var(--rojo);
  animation: latido 1.2s infinite;
}

@keyframes latido {
  50% { opacity: 0.25; }
}

.dato-latencia {
  font: 500 13px var(--numeros);
  color: var(--tenue);
}

/* ---------- Lives: video + columna ---------- */
.lives-rejilla {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
}

.lives-video { flex: 999 1 640px; min-width: 0; }

.lives-lado {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.tarjeta-proximo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tarjeta-proximo strong {
  font-family: var(--titulos);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.tarjeta-proximo .zona {
  font-size: 13px;
  color: var(--tenue);
}

.atajos {
  display: flex;
  flex-direction: column;
  padding-top: 0;
}

.atajo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
  background: none;
  color: var(--texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.atajo:last-child { border-bottom: 0; }

.atajo:hover strong { color: var(--oro); }

.atajo-icono {
  width: 20px;
  height: 20px;
  display: flex;
  flex: none;
  color: var(--tenue);
}

.atajo-icono svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.atajo span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.atajo strong { font-weight: 600; font-size: 15px; }
.atajo small { font-size: 13px; color: var(--tenue); }

.marco-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--panel-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.marco-video:fullscreen {
  border: 0;
  border-radius: 0;
  background: #000;
}

.marco-video video {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.capa-mensaje {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
  padding: 16px;
}

.capa-mensaje p { position: relative; margin: 0; }

.capa-titulo {
  font-family: var(--titulos);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.capa-mensaje .boton { position: relative; margin-top: 8px; }

.proximo-live {
  color: var(--texto);
  font-weight: 500;
}

.controles {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: linear-gradient(transparent, rgba(5, 7, 20, 0.75));
  opacity: 0;
  transition: opacity 0.2s;
}

.marco-video:hover .controles,
.controles:focus-within { opacity: 1; }

/* Mientras el video está en silencio, los controles se ven siempre */
.controles:has(#boton-sonido.sin-sonido:not([hidden])) { opacity: 1; }

/* Sin live (o con la sesión en otro aparato) no hay nada que controlar */
.marco-video:has(#sin-live:not([hidden])) .controles,
.marco-video:has(#sesion-movida:not([hidden])) .controles,
.marco-video:has(#otra-pestana:not([hidden])) .controles { display: none; }

/* 23-10: en vivo por YouTube dentro del mismo marco 16:9 (YouTube trae sus propios controles) */
.marco-video:has(.yt-marco) .controles { display: none; }

.yt-marco {
  position: absolute;
  inset: 0;
  background: #000;
}

.yt-marco iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.yt-aviso-sonido {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(11, 16, 38, 0.82);
  color: #EDEBFF;
  border: 1px solid rgba(var(--oro-rgb), 0.35);
  border-radius: var(--radio-chico);
  font: 600 13px var(--cuerpo);
  pointer-events: none;
}

.yt-aviso-sonido[hidden] { display: none; }

.yt-aviso-sonido svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--oro);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Botones sobre el video: siempre oscuros (van encima de la imagen, no del fondo de la sala) */
.control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  background: rgba(11, 16, 38, 0.82);
  color: #EDEBFF;
  border: 1px solid rgba(154, 160, 200, 0.25);
  border-radius: var(--radio-chico);
  font: 600 14px var(--cuerpo);
  cursor: pointer;
}

.control svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#boton-sonido { border-color: rgba(var(--oro-rgb), 0.35); }
#boton-sonido svg { stroke: var(--oro); }
#boton-pantalla { margin-left: auto; padding: 0; }

.control-dato {
  font: 500 12px var(--numeros);
  color: #9AA0C8;
}

.reloj-prueba {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(127, 214, 230, 0.92);
  color: #04131A;
  font: 500 22px var(--numeros);
  padding: 6px 10px;
  border-radius: var(--radio-chico);
}

/* Algo que todavía no hay (p. ej. tutoriales sin videos) */
.proximamente {
  border-top: 1px solid var(--borde);
  padding: 24px 0;
  color: var(--tenue);
}

/* ---------- Movimiento: quien lo pidió en su aparato, sin parpadeos ---------- */
@media (prefers-reduced-motion: reduce) {
  .punto-vivo,
  .insignia.vivo::before { animation: none; }
  .controles { transition: none; }
}

/* ---------- Teléfono ---------- */
@media (max-width: 760px) {
  .app {
    grid-template-columns: 1fr;
    padding-bottom: 80px;
  }

  .menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    flex-direction: row;
    justify-content: space-around;
    padding: 8px 6px calc(10px + env(safe-area-inset-bottom));
    border-right: 0;
    border-top: 1px solid var(--borde);
    background: var(--fondo);
    z-index: 10;
  }

  .menu .marca,
  .menu-pie { display: none; }

  .menu-item {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 58px;
    padding: 6px 4px;
    font-size: 11px;
  }

  /* 21-10: con la Bitácora hay más botones; se reparten el ancho y, si aun así
     no caben, la barra se desliza de lado (la página nunca). */
  .menu { overflow-x: auto; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .menu-item {
    flex: 1 0 auto;
    min-width: 50px;
    padding: 6px 2px;
    font-size: 10px;
    white-space: nowrap;
  }

  .menu-item.activo { background: none; }
  .punto-vivo { display: none; }

  .menu-grupo {
    flex: none;
    width: 0;
    margin: 8px 2px;
    padding: 0;
    border-top: 0;
    border-left: 1px solid var(--borde);
    font-size: 0;
  }

  .contenido { padding: 24px 16px; }
  .seccion-cabeza { margin-bottom: 18px; gap: 12px; }
  .seccion-cabeza h2 { font-size: 30px; }

  .lives-rejilla { gap: 24px; }
  .marco-video { border-radius: var(--radio-chico); }
  .capa-mensaje { gap: 4px; }
  .capa-titulo { font-size: 17px; }
  .capa-mensaje .proximo-live,
  #sin-live .tenue { display: none; }
  .capa-mensaje .tenue { font-size: 13px; }
  .controles { opacity: 1; padding: 10px; }
  .control { font-size: 13px; padding: 0 12px; }
  .control-dato { display: none; }
  .reloj-prueba { font-size: 14px; }

  .acceso { padding: 40px 20px; align-items: flex-start; }
  .acceso-caja .marca-sello { width: 72px; height: 72px; }
}

/* =====================================================================
   Pantalla completa de cada ventana (15-10) — pantalla.js
   ===================================================================== */
.boton-pantalla {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin-left: auto;
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--tenue);
  cursor: pointer;
  flex: none;
}

.boton-pantalla:hover { color: var(--texto); border-color: rgba(var(--suave-rgb), 0.4); }

.boton-pantalla svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* La columna de Lives lleva el botón en su esquina */
.lives-lado { position: relative; }
.lives-lado > .boton-pantalla {
  position: absolute;
  bottom: -42px;
  right: 0;
  z-index: 2;
  width: 30px;
  height: 30px;
  opacity: 0.6;
}
.lives-lado > .boton-pantalla:hover { opacity: 1; }

/* Ventana en pantalla completa: fondo de la sala y con su propio desplazamiento */
.seccion:fullscreen,
.lives-lado:fullscreen,
.seccion.pantalla-falsa,
.lives-lado.pantalla-falsa {
  background: var(--fondo);
  overflow: auto;
  padding: 24px 28px;
}

.lives-lado.en-pantalla-completa > .boton-pantalla { top: 12px; right: 12px; bottom: auto; }

.seccion::backdrop,
.lives-lado::backdrop { background: var(--fondo); }

/* Sin pantalla completa de verdad (iPhone): la ventana se estira con CSS */
.pantalla-falsa {
  position: fixed !important;
  inset: 0;
  z-index: 1000;
  margin: 0 !important;
  max-width: none !important;
  border-radius: 0 !important;
}

html.con-pantalla-falsa,
html.con-pantalla-falsa body { overflow: hidden; }

@media (max-width: 760px) {
  .seccion:fullscreen,
  .seccion.pantalla-falsa { padding: 14px 16px; }
}