/* ══════════════════════════════════════════════════════════
   shell.css — Armazón común de Amun: barra lateral de íconos en celular (≤700 px).
   La usan Taller e IVA (.tab-bar) y Personal (.ph-sidebar); el Portal tiene la suya (.lateral, otro HTML).
   Antes cada CSS tenía su copia; acá vive una sola con los dos nombres de clase.

   Se enlaza DESPUÉS de admin.css / personal.css (así gana donde antes ganaba su bloque).
   Comportamiento (ocultar al escrolear, flecha de reabrir): js/shell.js → railMovil().
   Clases de "oculta": body.tab-bar-oculta (Taller) y body.ph-tabbar-oculta (Personal).
   Variable por módulo: --rail-acento = color del botón activo (por defecto el rojo de Amun; Personal usa el morado).
   ══════════════════════════════════════════════════════════ */

/* Alto del encabezado: valor de respaldo (60 px) igual en Taller, IVA y Personal. El alto real lo mide shell.js
   (medirEncabezado) y lo pisa en línea; el Portal define el suyo (96 px en celular) en portal.css. */
:root { --header-h: 60px; }

/* Base (escritorio): la flecha de reabrir es un recurso exclusivo de la barra móvil. Sin esta regla, en
   escritorio el <button> queda con el estilo por defecto del navegador (una franja suelta). */
.tab-bar-reabrir, .ph-sidebar-reabrir { display: none; }

@media (max-width: 700px) {
  .tab-bar, .ph-sidebar {
    position: fixed; top: var(--header-h); left: 0; width: 44px;
    /* Mide lo que ocupa su contenido (no llega hasta el pie): un desajuste de pocos px con el alto real del
       encabezado pasa casi desapercibido. max-height es la red de seguridad para pantallas bajas. */
    height: auto; max-height: calc(100vh - var(--header-h));
    /* 100dvh: en el celular real la barra de direcciones se esconde al scrollear y corre el 100vh; los
       navegadores sin dvh ignoran esta línea y se quedan con la de arriba. */
    max-height: calc(100dvh - var(--header-h));
    flex-direction: column; align-items: stretch;
    overflow-x: hidden; overflow-y: auto;
    border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
    border-radius: 0 0 6px 0;
    z-index: 90; padding: 0.35rem 0;
    transition: transform 0.22s ease;
  }
  .tab-bar::-webkit-scrollbar, .ph-sidebar::-webkit-scrollbar { width: 0; }

  /* Al escrolear hacia abajo la barra sale de pantalla; al subir, o al tocar la flecha, vuelve. */
  body.tab-bar-oculta .tab-bar,
  body.ph-tabbar-oculta .ph-sidebar { transform: translateX(-100%); }

  .tab-bar-reabrir, .ph-sidebar-reabrir {
    display: none; position: fixed; top: calc(var(--header-h) + 10px); left: 0;
    width: 26px; height: 40px; z-index: 91;
    background: var(--bg-panel); border: 1px solid var(--border); border-left: none;
    border-radius: 0 6px 6px 0; color: rgba(var(--fg-rgb), 0.6);
    font-size: 1.1rem; line-height: 1; cursor: pointer;
    align-items: center; justify-content: center;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.15);
    transition: background 0.2s, color 0.2s;
  }
  .tab-bar-reabrir:hover, .ph-sidebar-reabrir:hover { color: var(--white); }

  /* Con la barra escondida el contenido recupera todo el ancho. Los módulos nuevos fijan el corrimiento con !important
     (p. ej. fondos.css), por eso acá también: gana por especificidad (body + clase) sin depender del orden de los CSS. */
  body.tab-bar-oculta .tab-content { padding-left: 0 !important; }
  body.tab-bar-oculta .tab-bar-reabrir,
  body.ph-tabbar-oculta .ph-sidebar-reabrir { display: flex; }

  .tab-btn, .ph-sidebar-btn {
    display: flex; align-items: center; justify-content: center;
    padding: 0.7rem 0; min-height: 44px;
    border-bottom: none; border-left: 2px solid transparent; flex-shrink: 0;
  }
  .tab-btn.active, .ph-sidebar-btn.active {
    border-left-color: var(--rail-acento, var(--red)); border-bottom-color: transparent;
    background: rgba(var(--fg-rgb), 0.06);
  }

  /* Solo ícono: la etiqueta de texto se oculta (queda disponible vía title="" para accesibilidad). */
  .tab-btn-icon, .ph-sidebar-btn-icon { font-size: 1.2rem; line-height: 1; margin-right: 0; }
  .tab-btn-label, .ph-sidebar-btn-label { display: none; }

  /* Mismo ícono que en escritorio y que el Portal: el dibujo de línea (.tab-ico, lo arma shell-menu.js). El emoji queda
     solo en los botones que no traen dibujo (p. ej. las subpestañas de Viajes e IVA que se suman a la barra en celular). */
  .tab-bar .tab-ico { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .tab-bar .tab-ico ~ .tab-btn-icon { display: none; }
}

