/* ==========================================================================
   PWA.CSS — InnHub
   Barra de navegación inferior (móvil), modo standalone (app instalada),
   barra "sin conexión" y banner de instalación.
   Cargar DESPUÉS de mobile.css.
   ========================================================================== */

:root {
  --pwa-bottomnav-h: calc(64px + env(safe-area-inset-bottom));
  /* Botón flotante de chats en móvil: tamaño y separación respecto a la barra. */
  --pwa-fab-size: 48px;
  --pwa-fab-gap: 16px;
  --pwa-fab-bottom: calc(var(--pwa-bottomnav-h) + var(--pwa-fab-gap));
}

/* ==========================================================================
   1. NAVEGACIÓN MÓVIL — solo < 992px (en desktop manda el sidebar)
   En móvil NO hay sidebar ni hamburguesa: la barra inferior (3 pestañas + "Más")
   es la única navegación. Ver Views/Shared/_BottomNav.cshtml.
   ========================================================================== */
.pwa-bottom-nav,
.pwa-topbar-brand {
  display: none;
}

@media (max-width: 991.98px) {
  .dev-sidebar,
  .dev-sidebar-overlay,
  .dev-topbar__toggle {
    display: none !important;
  }

  .pwa-topbar-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: var(--dev-radius-md);
  }

  .pwa-topbar-brand img {
    width: 30px;
    height: 30px;
    display: block;
  }

  .pwa-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;
    display: flex;
    align-items: stretch;
    background: var(--dev-color-surface);
    border-top: 1px solid var(--dev-color-border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  [data-theme="dark"] .pwa-bottom-nav {
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.45);
  }

  /* Cada pestaña es una columna de dos filas de altura FIJA (icono 30px + texto
     14px): así todos los iconos quedan a la misma altura, tenga o no badge y sea
     el texto largo o corto. */
  .pwa-bottom-nav__item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    margin: 0;
    border: 0;
    background: none;
    text-decoration: none;
    font: inherit;
    color: var(--dev-color-text-muted);
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dev-transition-fast, 120ms ease-in-out);
  }

  .pwa-bottom-nav__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 30px;
    border-radius: 999px;
    transition: background-color var(--dev-transition-fast, 120ms ease-in-out);
  }

  .pwa-bottom-nav__icon .dev-icon {
    display: block;
    width: 22px;
    height: 22px;
    stroke-width: 1.9;
  }

  .pwa-bottom-nav__label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: var(--dev-font-weight-medium, 500);
    line-height: 14px;
    letter-spacing: -0.01em;
  }

  .pwa-bottom-nav__item:active .pwa-bottom-nav__icon {
    background: var(--dev-color-bg-subtle);
  }

  /* Activa: píldora detrás del icono en lugar de la raya superior. */
  .pwa-bottom-nav__item--active {
    color: var(--dev-color-primary-soft-text, var(--dev-color-primary));
  }

  .pwa-bottom-nav__item--active .pwa-bottom-nav__icon,
  .pwa-bottom-nav__item--active:active .pwa-bottom-nav__icon {
    background: color-mix(in srgb, var(--dev-color-primary) 18%, transparent);
  }

  .pwa-bottom-nav__item--active .pwa-bottom-nav__label {
    font-weight: var(--dev-font-weight-bold, 600);
  }

  .pwa-bottom-nav__badge {
    position: absolute;
    top: -3px;
    left: calc(50% + 5px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    border: 2px solid var(--dev-color-surface);
    background: var(--dev-color-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
  }

  /* Deja aire para que el contenido no quede bajo la barra. */
  .dev-content {
    padding-bottom: calc(var(--pwa-bottomnav-h) + 12px) !important;
  }

  /* Sube los elementos flotantes por encima de la barra. */
  .dev-scrolltop {
    bottom: calc(var(--pwa-bottomnav-h) + 12px);
  }

  .dev-toast-list:not([class*="--top"]) {
    bottom: calc(var(--pwa-bottomnav-h) + 12px);
  }

  /* ---- Botón flotante de chats (sf-chat-fab, ver _ChatFab.cshtml) ----
     Por encima de la barra y alineado a su borde derecho, sin tapar ninguna
     pestaña. Lo que antes ocupaba esa esquina se reacomoda alrededor:
       · dock del chat minimizado → a la izquierda del botón, centrado con él;
       · panel de la lista        → justo encima del botón;
       · "volver arriba" y toasts → encima del botón. */
  .sf-chat-fab {
    right: calc(var(--pwa-fab-gap) + env(safe-area-inset-right));
    bottom: var(--pwa-fab-bottom);
    width: var(--pwa-fab-size);
    height: var(--pwa-fab-size);
  }

  .sf-chat-fab__panel {
    right: calc(var(--pwa-fab-gap) + env(safe-area-inset-right));
    bottom: calc(var(--pwa-fab-bottom) + var(--pwa-fab-size) + 10px);
    width: min(360px, calc(100vw - 2 * var(--pwa-fab-gap) - env(safe-area-inset-left) - env(safe-area-inset-right)));
    max-height: min(420px, calc(100dvh - var(--pwa-fab-bottom) - var(--pwa-fab-size) - 90px));
  }

  .sf-chat-dock {
    right: calc(var(--pwa-fab-gap) + env(safe-area-inset-right));
    bottom: var(--pwa-fab-bottom);
  }

  body:has(#sfChatFab) .sf-chat-dock {
    right: calc(var(--pwa-fab-gap) + var(--pwa-fab-size) + 10px + env(safe-area-inset-right));
    bottom: calc(var(--pwa-fab-bottom) + 6px);
  }

  body:has(#sfChatFab) .dev-scrolltop {
    right: calc(var(--pwa-fab-gap) + 6px + env(safe-area-inset-right));
    bottom: calc(var(--pwa-fab-bottom) + var(--pwa-fab-size) + 12px);
  }

  body:has(#sfChatFab) .dev-toast-list:not([class*="--top"]) {
    bottom: calc(var(--pwa-fab-bottom) + var(--pwa-fab-size) + 12px);
  }

  /* Que el último renglón de la página no quede debajo del botón. */
  body:has(#sfChatFab) .dev-content {
    padding-bottom: calc(var(--pwa-fab-bottom) + var(--pwa-fab-size) + 12px) !important;
  }

  /* Con la hoja "Más" abierta, el botón (z-1055) quedaría por encima de su fondo. */
  body:has(.pwa-more-sheet.show, .pwa-more-sheet.showing) .sf-chat-fab,
  body:has(.pwa-more-sheet.show, .pwa-more-sheet.showing) .sf-chat-fab__panel,
  body:has(.pwa-more-sheet.show, .pwa-more-sheet.showing) .sf-chat-dock {
    visibility: hidden;
  }
}

/* ---- Hoja "Más" (offcanvas-bottom de Bootstrap, tematizado por el design system) ---- */
.pwa-more-sheet.offcanvas-bottom {
  --bs-offcanvas-height: auto;
  max-height: 80dvh;
  border-top: 0;
  border-radius: var(--dev-radius-lg, 1rem) var(--dev-radius-lg, 1rem) 0 0;
  box-shadow: var(--dev-shadow-lg, 0 -4px 16px rgba(0, 0, 0, 0.18));
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.pwa-more-sheet__grip {
  width: 36px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: var(--dev-color-border);
}

.pwa-more-sheet__header.offcanvas-header {
  border-bottom: 0;
  padding: 6px 12px 2px 16px;
}

.pwa-more-sheet__title {
  margin: 0;
  font-size: 15px;
  font-weight: var(--dev-font-weight-bold, 600);
  color: var(--dev-color-text);
}

.pwa-more-sheet__body.offcanvas-body {
  padding: 8px 16px 16px;
}

.pwa-more-sheet__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pwa-more-sheet__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 88px;
  padding: 12px 6px;
  border-radius: var(--dev-radius-md);
  background: var(--dev-color-bg-subtle);
  color: var(--dev-color-text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.pwa-more-sheet__item:hover,
.pwa-more-sheet__item:active {
  color: var(--dev-color-text);
  background: color-mix(in srgb, var(--dev-color-text) 8%, var(--dev-color-bg-subtle));
}

.pwa-more-sheet__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--dev-color-surface);
  color: var(--dev-color-text-muted);
}

.pwa-more-sheet__icon .dev-icon {
  display: block;
  width: 20px;
  height: 20px;
}

.pwa-more-sheet__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: var(--dev-font-weight-medium, 500);
  line-height: 16px;
}

