/* ════════════════════════════════════════════════════════════════
   PropDesk — auth-styles.css
   Estilos para o modal de login, upsell e botão de auth na nav.
   Adiciona um <link> para este ficheiro em index.html e app.html.
   ════════════════════════════════════════════════════════════════ */

/* ── Botão de auth na nav ─────────────────────────────────────── */
#pd-auth-btn {
  display          : inline-flex;
  align-items      : center;
  gap              : 6px;
  flex-shrink      : 0;
  padding          : 8px 18px;
  margin           : 0;
  border           : 1.5px solid rgba(0, 229, 255, 0.45);
  border-radius    : 9px;
  background       : rgba(0, 229, 255, 0.07);
  color            : #00E5FF;
  font-family      : 'DM Sans', system-ui, sans-serif;
  font-size        : 14px;
  font-weight      : 600;
  line-height      : 1;
  cursor           : pointer;
  white-space      : nowrap;
  transition       : background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  -webkit-appearance: none;
  appearance       : none;
}
#pd-auth-btn:hover {
  background   : rgba(0, 229, 255, 0.16);
  border-color : rgba(0, 229, 255, 0.7);
  transform    : translateY(-1px);
}
#pd-auth-btn .pd-auth-dot { font-size: 10px; line-height: 1; }
/* Estado logado: cores por plano */
#pd-auth-btn.pd-auth--free    { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.05); color: #e8eaed; }
#pd-auth-btn.pd-auth--builder { border-color: rgba(255,107,53,0.55);  background: rgba(255,107,53,0.10); color: #FF6B35; }
#pd-auth-btn.pd-auth--pro     { border-color: rgba(0,229,255,0.6);    background: rgba(0,229,255,0.12); color: #00E5FF; }
/* Verde porque é a única cor da paleta que ainda não tem plano: laranja é o
   Builder, ciano o Pro, branco o Free. É também a cor que o crachá de quota já
   usa para "ilimitado", que é exactamente o que esta conta é. */
#pd-auth-btn.pd-auth--admin   { border-color: rgba(0,255,135,0.6);    background: rgba(0,255,135,0.12); color: #00FF87; }

/* ── Overlay (fundo escuro dos modais) ────────────────────────── */
.pd-modal-overlay {
  display         : none;
  position        : fixed;
  inset           : 0;
  background      : rgba(0, 0, 0, 0.72);
  backdrop-filter : blur(4px);
  z-index         : 1000;
  align-items     : center;
  justify-content : center;
  padding         : 16px;
}
.pd-modal-overlay.pd-modal--open {
  display : flex;
}

