/* =========================================================
   Interruptor de idioma (ES / EN)
   ========================================================= */

/* Mientras se traduce, el cuerpo no se ve: el salto de español a inglés
   delante de los ojos se lee como un fallo. Dura milésimas.
   La animación es el seguro: si el script nunca corre, la página aparece
   igual al segundo y medio. */
html[data-tr] body {
  opacity: 0;
  animation: glow-tr-rescate 0s linear 1.5s forwards;
}
@keyframes glow-tr-rescate { to { opacity: 1; } }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--gold-line, rgba(201, 162, 78, 0.28));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  flex: 0 0 auto;
}

.lang-opt {
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.lang-opt:hover { opacity: 0.85; }
.lang-opt.es-activo {
  opacity: 1;
  background: rgba(201, 162, 78, 0.22);
  color: var(--gold, #c9a24e);
}

/* El panel del owner es CLARO: sobre blanco hace falta este contraste. */
.ad-topbar .lang-switch {
  border-color: var(--ad-line, rgba(60, 45, 20, 0.12));
  background: rgba(255, 255, 255, 0.6);
}
.ad-topbar .lang-opt.es-activo {
  background: rgba(154, 123, 63, 0.16);
  color: #6b5327;
}

/*
  El menú de la clienta y el de las coaches son OSCUROS.

  Aquí estaban metidos en la regla de arriba: blanco al 60% sobre un fondo casi
  negro es una mancha gris, y encima el lado activo salía en marrón oscuro
  sobre ese gris, ilegible. Se visten como lo demás de ese menú —transparente,
  la línea fina de siempre y el dorado para lo elegido— y las dos mitades
  reparten el ancho, que es lo que hace que se lea como un interruptor y no
  como un botón estirado.
*/
.mp-side .lang-switch {
  width: 100%;
  padding: 3px;
  gap: 3px;
  background: transparent;
  border: 1px solid var(--app-line-soft, rgba(244, 234, 213, 0.08));
  border-radius: 10px;
}
.mp-side .lang-opt {
  flex: 1;
  padding: 7px 0;
  border-radius: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  opacity: 1;
  color: var(--cream-mute);
}
.mp-side .lang-opt:hover { color: var(--cream); background: rgba(177, 147, 101, 0.06); }
.mp-side .lang-opt.es-activo {
  background: rgba(177, 147, 101, 0.14);
  color: var(--gold-soft);
}

/* La barra de arriba en móvil también es oscura, pero ahí es una píldora
   pequeña al lado de la foto, no un bloque a lo ancho. */
.mp-appbar .lang-switch {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--app-line-soft, rgba(244, 234, 213, 0.08));
}
.mp-appbar .lang-opt { color: var(--cream-mute); }
.mp-appbar .lang-opt.es-activo {
  background: rgba(177, 147, 101, 0.18);
  color: var(--gold-soft);
}

.lang-switch.es-compacto .lang-opt { padding: 4px 8px; font-size: 10px; }

/* En la barra de la portada el sitio es el que es: el interruptor no puede
   empujar los botones fuera. Va antes de ellos y nunca se encoge. */
.nav-menu .lang-switch { margin-right: 4px; flex: 0 0 auto; }
.nav-menu .lang-opt { font-size: 10px; letter-spacing: 0.08em; padding: 4px 8px; }

/* La copia de móvil no existe mientras quepa el menú entero. */
.lang-movil { display: none; }

/*
  Con la hamburguesa a la vista se cambian las tornas: el interruptor del menú
  desaparece y sale el de la barra, pegado a las tres rayas.

  Dentro del menú, cambiar de idioma costaba abrir la hamburguesa primero: dos
  toques, y escondido justo para quien no lee español y viene a buscarlo.

  El margen automático lo empuja hasta la derecha; la hamburguesa pierde el
  suyo y se queda al lado, en vez de irse las dos a extremos opuestos.
*/
@media (max-width: 1200px) {
  .nav-menu .lang-switch { display: none; }

  .lang-movil {
    display: inline-flex;
    margin-left: auto;
    flex: 0 0 auto;
  }
  /* La barra separa a sus hijos 24px; entre el idioma y las tres rayas eso
     es demasiado aire y deja de leerse como una pareja. */
  .nav-inner > .nav-toggle { margin-left: -6px; }
  /* Si además hay carrito, el hueco se lo lleva él y el idioma va detrás,
     igual de pegado a la hamburguesa. */
  .nav-inner > .sh-top-actions ~ .lang-movil { margin-left: 0; }
}

/* ---------------------------------------------------------------
   Barras de los paneles (owner, clienta, coach)
   --------------------------------------------------------------- */

/* El idioma y la foto de perfil son el mismo bloque: el de "quién soy y cómo
   lo leo". Sueltos, el reparto de la barra dejaba el interruptor plantado en
   mitad del hueco, sin pertenecer a nada. */
.topbar-fin {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .topbar-fin { gap: 8px; }
}

/* El interruptor flotante es la red de seguridad de las pantallas sueltas.
   Donde la página ya trae su propia barra (portada, panel de la clienta,
   panel owner, coaches), sobra y desaparece. Así una pantalla nueva sin
   cabecera nunca se queda sin poder cambiar de idioma. */
.lang-flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  background: rgba(12, 9, 6, 0.82);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.6);
  color: #f4ead5;
}
body:has(.nav) .lang-flotante,
body:has(.mp-shell) .lang-flotante,
body:has(.ad-shell) .lang-flotante,
body:has(.mp-appbar) .lang-flotante { display: none; }

@media (max-width: 640px) {
  /* Sin taparle el botón de enviar a un formulario. */
  .lang-flotante { bottom: 12px; right: 12px; }
}