/* HABEMUS VERBA — identidade mínima: tipografia + 2 cores.
   Verde-nota profundo + lima radar. Mobile-first (referência: 375px). */

:root {
  --verde: #102138;
  --verde-escuro: #0A1524;
  --lima: #D8B570;
  --papel: #F8F5ED;
  --tinta: #1B2333;
  --tinta-suave: #6B7280;
  --linha: #E7E0CE;
  --branco: #FFFFFF;
  --vermelho: #B3402A;
  --serif: "Marcellus", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--papel);
  color: var(--tinta);
  min-height: 100dvh;
  line-height: 1.5;
}
.escondido { display: none !important; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--verde); }

#app { max-width: 640px; margin: 0 auto; }

/* ---------- Botões ---------- */
.btn {
  border: none; border-radius: 14px; font-size: 1rem; font-weight: 600;
  padding: 0.8rem 1.3rem; transition: transform 0.06s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primario { background: var(--verde); color: var(--lima); }
.btn-secundario { background: transparent; color: var(--verde); border: 1.5px solid var(--verde); }
.btn-grande { font-size: 1.15rem; padding: 1rem 2rem; width: 100%; }

/* ---------- Barra superior ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, #24446E 0%, #1D3A5F 100%); color: var(--lima);
  padding: calc(0.6rem + env(safe-area-inset-top)) 0.8rem 0.6rem;
}
.topbar-logo {
  background: none; border: none; color: var(--lima);
  font-family: var(--serif); font-weight: 700; letter-spacing: 0.08em; font-size: 0.95rem;
}
.topbar-acoes { display: flex; gap: 0.2rem; }
.btn-icone {
  background: none; border: none; color: var(--lima); font-size: 1.25rem;
  padding: 0.3rem 0.55rem; border-radius: 10px; position: relative; min-width: 44px; min-height: 40px;
}
.btn-icone:active { background: rgba(216, 181, 112, 0.15); }
.conta {
  position: absolute; top: 0; right: 0; background: var(--lima); color: var(--verde);
  font-size: 0.65rem; font-weight: 700; border-radius: 999px; padding: 0 0.35em; line-height: 1.4;
}

/* ---------- E1 Landing ---------- */
.ecra-landing {
  min-height: 100dvh; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(circle at 50% 30%, #1D3A5F 0%, var(--verde) 55%, var(--verde-escuro) 100%);
  color: var(--branco); text-align: center;
  padding: 3.5rem 1.5rem 1rem;
}
.landing-miolo { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin: auto 0; }
.logo { user-select: none; -webkit-user-select: none; }
.logo-nome {
  font-family: var(--serif); font-size: 2.6rem; line-height: 1.02;
  letter-spacing: 0.06em; color: var(--branco); margin-top: 1rem;
}
.logo-descritor {
  color: var(--lima); text-transform: uppercase; letter-spacing: 0.3em;
  font-size: 0.7rem; margin-top: 0.6rem;
}
.headline { font-family: var(--serif); font-size: 1.35rem; line-height: 1.35; margin-top: 0.5rem; }
.apoio { color: rgba(255, 255, 255, 0.72); font-size: 0.95rem; }
.ecra-landing .btn-primario { background: var(--lima); color: var(--verde); margin-top: 0.8rem; max-width: 320px; }
.selo-demo { color: var(--lima); font-size: 0.75rem; letter-spacing: 0.05em; }
.landing-rodape { color: rgba(255, 255, 255, 0.55); font-size: 0.72rem; padding: 1rem 0.5rem calc(0.8rem + env(safe-area-inset-bottom)); }

/* radar animado */
.logo-radar {
  width: 92px; height: 92px; margin: 0 auto; border-radius: 50%; position: relative;
  border: 2px solid rgba(216, 181, 112, 0.8);
  background:
    radial-gradient(circle, transparent 0 29px, rgba(216, 181, 112, 0.5) 29px 31px, transparent 31px 57px),
    radial-gradient(circle, rgba(216, 181, 112, 0.35) 0 2px, transparent 2px);
  overflow: hidden;
}
.logo-radar.grande { width: 130px; height: 130px; }
.radar-varrimento {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(216, 181, 112, 0.55), transparent 70deg);
  animation: varrer 2.6s linear infinite;
}
/* Vários ecos, cada um a acender quando o varrimento passa por cima —
 * o radar a encontrar coisas em sítios diferentes. */
.radar-ponto,
.logo-radar::before,
.logo-radar::after {
  content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--lima); z-index: 2;
  animation: pulsar 2.6s ease infinite;
}
.radar-ponto { top: 22%; right: 24%; animation-delay: 0.25s; }
.logo-radar::before { bottom: 26%; right: 29%; animation-delay: 1.05s; }
.logo-radar::after { bottom: 33%; left: 21%; width: 6px; height: 6px; animation-delay: 1.8s; }
@keyframes varrer { to { transform: rotate(360deg); } }
@keyframes pulsar { 0% { opacity: 0.12; transform: scale(0.8); } 8% { opacity: 1; transform: scale(1.25); } 30% { opacity: 0.45; transform: scale(1); } 100% { opacity: 0.12; transform: scale(0.8); } }

/* ---------- Ecrãs interiores ---------- */
.ecra { padding: 1rem 1rem 3rem; }
.titulo-ecra { font-family: var(--serif); font-size: 1.5rem; margin: 0.4rem 0 0.2rem; }
.subtitulo-ecra { color: var(--tinta-suave); font-size: 0.9rem; margin-bottom: 1rem; }
.nota-rodape { color: var(--tinta-suave); font-size: 0.78rem; margin-top: 1.4rem; }

/* ---------- E2 Chat ---------- */
#ecra-chat { display: flex; flex-direction: column; min-height: calc(100dvh - 60px); padding-bottom: 10vh; }
.chat-progresso { font-size: 0.75rem; color: var(--tinta-suave); margin-bottom: 0.6rem; }
.chat-progresso i { display: block; height: 3px; background: var(--verde); border-radius: 2px; width: 10%; transition: width 0.5s ease; }
.chat-mensagens { flex: 1; display: flex; flex-direction: column; gap: 0.55rem; overflow-y: auto; padding-bottom: 0.8rem; }
.balao { max-width: 85%; padding: 0.65rem 0.9rem; border-radius: 16px; font-size: 0.97rem; white-space: pre-wrap; }
.balao-ia { background: var(--branco); border: 1px solid var(--linha); border-bottom-left-radius: 4px; align-self: flex-start; }
/* Balão do utilizador: claro como o do radar (a distinção fica pelo
 * alinhamento à direita), com um rebordo dourado subtil e um creme
 * ligeiramente diferente do fundo. Nunca escuro. */