/* ══════════════════════════════════════════════════════════
   Barra superior común (v3.82) — js/shell-barra.js. Solo vista nueva de escritorio (≥701 px): Taller, Personal e IVA.
   Boceto «Encabezado común»: A2 (módulo / sección + acción principal + íconos) · B1 (sobre el contenido, junto al menú).
   En la vista actual y en celular no se ve (ahí siguen los encabezados de siempre).
   ══════════════════════════════════════════════════════════ */
.amun-barra { display: none; }
@media (min-width: 701px) {
  body.vista-nueva .amun-barra {
    display: flex; align-items: center; gap: 10px; box-sizing: border-box; height: 44px; padding: 0 1rem;
    background: var(--bar); color: var(--bar-ink); border-bottom: 2px solid var(--brand);
    position: sticky; top: 0; z-index: 80;
  }
  .ab-titulo { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
  .ab-modulo { font: 600 .95rem/1 var(--f-display, 'Oswald', sans-serif); letter-spacing: .1em; text-transform: uppercase; }
  .ab-sep { color: var(--bar-soft); }
  .ab-seccion { color: var(--bar-soft); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; }
  .ab-espacio { flex: 1; }
  .ab-iconos { display: flex; align-items: center; gap: 6px; }
  .ab-ibtn {
    width: 32px; height: 32px; display: grid; place-items: center; padding: 0; flex: none; cursor: pointer;
    background: transparent; border: 1px solid var(--bar-line); border-radius: 8px; color: var(--bar-ink);
  }
  .ab-ibtn:hover { border-color: rgba(255, 255, 255, .45); }
  .ab-ibtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .ab-salir:hover { border-color: var(--red); color: var(--red-light); }
  .ab-accion {
    height: 32px; padding: 0 14px; cursor: pointer; flex: none; white-space: nowrap;
    background: var(--red); border: 1px solid var(--red); color: #fff; border-radius: 8px; font: 600 .82rem var(--f-body, inherit);
  }
  .ab-accion:hover { background: var(--red-dark); border-color: var(--red-dark); }
  .ab-accion:disabled { opacity: .5; cursor: default; }
  .ab-accion[hidden] { display: none; }

  /* La acción principal vive en la barra: se esconde el botón original (solo si la barra llegó a montarse). */
  body.vista-nueva.amun-barra-lista [data-barra-accion] { display: none !important; }

  /* Taller e IVA (grilla menú | contenido): la barra y el contenido comparten la celda para que la barra pueda
     quedar fija arriba (un sticky no sale de su propia fila) y el contenido empieza 44 px más abajo. */
  body.vista-nueva #admin-screen.show > .amun-barra { grid-column: 2; grid-row: 1; align-self: start; }
  body.vista-nueva.amun-barra-lista #admin-screen.show > .tab-content { grid-row: 1; margin-top: 44px; }
}

/* ── Celular rotado de pantalla angosta (≤700 px de ancho y ≤480 de alto, p. ej. 667×375): el encabezado en columna ocupaba
   más de la mitad de la pantalla. Se compacta: logo chico, sin subtítulo, pestañas de módulo y de área/sección más bajas y en
   una sola línea. Los celulares más anchos (~800-930 px rotados) ya pasan al modo escritorio: menú lateral + barra común. ── */
@media (max-width: 700px) and (max-height: 480px) {
  .admin-header > div:first-child svg, .iva-cab-marca svg, .tr-cab-marca svg, .fo-cab-marca svg, .ph-header-left > svg { height: 28px !important; width: auto !important; }
  .st-completaro-14, .st-completaro-15, .iva-cab-logo, .tr-cab-logo, .fo-cab-logo { height: 28px; }
  .admin-title span, .ph-title span { display: none; }
  .ph-vistas { flex-wrap: nowrap; margin-top: .3rem; }
  .ph-vista-tab { flex-direction: row; padding: .3rem .4rem; font-size: .68rem; white-space: nowrap; }
  .ph-vista-tab-label { white-space: nowrap; }
  .admin-header, .ph-header { row-gap: 3px; }
  .admin-header .amun-buscar.amun-buscar--cabecera, .ph-header .amun-buscar.amun-buscar--cabecera { margin: 2px 0 4px; }
}