/* ════════════════════════════════════════════════════════════════════════════
   BabyMon · Sistema de diseño premium 2026
   Tema oscuro · glassmorphism sutil · gradientes elegantes.
   Solo CSS nativo. Misma nomenclatura de clases/variables que la app original
   → todas las páginas (index, emisor, receptor) y toda la lógica JS siguen
   funcionando sin cambios. Las clases de estado que alterna el JS se mantienen:
   .estado-punto.{esperando|conectando|en-directo|desconectado}, .btn-activo,
   body.modo-video, .solo-audio-ph.visible, .video-overlay.oculto, .motion-badge.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Reset y base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Sin esto, display:flex en .tarjeta anularía [hidden] en Chrome/Safari */
[hidden] { display: none !important; }

:root {
  /* — Tokens originales (se conservan los NOMBRES; valores re-skinned) — */
  --bg:          #08090c;   /* negro grafito */
  --bg-panel:    #0e1015;   /* gris carbón */
  --bg-input:    #0a0c10;
  --border:      rgba(255, 255, 255, 0.09);
  --border-focus: oklch(0.72 0.13 245);
  --text:        #f2f3f7;
  --text-muted:  #99a1b3;
  --green:       oklch(0.78 0.14 158);
  --red:         oklch(0.66 0.20 22);
  --blue:        oklch(0.72 0.13 245);
  --yellow:      oklch(0.83 0.13 85);
  --radius:      18px;
  --radius-sm:   12px;

  /* — Tokens premium añadidos — */
  --cyan:    oklch(0.80 0.12 205);
  --violet:  oklch(0.70 0.14 295);
  --surface:    rgba(255, 255, 255, 0.04);
  --surface-2:  rgba(255, 255, 255, 0.07);
  --hairline:   rgba(255, 255, 255, 0.09);
  --hairline-2: rgba(255, 255, 255, 0.16);

  --grad-primary: linear-gradient(135deg, oklch(0.74 0.14 250), oklch(0.80 0.12 205));
  --grad-text:    linear-gradient(100deg, #e9ecf4 0%, oklch(0.80 0.10 270) 60%, var(--cyan) 100%);

  --shadow-soft: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 50px -22px rgba(0,0,0,0.8);
  --shadow-lift: 0 1px 0 rgba(255,255,255,0.08) inset, 0 30px 70px -28px rgba(0,0,0,0.9);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fondo ambiental (halos de luz muy sutiles) — sin markup extra.
   Se neutraliza en modo vídeo a pantalla completa. */
body {
  background:
    radial-gradient(120% 90% at 85% -10%, oklch(0.30 0.10 285 / 0.30), transparent 55%),
    radial-gradient(110% 80% at -10% 110%, oklch(0.32 0.09 215 / 0.24), transparent 52%),
    var(--bg);
  background-attachment: fixed;
}
body::before {
  /* malla de puntos extremadamente discreta */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 25%, #000 30%, transparent 80%);
          mask-image: radial-gradient(120% 80% at 50% 25%, #000 30%, transparent 80%);
}

::selection { background: oklch(0.70 0.14 270 / 0.35); color: #fff; }

/* ─── Layout principal ──────────────────────────────────────────────────────── */
.pagina {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  gap: 16px;
}

.tarjeta {
  width: 100%;
  max-width: 480px;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: var(--shadow-lift);
  animation: card-rise .7s var(--ease) both;
}
@keyframes card-rise {
  from { opacity: 0; transform: translateY(16px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

/* ─── Tipografía ────────────────────────────────────────────────────────────── */
h1 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

h1 .subtitulo {
  display: block;
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: -0.005em;
  margin-top: 6px;
}

/* ─── Formulario ────────────────────────────────────────────────────────────── */
label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

input[type="text"] {
  width: 100%;
  padding: 13px 15px;
  background: var(--bg-input);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 1rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.01em;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
input[type="text"]::placeholder { color: var(--text-muted); opacity: 0.7; }

input[type="text"]:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 4px oklch(0.72 0.13 245 / 0.16);
  background: #090b0f;
}

select {
  width: 100%;
  padding: 12px 40px 12px 15px;
  background: var(--bg-input);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.92rem;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2399a1b3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 4px oklch(0.72 0.13 245 / 0.16);
}

/* ─── Botones ───────────────────────────────────────────────────────────────── */
.btn-fila {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

button {
  padding: 13px 18px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform .15s var(--ease), filter .2s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}

button:active { transform: scale(0.975); }
button:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--border-focus);
}

.btn-primario {
  background: var(--grad-primary);
  color: #fff;
  flex: 1;
  box-shadow: 0 10px 26px -12px oklch(0.72 0.13 245 / 0.9), 0 1px 0 rgba(255,255,255,0.18) inset;
}
.btn-primario:hover { filter: brightness(1.06); box-shadow: 0 16px 34px -12px oklch(0.72 0.13 245 / 1), 0 1px 0 rgba(255,255,255,0.22) inset; }

.btn-peligro {
  background: oklch(0.40 0.13 22 / 0.35);
  border: 1px solid oklch(0.55 0.18 22 / 0.55);
  color: oklch(0.85 0.10 22);
}
.btn-peligro:hover { background: oklch(0.45 0.15 22 / 0.5); border-color: oklch(0.62 0.2 22 / 0.7); }

.btn-secundario {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--hairline);
  flex: 1;
}
.btn-secundario:hover { background: var(--surface-2); border-color: var(--hairline-2); }

/* Tarjetas de rol grandes (compat. con markup antiguo si se usa) */
.btn-rol-emisor {
  background: linear-gradient(135deg, oklch(0.30 0.08 250 / 0.5), oklch(0.22 0.05 230 / 0.4));
  color: var(--cyan); border: 1px solid oklch(0.55 0.12 240 / 0.4); flex: 1; padding: 16px; font-size: 1rem;
}
.btn-rol-receptor {
  background: linear-gradient(135deg, oklch(0.30 0.09 295 / 0.5), oklch(0.22 0.06 280 / 0.4));
  color: var(--violet); border: 1px solid oklch(0.55 0.12 290 / 0.4); flex: 1; padding: 16px; font-size: 1rem;
}

.btn-generar {
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--hairline);
  padding: 9px 13px;
  font-size: 0.8rem;
  align-self: flex-end;
}
.btn-generar:hover { color: var(--text); border-color: var(--hairline-2); }

/* ─── Indicador de estado ───────────────────────────────────────────────────── */
.estado-barra {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.estado-punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4a4f5a;
  flex-shrink: 0;
  transition: background 0.3s, box-shadow 0.3s;
}

.estado-punto.esperando    { background: #4a4f5a; }
.estado-punto.conectando   { background: var(--yellow); box-shadow: 0 0 0 4px oklch(0.83 0.13 85 / 0.18); animation: parpadeo 1s ease-in-out infinite; }
.estado-punto.en-directo   { background: var(--green); box-shadow: 0 0 0 4px oklch(0.78 0.14 158 / 0.22), 0 0 12px oklch(0.78 0.14 158 / 0.5); }
.estado-punto.desconectado { background: var(--red); box-shadow: 0 0 0 4px oklch(0.66 0.20 22 / 0.2); }

@keyframes parpadeo {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ─── Vídeo ─────────────────────────────────────────────────────────────────── */
.video-contenedor {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--hairline);
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 45%, rgba(12,16,24,0.55), rgba(0,0,0,0.82));
  color: var(--text-muted);
  font-size: 0.9rem;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
}

.video-overlay.oculto { display: none; }

/* ─── Aviso ─────────────────────────────────────────────────────────────────── */
.aviso {
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  line-height: 1.5;
  border: 1px solid;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.aviso-info    { background: oklch(0.30 0.08 245 / 0.18); border-color: oklch(0.55 0.10 245 / 0.4); color: oklch(0.85 0.07 240); }
.aviso-alerta  { background: oklch(0.35 0.10 85 / 0.16);  border-color: oklch(0.6 0.12 85 / 0.4);   color: var(--yellow); }
.aviso-error   { background: oklch(0.32 0.12 22 / 0.18);  border-color: oklch(0.55 0.18 22 / 0.45); color: oklch(0.82 0.12 22); }

/* ─── Campo de código de sala ───────────────────────────────────────────────── */
.sala-fila {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.sala-fila input { flex: 1; }

/* ─── Separador ─────────────────────────────────────────────────────────────── */
.separador {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 2px 0;
}

/* ─── Botón cambio de idioma ────────────────────────────────────────────────── */
.btn-idioma {
  position: fixed;
  top: 14px;
  right: 14px;
  background: rgba(12, 14, 20, 0.6);
  border: 1px solid var(--hairline);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  z-index: 200;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  white-space: nowrap;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.btn-idioma:hover { color: var(--text); border-color: var(--hairline-2); background: rgba(20,23,32,0.7); }

/* ─── Panel de estadísticas ─────────────────────────────────────────────────── */
.stats-panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.stats-panel summary {
  padding: 11px 15px;
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .2s var(--ease);
}
.stats-panel summary:hover { color: var(--text); }

.stats-panel summary::-webkit-details-marker { display: none; }
.stats-panel[open] summary { border-bottom: 1px solid var(--hairline); }

.stats-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  padding: 10px 15px 13px;
}

.stats-grid span { padding: 4px 0; font-size: 0.79rem; }
.stats-grid span:nth-child(odd)  { color: var(--text-muted); padding-right: 12px; }
.stats-grid span:nth-child(even) { font-family: ui-monospace, "SF Mono", monospace; color: var(--text); text-align: right; }

/* ─── Badge de movimiento detectado ────────────────────────────────────────── */
.motion-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: oklch(0.62 0.2 22 / 0.9);
  color: #fff;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 700;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px -8px oklch(0.62 0.2 22 / 0.8);
  animation: badge-aparece 0.25s ease-out;
}
.motion-badge[hidden] { display: none !important; }

@keyframes badge-aparece {
  from { transform: scale(0.75) translateY(-6px); opacity: 0; }
  to   { transform: scale(1) translateY(0);       opacity: 1; }
}

/* ─── Solo audio placeholder ────────────────────────────────────────────────── */
.solo-audio-ph {
  display: none;
  height: 72px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: radial-gradient(circle at 50% 40%, oklch(0.30 0.08 270 / 0.3), var(--bg-input));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.85rem;
}
.solo-audio-ph.visible { display: flex; }
.solo-audio-ph .onda { font-size: 1.6rem; animation: onda 1.2s ease-in-out infinite; }
@keyframes onda { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.5); } }

/* ─── Botón activo (toggle encendido) ───────────────────────────────────────── */
.btn-activo {
  background: oklch(0.32 0.10 158 / 0.4) !important;
  border-color: oklch(0.6 0.14 158 / 0.6) !important;
  color: var(--green) !important;
  box-shadow: 0 0 0 1px oklch(0.6 0.14 158 / 0.3) inset !important;
}

/* ─── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .tarjeta { padding: 22px 18px; }
  h1 { font-size: 1.25rem; }
  .btn-rol-emisor, .btn-rol-receptor { font-size: 0.9rem; padding: 14px 10px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MODO VÍDEO (emisor/receptor activo): pantalla completa sin scroll.
   ⚠️ Reglas de layout conservadas VERBATIM de la versión original para no
   romper el visor a pantalla completa cuidadosamente afinado.
   ════════════════════════════════════════════════════════════════════════════ */
body.modo-video {
  overflow: hidden;        /* impide que el body scrollee */
  height: 100dvh;         /* body acotado al viewport dinámico */
  background: #000;        /* fondo negro tras el vídeo */
}
body.modo-video::before { display: none; }
body.modo-video .pagina {
  height: 100dvh;
  overflow: hidden;
  padding: 0;
  gap: 0;
  justify-content: flex-start;
  align-items: stretch;
}
body.modo-video .tarjeta {
  max-width: 100%;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  padding: 8px 12px 12px;
  flex: 1;                /* ocupa todo el alto de .pagina */
  min-height: 0;          /* permite encoger en Safari */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  gap: 8px;
  background: #0a0b0e;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  animation: none;
}
body.modo-video .video-contenedor {
  aspect-ratio: unset;
  height: auto;
  max-height: none;
  flex: 1;                /* ocupa el espacio libre dentro de .tarjeta */
  min-height: 80px;
  border-radius: 0;
  border: none;
}
body.modo-video .solo-audio-ph.visible {
  flex: 1;
  height: auto;
}
body.modo-video button        { padding: 10px 12px; }
body.modo-video .estado-barra { padding: 8px 11px; }

/* ─── Modo vídeo + paisaje en móvil: ultra-compacto para caber sin scroll ── */
@media (orientation: landscape) and (max-height: 500px) {
  body.modo-video .tarjeta      { gap: 3px; padding: 3px 8px 4px; }
  body.modo-video button        { padding: 5px 8px; font-size: 0.85rem; }
  body.modo-video .estado-barra { padding: 4px 10px; }
  body.modo-video .stats-panel  { display: none; }
  body.modo-video h1            { display: none; }
  body.modo-video .separador    { display: none; }
}

/* ─── Movimiento reducido ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}