/* app-header.css: el AppHeader para páginas sin React (2026-10-20).
 *
 * Mismo encabezado que AppHeader.jsx (fila de 64 px a todo el ancho, sin
 * max-width, con relleno de 16 px, 24 px desde 640 y 32 px desde 1024; logo de 40 px, ceja en Source Sans 3 de 12 px, título en
 * Plus Jakarta Sans 16 px, secciones en la misma fila a 16 px del nombre,
 * grupos desplegables, reloj y chip de rol comunes, Salir y menú de 44 px, menú
 * compacto bajo la fila en el teléfono). Lo arma app-header.js
 * (montarAppHeader); este archivo solo lo pinta.
 *
 * Regla de 390 (bajo 640 px, igual que AppHeaderBase.jsx): sin ceja ni
 * separador, logo de 32 px, título de 15 px en hasta 2 líneas, reloj solo con
 * la hora y, si hay menú compacto, Salir y accionesMenu dentro del menú.
 *
 * Colores: los tokens de vls-tokens.css (--color-*-rgb). Cada uno trae de
 * respaldo el MISMO valor del contrato, así la página se ve igual aunque no
 * cargue vls-tokens.css (tours.vlscr.net y las páginas de rezdy-dbs tienen su
 * propio CSS y no lo cargan). Una prueba compara los respaldos con
 * vls-tokens.css: si el contrato cambia, la prueba falla hasta actualizar acá.
 *
 * Todo cuelga de .vah (vls app header) para no chocar con el CSS de la página.
 * Punto de corte: .vah--lg (por defecto, 1024 px) o .vah--md (768 px), como
 * navDesde del componente. Es el respaldo: con ResizeObserver, app-header.js
 * mide el ancho real (medirEncabezado de piezasEncabezado.js) y pone
 * .vah--modo-fila o .vah--modo-compacto, que mandan sobre el punto de corte.
 *
 * Estado activo, uno solo (2026-10-20): .vah-activo en la fila, en el
 * desplegable y en el menú compacto = fondo primary al 10 % y texto primary,
 * ícono en trazo 2.5. Sin subrayado ni barra inferior.
 */

.vah {
  --vah-card: var(--color-card-rgb, 255 255 255);
  --vah-border: var(--color-border-rgb, 231 229 228);
  --vah-foreground: var(--color-foreground-rgb, 28 25 23);
  --vah-muted: var(--color-muted-rgb, 245 245 244);
  --vah-muted-foreground: var(--color-muted-foreground-rgb, 120 113 108);
  --vah-primary: var(--color-primary-rgb, 15 122 61);
  --vah-primary-foreground: var(--color-primary-foreground-rgb, 255 255 255);
  --vah-ring: var(--color-ring-rgb, 15 122 61);
  --vah-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --vah-font-caption: Inter, sans-serif;
  --vah-font-body: "Source Sans 3", system-ui, sans-serif;
  --vah-radius-md: 10px;
  --vah-radius-xl: 18px;
  --vah-shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.08);
  --vah-shadow-md: 0 4px 12px rgba(28, 25, 23, 0.12);
  --vah-shadow-lg: 0 8px 24px rgba(28, 25, 23, 0.14);

  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgb(var(--vah-card));
  border-bottom: 1px solid rgb(var(--vah-border));
  box-shadow: var(--vah-shadow-sm);
  color: rgb(var(--vah-foreground));
  font-family: var(--vah-font-body);
}
.vah, .vah *, .vah *::before, .vah *::after { box-sizing: border-box; }
/* Reinicios con :where() para que pesen lo mismo que una clase sola (0,1,0) y
   las reglas de abajo (.vah-item, .vah-boton) les ganen por orden. Con
   `.vah button` (0,1,1) el botón de un grupo salía con la fuente de la página,
   16 px, sin relleno, y los enlaces y botones sin el gris de muted-foreground. */
.vah :where(h2, p) { margin: 0; }
.vah :where(a) { text-decoration: none; color: inherit; }
.vah :where(button) { font: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; color: inherit; }
.vah :where(svg) { flex-shrink: 0; display: block; }
.vah :focus { outline: none; }
.vah :focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(var(--vah-ring)); }

/* A todo el ancho (2026-10-20): logo pegado a la izquierda y la derecha al
   borde, con relleno fijo de 16 / 24 (640) / 32 px (1024). */
.vah-fila {
  position: relative;
  width: 100%;
  height: 64px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 640px) { .vah-fila { padding: 0 24px; } }
@media (min-width: 1024px) { .vah-fila { padding: 0 32px; } }