/* ── Caixa do modal ───────────────────────────────────────────── */
.pd-modal-box {
  position         : relative;
  background       : #0F1115;
  border           : 1px solid rgba(255,255,255,0.08);
  border-radius    : 16px;
  padding          : 40px 36px;
  width            : 100%;
  max-width        : 420px;
  box-shadow       : 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,229,255,0.06);
  animation        : pd-modal-in 0.22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pd-modal-in {
  from { opacity: 0; transform: scale(0.93) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

/* ── Fechar ───────────────────────────────────────────────────── */
.pd-modal-close {
  position   : absolute;
  top        : 14px;
  right      : 14px;
  background : transparent;
  border     : none;
  color      : rgba(255,255,255,0.35);
  font-size  : 18px;
  cursor     : pointer;
  padding    : 4px 8px;
  border-radius : 6px;
  transition : color 0.15s, background 0.15s;
}
.pd-modal-close:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* ── Conteúdo do modal ────────────────────────────────────────── */
.pd-modal-logo {
  font-family  : 'Syne', sans-serif;
  font-size    : 13px;
  font-weight  : 700;
  letter-spacing : 2px;
  text-transform : uppercase;
  color        : #00E5FF;
  margin-bottom : 16px;
}
.pd-modal-title {
  font-family  : 'Syne', sans-serif;
  font-size    : 22px;
  font-weight  : 700;
  color        : #fff;
  margin       : 0 0 8px;
}
.pd-modal-sub {
  font-size    : 14px;
  color        : rgba(255,255,255,0.55);
  margin       : 0 0 24px;
  line-height  : 1.5;
}

/* ── Botões ───────────────────────────────────────────────────── */
.pd-btn {
  display      : flex;
  align-items  : center;
  justify-content : center;
  gap          : 8px;
  width        : 100%;
  padding      : 12px 20px;
  border-radius : 10px;
  font-family  : 'DM Sans', sans-serif;
  font-size    : 15px;
  font-weight  : 500;
  cursor       : pointer;
  transition   : all 0.2s ease;
  border       : none;
}
.pd-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.pd-btn--google {
  background   : #fff;
  color        : #1a1a1a;
  margin-bottom : 0;
}
.pd-btn--google:hover { background: #f0f0f0; transform: translateY(-1px); }

.pd-btn--primary {
  background    : #00E5FF;
  color         : #0A0C0F;
  font-weight   : 600;
  margin-top    : 8px;
}
.pd-btn--primary:hover { background: #33ecff; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,229,255,0.35); }

.pd-btn--ghost {
  background   : transparent;
  color        : rgba(255,255,255,0.45);
  margin-top   : 8px;
  border       : 1px solid rgba(255,255,255,0.12);
}
.pd-btn--ghost:hover { color: #fff; border-color: rgba(255,255,255,0.3); }

/* ── Zona perigosa: apagar conta ──────────────────────────────────
   Vermelho contido e não berrante: o botão vive a par do "Sign out" no painel
   de conta e não pode ser carregado por engano, mas também não deve gritar com
   quem só veio ver o plano. O estado :disabled é o que segura o botão até a
   palavra DELETE estar escrita. */
.pd-btn--danger {
  background   : transparent;
  color        : #ff6b6b;
  margin-top   : 8px;
  border       : 1px solid rgba(255,107,107,0.28);
}
.pd-btn--danger:hover:not(:disabled) {
  background   : rgba(255,107,107,0.10);
  border-color : rgba(255,107,107,0.55);
  color        : #ff8787;
}
.pd-btn--danger:disabled { opacity: 0.4; cursor: not-allowed; }

/* Parágrafo de modal mais apertado que o .pd-modal-sub: aqui há três seguidos
   e os 24px daquele empilhavam-se numa caixa alta de mais. */
.pd-modal-text {
  font-size   : 14px;
  color       : rgba(255,255,255,0.55);
  margin      : 0 0 12px;
  line-height : 1.5;
}
.pd-modal-text strong { color: rgba(255,255,255,0.85); }

.pd-modal-error {
  font-size   : 13px;
  color       : #ff6b6b;
  margin      : 10px 0 0;
  line-height : 1.4;
}

/* Mesma linguagem do input de email do login, mas utilizável fora daquele form */
.pd-input {
  width         : 100%;
  box-sizing    : border-box;
  background    : rgba(255,255,255,0.05);
  border        : 1px solid rgba(255,255,255,0.12);
  border-radius : 10px;
  padding       : 12px 16px;
  color         : #fff;
  font-family   : 'DM Sans', sans-serif;
  font-size     : 15px;
  outline       : none;
  transition    : border-color 0.2s;
}
.pd-input:focus { border-color: #00E5FF; }
.pd-input::placeholder { color: rgba(255,255,255,0.25); letter-spacing: .08em; }

/* ── Divisor "ou" ─────────────────────────────────────────────── */
.pd-modal-divider {
  display      : flex;
  align-items  : center;
  gap          : 12px;
  margin       : 20px 0;
  color        : rgba(255,255,255,0.25);
  font-size    : 13px;
}
.pd-modal-divider::before,
.pd-modal-divider::after {
  content    : '';
  flex       : 1;
  height     : 1px;
  background : rgba(255,255,255,0.1);
}

/* ── Formulário de email ──────────────────────────────────────── */
.pd-modal-email-form {
  display        : flex;
  flex-direction : column;
  gap            : 0;
}
.pd-modal-email-form input[type="email"] {
  background    : rgba(255,255,255,0.05);
  border        : 1px solid rgba(255,255,255,0.12);
  border-radius : 10px;
  padding       : 12px 16px;
  color         : #fff;
  font-family   : 'DM Sans', sans-serif;
  font-size     : 15px;
  outline       : none;
  transition    : border-color 0.2s;
}
.pd-modal-email-form input[type="email"]:focus {
  border-color : #00E5FF;
}
.pd-modal-hint {
  font-size  : 13px;
  margin     : 8px 0 0;
  min-height : 18px;
}

/* ── Termos ───────────────────────────────────────────────────── */
.pd-modal-terms {
  font-size  : 12px;
  color      : rgba(255,255,255,0.25);
  text-align : center;
  margin     : 20px 0 0;
}
.pd-modal-terms a { color: rgba(0,229,255,0.6); text-decoration: none; }
.pd-modal-terms a:hover { color: #00E5FF; }

/* ── Upsell ───────────────────────────────────────────────────── */
.pd-upsell-icon {
  font-size     : 36px;
  text-align    : center;
  margin-bottom : 12px;
}

/* ── Faixa de retorno do checkout ─────────────────────────────
   Fixa no topo, e nao no fluxo da pagina. Ate 25/09/2026 isto era
   "margin: 0 0 24px" num <div> colado ao fim do <body> do app.html: quem
   voltava da Stripe aterrava no topo da pagina e a confirmacao ficava a um
   ecra inteiro de distancia, quando aparecia de todo. Ver UX-01.
   z-index entre o sidebar (100) e o modal de login (10000): a faixa passa
   por cima da navegacao, e um modal passa por cima da faixa. */
.pd-checkout-banner {
  position      : fixed;
  top           : 12px;
  /* Centrada por margin auto entre left:0 e right:0, e nao por
     left:50% + translateX(-50%). Com left:50% a caixa so podia crescer ate
     a borda direita, o que a 375px de largura lhe dava 187px e partia a
     frase em cinco linhas. A animacao tambem escreve transform, logo os
     dois usos colidiam. */
  left          : 0;
  right         : 0;
  margin        : 0 auto;
  width         : fit-content;
  z-index       : 9000;
  max-width     : min(560px, calc(100vw - 24px));
  display       : flex;
  align-items   : center;
  gap           : 12px;
  background    : rgba(0, 255, 135, 0.10);
  border        : 1px solid rgba(0, 255, 135, 0.30);
  border-radius : 12px;
  padding       : 14px 20px;
  color         : #00FF87;
  font-size     : 14px;
  line-height   : 1.45;
  box-shadow    : 0 8px 28px rgba(0, 0, 0, 0.45);
  animation     : pd-faixa-in 0.3s ease;
}
@keyframes pd-faixa-in {
  from { opacity: 0; translate: 0 -8px; }
  to   { opacity: 1; translate: 0 0;   }
}
/* A espera pelo webhook da Stripe. Nao e sucesso nem falha: e "ainda nao se
   sabe", e o tom tem de dizer isso. */
.pd-checkout-banner.is-pending {
  background   : rgba(0, 229, 255, 0.10);
  border-color : rgba(0, 229, 255, 0.30);
  color        : var(--cyan, #00E5FF);
}
/* O checkout que nao abriu. Existiam tres variantes -- sucesso, a espera e
   cancelado -- e nenhuma para falha, que era precisamente a que faltava para
   tirar o alert() de la. Laranja e nao vermelho: e a cor que o site usa para
   dizer que algo nao foi. UX-13. */
.pd-checkout-banner.is-error {
  background   : rgba(255, 107, 53, 0.10);
  border-color : rgba(255, 107, 53, 0.32);
  color        : var(--orange, #FF6B35);
}
/* Checkout cancelado. Nada correu mal, logo nada de vermelho. */
.pd-checkout-banner.is-neutral {
  background   : rgba(138, 149, 163, 0.12);
  border-color : rgba(138, 149, 163, 0.30);
  color        : var(--text, #E8EDF2);
}
.pd-checkout-banner strong { font-weight: 600; }
.pd-checkout-banner a { color: inherit; text-decoration: underline; }
.pd-checkout-msg { flex: 1; }
.pd-checkout-close {
  flex-shrink : 0;
  background  : transparent;
  border      : 0;
  color       : inherit;
  opacity     : 0.7;
  cursor      : pointer;
  font-size   : 20px;
  line-height : 1;
  padding     : 0 2px;
}
.pd-checkout-close:hover { opacity: 1; }
/* Abaixo de 860px a barra de topo ocupa os primeiros 54px (ver styles.css). */
@media (max-width: 860px) {
  .pd-checkout-banner { top: 66px; }
}

/* ── Badges de plano ──────────────────────────────────────────── */
.pd-plan-badge {
  display       : inline-flex;
  align-items   : center;
  gap           : 4px;
  padding       : 3px 8px;
  border-radius : 20px;
  font-size     : 11px;
  font-weight   : 600;
  text-transform : uppercase;
  letter-spacing : 0.5px;
}
.pd-plan-badge--free    { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }
.pd-plan-badge--builder { background: rgba(255,107,53,0.15);  color: #FF6B35; }
.pd-plan-badge--pro     { background: rgba(0,229,255,0.15);   color: #00E5FF; }

/* ── Lock icon em features bloqueadas ────────────────────────── */
.pd-locked {
  position : relative;
  opacity  : 0.5;
  cursor   : not-allowed;
}
.pd-locked::after {
  content    : '🔒';
  position   : absolute;
  top        : 50%;
  left       : 50%;
  transform  : translate(-50%, -50%);
  font-size  : 18px;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .pd-modal-box {
    padding      : 28px 20px;
    border-radius : 12px;
  }
  .pd-modal-title { font-size: 19px; }
  /* Botão de auth mais compacto junto ao burger */
  #pd-auth-btn { padding: 7px 13px; font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════
   v2 — Conta, quota, badges
   ════════════════════════════════════════════════════════════════ */

/* Modal compacto (upsell, quota, conta) */
.pd-modal-box--sm { max-width: 380px; text-align: center; }
.pd-modal-box--sm .pd-btn { margin-top: 10px; }

/* Menu de conta */
.pd-account-email {
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin: 4px 0 16px;
  word-break: break-all;
}
.pd-account-plan {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.pd-account-plan--free    { background: rgba(255,255,255,0.08); color: #e8eaed; }
.pd-account-plan--builder { background: rgba(255,107,53,0.15);  color: #FF6B35; }
.pd-account-plan--pro     { background: rgba(0,229,255,0.15);   color: #00E5FF; }
.pd-account-plan--admin   { background: rgba(0,255,135,0.15);   color: #00FF87; }
.pd-account-quota {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
}

/* Badge de quota na calculadora */
.pd-quota-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 14px;
  border-radius: 20px;
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  border: 1px solid rgba(0,229,255,0.3);
  background: rgba(0,229,255,0.07);
  color: #00E5FF;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.pd-quota-badge:hover { background: rgba(0,229,255,0.14); }
.pd-quota-badge--guest {
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.05);
  color: #e8eaed;
}
.pd-quota-badge--unlimited {
  border-color: rgba(0,255,135,0.4);
  background: rgba(0,255,135,0.08);
  color: #00FF87;
}
.pd-quota-badge--empty {
  border-color: rgba(255,107,53,0.5);
  background: rgba(255,107,53,0.1);
  color: #FF6B35;
}

/* ════════════════════════════════════════════════════════════════
   Checkout Loader — página branca rápida durante redirecionamento
   ════════════════════════════════════════════════════════════════ */

#pd-checkout-loader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0A0C0F;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}

#pd-checkout-loader::before {
  content: '';
  width: 48px;
  height: 48px;
  border: 3px solid rgba(0,229,255,0.2);
  border-top-color: #00E5FF;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#pd-checkout-loader::after {
  content: 'Opening Stripe Checkout…';
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.5px;
}

@media (max-width: 600px) {
  #pd-checkout-loader::after { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════
   Toast de upsell discreto (quando já se mostraram 3 modais)
   ════════════════════════════════════════════════════════════════ */
.pd-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: #14181d;
  border: 1px solid rgba(255,107,53,0.4);
  border-radius: 10px;
  padding: 12px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: #e8eaed;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  z-index: 9999;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), opacity 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 90vw;
}
.pd-toast--show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.pd-toast-link {
  background: none;
  border: none;
  color: #FF6B35;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.pd-toast-link:hover { color: #ff8255; }

/* ════════════════════════════════════════════════════════════════
   Survey (referral + upgrade reason)
   ════════════════════════════════════════════════════════════════ */
.pd-survey-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0;
}
.pd-survey-opt {
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  color: #e8eaed;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
  text-align: center;
}
.pd-survey-opt:hover {
  border-color: rgba(0,229,255,0.5);
  background: rgba(0,229,255,0.08);
  transform: translateY(-1px);
}
.pd-survey-opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 480px) {
  .pd-survey-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   Saved Builds — lista e cartões
   ════════════════════════════════════════════════════════════════ */
.pd-saved-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; max-height: 50vh; overflow-y: auto; }
.pd-saved-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; background: rgba(255,255,255,0.03);
}
.pd-saved-info { text-align: left; }
.pd-saved-name { font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; color:#e8eaed; }
.pd-saved-meta { font-family:'Space Mono',monospace; font-size:11px; color:rgba(255,255,255,0.45); margin-top:2px; }
.pd-saved-actions { display:flex; gap:8px; }
.pd-saved-btn {
  padding:6px 12px; border-radius:7px; font-family:'DM Sans',sans-serif; font-size:12px;
  font-weight:600; cursor:pointer; border:1px solid transparent;
}
.pd-saved-btn--load { background:rgba(0,229,255,0.12); color:#00E5FF; border-color:rgba(0,229,255,0.3); }
.pd-saved-btn--del  { background:rgba(255,107,53,0.1); color:#FF6B35; border-color:rgba(255,107,53,0.3); }
.pd-saved-empty { text-align:center; color:rgba(255,255,255,0.5); font-size:14px; padding:24px 0; }

/* ── Formulário de contacto (contact.js) ─────────────────────── */
.pd-contact-form {
  display        : flex;
  flex-direction : column;
  gap            : 10px;
}
.pd-contact-form input,
.pd-contact-form textarea {
  background    : rgba(255,255,255,0.05);
  border        : 1px solid rgba(255,255,255,0.12);
  border-radius : 10px;
  padding       : 12px 16px;
  color         : #fff;
  font-family   : 'DM Sans', sans-serif;
  font-size     : 15px;
  outline       : none;
  transition    : border-color 0.2s;
  width         : 100%;
  box-sizing    : border-box;
}
.pd-contact-form textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.pd-contact-form input:focus,
.pd-contact-form textarea:focus { border-color: #00E5FF; }

/* Upsell plan choice (tiered modal) */
.pd-plan-choice{border:1px solid var(--border, rgba(255,255,255,.1));border-radius:10px;padding:13px 16px;margin:8px 0;cursor:pointer;text-align:left;transition:border-color .2s;background:rgba(255,255,255,.02);}
.pd-plan-choice:hover{border-color:rgba(0,229,255,.45);}
.pd-plan-choice-head{display:flex;justify-content:space-between;align-items:baseline;font-size:14.5px;color:#fff;}
.pd-plan-choice-head span{font-family:'Space Mono',monospace;font-size:12px;color:#00E5FF;}
.pd-plan-choice-sub{font-size:11.5px;color:rgba(255,255,255,.55);margin-top:4px;line-height:1.5;}

/* ── Código de 6 dígitos ────────────────────────────────────────
   Substitui o magic link. O email deixa de conter qualquer URL,
   por isso nenhum intermediário (Brevo) pode reescrever ou guardar
   uma credencial utilizável, e nenhum scanner de segurança pode
   consumir o token antes do utilizador. */
.pd-modal-email-form input[type="text"].pd-code-input {
  background    : rgba(255,255,255,0.05);
  border        : 1px solid rgba(255,255,255,0.12);
  border-radius : 10px;
  padding       : 12px 16px;
  color         : #fff;
  font-family   : 'Space Mono', monospace;
  font-size     : 22px;
  letter-spacing: 0.32em;
  text-align    : center;
  outline        : none;
  transition    : border-color 0.2s;
  width          : 100%;
  box-sizing     : border-box;
}
.pd-modal-email-form input[type="text"].pd-code-input:focus { border-color: #00E5FF; }
.pd-modal-email-form input[type="text"].pd-code-input::placeholder {
  letter-spacing: 0.32em; color: rgba(255,255,255,0.25); font-size: 18px;
}
.pd-code-step { display: none; flex-direction: column; gap: 10px; }
.pd-code-step.pd-code-step--on { display: flex; }
.pd-linkbtn {
  background: none; border: 0; padding: 4px; cursor: pointer;
  color: rgba(255,255,255,0.5); font-family: 'DM Sans', sans-serif;
  font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
}
.pd-linkbtn:hover { color: #00E5FF; }
.pd-linkbtn:focus-visible { outline: 2px solid #00E5FF; outline-offset: 2px; border-radius: 4px; }

/* A .pd-sr-only mudou-se para o js/acessibilidade.css a 26/09/2026. Era
   aqui a única definição de "visível só para leitores de ecrã" e o painel de
   resultados do app.html passou a precisar dela para os anúncios. Deixá-la
   aqui era fazer o anúncio depender da folha da autenticação: no dia em que
   o app.html deixar de a carregar, o texto dos anúncios aparece no ecrã. */