/* AQUÍ VIVE LA BARRA DEL SITIO PÚBLICO EN EL TELÉFONO, Y NADA MÁS. NUNCA. */
/*
  ── QUÉ ES ESTA HOJA ──────────────────────────────────────────────────────
  La barra de arriba del sitio público, por debajo de 720px, para las DOS
  barras que hay: la cápsula de index.html (con sus vistas) y la de
  kallpa-landing.css (planes, plataforma, como-trabajamos y ayuda). Una sola
  regla para lo que comparten: si cada una se arreglara por su lado, en un mes
  volverían a separarse. Por encima de 720 no hace nada: el escritorio y la
  tableta no se mueven (lo mide la huella, a 1440 y a 820).

  Cualquier otra cosa —un ajuste de una tarjeta, un color, un margen que no
  sea de la barra— NO va aquí. Esta hoja no es el cajón de sastre del
  proyecto.

  ── CÓMO ENGANCHA ─────────────────────────────────────────────────────────
  Por atributos data-barra que llevan las dos barras en el HTML:
    cabecera   el <header>
    fila       la fila de dentro (la cápsula de index, .nav-in de la landing)
    logo       el logo
    menu       el botón ☰ (solo index; la landing tiene su tira de enlaces)
    enlaces    los enlaces de la barra (en la landing, la tira que se desliza)
    tema       el botón de tema
    acciones   «Iniciar sesión» y «Registrarse» / «Empezar gratis»
    desplegable  el menú que abre el ☰ (solo index)
    hueco      el espaciador que deja la cabecera fija de index
    asistente  el botón del asistente (solo index)
  La lista de páginas que la cargan la vigila tests/barra-movil-cargada.test.js.

  ── POR QUÉ HAY !important ────────────────────────────────────────────────
  Esta hoja se carga la última en las cinco páginas (en index, después de su
  <style>), para ganar por orden. Pero index lleva casi todos sus estilos EN
  LÍNEA (style="…"), y a un estilo en línea no le gana ninguna hoja por orden:
  solo con !important, que es lo que ya hace el propio <style> de index. Por
  eso las reglas que pisan esos estilos lo llevan. Viven SOLO en esta hoja,
  y se quitan el día que index deje de llevar estilos en línea (§146 de
  docs/pendientes-panel.md).

  ── LA FORMA (opción C, decidida el 2026-10-05) ───────────────────────────
  Arriba, una banda opaca con el tema de la página: el logo y, en index, el ☰;
  el botón de tema a la derecha. En la landing, debajo, su tira de enlaces
  (que se desliza; no se añade un menú). Abajo, una franja fija y opaca con
  entrar y registrarse, y en index el asistente dentro de ella. Lo que se
  toca, 44px. El contenido lleva el hueco de las dos.
*/
@media (max-width: 720px) {
  /* ── Arriba: banda opaca con el tema de la página ──
     Opaca para que lo que pase por detrás no se lea a medias. Sin
     backdrop-filter: además de no hacer falta, un backdrop-filter convierte
     la cabecera en el contenedor de los position:fixed de dentro, y el botón
     de tema y la franja de abajo dejarían de colocarse respecto a la
     pantalla. En columna, para que el desplegable abra DEBAJO de la fila y no
     encima (en el HTML de index va antes). */
  [data-barra="cabecera"] {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    background: var(--panel) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--line) !important;
  }
  [data-barra="fila"] {
    order: 0;
    min-height: 64px !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px 68px 10px 16px !important;  /* a la derecha, el sitio del botón de tema */
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    gap: 8px 12px !important;
    box-sizing: border-box;
  }
  [data-barra="desplegable"] { order: 1; }

  /* ── El desplegable (el ☰ de index), con el acabado del resto del sitio ──
     2026-10-06. Abría bien pero sin terminar: entradas sueltas a 34px del
     borde (el logo está a 16), sin ritmo entre ellas, la actual apenas
     distinta (un fondo casi blanco sobre blanco) y el panel cortando de golpe
     contra la foto de atrás. Nada de esto es nuevo: cada medida sale de algo
     que ya está en index, y por eso vale igual en los dos temas.
       · Final del panel: borde inferior var(--line) y sombra var(--shadow),
         los del desplegable de escritorio de la misma página (bloque
         hayPanel: border-top var(--line) y box-shadow var(--shadow)).
       · Ritmo: filas a todo el ancho separadas por una línea var(--line),
         como la lista de «Las seis dudas que siempre llegan primero».
       · La actual: barra izquierda de 2px var(--acc), fondo var(--bg2) y
         texto var(--ink), el estado elegido de esa misma lista; y en 600,
         el peso de sus títulos.
       · Alineado: 14px de relleno + 2px de la barra = 16px, el relleno de
         la fila de arriba; el texto empieza donde el logo.
       · Alto: 52px, los 44 de lo que se toca más el aire de la lista.
     Lo vigila scripts/verificacion-visual/sondas/menu-desplegable.js. */
  [data-barra="desplegable"] {
    padding: 0 !important;
    gap: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: var(--shadow) !important;
  }
  [data-barra="desplegable"] button {
    display: flex !important;
    align-items: center;
    min-height: 52px;
    padding: 0 16px 0 14px !important;
    border: 0 !important;
    border-left: 2px solid transparent !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ink2) !important;
    box-sizing: border-box;
  }
  [data-barra="desplegable"] button:last-of-type { border-bottom: 0 !important; }
  [data-barra="desplegable"] button[aria-current="page"] {
    border-left-color: var(--acc) !important;
    background: var(--bg2) !important;
    color: var(--ink) !important;
    font-weight: 600 !important;
  }

  /* El color del tema de la página, no el de una portada oscura. */
  [data-barra="logo"] {
    color: var(--ink) !important;
    min-height: 44px;
    display: flex !important;
    align-items: center;
  }
  /* LO QUE NO COMPARTEN: el logo de index son dos imágenes (data-logo
     «oscuro» para fondo claro, «claro» para fondo oscuro) y en la portada
     (data-navdark="1") fuerza la de fondo oscuro. Con la banda en el tema de
     la página, el logo sigue al tema. La landing usa un SVG con currentColor
     y no necesita nada: estas reglas solo encuentran elementos en index. */
  [data-barra="cabecera"][data-navdark="1"] [data-logo="oscuro"] { display: block !important; }
  [data-barra="cabecera"][data-navdark="1"] [data-logo="claro"] { display: none !important; }
  [data-tema="dark"] [data-barra="cabecera"][data-navdark="1"] [data-logo="oscuro"] { display: none !important; }
  [data-tema="dark"] [data-barra="cabecera"][data-navdark="1"] [data-logo="claro"] { display: block !important; }
  [data-barra="menu"] {
    width: 44px !important;
    height: 44px !important;
    margin-left: auto !important;
    color: var(--ink) !important;
    background: transparent !important;
    border-color: var(--line) !important;
  }
  [data-barra="enlaces"] > a,
  [data-barra="enlaces"] button {
    min-height: 44px;
  }

  /* EL COLOR DE LA PÁGINA, TAMBIÉN AQUÍ. En la portada de index, «Iniciar
     sesión» y el botón de tema llevan en línea los colores para fondo oscuro
     (navTinta); sobre la banda opaca con el tema de la página se quedaban en
     1,09:1 de contraste (medido: no se leían). Toman el texto de la página. */
  [data-barra="entrar"],
  [data-barra="tema"] {
    color: var(--ink) !important;
  }
  [data-barra="tema"] { border-color: var(--line) !important; }
  /* Al tocar (en el teléfono, el «hover» se queda puesto tras el toque), index
     pinta estos controles con el verde de marca (#3DBF8C) en reglas que genera
     su motor de plantillas (.scp1:hover…, !important, especificidad 0,2,0).
     Sobre la banda clara ese verde da 2,33:1 (medido): no se lee. Aquí, el
     verde de TEXTO de la página: --accText en index, --mint-text en la
     landing, que es el mismo papel con otro nombre (de ahí la reserva). La
     respuesta al toque se queda; solo se vuelve legible. */
  [data-barra="cabecera"] :is([data-barra="menu"], [data-barra="tema"], [data-barra="entrar"]):hover {
    color: var(--accText, var(--mint-text)) !important;
    border-color: var(--accText, var(--mint-text)) !important;
  }

  /* El botón de tema, arriba a la derecha de la banda (fuera de las
     acciones, que bajan a la franja). Fijo respecto a la pantalla, a la
     altura de la fila. */
  [data-barra="tema"] {
    position: fixed !important;
    top: 10px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    z-index: 71;
  }

  /* ── Abajo: la franja fija y opaca con entrar y registrarse ── */
  [data-barra="acciones"] {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 70;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
    margin: 0 !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--panel) !important;
    border-top: 1px solid var(--line);
  }
  [data-barra="acciones"] > :not([data-barra="tema"]) {
    min-height: 44px;
    width: 100%;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
  }
  /* Con el asistente dentro (solo index), las acciones le dejan su sitio. */
  [data-barra="acciones"][data-con-asistente] {
    padding-right: calc(16px + 44px + 8px) !important;
  }
  [data-barra="asistente"] {
    right: 16px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 72 !important;
  }
  [data-barra="asistente"] > button {
    width: 44px !important;
    height: 44px !important;
  }

  /* ── Los huecos: lo pegajoso no tapa contenido ──
     La franja de abajo mide 44 + 12 + 12 (+ la zona segura del teléfono);
     el contenido termina por encima. El hueco va en el contenedor del flujo
     de cada página (data-barra="pagina"): en la landing es el <body>, pero en
     index el <body> mide lo que la ventana y el contenido se desborda por
     debajo de él, así que un relleno en el <body> caía a 10.000px del final
     real y el pie quedaba 33px debajo de la franja (medido). La cabecera de
     la landing es sticky (va en el flujo y no tapa); la de index es fija y
     deja un espaciador, que pasa a medir lo que la banda. */
  [data-barra="pagina"] {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }
  [data-barra="hueco"] {
    height: 64px !important;
  }
}