/* ═══════════════════════════════════════════════════════════════════════════
   SWEET LITTLE TRAUMA — EL MENÚ ÚNICO (A8)
   ───────────────────────────────────────────────────────────────────────────
   Estilos de lo que arma menu-principal.js: «Más ▾» en la barra de las
   pantallas, el botón fijo «Crear» del celular y la barra del celular: una
   sola fila con la marca, «Empezar» (o la cuenta) y el menú.

   Se carga por JS (menu-principal.js) y, en la portada, con un <link>. Va
   después de app.css y estetica.css, así que a igual especificidad gana esta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Lo que comparten la barra de las pantallas y la de la portada ────────── */
.menu-cerrado { opacity: .6; cursor: default; pointer-events: none; }
.menu-nota {
  margin-left: 8px; padding: 2px 8px; border: 1px solid currentColor; border-radius: 999px;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle;
}
.mas-col a[aria-current="page"], .mega-col a[aria-current="page"] { color: var(--rosa, var(--gr-rosa)); }

/* ═══════════════════════════════════════════════════════════════════════════
   LA BARRA DE LAS PANTALLAS
   ═══════════════════════════════════════════════════════════════════════════ */
.barra .pestanas { gap: 4px; }
.barra .pestanas > a,
.barra .pestanas .mas-boton {
  padding: 10px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500; line-height: 1.2;
  color: var(--tinta-dim, #d5e1e7); white-space: nowrap;
}
.barra .pestanas > a:hover,
.barra .pestanas .mas-boton:hover { color: var(--tinta, #edf2f4); }
.barra .pestanas > a.activa,
.barra .pestanas .mas-boton.activa { background: var(--g2); color: var(--tinta, #edf2f4); }
.barra .pestanas > a:focus-visible,
.barra .pestanas .mas-boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Entre 1181 y 1280 px la barra tiene tres cosas —la marca, las seis entradas y
   las acciones— repartidas en tres columnas, y la de la derecha manda: con
   «Iniciar sesión» y «Empezar gratis» juntos pisaba el final del menú. Acá
   las entradas se achican un poco y «Empezar gratis» se va (queda «Iniciar
   sesión»; «Empezar» sigue en el menú: es «Crear»). Hasta 1180 px la barra
   va con el botón de menú (estetica.css).
   (23/10/2026) Con sesión, la cuenta va cortada a 100 px (como en el celular,
   un nombre largo termina en «…»): con «Tienda» y un nombre de 170 px las
   acciones pisaban «Más» hasta 65 px (Nervo en italiano). Y el aire de los
   costados baja de 28 a 20 px, el mismo que tiene la barra hasta 1180.
   Entre la marca, el menú y las acciones quedan al menos 14 px (el gap de la
   grilla): lo más justo es de 1181 a 1240 con sesión y un nombre largo, en
   italiano, en inglés y en Rabbit y Nervo (revisión del cambio 18). */
@media (min-width: 1181px) and (max-width: 1280px) {
  .barra .pestanas > a,
  .barra .pestanas .mas-boton { padding: 10px 11px; font-size: 13px; }
  .barra .barra-acciones > .boton-acento { display: none; }
  .barra { gap: 14px; padding-inline: 20px; }
  .barra .cuenta-disparador { max-width: 100px; }
}

/* «Más ▾» */
.mas { position: relative; display: flex; }
.mas-boton {
  display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; cursor: pointer; font-family: inherit;
}
.mas-flecha {
  width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.mas.abierto .mas-flecha { transform: rotate(-135deg); margin-top: 3px; }

@media (min-width: 1181px) {
  .mas-panel {
    display: none; position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(calc(-50% + var(--mas-corrida, 0px))); z-index: 120;
    grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: 8px 36px; width: max-content; max-width: calc(100vw - 32px);
    padding: 26px 32px 28px; border: 1px solid var(--g6); border-radius: 16px;
    background: var(--papel-99, #354f5dfc); backdrop-filter: blur(16px); box-shadow: 0 24px 70px #0007;
  }
  .mas.abierto .mas-panel { display: grid; animation: mas-baja .22s cubic-bezier(.22, 1, .36, 1); }
  @keyframes mas-baja { from { opacity: 0; transform: translate(calc(-50% + var(--mas-corrida, 0px)), -6px); } }
  .mas-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .mas-col h4 {
    margin: 0 0 10px; font: 600 11px/1.2 var(--f-rara, system-ui); letter-spacing: .14em; color: var(--tinta-faint, #cad8df);
  }
  .mas-col a {
    display: flex; align-items: center; min-height: 40px; padding: 8px 10px; margin: 0 -10px; border-radius: 8px;
    font-size: 14px; color: var(--tinta, #edf2f4); text-decoration: none; transition: background .15s;
  }
  .mas-col a:hover { background: var(--g2); }
  .mas-col a:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
}
@media (prefers-reduced-motion: reduce) { .mas.abierto .mas-panel { animation: none; } }

/* ── Menú del celular y de la tablet: el botón y el panel abierto ─────────── */
/* Hasta 1180 px (23/10/2026; antes 980): con «Tienda» la barra de la compu no
   entra más abajo. Ver estetica.css. */
@media (max-width: 1180px) {
  /* El botón es solo el icono: dos rayas, como el de la portada. */
  .barra .menu-movil {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    flex: 0 0 auto; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%;
  }
  .menu-movil-raya { display: block; width: 18px; height: 1.6px; border-radius: 1px; background: currentColor; }
  .barra.menu-visible .menu-movil .menu-movil-raya:first-child { transform: translateY(3.8px) rotate(45deg); }
  .barra.menu-visible .menu-movil .menu-movil-raya:last-child { transform: translateY(-3.8px) rotate(-45deg); }

  /* Abierto: las cinco entradas (con «Tienda»), y «Más» desplegado debajo, sin un segundo toque. */
  .barra.menu-visible .pestanas {
    max-height: calc(100vh - 72px); overflow-y: auto; align-content: flex-start;
  }
  .barra.menu-visible .pestanas > a { flex: 1 1 calc(50% - 8px); justify-content: center; text-align: center; border: 1px solid var(--g6); }
  .barra.menu-visible .pestanas > a.activa { border-color: var(--rosa, var(--gr-rosa)); }
  .mas { flex: 1 1 100%; display: block; }
  .mas-boton { display: none; }
  .mas-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; padding: 14px 4px 4px; border-top: 1px solid var(--g6); margin-top: 6px; }
  .mas-col { min-width: 0; }
  .mas-col h4 { margin: 0 0 6px; font: 600 11px/1.2 var(--f-rara, system-ui); letter-spacing: .14em; color: var(--tinta-faint, #cad8df); }
  .mas-col a {
    display: flex; align-items: center; min-height: 44px; padding: 8px 4px; font-size: 14.5px;
    color: var(--tinta, #edf2f4); text-decoration: none; overflow-wrap: anywhere;
  }
  .barra.menu-visible .pestanas .mas-col a { min-height: 44px; padding: 8px 4px; border: 0; font-size: 14.5px; }
}

/* ── El celular: una sola fila, con «Empezar» siempre a la vista ──────────── */
/* La barra, de izquierda a derecha: marca · «Empezar» (o la cuenta) · menú.
   «Iniciar sesión» y el idioma están adentro del menú (shell.js los lleva
   ahí). Medido a 320 px: con los cuatro en la fila, el idioma se cortaba y
   «Iniciar sesión» quedaba pegado al menú. La marca puede encogerse
   (`min-width: 0`); «Empezar», la cuenta y el menú, no.
   Pedido del dueño el 03/10/2026, llevado al diseño original el 04/10/2026:
   «Empezar» es el mismo botón rosa de la compu (estetica.css), en chico, y
   la cuenta sigue siendo su nombre cortado, como siempre. */
@media (max-width: 600px) {
  .barra { gap: 8px; padding: 0 12px; }
  .barra > * { min-width: 0; }
  .barra > .marca { flex: 1 1 auto; max-width: none; }
  .barra .marca .marca-studio { display: none; }
  .barra .barra-acciones { flex: none; gap: 6px; margin-left: auto; }
  .barra .cuenta-disparador, .barra .barra-cuenta { max-width: 74px; }

  /* «Empezar»: el botón rosa de la barra, con letra oscura (9,1 a 1) y 44 px
     de alto para el dedo. */
  .barra .barra-acciones > .boton-empezar {
    flex: none; min-height: 44px; padding: 0 14px; border-radius: 8px;
    font-size: 13px; font-weight: 600; white-space: nowrap;
  }
  .barra .boton-empezar .empezar-largo { display: none; }
  .barra .boton-empezar .empezar-corto { display: inline; }

  /* Adentro del menú, arriba de todo: «Iniciar sesión» a la izquierda y el
     idioma a la derecha, los dos de 44 px. Con sesión queda solo el idioma.
     «Iniciar sesión» es una píldora con borde, como las entradas del menú que
     tiene debajo. */
  .barra.menu-visible .pestanas > .menu-movil-cuenta {
    display: flex; flex: 1 1 100%; align-items: center; justify-content: space-between; gap: 12px;
    padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--g6);
  }
  .barra.menu-visible .menu-movil-cuenta > a {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
    border: 1px solid var(--g6); border-radius: 999px;
    font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--tinta); white-space: nowrap;
  }
  .barra.menu-visible .menu-movil-cuenta > a:hover { border-color: var(--rosa, var(--gr-rosa)); color: var(--tinta); }
  .barra .menu-movil-cuenta .idioma-selector { margin-left: auto; }
}
@media (max-width: 400px) {
  .barra .marca { font-size: 13px; }
  .barra .cuenta-disparador, .barra .barra-cuenta { max-width: 58px; }
}
.empezar-corto { display: none; }
/* La fila de arriba del menú existe solo en el celular: en la compu el idioma
   y «Iniciar sesión» están en la barra y la fila queda vacía. */
.menu-movil-cuenta { display: none; }
/* El idioma, adentro del menú del celular (en la de las pantallas y en la de la
   portada): 44 px de alto y el nombre entero, sin el tope de la barra. Acá
   había un tope de 60 px a 340 px o menos que lo cortaba en «Españ»: el idioma
   ya no está en la barra del celular. */
@media (max-width: 600px) {
  .barra .menu-movil-cuenta .idioma-selector select,
  .studio-portada #nav.menu-abierto .idioma-selector select {
    min-height: 44px; max-width: none; padding: 0 12px; font-size: 14px;
  }
}
/* Colores forzados (contraste alto de Windows): las rayas del menú son un
   fondo de color y el navegador las borraba. Se pintan con el color de los
   botones del sistema. El fondo rosa de «Empezar» también se borra: lleva un
   borde de 1 px para seguir pareciendo un botón. */
@media (forced-colors: active) {
  .menu-movil-raya { forced-color-adjust: none; background: ButtonText; }
}
@media (forced-colors: active) and (max-width: 600px) {
  .barra .barra-acciones > .boton-empezar { border: 1px solid ButtonText; }
}

/* ── Mientras se sabe si hay sesión ──────────────────────────────────────── */
/* Hasta que contesta /api/yo, «Empezar» e «Iniciar sesión» guardan su lugar
   sin verse: con sesión, en su lugar va la cuenta, y antes se veía un instante
   «Empezar» y después la cuenta, con el salto de ancho. La clase la pone
   shell.js (y, en la portada, el HTML) y la saca la respuesta. Si la
   respuesta tarda más de 1,2 s, aparecen igual: lo hace esta animación, así
   que ni un error de JavaScript los deja escondidos. */
.barra.sesion-pendiente .barra-acciones > .boton-empezar,
.barra.sesion-pendiente .barra-acciones > .barra-entrar,
.studio-portada #nav.sesion-pendiente .nav-acciones .cta,
.studio-portada #nav.sesion-pendiente .acceso-cuenta {
  visibility: hidden;
  animation: sesion-sin-respuesta 0s 1.2s forwards;
}
@keyframes sesion-sin-respuesta { to { visibility: visible; } }

/* ═══════════════════════════════════════════════════════════════════════════
   EL BOTÓN FIJO «CREAR», SOLO EN EL CELULAR
   ═══════════════════════════════════════════════════════════════════════════ */
.crear-fijo { display: none; }
@media (max-width: 760px) {
  .crear-fijo {
    position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 80;
    display: inline-flex; align-items: center; gap: 9px; min-height: 50px; padding: 0 28px 0 22px;
    border-radius: 999px; background: var(--acento, var(--gr-rosa)); color: var(--acento-ink, #28161f);
    font: 700 15px/1 var(--f-rara, system-ui); letter-spacing: -.01em; text-decoration: none;
    box-shadow: 0 12px 34px #0009, 0 0 0 1px #00000026;
    transform: translateX(-50%); transition: opacity .25s, transform .3s cubic-bezier(.22, 1, .36, 1);
  }
  .crear-fijo:active { transform: translateX(-50%) scale(.97); }
  .crear-fijo:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
  .crear-fijo.oculto { opacity: 0; pointer-events: none; transform: translate(-50%, 18px); }
  /* «Empezar», arriba, y el fijo, abajo, llevan los dos a /crear/. Sin sesión
     «Empezar» está siempre a la vista (la barra es fija), así que el fijo no
     se suma: dos botones rosas iguales con la misma promesa confundían. Con
     sesión, en la barra va la cuenta y el fijo vuelve. Es la misma regla de la
     portada (portada-identidad.css), acá para las pantallas del Studio. */
  body:has(.barra .boton-empezar) .crear-fijo { display: none; }
  /* Que el pie y el final de cada pantalla no queden debajo del botón (y que
     no quede el hueco cuando el botón no está). El `:where` deja la regla
     con el peso de antes, para que la portada la siga pudiendo pisar. */
  body.con-crear-fijo:where(:not(:has(.barra .boton-empezar))) { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  /* Si suena algo, el botón sube por encima del reproductor. */
  body.con-reproductor .crear-fijo { bottom: calc(var(--player, 68px) + 14px); }
}
@media (prefers-reduced-motion: reduce) { .crear-fijo { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   «INTERFAZ»: EL BOTÓN Y SU LUGAR (12/10/2026)
   Solo existe con el interruptor SLT_INTERFACES prendido (menu-principal.js,
   botonInterfaz; servidor/interfaces.js). Acá va lo que tiene que estar desde
   el primer dibujo —su tamaño y su lugar en la barra, así nada se corre cuando
   llega el resto—; la lista y sus muestras están en app/interfaz.css, que se
   pide recién con el interruptor prendido. Sin el botón, nada de esto aplica.
   ═══════════════════════════════════════════════════════════════════════════ */
.interfaz-selector { position: relative; display: inline-flex; align-items: center; flex: none; }
.interfaz-boton {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 2px;
  border: 0; border-radius: 0; background: none; color: inherit; font: inherit; line-height: 1.2;
  white-space: nowrap; cursor: pointer;
}
/* En la barra de las pantallas, como «Iniciar sesión»: texto, sin caja. */
.barra .interfaz-boton { font-size: 12.5px; font-weight: 500; color: var(--tinta-dim); }
.barra .interfaz-boton:hover,
.barra .interfaz-selector.abierta > .interfaz-boton { color: var(--tinta); }
.interfaz-boton:focus-visible { outline: 2px solid var(--tono-foco, var(--acento, currentColor)); outline-offset: 3px; }

/* Las pantallas con el botón de menú (≤ 1180 px): «Interfaz» va adentro del
   menú abierto, en su propia fila, debajo de la de la cuenta y el idioma. */
.menu-movil-interfaz { display: none; }
@media (max-width: 1180px) {
  .barra.menu-visible .pestanas > .menu-movil-interfaz {
    display: block; flex: 1 1 100%;
    padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--g6);
  }
  .menu-movil-interfaz > .interfaz-selector { display: block; width: 100%; }
  .barra.menu-visible .menu-movil-interfaz .interfaz-boton { font-size: 15px; color: var(--tinta); }
}

/* La portada con el botón de menú (≤ 760 px): en su propia fila, debajo del
   menú abierto (main.js, ordenarBarraPortada, la pone después de .nav-menu). */
@media (max-width: 760px) {
  .studio-portada #nav:not(.menu-abierto) .nav-fila > .interfaz-selector { display: none; }
  .studio-portada #nav.menu-abierto .nav-fila > .interfaz-selector {
    order: 4; flex: 0 0 100%; display: block; width: 100%; padding: 6px 0 2px;
  }
}
@media (max-width: 600px) {
  .studio-portada #nav.menu-abierto .nav-fila > .interfaz-selector { grid-row: 4; grid-column: 1 / -1; }
}
/* Con «Interfaz» la barra de las pantallas suma un botón de unos 50 px, y
   había una franja donde iba justa (medido en castellano, inglés e italiano):
   de 1281 a 1400 px, «Empezar gratis» pasa a «Empezar» (lo mismo que dice en
   el celular), como pasa con «Iniciar sesión» y el idioma en la portada. Sin
   el botón (el interruptor apagado) esto no aplica. (La otra franja, de 981 a
   1100 px, ya va con el botón de menú desde el 23/10/2026.) */
@media (min-width: 1281px) and (max-width: 1400px) {
  .barra:has(.interfaz-selector) .boton-empezar .empezar-largo { display: none; }
  .barra:has(.interfaz-selector) .boton-empezar .empezar-corto { display: inline; }
}