.balao-eu {
  background: #FFFDF6; color: var(--tinta);
  border: 1px solid rgba(216, 181, 112, 0.45);
  border-bottom-right-radius: 4px; align-self: flex-end;
}
.balao-escrever { color: var(--tinta-suave); font-style: italic; animation: aparecer 0.3s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }
.balao { animation: aparecer 0.25s ease; }
.chat-sugestoes { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.4rem 0; }
.chip {
  background: var(--branco); border: 1.5px solid var(--verde); color: var(--verde);
  border-radius: 14px; padding: 0.7rem 1rem; font-size: 0.95rem; text-align: left; font-weight: 600;
}
.chip:active { background: var(--verde); color: var(--lima); }
.chat-entrada { display: flex; gap: 0.5rem; align-items: flex-end; }
/* Auto-crescente (o JS ajusta a altura ao conteúdo): 1 linha ao início,
 * cresce até ~8 linhas (200px — espelhado em ALTURA_MAX_TEXTO no app.js)
 * e depois faz scroll interno. */
.chat-entrada textarea {
  flex: 1; resize: none; border: 1.5px solid var(--linha); border-radius: 14px;
  padding: 0.7rem 0.9rem; font-family: inherit; font-size: 1rem; background: var(--branco);
  max-height: 200px; overflow-y: auto; line-height: 1.4;
}
.chat-entrada textarea:focus { outline: none; border-color: var(--verde); }
.chat-entrada .btn { padding: 0.7rem 1rem; }

/* ---------- E3 Habemus ---------- */
.ecra-habemus { min-height: calc(100dvh - 60px); display: flex; align-items: center; justify-content: center; text-align: center; }
.habemus-procura { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; color: var(--tinta-suave); }
.habemus-procura .logo-radar { border-color: var(--verde); }
.habemus-procura .radar-varrimento { background: conic-gradient(from 0deg, rgba(16, 33, 56, 0.4), transparent 70deg); }
.habemus-procura .radar-ponto,
.habemus-procura .logo-radar::before,
.habemus-procura .logo-radar::after { background: var(--verde); }
.habemus-resultado { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; max-width: 420px; }
.habemus-emoji { font-size: 3rem; }
.habemus-titulo { font-family: var(--serif); font-size: 2.4rem; color: var(--verde); }
.habemus-frase { font-size: 1.05rem; }
.habemus-total { font-family: var(--serif); font-size: 1.5rem; color: var(--verde); }
.habemus-total strong { font-size: 1.9rem; }
.habemus-ressalva { color: var(--tinta-suave); font-size: 0.82rem; }
.habemus-resultado .btn { margin-top: 0.6rem; }

/* ---------- E4 Cartões ---------- */
.cartao {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 16px;
  padding: 0.9rem 1rem; margin-bottom: 0.8rem;
}
.cartao-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.compat { display: flex; flex-direction: column; align-items: flex-start; }
.compat-pct { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--verde); line-height: 1; }
.compat-rotulo { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); }
.badge { font-size: 0.68rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.badge-aberto { background: rgba(16, 33, 56, 0.1); color: var(--verde); }
.badge-proximo { background: rgba(179, 132, 42, 0.15); color: #8A6410; }
.cartao-nome { font-weight: 700; font-size: 1.02rem; margin: 0.45rem 0 0.1rem; }
.cartao-entidade { color: var(--tinta-suave); font-size: 0.85rem; }
.cartao-factos { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.5rem 0; font-size: 0.88rem; }
.cartao-porque { font-size: 0.88rem; color: var(--tinta); border-left: 3px solid var(--lima); padding-left: 0.6rem; margin: 0.5rem 0; }
.cartao-acoes { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.6rem; }
.cartao-acoes .btn { flex: 1; padding: 0.55rem 0.8rem; font-size: 0.92rem; }
.btn-coracao {
  background: none; border: 1.5px solid var(--linha); border-radius: 12px;
  font-size: 1.15rem; padding: 0.4rem 0.7rem; color: var(--tinta-suave); min-width: 48px;
}
.btn-coracao.ativo { color: var(--vermelho); border-color: var(--vermelho); }

/* ---------- E5 Detalhe ---------- */
.detalhe-cabecalho { margin-bottom: 1rem; }
.detalhe-nome { font-family: var(--serif); font-size: 1.4rem; line-height: 1.25; }
.detalhe-entidade { color: var(--tinta-suave); margin: 0.2rem 0 0.6rem; }
.detalhe-factos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.facto { background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 0.5rem 0.7rem; }
.facto b { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-suave); font-weight: 600; }
.facto span { font-size: 0.86rem; }
.bloco { margin: 1.1rem 0; }
.bloco h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.bloco ul { padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.93rem; }
.bloco-ia { border-left: 4px solid var(--lima); padding-left: 0.8rem; position: relative; }
.tag-ia {
  display: inline-block; background: var(--lima); color: var(--verde); font-size: 0.62rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  border-radius: 4px; padding: 0.1rem 0.4rem; margin-left: 0.4rem; vertical-align: middle;
}
.bloco-resumo { background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 0.8rem 1rem; font-size: 0.93rem; }
.bloco-fonte {
  background: var(--verde); color: var(--branco); border-radius: 14px; padding: 0.9rem 1rem;
}
.bloco-fonte h3 { color: var(--lima); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; }
.bloco-fonte p { font-size: 0.9rem; margin: 0.3rem 0; }
.bloco-fonte a {
  display: inline-block; background: var(--lima); color: var(--verde); font-weight: 700;
  border-radius: 10px; padding: 0.5rem 0.9rem; text-decoration: none; margin: 0.4rem 0; font-size: 0.92rem;
}
.fonte-verificado { color: rgba(255, 255, 255, 0.75); font-size: 0.8rem; }
.nota-oficial-ia { color: var(--tinta-suave); font-size: 0.78rem; font-style: italic; margin: 1rem 0; }
.detalhe-acoes { display: flex; gap: 0.6rem; margin: 1rem 0 2rem; }
.detalhe-acoes .btn { flex: 1; }
.pedido-cofre { background: var(--branco); border: 1.5px dashed var(--verde); border-radius: 14px; padding: 0.8rem 1rem; margin: 1rem 0; }
.pedido-cofre p { font-size: 0.9rem; margin-bottom: 0.5rem; }
.pedido-cofre .linha-input { display: flex; gap: 0.5rem; }
.pedido-cofre input { flex: 1; border: 1.5px solid var(--linha); border-radius: 10px; padding: 0.5rem 0.7rem; font-size: 0.95rem; }
.pedido-cofre small { color: var(--tinta-suave); }

/* ---------- E7 Cofre ---------- */
.cofre-campo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 12px;
  padding: 0.65rem 0.9rem; margin-bottom: 0.5rem;
}
.cofre-campo b { font-size: 0.85rem; font-weight: 600; }
.cofre-valor { text-align: right; font-size: 0.9rem; }
.cofre-vazio { color: var(--tinta-suave); }
.cofre-data { display: block; font-size: 0.68rem; color: var(--tinta-suave); }