/* Marca: logo al hub + separador + nombre del módulo (a 8 px: holgura 2026-10-20) */
.vah-marca { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vah-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex-shrink: 0;
  border-radius: var(--vah-radius-md);
  transition: opacity 150ms ease-out;
}
.vah-logo:hover { opacity: 0.8; }
.vah-logo img { height: 32px; width: auto; object-fit: contain; display: block; }
.vah-separador { display: none; height: 28px; width: 1px; background: rgb(var(--vah-border)); flex-shrink: 0; }
.vah-nombre { display: flex; flex-direction: column; min-width: 0; }
/* La ceja con su fuente fija (no la del body de la página). */
.vah-eyebrow {
  display: none;
  font-family: var(--vah-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: rgb(var(--vah-muted-foreground));
  white-space: nowrap;
}
/* Teléfono: 15 px en hasta 2 líneas; desde 640 px, 16 px en una. */
.vah-titulo {
  font-family: var(--vah-font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 18px;
  color: rgb(var(--vah-foreground));
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media (min-width: 640px) {
  .vah-separador, .vah-eyebrow { display: block; }
  .vah-logo img { height: 40px; }
  .vah-titulo { font-size: 16px; line-height: 24px; -webkit-line-clamp: 1; }
}

/* Secciones en la misma fila, a 16 px del nombre */
/* No se encogen: si falta lugar se corta el título, no se montan sobre el reloj. */
.vah-secciones { display: none; align-items: center; gap: 4px; margin-left: 16px; flex-shrink: 0; }
.vah-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 8px;
  border-radius: var(--vah-radius-md);
  font-family: var(--vah-font-caption);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
  color: rgb(var(--vah-muted-foreground));
  transition: color 150ms ease-out, background-color 150ms ease-out;
}
.vah-item:hover { color: rgb(var(--vah-foreground)); background: rgb(var(--vah-muted)); }
.vah-item.vah-activo, .vah-item.vah-activo:hover { color: rgb(var(--vah-primary)); background: rgb(var(--vah-primary) / 0.1); }
.vah-chevron { transition: transform 150ms ease-out; }
.vah-grupo { position: relative; flex-shrink: 0; }
.vah-grupo[data-abierto] .vah-chevron { transform: rotate(180deg); }
.vah-menu {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 4px;
  min-width: 220px;
  padding: 4px 0;
  background: rgb(var(--vah-card));
  border: 1px solid rgb(var(--vah-border));
  border-radius: var(--vah-radius-md);
  box-shadow: var(--vah-shadow-md);
  z-index: 50;
}
.vah-menu[hidden] { display: none; }
/* En el desplegable cada ítem ocupa su propia fila (como en AppHeader.jsx). */
.vah-menu .vah-item { display: flex; margin: 0 4px; }

/* Derecha: accionesMenu, acciones, reloj, rol, usuario, Salir y menú compacto */
.vah-derecha { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.vah-acciones { display: contents; }
.vah-acciones-menu { display: none; align-items: center; gap: 4px; }
/* Reloj común (RelojEncabezado): 'mar 20 oct · 17:24', en el teléfono solo la hora. */
.vah-reloj {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 8px;
  flex-shrink: 0;
  border: 1px solid rgb(var(--vah-border));
  border-radius: var(--vah-radius-md);
  background: rgb(var(--vah-card));
  color: rgb(var(--vah-muted-foreground));
  font-family: var(--vah-font-body);
  font-size: 13px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vah-reloj-fecha, .vah-reloj-sep { display: none; }
.vah-reloj-hora { font-weight: 500; color: rgb(var(--vah-foreground)); }
/* Chip común del rol (ChipRol). */
.vah-chip-rol {
  display: none;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  flex-shrink: 0;
  border-radius: 9999px;
  background: rgb(var(--vah-muted));
  color: rgb(var(--vah-muted-foreground));
  font-family: var(--vah-font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}
.vah-chip-rol.vah-chip-rol--siempre { display: inline-flex; }
.vah-iniciales {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: rgb(var(--vah-primary) / 0.1);
  color: rgb(var(--vah-primary));
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}
.vah-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--vah-radius-md);
  color: rgb(var(--vah-muted-foreground));
  transition: color 150ms ease-out, background-color 150ms ease-out;
}
.vah-boton:hover { color: rgb(var(--vah-foreground)); background: rgb(var(--vah-muted)); }
.vah-boton.vah-toggle { color: rgb(var(--vah-foreground)); }
/* Con menú compacto, en el teléfono Salir va dentro del menú. */
.vah--menu .vah-salir { display: none; }
@media (min-width: 640px) {
  .vah-acciones-menu { display: flex; }
  .vah-reloj-fecha, .vah-reloj-sep { display: inline; }
  .vah-chip-rol { display: inline-flex; }
  .vah--menu .vah-salir { display: inline-flex; }
  .vah .vah-solo-telefono { display: none; }
  .vah--solo-acciones .vah-toggle, .vah--solo-acciones .vah-compacto { display: none; }
}

/* Menú compacto: panel bajo la fila (la fila sigue midiendo 64 px) */
.vah-compacto {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: rgb(var(--vah-card));
  border-top: 1px solid rgb(var(--vah-border));
  box-shadow: var(--vah-shadow-lg);
  overflow-y: auto;
  max-height: calc(100vh - 64px - env(safe-area-inset-top, 0px));
  max-height: calc(100dvh - 64px - env(safe-area-inset-top, 0px));
}
.vah-compacto[hidden] { display: none; }
/* Mismo relleno lateral que la fila: los ítems quedan alineados con el logo. */
.vah-compacto > nav, .vah-compacto > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
}
@media (min-width: 640px) { .vah-compacto > nav, .vah-compacto > div { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .vah-compacto > nav, .vah-compacto > div { padding-left: 32px; padding-right: 32px; } }
.vah-compacto-usuario {
  padding: 0 16px 8px;
  font-size: 14px;
  line-height: 20px;
  color: rgb(var(--vah-muted-foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vah-compacto-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 16px 8px; }
.vah-compacto-pie { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgb(var(--vah-border)); }
.vah-compacto-pie .vah-compacto-item { width: 100%; text-align: left; }
.vah-compacto-grupo { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.vah-compacto-grupo:first-child { margin-top: 0; }
.vah-compacto-grupo h2 {
  padding: 0 16px 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: rgb(var(--vah-muted-foreground));
}
.vah-compacto-item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: var(--vah-radius-xl);
  font-family: var(--vah-font-caption);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: rgb(var(--vah-foreground));
  transition: background-color 150ms ease-out;
}
.vah-compacto-item:hover { background: rgb(var(--vah-muted)); }
/* El mismo activo que la fila (un solo estilo, 2026-10-20). */
.vah-compacto-item.vah-activo, .vah-compacto-item.vah-activo:hover {
  background: rgb(var(--vah-primary) / 0.1);
  color: rgb(var(--vah-primary));
}

/* Puntos de corte: desde ahí las secciones van en la fila y el menú compacto se va. */
@media (min-width: 768px) {
  .vah--md .vah-secciones { display: flex; }
  .vah--md .vah-iniciales { display: inline-flex; }
  .vah--md .vah-toggle, .vah--md .vah-compacto { display: none; }
}
@media (min-width: 1024px) {
  .vah--lg .vah-secciones { display: flex; }
  .vah--lg .vah-iniciales { display: inline-flex; }
  .vah--lg .vah-toggle, .vah--lg .vah-compacto { display: none; }
}

/* Modo medido (app-header.js con ResizeObserver): manda sobre los puntos de
   corte. En compacto el <nav> sigue en el DOM sin ancho, invisible y fuera del
   flujo, para poder medir otra vez su ancho natural sin desbordar la página. */
.vah.vah--modo-fila .vah-secciones { display: flex; }
.vah.vah--modo-fila .vah-iniciales { display: inline-flex; }
.vah.vah--modo-fila .vah-toggle, .vah.vah--modo-fila .vah-compacto { display: none; }
.vah.vah--modo-compacto .vah-secciones {
  display: flex;
  position: absolute;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
.vah.vah--modo-compacto .vah-iniciales { display: none; }
.vah.vah--modo-compacto .vah-toggle { display: inline-flex; }
.vah.vah--modo-compacto .vah-compacto:not([hidden]) { display: block; }

@media (prefers-reduced-motion: reduce) {
  .vah *, .vah *::before, .vah *::after { transition: none !important; }
}

/* Diálogo de confirmarHub (2026-10-20): el ConfirmDialog común en un <dialog>
 * nativo. El <dialog> ocupa la pantalla y es su propio fondo (negro al 40 %),
 * así un toque fuera de la caja cae en él y cancela. Caja de 384 px como máximo,
 * 20 px de relleno (24 desde 640 px), botones de 44 px. */
.vah-confirmar {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 16px 16px max(env(safe-area-inset-bottom, 0px), 16px);
  border: 0;
  background: rgba(0, 0, 0, 0.4);
  color: rgb(var(--vah-foreground));
  font-family: var(--vah-font-body);
}
.vah-confirmar[open] { display: flex; align-items: center; justify-content: center; }
.vah-confirmar::backdrop { background: transparent; }
.vah-confirmar-caja {
  width: 100%;
  max-width: 384px;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 20px;
  background: rgb(var(--vah-card));
  border: 1px solid rgb(var(--vah-border));
  border-radius: var(--vah-radius-xl);
  box-shadow: var(--vah-shadow-lg);
}
.vah-confirmar-cabeza { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: rgb(var(--vah-primary)); }
.vah-confirmar-cabeza h2 {
  font-family: var(--vah-font-display);
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: rgb(var(--vah-foreground));
}
.vah-confirmar-caja p { margin-bottom: 20px; font-size: 14px; line-height: 20px; color: rgb(var(--vah-muted-foreground)); }
.vah-confirmar-botones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.vah-confirmar-botones button {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--vah-radius-md);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}
.vah-confirmar-botones button:disabled { opacity: 0.6; cursor: default; }
.vah .vah-confirmar-cancelar { border: 1px solid rgb(var(--vah-border)); font-weight: 500; color: rgb(var(--vah-foreground)); }
.vah .vah-confirmar-ir { background: rgb(var(--vah-primary)); font-weight: 600; color: rgb(var(--vah-primary-foreground)); }
@media (min-width: 640px) {
  .vah-confirmar-caja { padding: 24px; }
  .vah-confirmar-botones button { flex: 0 0 auto; }
}