/* ============================================================
   BARRA INFERIOR DEL MÓVIL + CABECERA UNIFORME (oct-2026)
   ------------------------------------------------------------
   Va en el <head> de las páginas con la cabecera común (10-oct-2026); si
   no, la carga assets/js/barra-inferior.js (en el Estudio, estudio-movil.js
   carga ese script). Todo lo
   visible va dentro de media queries de móvil: en ordenador nada cambia.
     · La barra se dibuja hasta 900 px, pero fuera del Estudio solo se
       ve hasta 767 px (de 768 a 900 px se esconde: ver más abajo).
     · En el Estudio (crear.html), cuya vista de móvil llega hasta
       900 px, la barra es la misma (cy-barra--estudio) y su cabecera
       móvil imita la de fuera: último bloque de esta hoja.

   Medidas y colores: tokens de tokens.css (--alto-barra-inferior,
   --boton-central-*, --labio-tecla, --verde-cocuyo…). Cada var() lleva
   su valor de respaldo por si una página aún sirve un tokens.css viejo.
   ============================================================ */

/* Marca de «hoja ya puesta» (10-oct-2026): la página trae esta hoja en su
   <head> (sola o dentro de un paquete de build-css) y el JS la da por
   lista desde el primer pintado, sin volver a pedirla. */
:root { --cy-hoja-barra: 1; }

/* Menú ☰ abierto después de bajar por la página (auditoría cine-01).
   familia.css bloquea el desplazamiento con overflow:hidden en <html> Y en
   <body>; entonces <body> se convierte en su propia caja con scroll, la
   cabecera «pegajosa» deja de seguir a la pantalla y se queda arriba del
   todo, fuera de la vista: el menú aparecía sin su botón X para cerrarlo.
   Basta con bloquear el desplazamiento solo en <html>: <body> recorta lo
   que sobra sin volverse una caja con scroll y la cabecera sigue visible.
   Llega hasta 1079 px porque la hoja ☰ también existe en tableta y allí
   pasaba lo mismo (en ordenador no hay hoja). «visible» es el respaldo
   para navegadores que aún no conocen «clip».
   Respaldo para iPhone con iOS anterior a 16 (no comprobado en un aparato
   real): allí overflow:hidden en <html> puede no frenar el dedo, así que
   además se corta el «rebote» que arrastra el fondo al llegar al final de
   la hoja (overscroll-behavior). La hoja ya lo tiene en familia.css. */
@media (max-width: 1079px) {
  html.f-sin-scroll body { overflow: visible; overflow: clip; }
  html.f-sin-scroll { overscroll-behavior: none; }
}

/* Fuera del móvil, ni la barra ni el botón Precios de la cabecera existen. */
.cy-barra, .cy-cab-precios { display: none; }

/* ---------- La barra ----------
   Hasta 900 px. Fuera del Estudio, de 768 a 900 px se esconde enseguida
   (siguiente bloque): en tableta las páginas públicas no llevan barra. */
@media (max-width: 900px) {
  .cy-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav, 100);
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center;
    height: calc(var(--alto-barra-inferior, 56px) + env(safe-area-inset-bottom));
    margin: 0; padding: 0 4px env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--negro-abismo) 96%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--blanco-luz) 7%, transparent);
    font-family: var(--fuente); line-height: 1.1; letter-spacing: 0;
  }
  .cy-barra[hidden] { display: none; }
  /* Mientras la hoja ☰ está abierta, la barra se aparta (no se tapan). */
  html.f-sin-scroll .cy-barra { display: none; }
  /* Mientras escribes en un campo de texto (teclado abierto), también se
     aparta, para no tapar lo que escribes (barra-inferior.js pone cy-teclado). */
  html.cy-teclado .cy-barra { display: none; }

  /* Cada botón: icono arriba y nombre debajo, en gris; el actual, en blanco. */
  .cy-barra .cy-barra__item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; height: var(--alto-barra-inferior, 56px); padding: 0 2px;
    color: color-mix(in srgb, var(--blanco-luz) 55%, var(--negro-abismo));
    font-size: 11px; font-weight: 500; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--trans-rapida, 160ms ease);
  }
  .cy-barra .cy-icono { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .cy-barra .cy-barra__texto { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .cy-barra .cy-barra__item:hover, .cy-barra .cy-barra__item[aria-current="page"] { color: var(--blanco-luz); }
  .cy-barra .cy-barra__item:focus-visible { outline: 2px solid var(--verde-cocuyo); outline-offset: -2px; border-radius: var(--radio-md, 12px); }

  /* Activo: los dos faros del cocuyo encendidos encima del icono. */
  .cy-barra .cy-barra__item[aria-current="page"]::before {
    content: ""; position: absolute; top: 5px; left: 50%;
    width: 4px; height: 4px; margin-left: -6px; border-radius: 50%;
    background: var(--verde-cocuyo);
    box-shadow: 8px 0 0 var(--verde-cocuyo), 0 0 6px var(--verde-cocuyo), 8px 0 6px var(--verde-cocuyo);
  }

  /* Crear: la tecla verde del centro (solo icono; el nombre lo leen los
     lectores de pantalla). */
  .cy-barra .cy-barra__crear {
    justify-self: center; flex-direction: row;
    width: var(--boton-central-ancho, 66px); height: var(--boton-central-alto, 44px); padding: 0;
    border-radius: var(--radio-boton-central, 12px);
    background: var(--verde-cocuyo); color: var(--tinta-sobre-verde);
    box-shadow: var(--labio-tecla), 0 0 18px color-mix(in srgb, var(--verde-cocuyo) 28%, transparent);
    transition: transform var(--trans-rapida, 160ms ease), box-shadow var(--trans-rapida, 160ms ease);
  }
  .cy-barra .cy-barra__crear:hover { color: var(--tinta-sobre-verde); }
  .cy-barra .cy-barra__crear:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--verde-cocuyo) 55%, var(--negro-abismo)); }
  .cy-barra .cy-barra__crear .cy-icono { width: 24px; height: 24px; stroke-width: 1.75; }
  .cy-barra .cy-barra__crear .cy-barra__texto {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .cy-barra .cy-barra__crear:focus-visible { outline: none; box-shadow: var(--labio-tecla), var(--anillo-foco); }
  /* Crear encendido (solo en el Estudio, mientras se crea): los dos faros
     van encima de la tecla, en el hueco entre la tecla y el borde de la
     barra (sobre el verde no se verían). */
  .cy-barra .cy-barra__crear[aria-current="page"] { color: var(--tinta-sobre-verde); }
  .cy-barra .cy-barra__crear[aria-current="page"]::before { top: -5px; }
}
/* De 768 a 900 px, la barra solo existe en el Estudio. */
@media (min-width: 768px) {
  .cy-barra:not(.cy-barra--estudio) { display: none; }
}