/* ---------- Modal + toast ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(10, 21, 36, 0.55); z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
}
.modal-caixa {
  background: var(--papel); border-radius: 20px 20px 0 0; padding: 1.3rem 1.2rem calc(1.3rem + env(safe-area-inset-bottom));
  width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 0.7rem;
}
.modal-caixa h3 { font-size: 1.05rem; }
.modal-texto { font-size: 0.9rem; color: var(--tinta-suave); }
.modal-caixa input {
  border: 1.5px solid var(--linha); border-radius: 12px; padding: 0.75rem 0.9rem; font-size: 1rem;
}
.modal-caixa input:focus { outline: none; border-color: var(--verde); }
.modal-botoes { display: flex; gap: 0.6rem; }
.modal-botoes .btn { flex: 1; }
.alerta-erro { color: var(--vermelho); font-size: 0.85rem; }
.toast {
  position: fixed; bottom: calc(1.2rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: var(--verde); color: var(--lima); padding: 0.7rem 1.2rem; border-radius: 999px;
  font-size: 0.9rem; z-index: 60; max-width: 90%; text-align: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* ---------- Desktop: ver o bloco "A app como site" no fim do ficheiro ---------- */

/* ---------- Cofre com cara de cofre ---------- */
.btn-icone.btn-cofre { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 0.25rem; }
.icone-rotulo { font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase; }
.habemus-cofre { margin-top: 1rem; font-size: 0.85rem; color: var(--tinta-suave); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.cofre-strip { display: flex; align-items: center; gap: 0.9rem; background: var(--verde); color: var(--branco); border: 1px solid rgba(216, 181, 112, 0.55); border-radius: 14px; padding: 0.95rem 1.05rem; margin: 1.3rem 0 0.4rem; cursor: pointer; }
.cofre-strip svg { flex: none; color: var(--lima); }
.cofre-strip-texto b { display: block; color: var(--lima); font-family: var(--serif); letter-spacing: 0.05em; font-size: 1.02rem; }
.cofre-strip-texto .desc { font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); line-height: 1.35; }
.cofre-strip-abrir { margin-left: auto; color: var(--lima); font-weight: 600; white-space: nowrap; font-size: 0.9rem; }
.cofre-porta { width: 68px; height: 68px; margin: 0.5rem 0 0.7rem; border-radius: 18px; background: var(--verde); display: flex; align-items: center; justify-content: center; color: var(--lima); border: 1px solid rgba(216, 181, 112, 0.5); box-shadow: 0 4px 14px rgba(10, 21, 36, 0.25); }
.cofre-campo-titular { border-color: rgba(216, 181, 112, 0.9); background: rgba(216, 181, 112, 0.12); }

/* ---------- O radar (cabeçalho do chat) ---------- */
.chat-cabecalho { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.6rem; margin-bottom: 0.6rem; border-bottom: 1px solid var(--linha); }
.radar-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--verde); color: var(--lima);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.15rem; border: 1.5px solid var(--lima); flex: none;
}
.chat-cabecalho-texto b { display: block; font-family: var(--serif); font-size: 1rem; letter-spacing: 0.04em; line-height: 1.2; }
.chat-cabecalho-texto span { font-size: 0.75rem; color: var(--tinta-suave); }

/* ---------- Onboarding: campo livre em destaque + exemplos ---------- */
.chat-exemplos { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.4rem 0 0.8rem; }
.exemplos-destaque { font-family: var(--serif); font-size: 1.05rem; color: var(--verde); }
.exemplos-ou { font-size: 0.78rem; color: var(--tinta-suave); }
.cartao-exemplo {
  display: flex; gap: 0.6rem; align-items: flex-start; text-align: left;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 14px;
  padding: 0.65rem 0.85rem; font-size: 0.88rem; font-family: inherit; color: var(--tinta);
}
.cartao-exemplo:active { border-color: var(--verde); }
.cartao-exemplo b { display: block; font-size: 0.9rem; }
.cartao-exemplo span { color: var(--tinta-suave); }

/* ---------- Porta do Dossier de Verba ---------- */
.dossier {
  background: var(--verde); color: var(--branco); border: 1px solid rgba(216, 181, 112, 0.55);
  border-radius: 16px; padding: 1.1rem 1.1rem 1.2rem; margin: 1.4rem 0 0.6rem;
}
.dossier-titulo { font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; color: var(--lima); }
.dossier-sub { font-size: 0.9rem; margin: 0.5rem 0 0.4rem; color: rgba(255, 255, 255, 0.85); }
.dossier-lista { padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.88rem; }
.dossier-lista b { color: var(--lima); font-weight: 600; }
.dossier-contagem {
  font-size: 0.9rem; margin: 0.8rem 0 0.2rem; padding: 0.6rem 0.8rem;
  background: rgba(216, 181, 112, 0.14); border-left: 3px solid var(--lima); border-radius: 0 10px 10px 0;
}
.dossier-contagem b { color: var(--lima); }
.btn-dossier { background: var(--lima); color: var(--verde); width: 100%; margin-top: 0.8rem; font-size: 1.05rem; padding: 0.9rem 1rem; }

/* ---------- Abrir o teu Cofre (modal) ---------- */
.tratamento-chips { display: flex; gap: 0.5rem; }
.chip-tratamento { flex: 1; text-align: center; padding: 0.55rem 0.6rem; font-size: 0.88rem; }
.chip-tratamento.ativo { background: var(--verde); color: var(--lima); }

/* ---------- Topbar com ➕ ---------- */
.btn-icone.btn-novo { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 0.25rem; font-size: 1.05rem; }
@media (max-width: 400px) {
  .topbar-logo { font-size: 0.8rem; }
  .btn-icone { min-width: 40px; padding: 0.3rem 0.4rem; }
}

/* ==================================================================
   A app como site (ecrã largo). Abaixo de 700px nada muda:
   o mobile é a experiência principal e fica intocado.
   700–899px = transição; ≥900px = site a sério.
   ================================================================== */

/* ---------- ≥700px: sai a moldura de telemóvel, entra a página ---------- */
@media (min-width: 700px) {
  /* o #app deixa de ser um "ecrã de telemóvel": cada ecrã gere a sua largura */
  #app { max-width: none; }

  /* topbar de site: barra a toda a largura, conteúdo alinhado a um container central */
  .topbar {
    padding-left: max(1rem, calc((100% - 1080px) / 2));
    padding-right: max(1rem, calc((100% - 1080px) / 2));
  }
  .topbar-logo { font-size: 1.05rem; }

  /* ecrãs interiores: coluna de leitura centrada */
  .ecra { max-width: 640px; margin: 0 auto; }

  /* landing a toda a largura (o gradiente é o fundo da página) */
  .ecra-landing { max-width: none; margin: 0; }

  /* modais centrados, com cantos completos */
  .modal { align-items: center; }
  .modal-caixa { max-width: 480px; border-radius: 20px; }

  /* compositor do chat um pouco acima do fundo (transição) */
  #ecra-chat { padding-bottom: 24vh; }
}

