/* =============================================================================
   portal-telemovel.css — Janela «Usar no telemóvel» (assets/js/portal-telemovel.js)
   Usa as variáveis da página de entrada (--card-bg, --accent, --text…).
   ============================================================================= */
.pdr-tel {
  margin: auto; /* a página de entrada põe margin:0 em tudo; o <dialog> precisa do auto para ficar ao centro */
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 22px 22px 18px;
  border: 1px solid var(--border, rgba(245,158,11,0.18));
  border-radius: 14px;
  background: var(--card-bg, #1a2432);
  color: var(--text, #e2e8f0);
  font-size: 0.92rem;
  line-height: 1.55;
}
.pdr-tel::backdrop { background: rgba(5, 10, 18, 0.72); }
.pdr-tel-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pdr-tel-cab h2 { font-size: 1.15rem; line-height: 1.3; color: var(--text, #e2e8f0); }
.pdr-tel-fechar {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08)); background: transparent; color: var(--text-dim, #94a3b8); font-size: 1rem;
}
.pdr-tel-fechar:hover, .pdr-tel-fechar:focus-visible { color: var(--accent, #F59E0B); border-color: var(--accent, #F59E0B); outline: none; }
.pdr-tel p { margin: 0 0 12px; color: var(--text-dim, #94a3b8); }
.pdr-tel p strong { color: var(--text, #e2e8f0); }
.pdr-tel-ok { padding: 8px 12px; border-radius: 8px; background: rgba(16,185,129,0.12); color: #6ee7b7 !important; }
.pdr-tel-instalar {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 10px 18px; border-radius: 10px; cursor: pointer;
  border: none; background: var(--accent, #F59E0B); color: #111; font-weight: 700; font-size: 0.95rem;
}
.pdr-tel-instalar[hidden] { display: none; }
.pdr-tel-bloco { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-subtle, rgba(255,255,255,0.08)); }
.pdr-tel-bloco.destaque { border-color: var(--border, rgba(245,158,11,0.35)); background: rgba(245,158,11,0.06); }
.pdr-tel-bloco h3 { font-size: 0.95rem; margin: 0 0 6px; color: var(--text, #e2e8f0); }
.pdr-tel-seu { margin-left: 6px; padding: 1px 8px; border-radius: 20px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; background: rgba(245,158,11,0.18); color: var(--accent, #F59E0B); vertical-align: middle; }
.pdr-tel-bloco ol { margin: 0; padding-left: 20px; color: var(--text-dim, #94a3b8); }
.pdr-tel-bloco li { margin: 4px 0; }
.pdr-tel-bloco li strong { color: var(--text, #e2e8f0); }
.pdr-tel-icone { display: inline-block; padding: 0 5px; border: 1px solid currentColor; border-radius: 4px; font-size: 0.8em; line-height: 1.3; }
.pdr-tel-nota { font-size: 0.85rem; }
.pdr-tel-dicas { margin: 6px 0 0; padding-left: 18px; color: var(--text-dim, #94a3b8); font-size: 0.85rem; }
.pdr-tel-dicas li { margin: 5px 0; }
.pdr-tel-dicas strong { color: var(--text, #e2e8f0); }

/* Ligação no topo e no cartão de funcionalidades */
.pdr-tel-link { background: none; border: none; padding: 0; color: var(--accent, #F59E0B); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }