/* =====================================================================
   Somos Saúde — PWA UI
   Estilos do botão "Instalar app" (variantes pra landing e sidebar do
   cliente) e do modal de instruções (iOS / fallback).
   ===================================================================== */


/* =============================== BOTÃO INSTALL — LANDING =============================== */
/* Vive na barra utilitária da landing — tema escuro, pill compacto.
   Oculto no desktop por escolha de design (o menu mobile da landing ainda
   exibe o equivalente via `.sh__nav-mobile-install`). Mantemos o estilo
   completo abaixo caso a decisão seja revertida no futuro. */

.btn-install {
  display: none;
  align-items: center;
  gap: 0.5rem;
  height: 2.15rem;
  padding: 0 1rem;
  border: none;
  border-radius: 3px;
  background: linear-gradient(90deg, #55c0db, #247fbe);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(36, 127, 190, 0.32);
  transition: transform 0.18s, filter 0.18s, box-shadow 0.18s;
}

.btn-install i,
.btn-install svg {
  width: 0.95rem;
  height: 0.95rem;
  stroke-width: 2.4;
}

.btn-install:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 6px 16px rgba(36, 127, 190, 0.42);
}

.btn-install[hidden] { display: none; }


/* =============================== BOTÃO INSTALL — SIDEBAR DO CLIENTE =============================== */
/* Linha estilo ação positiva, antes do logout. */

.client-sidebar__install {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 1rem 1.2rem;
  margin-bottom: 0.8rem;
  border: 1px solid rgba(85, 192, 219, 0.28);
  border-radius: 0.8rem;
  background: linear-gradient(135deg, rgba(85, 192, 219, 0.10), rgba(36, 127, 190, 0.10));
  color: #cdefff;
  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  cursor: pointer;
  text-align: left;
  transition: background 200ms ease, border-color 200ms ease, transform 160ms ease;
}

.client-sidebar__install i,
.client-sidebar__install svg {
  width: 1.7rem;
  height: 1.7rem;
  stroke-width: 2;
  color: #82d0ff;
  flex-shrink: 0;
}

.client-sidebar__install:hover {
  background: linear-gradient(135deg, rgba(85, 192, 219, 0.18), rgba(36, 127, 190, 0.18));
  border-color: rgba(85, 192, 219, 0.45);
  transform: translateY(-1px);
}

.client-sidebar__install[hidden] { display: none; }


/* =============================== MODAL DE INSTRUÇÕES (iOS / fallback) =============================== */

.pwa-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(6, 26, 44, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: pwa-modal-fade 180ms ease-out;
}

@keyframes pwa-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pwa-modal__box {
  position: relative;
  width: min(100%, 42rem);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  background: #ffffff;
  border-radius: 1.6rem;
  padding: 3.2rem 2.8rem 2.4rem;
  box-shadow: 0 32px 64px rgba(6, 26, 44, 0.32);
  font-family: "Inter", "Montserrat", system-ui, sans-serif;
  text-align: center;
  animation: pwa-modal-pop 240ms cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-overflow-scrolling: touch;
}

@keyframes pwa-modal-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pwa-modal__close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 3.6rem;
  height: 3.6rem;
  border: none;
  border-radius: 50%;
  background: #f1f5f9;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.pwa-modal__close:hover {
  background: #e2e8f0;
  color: #0b1f33;
}

.pwa-modal__close i,
.pwa-modal__close svg {
  width: 1.8rem;
  height: 1.8rem;
  stroke-width: 2.2;
}

.pwa-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6.4rem;
  height: 6.4rem;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #eff8ff, #d8efff);
  color: #0e6ba6;
  box-shadow: inset 0 0 0 1px rgba(79, 195, 247, 0.22),
              0 10px 26px rgba(14, 107, 166, 0.18);
}

.pwa-modal__icon i,
.pwa-modal__icon svg {
  width: 3rem;
  height: 3rem;
  stroke-width: 1.8;
}

.pwa-modal__title {
  font-size: 1.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0b1f33;
  margin: 0 0 1.6rem;
}

.pwa-modal__steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}

.pwa-modal__steps li {
  position: relative;
  counter-increment: step;
  padding: 1.1rem 1.2rem 1.1rem 4.6rem;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 0.8rem;
  font-size: 1.4rem;
  line-height: 1.5;
  color: #1e293b;
}