@media (max-width: 767px) {
  /* ---------- Convivencia con lo que ya había ---------- */
  /* Espacio al final de la página para que la barra no tape el pie, y
     margen al saltar a un campo o a un ancla para que no quede debajo. */
  html.cy-con-barra { scroll-padding-bottom: calc(var(--alto-barra-inferior, 56px) + env(safe-area-inset-bottom)); }
  html.cy-con-barra body { padding-bottom: calc(var(--alto-barra-inferior, 56px) + env(safe-area-inset-bottom)); }
  /* La barra antigua de las páginas legales (Cine · Estudio · Mi cuenta):
     no sale nunca en el móvil, y su hueco de 80 px al final (cocuyo-app.css)
     tampoco. Fuera del Estudio ya no hay barra (Iván, 11-oct-2026), así que
     esto ya no depende de cy-con-barra, que ahora solo pone el Estudio. */
  .nav-inferior { display: none !important; }
  html:not(.cy-con-barra) body.app-page:not(.creator-page) { padding-bottom: env(safe-area-inset-bottom, 0px); }
  /* La barra de ideas de la portada no se monta en móvil (inicio-barra.js);
     esto es el respaldo si la portada se abrió ancha y luego se gira o se
     estrecha la pantalla. En ese caso el héroe recupera su botón
     «Empieza a crear» (la barra de ideas lo había escondido). */
  #inicio-barra { display: none !important; }
  html.in-con-barra .in-hero .in-acciones { display: flex; }
  /* El aviso de cookies sube por encima de la barra (si la barra se ve:
     con la hoja ☰ abierta o escribiendo, vuelve a su sitio). */
  html.cy-con-barra:not(.f-sin-scroll):not(.cy-teclado) #cocuyo-consent { bottom: calc(var(--alto-barra-inferior, 56px) + 8px + env(safe-area-inset-bottom)); }
  /* El aviso «Volver a tu plan» de Planes también sube. */
  html.cy-con-barra .cplan-return { bottom: calc(var(--alto-barra-inferior, 56px) + 12px + env(safe-area-inset-bottom)); }

  /* Selector de idioma del pie: en varias filas, como manda familia.css.
     Respaldo para las portadas de idioma (/en/, /ru/…) que aún sirven un
     paquete de estilos anterior sin esa regla: allí los 20 idiomas iban en
     una sola fila de 1.300 px, la página se ensanchaba y la barra quedaba
     fuera de la pantalla. Es la misma regla de familia.css, nada nuevo. */
  .f-pie .f-idioma { flex-wrap: wrap; max-width: 100%; }

  /* ---------- Cabecera uniforme: logo · Precios (con sesión) · ☰ ----------
     «Empieza a crear» sale de la cabecera, como en Crear: sigue dentro de la
     hoja ☰. Con html[data-cy-acceso] (lo pone el JS), para que sin JavaScript
     quede «Empieza a crear». Sin sesión, en lugar de Precios van
     «Entrar · Crear cuenta» (cabecera-acceso.css, dueño 6-oct-2026). */
  html[data-cy-acceso] .f-cabecera [data-f-empezar] { display: none !important; }
  html[data-cy-acceso] .f-cabecera .f-cabecera__fin { gap: 6px; }
  .f-cabecera .cy-cab-precios {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; max-width: 132px; padding: 0 12px; flex: none;
    border-radius: var(--f-r-pill, 999px);
    font: 500 .8125rem/1 var(--fuente); white-space: nowrap;
    text-decoration: none;
  }
  /* El texto va en su propia cajita para cortarlo con «…» si no cabe, sin
     recortar la zona para el dedo de abajo. */
  .f-cabecera .cy-cab-precios .cy-cab-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .f-cabecera .cy-cab-precios { background: var(--f-sup-2, color-mix(in srgb, var(--blanco-luz) 6%, var(--negro-abismo))); color: var(--blanco-luz); }
  .f-cabecera .cy-cab-precios[aria-current="page"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--verde-cocuyo) 45%, transparent); }
  /* Zona para el dedo de 44 px de alto (se ven de 34 px): una capa
     invisible que sobresale 5 px por arriba y por abajo. Lo justo para no
     invadir al vecino de los lados. */
  .f-cabecera .cy-cab-precios::after { content: ""; position: absolute; inset: -5px 0; }
  .f-cabecera .cy-cab-precios:focus-visible { outline: none; box-shadow: var(--anillo-foco); }
  /* Oculto por el JS mientras no toca (sin sesión, hoja aún sin cargar). */
  .f-cabecera .cy-cab-precios[hidden] { display: none !important; }
}

/* ---------- Zonas para el dedo de 44 px (auditoría móvil, oct-2026) ----------
   Respaldo de familia.css, que no se toca desde aquí: solo en móvil y sin
   cambiar colores ni el tamaño que se ve. */
@media (max-width: 767px) {
  /* Avatar de la cabecera: se sigue viendo un círculo de 34 px, pero la
     zona que responde al dedo mide 44 px (el relleno no lleva fondo). */
  .f-cabecera .f-cuenta #avatar-cine { width: 44px; height: 44px; min-height: 44px; padding: 5px; background-clip: content-box; }
  .f-cabecera .f-cuenta #avatar-cine img { border-radius: 50%; }
  /* Enlaces del pie: filas de 44 px en vez de 32 px con 4 px entre ellas,
     y redes sociales de 44 × 44. */
  .f-pie ul { gap: 0; }
  .f-pie ul a, .f-pie ul button { min-height: 44px; }
  .f-pie .f-pie__redes a { width: 44px; height: 44px; }
  /* Pestañas de sección (Precios: Planes · Recargas · …): se ven de 32 px
     y una capa invisible las alarga hasta 44 px. */
  .f-subnav a { position: relative; }
  .f-subnav a::after { content: ""; position: absolute; inset: -6px 0; }
  /* Vista Cine: la cabecera de vidrio dejaba ver el botón verde del
     cartel al bajar (auditoría cine-08). Fondo casi opaco, mismo negro. */
  html[data-vista="cine"] .f-cabecera { background: color-mix(in srgb, var(--negro-abismo) 92%, transparent); }
}