/* ---------- ≥900px: layout de site ---------- */
@media (min-width: 900px) {

  /* --- E1 Landing: página inteira, identidade à escala do ecrã --- */
  .ecra-landing { padding: 4rem 2rem 1.2rem; }
  .landing-miolo { gap: 1.4rem; max-width: 760px; margin: auto; }
  .ecra-landing .logo-radar {
    width: 168px; height: 168px;
    background:
      radial-gradient(circle, transparent 0 33px, rgba(216, 181, 112, 0.5) 33px 35px, transparent 35px 59px, rgba(216, 181, 112, 0.5) 59px 61px, transparent 61px 100px),
      radial-gradient(circle, rgba(216, 181, 112, 0.35) 0 2px, transparent 2px);
  }
  .logo-nome { font-size: clamp(3.2rem, 6vw, 4.6rem); margin-top: 1.2rem; }
  .logo-descritor { font-size: 0.85rem; letter-spacing: 0.34em; margin-top: 0.8rem; }
  .headline { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-top: 0.6rem; }
  .apoio { font-size: 1.05rem; }
  .ecra-landing .btn-primario { max-width: 360px; font-size: 1.2rem; }
  .landing-rodape { font-size: 0.78rem; }

  /* --- ecrãs interiores: respiração de site --- */
  .ecra { padding: 2rem 1.5rem 4rem; }
  .titulo-ecra { font-size: 1.9rem; }
  .subtitulo-ecra { font-size: 0.95rem; }

  /* --- E2 Chat / onboarding: coluna central confortável.
   * O compositor sobe: escreve-se sensivelmente a um terço do fundo
   * do ecrã; as mensagens continuam a fluir por cima. --- */
  #ecra-chat { max-width: 680px; padding-bottom: 33vh; }
  .balao { max-width: 78%; }

  /* --- E4 Lista: grelha de 2 colunas; Dossier e Cofre em largura total --- */
  #ecra-lista { max-width: 1080px; }
  #lista-cartoes,
  #lista-guardadas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    align-items: stretch;
  }
  #lista-guardadas .guardadas-titulo,
  #lista-guardadas .guardadas-nota { grid-column: 1 / -1; }
  #lista-cartoes .cartao,
  #lista-guardadas .cartao {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
  }
  #lista-cartoes .cartao .cartao-acoes,
  #lista-guardadas .cartao .cartao-acoes { margin-top: auto; padding-top: 0.6rem; }
  #lista-cartoes .cartao .cartao-acoes .btn { flex: 1; }
  #lista-dossier { margin-top: 0.5rem; }
  #ecra-lista .dossier { padding: 1.4rem 1.6rem 1.5rem; }
  #ecra-lista .btn-dossier { max-width: 420px; }

  /* --- E6 Projetos / E8 Dossier em coluna confortável --- */
  #ecra-projetos { max-width: 760px; }
  #ecra-dossier { max-width: 820px; }

  /* --- E5 Detalhe: coluna única confortável (lê melhor que 2 colunas
         para texto de análise); métricas em 4 células lado a lado --- */
  #ecra-detalhe { max-width: 760px; }
  .detalhe-nome { font-size: 1.8rem; }
  .detalhe-factos { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* --- E7 Cofre / E3 Habemus: coluna central --- */
  #ecra-cofre { max-width: 680px; }
  .habemus-resultado { max-width: 520px; }
  .habemus-titulo { font-size: 3rem; }
}

/* ==================================================================
   Comboio 2 — fechadura, documentos, radar na barra, conversa
   ================================================================== */

/* Leitura das respostas do radar: o topo da mensagem nova fica visível
   abaixo da topbar sticky quando o scroll ancora no início. */
.balao { scroll-margin-top: 72px; }

/* ---------- botão do radar na topbar (retomar a conversa) ---------- */
.btn-icone.btn-radar { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 0.25rem; }
.radar-mini {
  width: 20px; height: 20px; border-radius: 50%; position: relative; overflow: hidden;
  border: 1.5px solid currentColor; display: block;
  background: radial-gradient(circle, transparent 0 4.5px, rgba(216, 181, 112, 0.55) 4.5px 6px, transparent 6px);
}
.radar-mini-varrimento {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(216, 181, 112, 0.8), transparent 80deg);
  animation: varrer 2.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .radar-mini-varrimento, .radar-varrimento, .radar-ponto,
  .logo-radar::before, .logo-radar::after { animation: none; }
}

/* ---------- modal da fechadura ---------- */
.fechadura-input-codigo {
  text-align: center; font-size: 1.5rem; letter-spacing: 0.45em;
  font-variant-numeric: tabular-nums;
}
.fechadura-nota-teste {
  background: rgba(216, 181, 112, 0.18); border-left: 3px solid var(--lima);
  border-radius: 0 10px 10px 0; padding: 0.45rem 0.7rem; color: var(--tinta);
}

/* ---------- documentos no Cofre ---------- */
.cofre-documentos { margin-top: 1.6rem; }
.docs-titulo { font-family: var(--serif); font-size: 1.2rem; margin-bottom: 0.2rem; }
.docs-form {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 14px;
  padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.6rem;
}
.docs-ficheiro {
  display: block; border: 1.5px dashed var(--verde); border-radius: 12px;
  padding: 0.75rem 0.9rem; cursor: pointer; font-size: 0.92rem; color: var(--verde);
  text-align: center;
}
.docs-ficheiro input { display: none; }
.docs-form select {
  border: 1.5px solid var(--linha); border-radius: 12px; padding: 0.7rem 0.8rem;
  font-family: inherit; font-size: 0.97rem; background: var(--branco); color: var(--tinta);
}
.docs-form select:focus { outline: none; border-color: var(--verde); }
#docs-lista { margin-top: 0.8rem; }
.doc-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 12px;
  padding: 0.65rem 0.9rem; margin-bottom: 0.5rem;
}
.doc-item-texto b { display: block; font-size: 0.92rem; word-break: break-word; }
.doc-item-texto span { font-size: 0.78rem; color: var(--tinta-suave); }
.doc-apagar {
  background: none; border: 1.5px solid var(--linha); border-radius: 10px;
  color: var(--tinta-suave); font-size: 0.82rem; padding: 0.35rem 0.7rem; white-space: nowrap;
}
.doc-apagar.confirmar { border-color: var(--vermelho); color: var(--vermelho); font-weight: 600; }
.docs-link {
  background: none; border: none; color: var(--verde); text-decoration: underline;
  font-size: inherit; padding: 0; cursor: pointer;
}