.pwa-modal__steps li::before {
  content: counter(step);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #1ea5e9, #0e6ba6);
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: 800;
}

.pwa-modal__steps strong {
  color: #0b1f33;
  font-weight: 700;
}

.pwa-modal__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  height: 4.8rem;
  border: none;
  border-radius: 0.8rem;
  background: linear-gradient(90deg, #0e87cc, #1ea5e9);
  color: #ffffff;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.005em;
  box-shadow: 0 12px 28px rgba(14, 135, 204, 0.32);
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.pwa-modal__cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 16px 36px rgba(14, 135, 204, 0.38);
}


/* =============================== RESPONSIVO =============================== */

@media (max-width: 600px) {

  .pwa-modal { padding: 1rem; }
  .pwa-modal__box {
    padding: 2.4rem 1.6rem 1.6rem;
    border-radius: 1.4rem;
    max-height: calc(100dvh - 1rem);
  }
  .pwa-modal__icon { width: 5.2rem; height: 5.2rem; margin-bottom: 1rem; }
  .pwa-modal__icon i, .pwa-modal__icon svg { width: 2.4rem; height: 2.4rem; }
  .pwa-modal__title { font-size: 1.55rem; margin-bottom: 1.2rem; }
  .pwa-modal__steps { gap: 0.7rem; margin-bottom: 1.4rem; }
  .pwa-modal__steps li {
    font-size: 1.2rem;
    padding: 0.85rem 0.9rem 0.85rem 3.8rem;
    line-height: 1.4;
  }
  .pwa-modal__steps li::before {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.15rem;
    left: 0.8rem;
  }
  .pwa-modal__cta { height: 4.2rem; font-size: 1.3rem; }
  .pwa-modal__close { width: 3rem; height: 3rem; top: 0.8rem; right: 0.8rem; }
  .pwa-modal__close i, .pwa-modal__close svg { width: 1.5rem; height: 1.5rem; }

}

@media (max-width: 768px) {

  /* Na barra utilitária da landing em telas estreitas, o botão pode
     consumir muito espaço — ajusta tamanho mas mantém visível. */
  .btn-install {
    height: 2rem;
    padding: 0 0.85rem;
    font-size: 0.7rem;
  }

}


/* =============================== AJUSTES PWA STANDALONE ===============================
   Quando o app roda instalado (display-mode: standalone) no iPhone com notch /
   Dynamic Island ou no Android com status bar opaca, o conteúdo encosta nas
   bordas do dispositivo. Sem ajuste, o header fica atrás da status bar e o
   botão hamburger não recebe toque. Aqui empurramos header + sidebar pra
   abaixo da safe-area e travamos o fundo do header como branco sólido, pra
   que a área da status bar fique branca em cima e os ícones do sistema
   apareçam corretamente.

   Estas regras só valem no PWA instalado — no navegador normal, nada muda. */

/* Seletor com especificidade extra (body .client-header) pra vencer o
   `padding: 0 1.6rem` da media query mobile do client-somos/admin-somos.css.
   Sem isso, o shorthand `padding` zera o `padding-top` que injetamos. */

@media (display-mode: standalone) {

  body .client-header {
    /* Notch/Dynamic Island + 1rem de respiro extra */
    padding-top: calc(env(safe-area-inset-top) + 1rem);
    padding-left:  1.6rem;
    padding-right: 1.6rem;
    height:      auto;
    min-height:  calc(7.4rem + env(safe-area-inset-top) + 1rem);
    background:  #ffffff;
    backdrop-filter:         none;
    -webkit-backdrop-filter: none;
  }

  /* Sidebar mobile (off-canvas): logo abaixo do notch. */
  body .client-sidebar__brand {
    padding-top: calc(env(safe-area-inset-top) + 0.8rem);
    height:      auto;
  }

  /* Sidebar: respiro acima do home-indicator do iPhone. */
  body .client-sidebar__footer {
    padding-bottom: calc(1.6rem + env(safe-area-inset-bottom));
  }

  /* Conteúdo principal: respiro pro home-indicator também. */
  body .client-main {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (display-mode: standalone) and (max-width: 768px) {
  body .client-header {
    /* No mobile o header base é menor (6.6rem) */
    min-height: calc(6.6rem + env(safe-area-inset-top) + 1rem);
  }
}