/* Layout del shell global (v4/base.html y partials de v4/components/). Solo layout: el aspecto vive en components/kx.css. */
@layer modules {
  /* Alpine: oculto hasta que inicializa. En la capa más alta para ganar a `display` de cualquier pieza. */
  [x-cloak] { display: none; }

  /* El nav es fixed: la página (kx-page) ya reserva su alto; una página sin kx-page (POS, Gestor, Proveedores) lo reserva aquí. */
  .main-content { min-height: 100dvh; }
  .main-content:not(:has([class~="kx-page"])) { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }

  /* Chip de cuenta (_account_chip.html): identidad dentro del menú; en S solo el avatar. */
  .shell-account__id { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); padding: var(--sp-3); }
  .shell-account__logout { padding: var(--sp-1); }
  .shell-account__branch { padding: var(--sp-3); }
  .shell-account__menu { min-width: min(20rem, calc(100vw - var(--sp-4))); }
  @media (max-width: 40em) { .shell-account__name { display: none; } }

  /* Rango de fechas de _filters.html. */
  .shell-toolbar__date { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .shell-toolbar__date input { width: auto; }
}