/* Pantallas muy estrechas: un poco menos de relleno para que quepa todo. */
@media (max-width: 380px) {
  .f-cabecera .cy-cab-precios { padding: 0 10px; max-width: 112px; font-size: .75rem; }
  .cy-barra .cy-barra__item { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .cy-barra .cy-barra__item, .cy-barra .cy-barra__crear { transition: none; }
  .cy-barra .cy-barra__crear:active { transform: none; }
}

/* ============================================================
   EL ESTUDIO (crear.html) EN EL MÓVIL (dueño, 6-oct-2026)
   ------------------------------------------------------------
   Una sola barra de abajo y una sola cabecera: dentro del Estudio se
   ven como fuera. estudio-movil.js monta esta misma barra
   (cy-barra--estudio) y su cabecera .sm-header, que tiene dos caras:
     · Mientras se crea (body.sm-herramienta): «Crear imagen ⌄» y la X,
       como siempre (estudio-movil.css). Aquí no se toca.
     · En Creaciones y en Explorar: como la cabecera móvil de fuera
       (.f-cabecera): el logo a la izquierda y, a la derecha, «Entrar ·
       Crear cuenta» sin sesión o «Precios» y el avatar con sesión, y el
       menú ☰. La barra del ordenador (.studio-public-nav) no sale en
       el móvil: apretada no cabía («Imagen ⌄ Video ⌄ Audio ⌄ Conector…»).
   Esta hoja llega en <head> y los paquetes del Estudio van después, en
   <body>: por eso estos selectores llevan html.cy-con-barra (la pone
   barra-inferior.js) y :not(#f), para ganar (también a sus !important)
   sin tocar los paquetes. Medidas y colores: los de la cabecera común
   (familia.css, --f-*; cabecera-acceso.css para Entrar y Crear cuenta),
   siempre con tokens.
   ============================================================ */
@media (max-width: 900px) {
  /* La barra común ocupa el sitio de la antigua (56 px + zona segura).
     --sm-bottom es el hueco que el Estudio deja abajo para ella (menú de
     la cuenta, avisos, Generar de Audio…). El Estudio reserva su propio
     espacio: sin el relleno de <body> de las páginas públicas. */
  html.cy-con-barra body.studio-workbench { --sm-bottom: var(--alto-barra-inferior, 56px); padding-bottom: 0; }
  /* La misma capa que tenía la barra antigua del Estudio: sus hojas, menús
     y visores quedan por encima, y la barra por encima del contenido. */
  html.cy-con-barra body.studio-workbench .cy-barra { z-index: 65; }

  /* ---------- Cabecera de Creaciones y Explorar ---------- */
  html.cy-con-barra body.studio-workbench:not(#f) .studio-public-nav { display: none !important; }
  html.cy-con-barra body.studio-workbench:not(.sm-herramienta):not(#f) .sm-header {
    display: flex !important; align-items: center; gap: var(--f-e-3, 12px);
    height: calc(var(--f-alto-cabecera, 64px) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(var(--f-gutter, 16px), env(safe-area-inset-right, 0px)) 0 max(var(--f-gutter, 16px), env(safe-area-inset-left, 0px));
    border-bottom: 0;
    background: var(--f-vidrio); -webkit-backdrop-filter: var(--vidrio); backdrop-filter: var(--vidrio);
    box-shadow: 0 1px 0 var(--f-linea);
  }
  /* El título del modo y la X son del compositor. */
  html.cy-con-barra body.studio-workbench:not(.sm-herramienta):not(#f) .sm-header :is(.sm-mode, .sm-close) { display: none; }
  /* Logo: el wordmark de fuera (.f-marca), con las dos O encendidas. */
  html.cy-con-barra body.studio-workbench:not(.sm-herramienta):not(#f) .sm-header button.sm-brand {
    display: inline-flex; align-items: center; gap: 0; flex: none; min-height: 44px; padding: 0;
    border-radius: var(--f-r-control, 10px);
    font: 650 1.125rem/1 var(--f-fuente, var(--fuente)); letter-spacing: .07em; color: var(--f-texto);
    direction: ltr; /* en árabe y urdu la marca se sigue leyendo COCUYO */
  }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-brand .o-viva { color: var(--f-lima); }

  /* A la derecha: Entrar · Crear cuenta, o Precios · avatar; y el ☰. */
  html.cy-con-barra body.studio-workbench:not(.sm-herramienta):not(#f) .sm-header .sm-cab {
    display: flex; align-items: center; gap: 6px; min-width: 0; margin-inline-start: auto;
  }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab [hidden],
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab[hidden],
  html.cy-con-barra body.studio-workbench.sm-herramienta:not(#f) .sm-header .sm-cab { display: none !important; }
  /* Pastillas de 34 px (como Entrar, Crear cuenta y Precios de fuera), con
     una capa invisible que las alarga a 44 px para el dedo. */
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__pastilla {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 1 auto; min-width: 48px;
    height: 34px; max-width: 132px; padding: 0 12px;
    border-radius: var(--f-r-pill, 999px);
    font: var(--f-peso-ui, 500) .8125rem/1 var(--f-fuente, var(--fuente));
    white-space: nowrap; text-decoration: none;
    transition: background var(--f-rapido, 160ms ease), box-shadow var(--f-rapido, 160ms ease);
  }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__pastilla > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__pastilla::after { content: ""; position: absolute; inset: -5px 0; }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__entrar { color: var(--f-texto); background: transparent; box-shadow: inset 0 0 0 1px var(--f-linea-fuerte); }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__entrar:hover { background: var(--f-sup-2); }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__alta { color: var(--f-lima-tinta); background: var(--f-lima); font-weight: 600; }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__alta:hover { background: var(--f-lima-hover); box-shadow: var(--f-luz); }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__precios { flex: none; color: var(--blanco-luz); background: var(--f-sup-2); }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__precios:hover { background: var(--f-sup-3); }
  /* Avatar: círculo con los dos faros y zona de 44 px para el dedo (como
     #avatar-cine en la cabecera de fuera). */
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header button.sm-cab__avatar {
    display: inline-grid; place-items: center; flex: none;
    width: 44px; height: 44px; min-height: 44px; padding: 5px; margin: 0;
    border: 1px solid color-mix(in srgb, var(--verde-cocuyo) 48%, transparent); border-radius: 50%;
    background: var(--f-sup-3); background-clip: content-box;
    box-shadow: var(--glow-suave); color: var(--f-texto);
  }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__avatar .faros { display: inline-flex; align-items: center; gap: .28em; }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__avatar .faros i {
    display: block; width: .4rem; height: .4rem; border-radius: 50%;
    background: var(--verde-cocuyo); box-shadow: 0 0 6px var(--verde-cocuyo);
  }
  /* ☰: abre la hoja del Estudio (Imagen, Video, Audio, Apps, Útiles,
     Conectores, Comunidad y Precios), como el ☰ de fuera. */
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header button.sm-cab__menu {
    display: inline-grid; place-items: center; flex: none;
    width: 44px; height: 44px; min-height: 44px; margin: 0; margin-inline-end: -6px; padding: 0;
    border-radius: var(--f-r-pill, 999px); background: transparent; color: var(--f-texto);
  }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__menu:hover { background: var(--f-sup-2); }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__menu .ic { width: 20px; height: 20px; }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header :is(.sm-cab__pastilla, .sm-cab__avatar, .sm-cab__menu, .sm-brand):focus-visible { outline: none; box-shadow: var(--anillo-foco); }
  /* Aviso breve bajo la cabecera (borrador que no se pudo guardar). */
  html.cy-con-barra body.studio-workbench:not(.sm-herramienta):not(#f) .sm-aviso:not([hidden]) {
    position: fixed; top: calc(var(--f-alto-cabecera, 64px) + 8px + env(safe-area-inset-top, 0px)); left: 16px; right: 16px; z-index: 70;
    margin: 0; padding: 12px 14px; border: 1px solid var(--f-linea-fuerte); border-radius: var(--f-r-control, 10px);
    background: var(--f-sup-2); color: var(--f-texto); font: 500 14px/1.4 var(--fuente);
  }
}
/* Tableta (768-900 px): pastillas un poco mayores, como fuera. */
@media (min-width: 768px) and (max-width: 900px) {
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__pastilla { height: 36px; max-width: 168px; padding: 0 14px; font-size: .875rem; }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__pastilla::after { inset: -4px 0; }
}
/* Pantallas muy estrechas: como fuera, logo y pastillas algo menores. */
@media (max-width: 380px) {
  html.cy-con-barra body.studio-workbench:not(.sm-herramienta):not(#f) .sm-header button.sm-brand { font-size: 1rem; }
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__pastilla { max-width: 112px; padding: 0 10px; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  html.cy-con-barra body.studio-workbench:not(#f) .sm-header .sm-cab__pastilla { transition: none; }
}