/* ---------- Cofre editável ---------- */
.cofre-hint { margin: 0 0 0.7rem; }
.cofre-campo-editavel { cursor: pointer; }
.cofre-campo-editavel:not(.a-editar):hover { border-color: var(--verde); }
.cofre-preencher { color: var(--verde); text-decoration: underline dotted; text-underline-offset: 3px; font-size: 0.82rem; }
.cofre-editor { display: flex; gap: 0.4rem; align-items: center; }
.cofre-edit-input {
  border: 1.5px solid var(--verde); border-radius: 10px; padding: 0.45rem 0.6rem;
  font-family: inherit; font-size: 0.92rem; width: 11rem; max-width: 45vw; background: var(--branco);
}
.cofre-edit-input:focus { outline: none; }
select.cofre-edit-input { width: auto; }
.cofre-edit-guardar { padding: 0.45rem 0.8rem; font-size: 0.85rem; }

/* ---------- despedida do radar (fim da primeira jornada) ---------- */
.despedida-radar {
  display: flex; gap: 0.7rem; align-items: flex-start;
  background: var(--branco); border: 1px solid var(--linha); border-left: 4px solid var(--lima);
  border-radius: 16px; border-bottom-left-radius: 4px;
  padding: 0.85rem 1rem; margin: 1.1rem 0 0.3rem; cursor: pointer;
}
.despedida-radar p { font-size: 0.93rem; line-height: 1.5; }

/* ---------- ecrã vazio honesto: os mais próximos abaixo dos 40% ---------- */
.habemus-proximos { width: 100%; margin-top: 1.4rem; text-align: left; }
.proximos-titulo { font-size: 0.9rem; color: var(--tinta-suave); margin-bottom: 0.6rem; text-align: center; }
.proximo-cartao {
  display: flex; gap: 0.8rem; align-items: flex-start;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 14px;
  padding: 0.7rem 0.9rem; margin-bottom: 0.5rem; cursor: pointer;
}
.proximo-cartao:hover { border-color: var(--verde); }
.proximo-pct { font-family: var(--serif); font-size: 1.25rem; color: var(--tinta-suave); flex: none; line-height: 1.2; }
.proximo-texto b { display: block; font-size: 0.92rem; }
.proximo-texto span { font-size: 0.8rem; color: var(--tinta-suave); }

/* ---------- Barra do topo: ícones uniformes (linha, dourado, com legenda) ---------- */
.topbar-acoes { gap: 0.1rem; align-items: stretch; }
.btn-icone {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 3px; min-width: 50px; padding: 0.15rem 0.25rem; line-height: 1;
}
.btn-icone svg { display: block; flex: none; }
.btn-icone .icone-rotulo {
  font-size: 0.46rem; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.9; white-space: nowrap;
}
.btn-voltar { min-width: 40px; justify-content: center; }
.radar-mini { width: 22px; height: 22px; }
.btn-projetos .conta { top: -2px; right: 2px; }
@media (max-width: 380px) {
  .btn-icone { min-width: 44px; }
  .btn-icone .icone-rotulo { font-size: 0.42rem; letter-spacing: 0.1em; }
  .topbar-logo { font-size: 0.8rem; }
}

/* ---------- Aviso de versão nova ---------- */
.aviso-versao {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 70;
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--verde); color: var(--branco);
  border: 1px solid rgba(216, 181, 112, 0.5); border-radius: 999px;
  padding: 0.55rem 0.7rem 0.55rem 1.05rem; font-size: 0.85rem;
  box-shadow: 0 8px 24px rgba(10, 21, 36, 0.35); max-width: 92vw;
}
.aviso-versao button {
  background: var(--lima); color: var(--verde); border: none;
  border-radius: 999px; padding: 0.4rem 0.9rem; font-weight: 600; font-size: 0.85rem;
}

/* ================= E6 — Os teus projetos ================= */
.entidade-cabecalho {
  display: flex; flex-direction: column; gap: 0.1rem;
  margin: 1.3rem 0 0.6rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--linha);
}
.entidade-cabecalho b { font-family: var(--serif); font-size: 1.05rem; }
.entidade-cabecalho span { font-size: 0.78rem; color: var(--tinta-suave); }
.projeto-cartao {
  display: flex; gap: 0.8rem; align-items: flex-start; justify-content: space-between;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 14px;
  padding: 0.85rem 1rem; margin-bottom: 0.6rem; cursor: pointer;
}
.projeto-cartao:hover { border-color: var(--verde); }
.projeto-cartao.ativo { border-left: 4px solid var(--lima); }
.projeto-texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.projeto-texto b { font-size: 0.98rem; line-height: 1.35; }
.projeto-entidade { font-size: 0.78rem; color: var(--tinta-suave); }
.projeto-estado { font-size: 0.82rem; color: var(--verde); font-weight: 500; }
.projeto-data { font-size: 0.74rem; color: var(--tinta-suave); white-space: nowrap; flex: none; }
#btn-projeto-novo { margin-top: 1.2rem; }

/* chips de entidade (Cofre e modal de novo projeto) */
.entidade-chips, .entidade-opcoes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.chip-entidade { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip-nova { border-style: dashed; }
#cofre-seletor { margin-bottom: 0.6rem; }

/* guardadas dentro do projeto */
.guardadas-titulo { font-family: var(--serif); font-size: 1.15rem; margin: 1.6rem 0 0.3rem; }
.guardadas-nota { margin-bottom: 0.7rem; }

/* ================= E8 — Dossier de Verba ================= */
#ecra-dossier { padding-bottom: 2rem; }
.dossier-cabecalho {
  background: var(--verde); color: var(--branco);
  border-radius: 18px; padding: 1.3rem 1.2rem; margin-bottom: 1.4rem;
}
.dossier-marca {
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lima); margin-bottom: 0.4rem;
}
.dossier-h1 { font-family: var(--serif); font-size: 1.7rem; line-height: 1.2; color: var(--lima); }
.dossier-projeto { font-size: 1rem; margin-top: 0.3rem; }
.dossier-meta { font-size: 0.8rem; color: rgba(255, 255, 255, 0.8); margin-top: 0.5rem; }
.dossier-meta b { color: var(--lima); }
.dossier-selo {
  display: inline-block; margin-top: 0.8rem;
  background: rgba(216, 181, 112, 0.18); border: 1px dashed var(--lima); color: var(--lima);
  border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.74rem; letter-spacing: 0.04em;
}
.dossier-selo-porta {
  margin-top: 0.5rem; text-align: center;
  font-size: 0.72rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.75);
}