.pwa-more-sheet__item--active,
.pwa-more-sheet__item--active:hover {
  color: var(--dev-color-primary-soft-text, var(--dev-color-primary));
  background: color-mix(in srgb, var(--dev-color-primary) 14%, var(--dev-color-surface));
}

.pwa-more-sheet__item--active .pwa-more-sheet__icon {
  background: var(--dev-color-primary);
  color: var(--dev-color-on-primary);
}

.pwa-more-sheet__release {
  margin: 14px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--dev-color-text-muted);
}

/* ==========================================================================
   2. BARRA "SIN CONEXIÓN"
   ========================================================================== */
.pwa-offline-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 14px;
  padding-top: calc(7px + env(safe-area-inset-top));
  background: var(--dev-color-warning, #ea580c);
  color: #fff;
  font-size: 12.5px;
  font-weight: var(--dev-font-weight-medium, 500);
  text-align: center;
  transform: translateY(-100%);
  transition: transform 220ms ease;
}

.pwa-offline-bar--show {
  transform: translateY(0);
}

.pwa-offline-bar__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.9;
  animation: pwa-pulse 1.4s ease-in-out infinite;
}

@keyframes pwa-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-offline-bar { transition: none; }
  .pwa-offline-bar__dot { animation: none; }
}

/* ==========================================================================
   3. BANNER "INSTALAR APP"
   ========================================================================== */
.pwa-install-banner {
  position: fixed;
  z-index: 1045;
  left: 50%;
  bottom: calc(var(--pwa-bottomnav-h) + 14px);
  transform: translate(-50%, 160%);
  width: calc(100vw - 28px);
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--dev-radius-lg, 1rem);
  background: var(--dev-color-surface);
  border: 1px solid var(--dev-color-border);
  box-shadow: var(--dev-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.18));
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pwa-install-banner--show {
  transform: translate(-50%, 0);
}

.pwa-install-banner__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.pwa-install-banner__body strong {
  font-size: 13.5px;
  font-weight: var(--dev-font-weight-bold, 600);
  color: var(--dev-color-text);
}

.pwa-install-banner__body span {
  font-size: 11.5px;
  color: var(--dev-color-text-muted);
  line-height: 1.35;
}

.pwa-install-banner__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

@media (min-width: 992px) {
  .pwa-install-banner {
    left: auto;
    right: 20px;
    bottom: 20px;
    transform: translateY(200%);
  }
  .pwa-install-banner--show {
    transform: translateY(0);
  }
}

/* ==========================================================================
   4. MODO STANDALONE (app instalada) — se siente nativa
   ========================================================================== */
.pwa-standalone,
.pwa-standalone body {
  overscroll-behavior-y: none;
}

.pwa-standalone body {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* El cromo de la app no se selecciona (como una app nativa). */
.pwa-standalone .dev-sidebar,
.pwa-standalone .dev-topbar,
.pwa-standalone .pwa-bottom-nav,
.pwa-standalone .pwa-more-sheet {
  -webkit-user-select: none;
  user-select: none;
}

/* La topbar respeta el notch en standalone. */
.pwa-standalone .dev-topbar {
  padding-top: env(safe-area-inset-top);
  height: calc(60px + env(safe-area-inset-top));
}

/* ==========================================================================
   5. OBJETIVOS TÁCTILES ≥ 40px en móvil (WCAG 2.2)
   ========================================================================== */
@media (max-width: 991.98px) {
  .dev-topbar__toggle,
  .dev-topbar__icon-btn {
    width: 40px;
    height: 40px;
  }

  .dev-user-chip {
    min-height: 40px;
  }

  .dev-nav-link {
    min-height: 44px;
  }
}