/* Marca Local PWA — avisos de instalação/atualização, menu e configurações de notificação.
   Usa só as variáveis do tema (main.css :root). */

/* ---- itens do painel de menu ---- */
.ml-pwa-menu{ padding:10px 14px 0; display:grid; gap:10px; }
.ml-pwa-menu:empty{ display:none; }
.ml-pwa-menu__btn{
  display:flex; align-items:center; gap:14px; width:100%; min-height:48px; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; font:600 14px 'Manrope',sans-serif; color:var(--ink); cursor:pointer;
}
.ml-pwa-menu__btn i{ width:20px; color:var(--primary); font-size:16px; text-align:center; }
.ml-pwa-menu__btn:hover{ border-color:var(--primary-light); }
.ml-pwa-menu__btn:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
[data-ml-pwa-install]{ display:none; }
html.ml-pwa-can-install:not(.ml-pwa-standalone) [data-ml-pwa-install],
html.ml-pwa-ios:not(.ml-pwa-standalone) [data-ml-pwa-install]{ display:flex; }

/* ---- cartão flutuante (instalar / iOS / convite de notificações) ---- */
.ml-pwa-card{
  position:fixed; z-index:9000; left:12px; right:12px; margin:0 auto; max-width:456px;
  bottom:calc(max(var(--ml-pwa-offset,0px), env(safe-area-inset-bottom,0px)) + 12px);
  display:grid; grid-template-columns:auto 1fr auto; gap:4px 12px; align-items:start;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:18px; padding:14px 12px 14px 14px;
  box-shadow:0 14px 34px -10px rgba(9,47,47,.45);
  animation:ml-pwa-sobe .35s cubic-bezier(.2,.8,.2,1) both;
}
.ml-pwa-card__icone{
  grid-row:1; width:42px; height:42px; border-radius:12px; flex:none;
  background:linear-gradient(135deg,var(--accent),#f6c369); color:var(--primary-dark);
  display:flex; align-items:center; justify-content:center; font:700 16px 'Fraunces',serif;
}
.ml-pwa-card__corpo{ grid-column:2; min-width:0; }
.ml-pwa-card:not(:has(.ml-pwa-card__icone)) .ml-pwa-card__corpo{ grid-column:1 / span 2; }
.ml-pwa-card__titulo{ margin:0 0 4px; font:600 16px/1.25 'Fraunces',serif; color:var(--ink); }
.ml-pwa-card__texto{ margin:0; font-size:13.5px; line-height:1.5; color:var(--muted); }
.ml-pwa-card__acoes{ grid-column:1 / -1; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin-top:10px; }
.ml-pwa-share{ display:inline-block; vertical-align:-3px; color:var(--primary); margin:0 1px; }

/* iOS: seta indicando a barra do Safari (compartilhar fica no centro da barra inferior do iPhone) */
.ml-pwa-card--ios:not(.ml-pwa-card--ipad)::after{
  content:''; position:absolute; left:50%; bottom:-8px; width:14px; height:14px; margin-left:-7px;
  background:var(--surface); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transform:rotate(45deg);
}

.ml-pwa-btn{
  min-height:44px; padding:0 18px; border-radius:12px; border:1px solid transparent; cursor:pointer;
  font:700 14px 'Manrope',sans-serif;
}
.ml-pwa-btn--primario{ background:var(--primary); color:#fff; }
.ml-pwa-btn--primario:hover{ background:var(--primary-dark); }
.ml-pwa-btn--texto{ background:transparent; color:var(--muted); }
.ml-pwa-btn--texto:hover{ color:var(--ink); }
.ml-pwa-btn:disabled{ opacity:.6; cursor:default; }
.ml-pwa-btn:focus-visible,.ml-pwa-x:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }

.ml-pwa-x{
  grid-column:3; grid-row:1; width:44px; height:44px; margin:-8px -4px 0 0; border:0; background:transparent;
  color:var(--muted); font-size:26px; line-height:1; cursor:pointer; border-radius:12px;
}
.ml-pwa-x:hover{ color:var(--ink); }

/* ---- aviso de nova versão ---- */
.ml-pwa-toast{
  position:fixed; z-index:9001; left:12px; right:12px; margin:0 auto; max-width:456px;
  bottom:calc(max(var(--ml-pwa-offset,0px), env(safe-area-inset-bottom,0px)) + 12px);
  display:flex; align-items:center; gap:10px;
  background:var(--primary-dark); color:#fff; border-radius:16px; padding:10px 6px 10px 16px;
  box-shadow:0 14px 34px -10px rgba(9,47,47,.55);
  animation:ml-pwa-sobe .35s cubic-bezier(.2,.8,.2,1) both;
}
.ml-pwa-toast__txt{ margin:0; flex:1; font-size:13.5px; line-height:1.4; }
.ml-pwa-toast .ml-pwa-btn--primario{ background:var(--accent); color:var(--primary-dark); min-height:40px; white-space:nowrap; }
.ml-pwa-toast .ml-pwa-btn--primario:hover{ background:var(--accent-dark); color:#fff; }
.ml-pwa-toast .ml-pwa-x{ color:rgba(255,255,255,.75); margin:0; grid-column:auto; width:40px; height:40px; flex:none; }
.ml-pwa-toast .ml-pwa-x:hover{ color:#fff; }

/* ---- janela "Configurações de notificações" ---- */
.ml-pwa-modal{ position:fixed; inset:0; z-index:10100; display:flex; align-items:flex-end; justify-content:center; }
.ml-pwa-modal__fundo{ position:absolute; inset:0; background:rgba(9,47,47,.55); }
.ml-pwa-modal__caixa{
  position:relative; width:100%; max-width:480px; max-height:90vh; overflow:auto;
  background:var(--surface); border-radius:22px 22px 0 0; padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  animation:ml-pwa-sobe .3s cubic-bezier(.2,.8,.2,1) both;
}
.ml-pwa-modal__topo{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.ml-pwa-modal__topo h2{ font:600 20px 'Fraunces',serif; margin:0; }
.ml-pwa-modal__topo .ml-pwa-x{ position:static; margin:0; grid-column:auto; }
.ml-pwa-modal__msg{ margin:8px 0 14px; font-size:14px; line-height:1.5; color:var(--muted); }
.ml-pwa-modal__msg[data-tipo="ok"]{ color:var(--primary); font-weight:600; }
.ml-pwa-modal__msg[data-tipo="erro"]{ color:#b3261e; font-weight:600; }
.ml-pwa-prefs{ display:grid; gap:8px; margin:0 0 16px; padding:0; border:0; }
.ml-pwa-pref{
  display:flex; align-items:center; gap:12px; min-height:48px; padding:10px 12px; cursor:pointer;
  border:1px solid var(--line); border-radius:14px; font-size:14px; font-weight:600;
}
.ml-pwa-pref input{ width:22px; height:22px; accent-color:var(--primary); flex:none; }
.ml-pwa-pref:has(input:focus-visible){ outline:3px solid var(--accent); outline-offset:2px; }
.ml-pwa-modal__acoes{ display:grid; gap:8px; }
.ml-pwa-modal__acoes .ml-pwa-btn--perigo{ background:transparent; color:#b3261e; border-color:#e6b8b4; }

@keyframes ml-pwa-sobe{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .ml-pwa-card,.ml-pwa-toast,.ml-pwa-modal__caixa{ animation:none; }
}
/* No app instalado a barra do tema continua igual; só garantimos área de toque confortável. */
@media (max-width:360px){ .ml-pwa-card__acoes{ justify-content:stretch; } .ml-pwa-card__acoes .ml-pwa-btn{ flex:1; } }