.dossier-bloco {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 16px;
  padding: 1.1rem 1.1rem 1.2rem; margin-bottom: 1.1rem;
}
.dossier-bloco h3 { font-family: var(--serif); font-size: 1.25rem; margin-bottom: 0.6rem; }
.dossier-bloco h4 {
  font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinta-suave); margin: 1.1rem 0 0.45rem;
}
.dossier-bloco p { font-size: 0.92rem; margin-bottom: 0.5rem; }
.dossier-regra {
  background: var(--papel); border-left: 4px solid var(--lima);
  border-radius: 0 10px 10px 0; padding: 0.65rem 0.85rem; font-size: 0.92rem;
}
.dossier-destaque { font-size: 1rem; }
.dossier-destaque b { color: var(--verde); }
.dossier-nota { font-size: 0.82rem; color: var(--tinta-suave); }
.dossier-aviso {
  background: #FFF8EC; border: 1px solid #E8D6AE; border-radius: 12px;
  padding: 0.65rem 0.85rem; font-size: 0.84rem; margin-top: 0.9rem;
}
.dossier-aviso-forte { border-color: var(--lima); background: #FDF3E0; }

.dossier-acoes { margin-top: 1.4rem; }
#dossier-ligar-radar { width: 100%; margin-top: 0.6rem; }

/* ================= Impressão — o Dossier vira entregável =================
   Sai tudo o que é interface: barra, botões, modais, avisos. Fica o
   documento: cabeçalho com o projeto e a data, texto legível, e blocos
   que não se partem a meio entre páginas. */
@media print {
  @page { margin: 16mm 14mm; }

  html, body { background: #FFF !important; color: #111 !important; }
  body { font-size: 11pt; line-height: 1.45; }
  #app { max-width: none; }

  /* fora: tudo o que não é o documento */
  .topbar, .modal, .toast, .aviso-versao, .cofre-strip, .despedida-radar,
  .btn, button, #chat-entrada, #chat-sugestoes, .selo-demo { display: none !important; }

  /* só o Dossier vai ao papel */
  .ecra { display: none !important; }
  #ecra-dossier { display: block !important; padding: 0; max-width: none; }

  /* o cabeçalho perde o fundo escuro (poupa tinta e lê-se melhor) */
  .dossier-cabecalho {
    background: none !important; color: #111 !important;
    border: none; border-bottom: 2pt solid #111; border-radius: 0;
    padding: 0 0 8pt; margin-bottom: 14pt;
  }
  .dossier-marca, .dossier-h1, .dossier-meta b { color: #111 !important; }
  .dossier-h1 { font-size: 20pt; }
  .dossier-meta { color: #444 !important; }
  .dossier-selo {
    background: none !important; color: #111 !important;
    border: 1pt dashed #111; margin-top: 6pt;
  }

  .dossier-bloco {
    border: none; border-top: 1pt solid #CCC; border-radius: 0;
    padding: 10pt 0 0; margin: 0 0 12pt;
    break-inside: auto; page-break-inside: auto;
  }
  .dossier-bloco h3 { font-size: 14pt; break-after: avoid; page-break-after: avoid; }
  .dossier-bloco h4 { color: #444; break-after: avoid; page-break-after: avoid; }

  /* nada de itens partidos a meio */
  .crit-lista li, .docs-dossier li, .plano-lista li, .plano-ordem li,
  .plano-colisao, .dossier-ficha, .plano-total, .dossier-regra, .dossier-aviso {
    break-inside: avoid; page-break-inside: avoid;
  }
  .dossier-ficha { border-top: 1pt solid #EEE; }

  .plano-total {
    background: none !important; color: #111 !important;
    border: 1.5pt solid #111; border-radius: 0;
  }
  .plano-total-rotulo, .plano-total-valor { color: #111 !important; }
  .plano-total-nota { color: #333 !important; }
  .plano-valor { color: #111 !important; }

  .dossier-regra, .dossier-aviso { background: #F4F4F4 !important; border-color: #999 !important; }
  .crit-porque, .crit-prova, .dossier-nota, .dossier-fonte-linha { color: #444 !important; }
  .crit-falha .crit-texto { color: #111 !important; font-weight: 600; }

  /* os links levam o endereço, que no papel não se pode clicar */
  a { color: #111 !important; text-decoration: underline; }
  .dossier-fonte-linha a::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
}

/* ---------- convite para a fechadura (uma vez, sem insistir) ---------- */
.convite-sync { cursor: default; align-items: flex-start; }
.convite-sync-texto { display: flex; flex-direction: column; gap: 0.7rem; }
.convite-sync-botoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.convite-sync-botoes .btn { font-size: 0.88rem; padding: 0.6rem 0.9rem; }

/* ================= Dossier em AZULEJOS =================
   Lê-se de relance, aprofunda-se ao toque. Pouco texto corrido: o que
   manda é o dado. O NÚMERO de cada apoio é a sua identidade e aparece
   em todos os azulejos — nunca muda de sítio para sítio. */

/* painel de 4 métricas */
.painel-metricas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem; margin-bottom: 1.1rem;
}
.metrica {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 14px;
  padding: 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0;
}
.metrica b {
  font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; color: var(--verde);
  overflow-wrap: anywhere;
}
.metrica span {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave);
}
.metrica-larga { grid-column: 1 / -1; background: var(--verde); border-color: var(--verde); }
.metrica-larga b { color: var(--lima); font-size: 1.9rem; }
.metrica-larga span { color: rgba(255, 255, 255, 0.75); }
.nota-total { margin: -0.6rem 0 1.1rem; }

/* grelha de azulejos */
.grelha-azulejos { display: grid; grid-template-columns: 1fr; gap: 0.7rem; margin-bottom: 0.4rem; }
.azulejo {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 14px;
  padding: 0.85rem 0.95rem; cursor: pointer; min-width: 0;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.azulejo:hover, .azulejo:focus-visible { border-color: var(--verde); outline: none; }
.azulejo-topo { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.selo-num {
  flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--verde); color: var(--lima);
  font-family: var(--serif); font-size: 0.95rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.azulejo-pct { font-family: var(--serif); font-size: 1.25rem; color: var(--verde); line-height: 1; }
.etiqueta-parte {
  margin-left: auto; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 999px;
  padding: 0.2rem 0.55rem; color: var(--tinta-suave); white-space: nowrap;
}
.etiqueta-vaga { font-style: italic; }
.azulejo-nome { font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
.azulejo-entidade { font-size: 0.76rem; color: var(--tinta-suave); }
.azulejo-dados { display: flex; gap: 1.1rem; margin-top: 0.25rem; flex-wrap: wrap; }
.azulejo-dados span { display: flex; flex-direction: column; min-width: 0; }
.azulejo-dados b { font-size: 0.92rem; color: var(--verde); overflow-wrap: anywhere; }
.azulejo-dados i {
  font-style: normal; font-size: 0.64rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tinta-suave);
}
.azulejo-rodape { margin-top: 0.25rem; }
.micro-eleg { font-size: 0.76rem; color: #2E7D52; font-weight: 600; }
.azulejo-soma { border-left: 4px solid var(--lima); }
.azulejo-colide { border-left: 4px solid var(--vermelho); }
.azulejo-vago { border-left: 4px dashed var(--linha); }
.azulejo-impedido { border-left: 4px solid var(--vermelho); }

/* azulejo de elegibilidade (abre ao toque) */
.azulejo-eleg { cursor: default; }
.eleg-contagem { display: flex; gap: 0.9rem; margin-top: 0.35rem; font-size: 0.88rem; }
.eleg-contagem b { font-family: var(--serif); font-size: 1.15rem; }
.eleg-contagem .crit-cumpre { color: #2E7D52; }
.eleg-contagem .crit-verificar { color: var(--tinta-suave); }
.eleg-contagem .crit-falha { color: var(--vermelho); }
.azulejo-abrir {
  margin-top: 0.5rem; align-self: flex-start;
  background: none; border: 1.5px solid var(--linha); border-radius: 10px;
  padding: 0.4rem 0.75rem; font-size: 0.82rem; color: var(--verde); font-family: inherit;
}
.azulejo-abrir:hover { border-color: var(--verde); }
.crit-detalhe { margin-top: 0.7rem; border-top: 1px solid var(--linha); padding-top: 0.7rem; }

/* ordem dos pedidos */
.plano-ordem { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; padding: 0; }
.plano-ordem li { display: flex; gap: 0.6rem; align-items: flex-start; }
.ordem-texto { display: flex; flex-direction: column; min-width: 0; }
.ordem-texto b { font-size: 0.9rem; line-height: 1.35; }
.ordem-texto i { font-style: normal; font-size: 0.76rem; color: var(--tinta-suave); }
.plano-colisao-parte { font-size: 0.86rem; color: var(--vermelho); }

/* checklist de documentos */
.checklist-docs { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; padding: 0; }
.checklist-docs li { display: flex; gap: 0.55rem; align-items: flex-start; }
.checklist-gratis .crit-icone { color: var(--tinta-suave); }
.bloco-docs-gratis { border-left: 4px solid var(--linha); padding-left: 0.8rem; }
.docs-gratis-sub { font-size: 0.88rem; color: var(--tinta-suave); margin-bottom: 0.6rem; }

@media (min-width: 700px) {
  .painel-metricas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metrica-larga { grid-column: auto; }
  .grelha-azulejos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grelha-azulejos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* impressão: os azulejos viram lista, e os NÚMEROS mantêm-se */
@media print {
  .painel-metricas { grid-template-columns: repeat(4, 1fr) !important; gap: 6pt; }
  .metrica { border: 1pt solid #999 !important; background: none !important; padding: 6pt 8pt; }
  .metrica b { color: #111 !important; font-size: 13pt; }
  .metrica span { color: #444 !important; }
  .metrica-larga { grid-column: auto !important; }
  .grelha-azulejos { display: block !important; }
  .azulejo {
    border: none !important; border-bottom: 1pt solid #DDD !important; border-radius: 0;
    padding: 6pt 0; break-inside: avoid; page-break-inside: avoid;
  }
  .azulejo-abrir, .crit-detalhe { display: none !important; }
  .selo-num {
    background: none !important; color: #111 !important;
    border: 1pt solid #111; width: 14pt; height: 14pt; font-size: 9pt;
  }
  .azulejo-pct, .azulejo-dados b { color: #111 !important; }
  .etiqueta-parte { background: none !important; border: 1pt solid #999 !important; color: #333 !important; }
  .micro-eleg { color: #111 !important; }
  .plano-ordem li, .checklist-docs li { break-inside: avoid; page-break-inside: avoid; }
}

/* ---------- a oferta de envio por email (o Radar oferece, não pede) ---------- */
.convite-titulo { font-family: var(--serif); font-size: 1.05rem; line-height: 1.3; }
.convite-email {
  width: 100%; border: 1.5px solid var(--linha); border-radius: 12px;
  padding: 0.7rem 0.9rem; font-family: inherit; font-size: 1rem; background: var(--branco);
}
.convite-email:focus { outline: none; border-color: var(--verde); }
#habemus-envio { width: 100%; margin: 1.2rem 0 0.4rem; text-align: left; }
#habemus-envio .despedida-radar { cursor: default; }
#lista-envio:not(:empty) { margin-bottom: 1.1rem; }
@media print { .convite-sync, #lista-envio, #habemus-envio { display: none !important; } }

/* ---------- critérios: a lista ✓ / ⚠️ / ✖ (base, usada nos azulejos,
     na checklist de documentos e no detalhe) ---------- */
.crit-lista { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; padding: 0; margin: 0; }
.crit-lista li { display: flex; gap: 0.55rem; align-items: flex-start; }
.crit-icone { flex: none; width: 1.15rem; font-size: 0.9rem; line-height: 1.5; }
.crit-texto { font-size: 0.88rem; line-height: 1.45; display: block; min-width: 0; }
.crit-porque { display: block; font-size: 0.75rem; color: var(--tinta-suave); margin-top: 0.1rem; }
.crit-prova {
  display: block; font-size: 0.75rem; color: var(--tinta-suave);
  font-style: italic; margin-top: 0.15rem;
}
.crit-lista .crit-cumpre .crit-icone { color: #2E7D52; }
.crit-lista .crit-falha .crit-icone { color: var(--vermelho); }
.crit-lista .crit-falha .crit-texto { color: var(--vermelho); }
.checklist-docs .crit-cumpre .crit-icone { color: #2E7D52; }
.dossier-fonte-linha { font-size: 0.76rem; color: var(--tinta-suave); margin-top: 0.6rem; }

/* os azulejos não se esticam à altura do vizinho mais alto */
.grelha-azulejos { align-items: start; }

@media print {
  .crit-porque, .crit-prova, .dossier-fonte-linha { color: #444 !important; }
  .crit-lista .crit-falha .crit-texto { color: #111 !important; font-weight: 600; }
}

/* o número acompanha o apoio no cartão da lista e no detalhe */
.compat { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.compat .selo-num { width: 1.5rem; height: 1.5rem; font-size: 0.85rem; }
.detalhe-nome .selo-num {
  width: 2rem; height: 2rem; font-size: 1.1rem;
  margin-right: 0.55rem; vertical-align: 0.15em;
}
@media print { .detalhe-nome .selo-num, .compat .selo-num { background: none !important; color: #111 !important; border: 1pt solid #111; } }

/* a saída do bloco de guardar: link pequeno e discreto, nunca um botão
   do mesmo peso do "Guardar os apoios" (regra da fundadora) */
.convite-saida {
  align-self: flex-start; background: none; border: none; padding: 0.2rem 0;
  font-family: inherit; font-size: 0.8rem; color: var(--tinta-suave);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.convite-saida:hover { color: var(--tinta); }

/* ================= Gestão, zona sensível e legal ================= */
.btn-perigo { background: var(--vermelho); color: var(--branco); }

/* ações discretas nos cartões (não competem com abrir o projeto) */
.projeto-acoes, .entidade-acoes { display: flex; gap: 0.7rem; margin-top: 0.35rem; }
.acao-linha {
  background: none; border: none; padding: 0; font-family: inherit;
  font-size: 0.76rem; color: var(--tinta-suave);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.acao-linha:hover { color: var(--vermelho); }
.entidade-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.entidade-acoes { margin-top: 0; }

/* edição inline (renomear projeto, corrigir email) */
.linha-editar { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.editar-input {
  border: 1.5px solid var(--verde); border-radius: 10px; padding: 0.45rem 0.6rem;
  font-family: inherit; font-size: 0.95rem; background: var(--branco); min-width: 0; flex: 1;
}
.editar-input:focus { outline: none; }
.editar-guardar { padding: 0.45rem 0.8rem; font-size: 0.85rem; white-space: nowrap; }

/* estado vazio dos projetos */
.vazio-projetos {
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  text-align: center; padding: 2.2rem 1rem; color: var(--tinta-suave);
}
.vazio-projetos p { font-size: 0.95rem; max-width: 34ch; line-height: 1.5; }
.vazio-projetos .radar-avatar { color: var(--lima); }

/* perfil do projeto (colapsável) */
.perfil-bloco {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 16px;
  padding: 0.9rem 1rem; margin-top: 1.2rem;
}
.perfil-bloco summary { font-weight: 600; cursor: pointer; font-size: 0.95rem; }
.perfil-bloco #btn-refazer { width: 100%; margin-top: 0.8rem; }

/* zona sensível do Cofre */
.zona-sensivel { margin-top: 2.4rem; border-top: 1px solid var(--linha); padding-top: 1.2rem; }
.zona-linha {
  display: flex; gap: 0.9rem; align-items: flex-start; justify-content: space-between;
  border: 1px solid var(--linha); border-radius: 14px;
  background: var(--branco); padding: 0.85rem 1rem; margin-bottom: 0.6rem; flex-wrap: wrap;
}
.zona-texto { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; }
.zona-texto b { font-size: 0.92rem; overflow-wrap: anywhere; }
.zona-texto span { font-size: 0.78rem; color: var(--tinta-suave); line-height: 1.45; }
.zona-linha .btn { padding: 0.55rem 0.95rem; font-size: 0.88rem; white-space: nowrap; }
.zona-perigo { border-color: rgba(179, 64, 42, 0.4); }
.zona-legal { margin-top: 1rem; font-size: 0.82rem; color: var(--tinta-suave); }

/* o que se perde, dentro da confirmação */
.confirmar-perdas {
  list-style: none; padding: 0.7rem 0.9rem; margin: 0.2rem 0 0.8rem;
  background: var(--papel); border-left: 3px solid var(--vermelho); border-radius: 0 10px 10px 0;
  display: flex; flex-direction: column; gap: 0.35rem;
  font-size: 0.85rem; line-height: 1.45;
}
.confirmar-perdas li::before { content: '— '; color: var(--tinta-suave); }
#confirmar-palavra {
  width: 100%; border: 1.5px solid var(--vermelho); border-radius: 12px;
  padding: 0.7rem 0.9rem; font-family: inherit; font-size: 1.05rem;
  letter-spacing: 0.12em; text-transform: uppercase; background: var(--branco);
}

/* links legais */
.link-legal {
  background: none; border: none; padding: 0; font-family: inherit; font-size: inherit;
  color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.landing-legal { display: block; margin-top: 0.5rem; opacity: 0.85; }

/* páginas legais */
#ecra-legal { max-width: 720px; }
#ecra-legal h3 { font-family: var(--serif); font-size: 1.15rem; margin: 1.5rem 0 0.4rem; }
#ecra-legal p { font-size: 0.93rem; line-height: 1.6; margin-bottom: 0.6rem; }
#ecra-legal ul { padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.93rem; line-height: 1.55; margin-bottom: 0.6rem; }
.legal-aviso {
  background: #FFF8EC; border: 1px solid #E8D6AE; border-radius: 12px;
  padding: 0.7rem 0.9rem; font-size: 0.86rem !important; margin: 0.8rem 0 1.2rem;
}
.legal-por-definir {
  background: rgba(179, 64, 42, 0.1); color: var(--vermelho);
  border-radius: 6px; padding: 0.05rem 0.35rem; font-size: 0.85em;
}

/* ================= O ecrã do projeto: cinco caminhos ================= */
.projeto-sub { margin-bottom: 0.2rem; }
.projeto-resumo {
  font-size: 0.9rem; color: var(--verde); font-weight: 500; margin-bottom: 1.2rem;
}
.convite-nome {
  background: none; border: none; padding: 0; font-family: inherit; font-size: inherit;
  color: var(--verde); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer;
}
.via {
  display: flex; align-items: center; justify-content: space-between; gap: 0.9rem;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 14px;
  padding: 0.95rem 1.05rem; margin-bottom: 0.6rem; cursor: pointer;
}
.via:hover, .via:focus-visible { border-color: var(--verde); outline: none; }
.via-texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.via-texto b { font-size: 1rem; }
.via-texto span { font-size: 0.8rem; color: var(--tinta-suave); line-height: 1.45; }
.via-seta { color: var(--lima); font-size: 1.1rem; flex: none; }
.via-adormecida { opacity: 0.72; }
.via-adormecida .via-seta { color: var(--linha); }
.projeto-rodape { display: flex; gap: 1rem; margin-top: 1.4rem; flex-wrap: wrap; }

/* afordância de clicável no cartão da lista de projetos */
.projeto-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; flex: none; }
.projeto-abrir { font-size: 0.76rem; color: var(--verde); font-weight: 600; white-space: nowrap; }
.projeto-cartao:hover .projeto-abrir { text-decoration: underline; text-underline-offset: 3px; }
.entidade-sem-nome {
  color: var(--verde); font-weight: 500; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
}

/* ================= Notas ================= */
#ecra-notas { display: flex; flex-direction: column; }
#notas-texto {
  width: 100%; min-height: 46vh; resize: vertical;
  border: 1.5px solid var(--linha); border-radius: 14px;
  padding: 0.9rem 1rem; font-family: inherit; font-size: 1rem; line-height: 1.6;
  background: var(--branco); color: var(--tinta);
}
#notas-texto:focus { outline: none; border-color: var(--verde); }
.notas-estado {
  font-size: 0.76rem; color: var(--tinta-suave); margin-top: 0.5rem; min-height: 1.1rem;
}
.notas-impressas {
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 0.93rem; line-height: 1.6;
  background: var(--papel); border-left: 3px solid var(--lima);
  border-radius: 0 10px 10px 0; padding: 0.8rem 1rem;
}

@media (min-width: 700px) {
  #ecra-projeto { max-width: 680px; }
  #ecra-notas { max-width: 760px; }
}

@media print {
  /* as notas vão ao papel tal como foram escritas */
  .notas-impressas {
    background: none !important; border-left: 2pt solid #111 !important;
    border-radius: 0; padding: 4pt 0 4pt 8pt;
    break-inside: auto; page-break-inside: auto;
  }
}