/* ══════════════════════════════════════════════════════════
   cabecera-movil.css — Encabezado móvil unificado (P6b, docs/HOJA_DE_RUTA_HEADER_MOVIL.md).

   Celular vertical (≤700 px): la misma fila en todos los módulos →  logo · buscador · Portal · Tema.
   Sin título, sin barra de módulos y sin Manual / Backup / Cerrar sesión en el encabezado (esos tres pasan al pie de la
   barra lateral de íconos). El escritorio no cambia.

   Se enciende con una clase en <body>:   <body class="cabecera-movil" data-cabecera-modulo="IVA">
   Sin esa clase este archivo no hace nada, así que se puede cargar en una página antes de activarla.
   Cada módulo suma sus piezas propias en su entrega (Personal: ph-header y Portal: .bar, ya hechos; Taller usa el mismo encabezado de una fila que IVA y Compras).
   Solo colores de amun-tokens.css.
   ══════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  /* ── Una sola fila ── */
  body.cabecera-movil .admin-header {
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start;
    gap: 8px; row-gap: 0; min-height: 0; padding: .4rem .6rem; position: relative;
  }

  /* Marca: solo el logo (el nombre del módulo lo dice el buscador y lo marca el menú lateral). */
  body.cabecera-movil .admin-header > div:first-child { order: 1; flex: none; min-width: 0; padding-right: 0; }
  body.cabecera-movil .admin-header .admin-title { display: none; }
  body.cabecera-movil .iva-cab-logo, body.cabecera-movil .tr-cab-logo, body.cabecera-movil .fo-cab-logo { height: 34px; }

  /* Buscador: ocupa lo que sobra entre el logo y los íconos. */
  body.cabecera-movil .admin-header .amun-buscar.amun-buscar--cabecera {
    order: 2; flex: 1 1 0; min-width: 0; width: auto; margin: 0;   /* sigue position:relative (buscador.css): la lupa y la × se anclan a la caja */
  }
  body.cabecera-movil .amun-buscar input[type="search"] { padding-right: 30px; }

  /* El desplegable de resultados no puede ser tan angosto como la caja: ocupa todo el ancho de la pantalla (position:fixed).
     La altura (--cab-res-top = borde inferior de la caja + 6 px) la mantiene al día js/cabecera-movil.js; el respaldo
     es el alto medido del encabezado. */
  body.cabecera-movil .admin-header .amun-buscar--cabecera .bsq-res {
    position: fixed; left: .6rem; right: .6rem; top: var(--cab-res-top, calc(var(--header-h) + 6px)); width: auto;
    max-height: min(65vh, 560px);
  }

  /* Íconos: solo Portal y Tema, en ese orden, iguales (32 px). */
  body.cabecera-movil .admin-header-right { order: 3; flex: none; display: flex; padding: 0; gap: 0; margin-left: auto; }   /* margin-left:auto: sin buscador (Transporte) los íconos quedan a la derecha */
  body.cabecera-movil .admin-header-icons { position: static; gap: 6px; }
  body.cabecera-movil .admin-header-icons > .btn-portal { order: 1; }
  body.cabecera-movil .admin-header-icons > #tema-btn {
    order: 2; width: 32px; height: 32px; padding: 0; flex: none; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid rgba(var(--fg-rgb), 0.15); border-radius: 8px; color: rgba(var(--fg-rgb), 0.6);
    font-size: .95rem; cursor: pointer; transition: all 0.2s;
  }
  body.cabecera-movil .admin-header-icons > #tema-btn:hover { border-color: var(--red); color: var(--red-light); }
  /* Cerrar sesión (y, donde los hay, Manual y Backup) salen del encabezado. Los elementos siguen en la página, con sus
     id, porque el código los usa (conectarSalida, el pie de la barra lateral los dispara con click()). */
  body.cabecera-movil .admin-header-icons > :not(.btn-portal):not(#tema-btn) { display: none; }

  /* ── Pie de la barra lateral de íconos: lo que salió del encabezado vive acá (Salir; en Taller y Personal, también Manual y Backup). ──
     Tema y Portal ya están arriba, así que no se repiten. */
  body.cabecera-movil .side-foot {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px; order: 999;
    margin-top: .35rem; padding: .35rem 0 0; border-top: 1px solid var(--border);
  }
  body.cabecera-movil .side-foot #side-tema, body.cabecera-movil .side-foot #side-portal { display: none; }
  body.cabecera-movil .side-foot button {
    width: 100%; min-height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: transparent; border: 0; border-left: 2px solid transparent; color: rgba(var(--fg-rgb), 0.55); cursor: pointer;
  }
  body.cabecera-movil .side-foot button svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  body.cabecera-movil .side-foot button:hover { color: var(--white); }
  body.cabecera-movil .side-foot #side-salir:hover { color: var(--red-light); }
  /* Manual y Backup (Taller, Personal): marcados mientras esa pantalla está abierta, como la pestaña activa de la barra. */
  body.cabecera-movil .side-foot button.on { color: var(--white); border-left-color: var(--rail-acento, var(--red)); background: rgba(var(--fg-rgb), 0.06); }

  /* ── Taller: una sola fila (logo · buscador · Portal y Tema), igual que IVA y Compras. Antes el selector de área bajaba a una
     segunda fila; con un solo área (Taller) se sacó del encabezado (E5b), y con él las reglas de wrap/display:contents. */
  body.cabecera-movil .st-completaro-14 { height: 34px; }   /* el logo del panel medía 48 px de alto de caja: la fila quedaba más alta que en IVA */

  /* ── Personal (.ph-header): la misma fila, y las cuatro vistas (Empleados · Liquidaciones · Convenios y conceptos · Empresa)
     en una segunda fila. Los íconos dejan de estar anclados con position:absolute. ── */
  body.cabecera-movil .ph-header {
    flex-wrap: wrap; align-items: center; justify-content: flex-start;
    gap: 8px; row-gap: .4rem; min-height: 0; padding: .4rem .6rem; position: relative;   /* en celular el encabezado se va al escrolear (la barra de íconos lo reemplaza); en escritorio está oculto */
  }
  body.cabecera-movil .ph-header-left { order: 1; flex: none; min-width: 0; min-height: 0; padding: 0; gap: 0; }
  body.cabecera-movil .ph-header-left svg { height: 34px !important; width: auto !important; }
  body.cabecera-movil .ph-title { display: none; }
  body.cabecera-movil .ph-header .amun-buscar.amun-buscar--cabecera { order: 2; flex: 1 1 0; min-width: 0; width: auto; margin: 0; }
  body.cabecera-movil .ph-header .amun-buscar--cabecera .bsq-res {
    position: fixed; left: .6rem; right: .6rem; top: var(--cab-res-top, calc(var(--header-h) + 6px)); width: auto;
    max-height: min(65vh, 560px);
  }
  /* .ph-header-right (vistas + íconos) deja de ser una caja: sus hijos se acomodan en la fila del encabezado. */
  body.cabecera-movil .ph-header-right { display: contents; }
  body.cabecera-movil .ph-header-icons { order: 3; position: static; margin-left: auto; gap: 6px; }
  body.cabecera-movil .ph-header-icons > .btn-portal { order: 1; }
  body.cabecera-movil .ph-header-icons > #btn-tema { order: 2; }
  /* Manual, Backup y herramientas y Cerrar sesión salen del encabezado (siguen en la página, con su id: el pie los dispara con click()). */
  body.cabecera-movil .ph-header-icons > :not(.btn-portal):not(#btn-tema) { display: none; }
  body.cabecera-movil .ph-vistas { order: 4; flex: 0 0 100%; box-sizing: border-box; margin: 0; }

  /* Pie de Personal: el menú de escritorio (.ph-menu) no se ve en celular, pero su pie sí, como una columna fija abajo a la
     izquierda. No vive en la barra de subsecciones (.ph-sidebar) porque esa se oculta en Convenios y Empresa, y Salir tiene que
     estar en todas las vistas. Se esconde y reaparece junto con la barra (body.ph-tabbar-oculta). */
  body.cabecera-movil .ph-menu { display: contents; }
  body.cabecera-movil .ph-menu > :not(.ph-menu-foot) { display: none; }
  body.cabecera-movil .ph-menu-foot {
    display: flex; flex-direction: column; gap: 2px; position: fixed; left: 0; bottom: 0; width: 44px; box-sizing: border-box; z-index: 90;
    padding: 0; background: var(--bg-panel); border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-radius: 0 6px 0 0;
    transition: transform 0.22s ease;
  }
  body.cabecera-movil.ph-tabbar-oculta .ph-menu-foot { transform: translateX(-100%); }
  body.cabecera-movil .ph-menu-foot #side-tema, body.cabecera-movil .ph-menu-foot #side-portal { display: none; }
  body.cabecera-movil .ph-menu-foot button {
    width: 100%; min-height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: transparent; border: 0; border-left: 2px solid transparent; color: rgba(var(--fg-rgb), 0.55); cursor: pointer;
  }
  body.cabecera-movil .ph-menu-foot button svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  body.cabecera-movil .ph-menu-foot button:hover { color: var(--white); }
  body.cabecera-movil .ph-menu-foot #side-salir:hover { color: var(--red-light); }
  body.cabecera-movil .ph-menu-foot button.on { color: var(--white); border-left-color: var(--rail-acento, var(--red)); background: rgba(var(--fg-rgb), 0.06); }
  /* Convenios y Empresa no tienen barra de subsecciones: el contenido deja 44 px a la izquierda para que el pie no lo tape
     (cuando el pie se esconde al escrolear, vuelve al margen de siempre). */
  body.cabecera-movil.ph-sin-sidebar:not(.ph-tabbar-oculta) .ph-toolbar, body.cabecera-movil.ph-sin-sidebar:not(.ph-tabbar-oculta) .ph-list { padding-left: 44px; }

  /* ── Portal (.bar): logo · buscador · Tema, en una fila. Sin ícono de casa (ya está en el Portal); no se carga cabecera-movil.js
     porque su buscador (#inp-buscar) conserva su texto «Buscar en todo Amun…». ──
     La barra de módulos (Resumen · Taller · Personal · IVA) ya no existe: se elige módulo con las tarjetas de la página y con los íconos
     de la barra lateral (Personal, IVA y Transporte para administradores, y las pestañas de Taller). Avatar, rol, correo y «Salir»
     salen del encabezado (#btn-logout sigue en el HTML: el pie de la barra lateral lo dispara con click()). */
  body.cabecera-movil #portal-screen .bar-in { height: auto; min-height: 0; flex-wrap: nowrap; gap: 8px; padding: .4rem .6rem; }
  body.cabecera-movil #portal-screen .brand { order: 1; flex: none; }
  body.cabecera-movil #portal-screen .brand > div { display: none; }
  body.cabecera-movil #portal-screen .brand svg { height: 34px; width: auto; }
  body.cabecera-movil #portal-screen .grow { display: none; }
  body.cabecera-movil #portal-screen .find { order: 2; flex: 1 1 0; min-width: 0; width: auto; }
  body.cabecera-movil #portal-screen .find kbd { display: none; }
  body.cabecera-movil #portal-screen .find .resultados {
    position: fixed; left: .6rem; right: .6rem; top: calc(var(--header-h) + 6px); width: auto; min-width: 0;
    max-height: min(65vh, 560px);
  }
  body.cabecera-movil #portal-screen #btn-tema { order: 3; }
  body.cabecera-movil #portal-screen .me { display: none; }

  /* Pie de la barra lateral del Portal (Backup para administradores, Manual y Salir): en celular estaba oculto y no había
     cómo cerrar sesión. Queda fijo al fondo de la barra: la barra lleva muchos íconos y se desplaza; el pie no. */
  body.cabecera-movil #portal-screen.con-lateral .lat-pie {
    display: flex; flex-direction: column; gap: 0; margin-top: auto; padding: 0; position: sticky; bottom: -0.35rem;
    background: var(--l-bg); border-top: 1px solid var(--l-line);
  }
  body.cabecera-movil #portal-screen.con-lateral .lat-pie [data-pie="tema"] { display: none; }
  body.cabecera-movil #portal-screen.con-lateral .lat-pie button {
    flex: none; width: 100%; height: auto; min-height: 44px; padding: 0; border: 0; border-left: 2px solid transparent; border-radius: 0;
    background: transparent; color: var(--l-ink);
  }
  body.cabecera-movil #portal-screen.con-lateral .lat-pie button .lat-ico { width: 20px; height: 20px; }
  body.cabecera-movil #portal-screen.con-lateral .lat-pie button:hover { color: var(--l-strong); border-color: transparent; }
  body.cabecera-movil #portal-screen.con-lateral .lat-pie [data-pie="salir"]:hover { color: var(--brand-ink); }
}

/* Celular rotado (≤700 × ≤480): el encabezado no debe ocupar más que antes (shell.css lo compacta; acá se mantiene igual). */
@media (max-width: 700px) and (max-height: 480px) {
  body.cabecera-movil .st-completaro-14, body.cabecera-movil .iva-cab-logo, body.cabecera-movil .tr-cab-logo, body.cabecera-movil .fo-cab-logo { height: 28px; }
  body.cabecera-movil .ph-header-left svg { height: 28px !important; }
  body.cabecera-movil .ph-header { row-gap: 3px; }
  body.cabecera-movil #portal-screen .brand svg { height: 28px; }
  body.cabecera-movil #portal-screen .bar-in { padding-block: 3px; }
  /* Con tan poco alto las pestañas + el pie no entran en la barra: el pie queda fijo al fondo (las pestañas se desplazan
     por encima) para que Salir, Manual y Backup no obliguen a escrolear la barra. */
  body.cabecera-movil .side-foot { position: sticky; bottom: -0.35rem; background: var(--bg-panel); }
}