/* public/styles.css — source: docs/design/kit-mockup.html, do not invent new tokens */
:root{
  /* ------------------------------------------------------------------------
     Manual de Design da Sónia Pio, versão 1.0 (Agosto 2026) — as oito cores,
     tal como estão em Pasta claude/design-marca/Cores.dc.html. Códigos exactos,
     não aproximados. Nenhum ecrã escreve uma cor à mão: tudo sai daqui.
     ------------------------------------------------------------------------ */
  --fundo:#FAF6F7;         /* fundo de tudo */
  --papel:#FFFFFF;         /* cartões */
  --vinho-vivo:#A81E5B;    /* SÓ botões e preços */
  --vinho:#6A1B4D;         /* detalhes, fundo do logo */
  --vinho-escuro:#481234;  /* títulos e blocos */
  --vinho-noite:#26091B;   /* texto e fundos profundos */
  --ouro:#D6A02F;          /* etiquetas no claro */
  --ouro-claro:#F0CE86;    /* só sobre escuro */

  /* ---- tons derivados ----------------------------------------------------
     O Manual tem oito cores e nenhum cinzento, mas a aplicação precisa de
     texto secundário, contornos e fundos suaves. Estes tons são calculados a
     partir da paleta e escritos aqui em código sólido — não são cores novas,
     são a paleta diluída sobre o fundo, e cumprem a regra de não haver
     transparência fora do vidro. */
  --texto-suave:#66505D;   /* 70% vinho noite sobre o fundo — contraste 6.82 */
  --linha:#E0CFD8;         /* 18% vinho sobre o fundo */
  --vinho-tenue:#F3EDF1;   /*  8% vinho sobre papel */
  --ouro-tenue:#F9F2E2;    /* 14% ouro sobre papel */
  --ouro-escuro:#8A6015;   /* fecho do gradiente do selo */

  /* O ouro puro tem 2.19 de contraste sobre o fundo claro: não se lê em texto
     pequeno. Fica para o que é decoração (barras, contornos, ícones) e para
     texto sobre escuro, como o Manual manda. As etiquetas em fundo claro usam
     este ouro escurecido com vinho noite — contraste 4.85. */
  --ouro-texto:#906427;

  /* ---- cores funcionais, fora da paleta de marca -------------------------
     Um aviso de erro tem de se distinguir de um botão. Nenhuma das oito cores
     serve para isso sem confundir, por isso estas ficam declaradas à parte e
     identificadas como funcionais. */
  --erro:#A3312C;
  --erro-escuro:#8A2723;
  --erro-fundo:#FDF1F0;
  --erro-linha:#E6B7B4;
  --sucesso:#1F5D45;
  --sucesso-fundo:#DFF3E6;

  /* ---- o vidro -----------------------------------------------------------
     Excepção assumida à regra "sem transparência" (decisão da Sónia,
     2026-08-26): os cartões mantêm o efeito de vidro. A transparência vive
     só aqui — nunca em texto, botões, contornos ou etiquetas. */
  /* O vidro precisa de ter alguma coisa por trás para desfocar. O fundo tinha
     dois brilhos, eu tirei-os para cumprir o Manual, e o efeito de vidro
     desapareceu com eles — o cartão ficou da mesma cor do fundo. Voltam, mas
     nas cores novas: ouro e vinho, muito ténues, sobre o fundo do Manual.
     É a mesma excepção do vidro, não uma nova. */
  --brilho-ouro:rgba(214,160,47,.15);
  --brilho-vinho:rgba(106,27,77,.11);

  --brilho-ouro-forte:rgba(214,160,47,.20);
  --brilho-vinho-vivo:rgba(168,30,91,.28);
  --vidro-entrada:rgba(255,255,255,.88);
  --sombra-funda:rgba(38,9,27,.55);

  --vidro:rgba(255,255,255,.55);
  --vidro-borda:rgba(255,255,255,.6);
  --vidro-leve:rgba(255,255,255,.42);
  --sombra:rgba(38,9,27,.28);
  --sombra-leve:rgba(38,9,27,.08);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:-apple-system,"Segoe UI",Arial,sans-serif;
  background:radial-gradient(circle at 12% 8%, var(--brilho-ouro), transparent 42%),
    radial-gradient(circle at 92% 18%, var(--brilho-vinho), transparent 48%),
    var(--fundo);
  background-attachment:fixed;
  color:var(--vinho-noite); line-height:1.6; min-height:100vh;
}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:600;}
.glass{
  background:var(--vidro); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--linha); border-radius:22px;
  box-shadow:0 20px 50px -20px var(--sombra), 0 2px 8px var(--sombra-leve);
}
.selo{
  width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--ouro-claro), var(--ouro) 55%, var(--ouro-escuro) 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px var(--sombra-leve), inset 0 0 0 2px var(--vidro-borda);
  position:relative;flex-shrink:0;
}
.selo::after{content:'';position:absolute;inset:6px;border-radius:50%;border:1.5px dashed var(--linha);}
.selo span{font-family:Georgia,serif;font-weight:600;color:var(--vinho-noite);font-size:1.3rem;font-style:italic;}
details.acordeao{
  border:1px solid var(--linha);border-radius:16px;margin-bottom:14px;overflow:hidden;
  background:var(--vidro);backdrop-filter:blur(10px);
  box-shadow:0 14px 34px -22px var(--sombra);
}
details.acordeao summary{
  padding:16px 20px;font-weight:700;color:var(--vinho);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;font-family:Georgia,serif;font-size:1.05rem;
}
details.acordeao summary::-webkit-details-marker{display:none;}
details.acordeao summary::after{content:'+';font-size:1.4rem;color:var(--ouro-texto);}
details.acordeao[open] summary::after{content:'\2013';}
details.acordeao[open] summary{background:var(--ouro-tenue);}
details.acordeao .conteudo{padding:0 20px 20px;}

.tela{padding:40px 24px 90px;max-width:920px;margin:0 auto;}
.pilares-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:32px 0 40px;}
@media (max-width:720px){.pilares-grid{grid-template-columns:1fr;}}
.pilar-card{padding:26px 22px;position:relative;overflow:hidden;}
.pilar-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--ouro),var(--vinho));}
.eyebrow{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ouro-texto);font-weight:700;}
.progresso-barra{height:7px;background:var(--linha);border-radius:10px;overflow:hidden;margin-top:14px;}
.progresso-barra .fill{height:100%;background:linear-gradient(90deg,var(--vinho),var(--ouro));border-radius:10px;}

.subcard{background:var(--papel);border:1px solid var(--linha);border-top:3px solid var(--ouro);border-radius:18px;padding:24px 26px;margin-bottom:22px;backdrop-filter:blur(10px);}
.subcard h3{color:var(--vinho);font-size:1.1rem;margin-bottom:16px;}
.subcard .desc{font-size:.84rem;color:var(--texto-suave);margin-bottom:14px;}
.plataformas-lista{list-style:none;margin-bottom:14px;}
.plataformas-lista li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--linha);font-size:.92rem;}
.plataformas-lista li:last-child{border-bottom:none;}
.plataformas-lista input[type=checkbox]{width:17px;height:17px;accent-color:var(--vinho);}

.campo{margin-bottom:16px;}
.campo label{display:block;font-weight:700;font-size:.82rem;margin-bottom:6px;color:var(--vinho);}
.campo textarea,
.campo input[type=text],
.campo input[type=email],
.campo input[type=password],
.campo input[type=url],
.campo input[type=date],
.campo select{
  width:100%;border:1.5px solid var(--linha);border-radius:12px;padding:12px 14px;
  font-family:inherit;font-size:.9rem;color:var(--vinho-noite);background:var(--papel);resize:vertical;
}
.campo textarea:focus,.campo input:focus,.campo select:focus{outline:2px solid var(--ouro);border-color:var(--ouro);}
/* R34: o olho para ver a password enquanto se escreve. Fica dentro do campo,
   encostado a direita, e o campo ganha espaco a direita para o texto nunca
   passar por baixo dele. */
.campo-password{position:relative;}
.campo-password input{width:100%;padding-right:46px;}
.olho-password{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;font-size:1.05rem;line-height:1;padding:6px 8px;border-radius:6px;opacity:.5;color:var(--vinho);}
.olho-password:hover{opacity:.85;background:var(--vinho-tenue);}
.olho-password:focus-visible{outline:2px solid var(--ouro);opacity:1;}
.olho-password.a-mostrar{opacity:1;}

.campo input::placeholder,.campo textarea::placeholder{color:var(--texto-suave);opacity:1;}
.btn-primario{
  /* Manual: "O vinho vivo só em botões e preços." Papel por cima, com 7.00 de
     contraste — o ouro claro aqui dá 4.62 e o Manual reserva-o para escuro. */
  background:var(--vinho-vivo);color:var(--papel);
  border:none;padding:13px 26px;border-radius:14px;font-weight:700;font-size:.92rem;cursor:pointer;
  box-shadow:0 10px 24px -8px var(--sombra);
}
.btn-primario:hover{background:var(--vinho);}
.btn-primario:focus-visible, a:focus-visible, button:focus-visible{outline:3px solid var(--ouro);outline-offset:2px;}

.crm-wrap{overflow-x:auto;}
.crm-table{width:100%;border-collapse:collapse;}
.crm-table th{background:var(--vinho);color:var(--ouro-claro);padding:11px 14px;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;text-align:left;}
.crm-table th:first-child{border-radius:14px 0 0 0;}
.crm-table th:last-child{border-radius:0 14px 0 0;}
.crm-table td{padding:12px 14px;border-bottom:1px solid var(--linha);font-size:.88rem;}
.crm-table input[type=text]{border:none;background:transparent;font:inherit;color:inherit;width:100%;padding:4px;}
.crm-table input[type=text]:focus{outline:1.5px solid var(--ouro);border-radius:6px;}
.estado-pill{padding:4px 11px;border-radius:20px;font-size:.72rem;font-weight:700;white-space:nowrap;border:none;font-family:inherit;cursor:pointer;}
.estado-pill.ativa{background:#dff3e6;color:#1f7a4d;}
.estado-pill.pausa{background:var(--linha);color:var(--texto-suave);}
.estado-pill.espera{background:var(--vinho-tenue);color:var(--vinho);}
.btn-add-cliente{margin-bottom:16px;background:var(--vinho-tenue);color:var(--vinho);border:1.5px dashed var(--vinho);border-radius:20px;padding:10px 22px;font-weight:700;font-size:.84rem;cursor:pointer;font-family:inherit;}
.btn-remover{background:none;border:none;color:var(--texto-suave);font-size:1.1rem;cursor:pointer;line-height:1;padding:4px 8px;}
.btn-remover:hover{color:var(--vinho);}

.docs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:22px;}
.doc-card{padding:20px 22px;display:flex;align-items:center;gap:16px;}
.doc-icone{width:44px;height:44px;border-radius:11px;background:var(--vinho-tenue);display:flex;align-items:center;justify-content:center;color:var(--vinho);font-size:1.2rem;flex-shrink:0;}
.doc-nome{flex:1;}
.doc-nome strong{display:block;font-size:.92rem;color:var(--vinho-noite);}
.doc-nome span{font-size:.74rem;color:var(--texto-suave);}
.btn-download{background:var(--vinho);color:var(--ouro-claro);border:none;padding:9px 16px;border-radius:10px;font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap;}
.doc-card.bloqueado{background:var(--vinho-tenue);border:1.5px dashed var(--vinho);}
.doc-card.bloqueado .doc-icone{background:transparent;color:var(--vinho);}
.aviso-advogada{font-size:.76rem;color:var(--vinho);font-weight:700;background:var(--vinho-tenue);padding:7px 12px;border-radius:8px;white-space:nowrap;}
.cadeado{width:20px;height:20px;flex-shrink:0;}

.atalhos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.atalho{padding:18px 20px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:transform .2s ease;text-decoration:none;}
.atalho:hover{transform:translateY(-3px);}
.atalho .icone{width:38px;height:38px;border-radius:10px;background:var(--vinho-tenue);display:flex;align-items:center;justify-content:center;color:var(--vinho);font-size:1.1rem;flex-shrink:0;}
.atalho .txt strong{display:block;font-size:.9rem;color:var(--vinho-noite);}
.atalho .txt span{font-size:.75rem;color:var(--texto-suave);}

.tag-bonus{
  display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ouro-texto);margin-bottom:8px;
}
.prompt-box{
  background:var(--vinho-escuro);margin:0 0 20px;border-radius:12px;padding:16px 16px 14px;position:relative;
  box-shadow:0 10px 26px -12px var(--sombra);
}
.prompt-box pre{color:var(--ouro-claro);font-family:'Courier New',monospace;font-size:.78rem;white-space:pre-wrap;line-height:1.6;}
.prompt-acoes{display:flex;gap:10px;margin:0 0 20px;}
.btn-copiar{
  flex:1;background:var(--ouro);color:var(--vinho-noite);border:none;
  padding:9px;border-radius:9px;font-weight:700;font-size:.78rem;cursor:pointer;font-family:inherit;
}
.btn-skill{
  flex:1;background:transparent;border:1.5px solid var(--ouro);color:var(--vinho);
  padding:9px;border-radius:9px;font-weight:700;font-size:.78rem;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;
}
.btn-skill:hover{background:var(--vinho-tenue);}
.modo-voz{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 16px;}
@media (max-width:640px){.modo-voz{grid-template-columns:1fr;}}
.modo-voz-card{border:1.5px solid var(--linha);border-radius:12px;padding:14px 16px;background:var(--papel);}
.modo-voz-card h5{color:var(--vinho);font-size:.9rem;margin-bottom:4px;}
.modo-voz-card p{font-size:.78rem;color:var(--texto-suave);}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

/* ── R17.1: sidebar lateral (padrão do mockup kit-mockup.html) ── */
.app-shell{display:flex;min-height:100vh;}
.app-conteudo{flex:1;min-width:0;}
.mobile-topbar{display:none;}
.sidebar{
  width:250px;flex-shrink:0;
  background:linear-gradient(180deg,var(--vinho-noite),var(--vinho-escuro) 55%);
  border-right:3px solid var(--ouro);
  padding:22px 0 100px;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar-topo{display:flex;align-items:center;gap:10px;padding:0 18px 18px;border-bottom:1px solid var(--vinho);margin-bottom:16px;}
.sidebar-topo .marca{font-family:Georgia,'Times New Roman',serif;font-style:italic;color:var(--ouro-claro);font-size:1.05rem;}
.sidebar-grupo{padding:0 10px;margin-bottom:20px;}
.sidebar-grupo-titulo{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ouro-claro);opacity:.75;font-weight:700;padding:0 10px;margin-bottom:6px;}
/* R33.1: o titulo do grupo abre e fecha. O sinal fica a direita, discreto,
   e roda quando o grupo abre, para se perceber que ha mais por baixo. */
.sidebar-grupo>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.sidebar-grupo>summary::-webkit-details-marker{display:none;}
.sidebar-grupo>summary::after{content:'ƒA';font-size:1rem;line-height:1;transition:transform .18s ease;opacity:.8;}
.sidebar-grupo[open]>summary::after{transform:rotate(90deg);}
.sidebar-grupo>summary:hover{opacity:1;}

.sidebar-link{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 10px;border-radius:10px;color:var(--fundo);text-decoration:none;
  font-size:.88rem;cursor:pointer;margin-bottom:1px;border-left:3px solid transparent;
}
.sidebar-link:hover{background:var(--vinho);border-left-color:var(--ouro);}
.sidebar-link.ativo{background:var(--ouro);color:var(--vinho-noite);font-weight:700;border-left-color:var(--ouro-claro);}
.sidebar-overlay{display:none;}
.btn-fechar-sidebar{display:none;}
@media (max-width:880px){
  .mobile-topbar{display:flex;align-items:center;gap:12px;background:var(--vinho-escuro);padding:10px 14px;position:sticky;top:0;z-index:50;}
  .mobile-topbar button{background:none;border:none;color:var(--ouro-claro);font-size:1.3rem;cursor:pointer;}
  .mobile-topbar .marca{font-family:Georgia,serif;font-style:italic;color:var(--ouro-claro);}
  .sidebar{position:fixed;left:-270px;top:0;bottom:0;width:250px;z-index:60;transition:left .25s ease;box-shadow:0 0 40px var(--sombra);}
  .sidebar.aberta{left:0;}
  .btn-fechar-sidebar{display:block;position:absolute;top:16px;right:14px;background:none;border:none;font-size:1.3rem;color:var(--ouro-claro);cursor:pointer;}
  .sidebar-overlay.ativo{display:block;position:fixed;inset:0;background:var(--vinho-noite);opacity:.55;z-index:55;}
}

/* R18 — estado de gravação. Fica no topo do conteúdo, discreto quando está
   tudo bem e impossível de ignorar quando falhou. */
.estado-gravacao{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:12px;justify-content:flex-end;
  font-size:.78rem;font-weight:700;letter-spacing:.02em;
  min-height:26px;padding:0 4px;
  transition:color .2s ease;
}
.estado-gravacao.vazio{visibility:hidden;}
.estado-gravacao.a-guardar{color:var(--texto-suave);}
.estado-gravacao.guardado{color:var(--sucesso);}
.estado-gravacao.falhou{
  color:var(--erro);background:var(--erro-fundo);
  border:1px solid var(--erro-linha);border-radius:12px;
  padding:7px 12px;justify-content:space-between;
  box-shadow:0 8px 20px -12px var(--sombra-leve);
}
.estado-gravacao.falhou button{
  font:inherit;font-size:.76rem;font-weight:700;
  background:var(--erro);color:var(--papel);border:none;border-radius:8px;
  padding:5px 12px;cursor:pointer;
}
.estado-gravacao.falhou button:hover{background:var(--erro-escuro);}

/* R18.5 — o campo cujo conteúdo não chegou a ser gravado. */
.campo-por-guardar,
.campo textarea.campo-por-guardar,
.campo input.campo-por-guardar,
.campo select.campo-por-guardar{
  border:1.5px solid var(--erro) !important;
  background:var(--erro-fundo) !important;
}

/* ===== Fase 3 — Início simplificado, Recursos, Exportar, avisos ===== */

/* R22.1 — saudação */
.saudacao{font-size:.82rem;color:var(--ouro-texto);font-weight:700;letter-spacing:.02em;margin-bottom:2px;}

/* R22.2 — os três pilares sem percentagem. Deliberadamente uma lista discreta
   e não cartões com barra: uma barra pede um número, e o número que tínhamos
   media a checklist, não o método. */
.pilares-lista{display:flex;flex-direction:column;gap:10px;}
.pilar-linha{
  display:flex;align-items:center;gap:16px;padding:15px 20px;text-decoration:none;
  background:var(--vidro-leve);border:1px solid var(--linha);border-radius:16px;
  transition:transform .18s ease, border-color .18s ease;
}
.pilar-linha:hover{transform:translateX(3px);border-color:var(--ouro);}
.pilar-numero{
  font-family:Georgia,serif;font-size:1.05rem;font-weight:600;color:var(--ouro-texto);
  flex-shrink:0;width:26px;
}
.pilar-texto{flex:1;min-width:0;}
.pilar-texto strong{color:var(--vinho);font-size:.98rem;}
.pilar-nome{color:var(--texto-suave);font-size:.86rem;}
.pilar-desc{display:block;font-size:.8rem;color:var(--texto-suave);margin-top:2px;}
.pilar-seta{color:var(--vinho);font-weight:700;flex-shrink:0;}

.ligacao-discreta{
  color:var(--vinho);font-size:.86rem;text-decoration:none;
  border-bottom:1px solid var(--vinho-tenue);padding-bottom:2px;
}
.ligacao-discreta:hover{border-bottom-color:var(--ouro);}

/* R21.3 — o título do grupo Recursos abre a página geral */
.sidebar-grupo-titulo .ligavel,.sidebar-grupo-titulo.ligavel{display:block;text-decoration:none;cursor:pointer;color:inherit;}
.sidebar-grupo-titulo .ligavel:hover,.sidebar-grupo-titulo.ligavel:hover{opacity:1;color:var(--ouro);}
.sidebar-grupo-titulo .ligavel.ativo,.sidebar-grupo-titulo.ligavel.ativo{opacity:1;color:var(--ouro);}

/* R21.4 — cartões de Recursos */
.recursos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
.recurso-card{padding:24px 24px 22px;display:flex;flex-direction:column;}
.recurso-icone{
  width:40px;height:40px;border-radius:11px;background:var(--vinho-tenue);
  display:flex;align-items:center;justify-content:center;color:var(--vinho);
  font-size:1.05rem;margin-bottom:14px;
}
.recurso-nome{color:var(--vinho);font-size:1.08rem;margin-bottom:8px;}
.recurso-desc{font-size:.85rem;color:var(--texto-suave);flex:1;margin-bottom:16px;}
.recurso-botao{text-decoration:none;font-size:.82rem;padding:9px 16px;align-self:flex-start;}

/* R24.3 — estado de cada secção no ecrã de exportação */
.seccao-export{display:flex;gap:14px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--vinho-tenue);}
.seccao-export:last-child{border-bottom:none;}
.seccao-marca{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:700;margin-top:1px;
}
.seccao-marca.feita{background:var(--vinho-tenue);color:var(--vinho);}
.seccao-marca.vazia{background:var(--ouro-tenue);color:var(--ouro-texto);}
.seccao-marca.desconhecida{background:var(--linha);color:var(--texto-suave);}
.seccao-texto{flex:1;min-width:0;}
.seccao-texto strong{color:var(--vinho-noite);font-size:.92rem;}
.seccao-desc{display:block;font-size:.82rem;color:var(--texto-suave);margin-top:2px;}

/* R23.2 e R23.3 — avisos na Biblioteca de Documentos */
.aviso-geral{
  padding:18px 22px;margin:20px 0 4px;border-left:3px solid var(--ouro);
}
.aviso-geral strong{display:block;color:var(--vinho);font-size:.92rem;margin-bottom:6px;}
.aviso-geral p{font-size:.86rem;color:var(--vinho-noite);}
.doc-aviso{
  display:block;font-size:.74rem;color:var(--vinho);font-weight:700;margin-top:5px;
}

/* ===== Correcções de telemóvel (2026-08-25) ===================================
   Duas coisas partiam em ecrã estreito: a pergunta do Diagnóstico não cabia no
   cartão, e a Matriz de Decisão do Negócio era uma tabela de três colunas que
   obrigava a arrastar para o lado. Testado a 320, 360, 375, 390 e 430. */

/* Regra de base: nenhum texto dentro do conteúdo pode empurrar a página para
   fora da largura do ecrã. Palavras longas (endereços, nomes de ferramentas)
   partem-se em vez de esticar o pai. */
.app-conteudo{overflow-x:hidden;}
.texto-quebravel,
.cartao-pergunta h2,
.cartao-pergunta p,
.matriz-decisao td{overflow-wrap:anywhere;}

/* ── Diagnóstico ───────────────────────────────────────────────────────────
   O padding era fixo em 36px de cada lado: a 320px sobravam 200px para uma
   pergunta a 1.4rem. Agora o cartão e o tipo de letra acompanham o ecrã. */
.cartao-pergunta{padding:40px 36px;margin-top:16px;}
.pergunta-titulo{
  color:var(--vinho);
  font-size:clamp(1.12rem, 4.6vw, 1.4rem);
  line-height:1.32;
  margin-bottom:8px;
  overflow-wrap:anywhere;
  hyphens:auto;
}
.pergunta-ajuda{
  font-size:.85rem;color:var(--texto-suave);margin-bottom:20px;overflow-wrap:anywhere;
}
.pergunta-botoes{display:flex;justify-content:space-between;gap:12px;margin-top:20px;flex-wrap:wrap;}
.pergunta-botoes button{flex:1 1 auto;min-width:0;}
.btn-secundario{
  background:none;border:1.5px solid var(--vinho);color:var(--vinho);
  padding:12px 20px;border-radius:14px;font-weight:700;font-size:.9rem;
  font-family:inherit;cursor:pointer;
}
.btn-secundario:disabled{opacity:.4;cursor:default;}

/* ── Matriz de Decisão do Negócio ─────────────────────────────────────────── */
.matriz-decisao{width:100%;border-collapse:collapse;margin:16px 0;table-layout:fixed;}
.matriz-decisao th{
  background:var(--vinho);color:var(--ouro-claro);padding:9px;text-align:left;
  font-size:.82rem;
}
.matriz-decisao td{border:1px solid var(--linha);padding:8px;font-size:.86rem;vertical-align:top;}

@media (max-width:720px){
  .cartao-pergunta{padding:26px 20px;}
  .pergunta-titulo{line-height:1.28;}

  /* Cada linha da tabela passa a ser um cartão vertical. A informação é toda
     a mesma e a relação entre campos mantém-se, porque cada valor leva o seu
     rótulo por cima em vez de depender de uma coluna que ficou fora do ecrã. */
  .matriz-decisao,
  .matriz-decisao tbody,
  .matriz-decisao tr,
  .matriz-decisao td{display:block;width:100%;}
  .matriz-decisao{table-layout:auto;border-collapse:separate;border-spacing:0;}
  /* display:none e não "esconder fora do ecrã": com position:absolute as
     células do cabeçalho continuavam a medir 155px cada e apareciam como
     elementos mais largos que o ecrã em qualquer verificação de layout.
     Aqui o cabeçalho é mesmo redundante, porque cada valor leva o seu rótulo. */
  .matriz-decisao thead{display:none;}
  .matriz-decisao tr{
    border:1px solid var(--linha);border-left:3px solid var(--ouro);border-radius:14px;
    background:var(--vidro);padding:4px 0;margin-bottom:14px;
  }
  .matriz-decisao td{border:none;padding:10px 14px;}
  .matriz-decisao td + td{border-top:1px solid var(--vinho-tenue);}
  .matriz-decisao td::before{
    content:attr(data-rotulo);
    display:block;
    font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;
    color:var(--ouro-texto);font-weight:700;margin-bottom:3px;
  }
}

@media (max-width:400px){
  .tela{padding:28px 14px 80px;}
  .cartao-pergunta{padding:22px 16px;}
  .pergunta-botoes button{flex:1 1 100%;}
  .recurso-card{padding:20px 18px 18px;}
  .pilar-linha{padding:13px 14px;gap:12px;}
  .aviso-geral{padding:16px 16px;}
  .doc-card{padding:16px 16px;flex-wrap:wrap;}
  .doc-card .btn-download{width:100%;}
  .aviso-advogada{white-space:normal;}
}

/* ===== Fase 4 — diagnóstico por escolhas, prioridade e progresso real ===== */

/* R26.1 — as três opções. Alvo grande, porque isto responde-se no telemóvel. */
.opcoes{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.opcao{
  display:flex;align-items:flex-start;gap:12px;padding:14px 16px;cursor:pointer;
  border:1.5px solid var(--linha);border-radius:14px;background:var(--papel);
  font-size:.92rem;color:var(--vinho-noite);transition:border-color .15s ease,background .15s ease;
}
.opcao:hover{border-color:var(--ouro);}
.opcao input{margin-top:3px;accent-color:var(--vinho);width:17px;height:17px;flex-shrink:0;}
.opcao span{overflow-wrap:anywhere;}
.opcao.escolhida{border-color:var(--vinho);background:var(--vinho-tenue);font-weight:700;}
.erro-escolha{color:#a3312c;font-size:.85rem;margin-top:10px;min-height:1.2em;}
.aviso-por-confirmar{
  font-size:.84rem;color:var(--vinho-noite);background:var(--ouro-claro);
  border-radius:10px;padding:10px 14px;margin-bottom:4px;
}

/* R27.4 — o cartão da prioridade */
.cartao-prioridade{padding:28px 30px;margin:16px 0;border-left:3px solid var(--ouro);}
.cartao-prioridade.tratada{border-left-color:var(--linha);opacity:.9;}
.prioridade-titulo{color:var(--vinho);font-size:clamp(1.2rem,4.6vw,1.5rem);line-height:1.3;margin:8px 0 12px;overflow-wrap:anywhere;}
.prioridade-motivo{font-size:.95rem;color:var(--vinho-noite);overflow-wrap:anywhere;}
.primeiro-passo{background:var(--vinho-tenue);border-radius:12px;padding:14px 16px;margin:18px 0 14px;}
.primeiro-passo p{font-size:.92rem;color:var(--vinho-noite);margin-top:4px;overflow-wrap:anywhere;}
.prioridade-area{font-size:.8rem;color:var(--texto-suave);margin-bottom:16px;overflow-wrap:anywhere;}
.prioridade-nota{margin-top:14px;font-size:.85rem;color:var(--texto-suave);}
.outras-areas{font-size:.86rem;color:var(--texto-suave);margin-top:14px;}

/* Um botão que se lê como uma ligação — para acções discretas que não são
   navegação e por isso não podem ser um <a>. */
.ligacao-botao{
  background:none;border:none;padding:0;font:inherit;font-size:.85rem;
  color:var(--vinho);text-decoration:underline;cursor:pointer;
}
.ligacao-botao:hover{color:var(--vinho-escuro);}

/* R29.5 — a contagem primeiro, a barra a seguir. O número que se lê é sempre
   "2 de 3", nunca uma percentagem solta. */
.pilar-contagem{display:block;font-size:.8rem;color:var(--texto-suave);margin-top:3px;}
.pilar-barra{display:block;height:5px;background:var(--linha);border-radius:8px;margin-top:7px;overflow:hidden;}
.pilar-barra-cheia{display:block;height:100%;background:linear-gradient(90deg,var(--vinho),var(--ouro));border-radius:8px;}
.proximo-porque{font-size:.9rem;color:var(--texto-suave);margin-bottom:16px;overflow-wrap:anywhere;}

/* R28.4 — o texto de revisão antigo, ao lado da data nova */
.revisao-anterior{
  font-size:.78rem;color:var(--texto-suave);background:var(--linha);
  border-radius:8px;padding:8px 12px;margin-top:8px;overflow-wrap:anywhere;
}


/* ===== Ecrãs de entrada: login, registo, recuperação de password ==========
   Pedido dela (2026-08-26): "gostava quando estava mesmo borgonha vidro".
   É aqui que o vidro faz sentido — branco translúcido sobre borgonha lê-se,
   sobre um fundo quase branco não. O interior da aplicação fica claro, porque
   é lá que se trabalha horas seguidas.

   Cores todas do Manual: fundo em vinho noite e vinho escuro, brilho a ouro,
   e o ouro claro por cima do escuro, que é a única coisa que o Manual lhe
   permite. */
body.entrada{
  background:
    radial-gradient(circle at 18% 12%, var(--brilho-ouro-forte), transparent 46%),
    radial-gradient(circle at 88% 82%, var(--brilho-vinho-vivo), transparent 52%),
    linear-gradient(160deg, var(--vinho-noite), var(--vinho-escuro) 60%, var(--vinho));
  background-attachment:fixed;
}
/* O cartão sobe de 55% para 88%: sobre borgonha, o vidro a 55% deixava o
   cartão num malva médio e o título de vinho descia a 4.02 de contraste.
   A 88% o vidro continua a ver-se e o texto passa a ler-se com folga. */
body.entrada .glass{
  background:var(--vidro-entrada);
  border:1px solid var(--vidro-borda);
  box-shadow:0 26px 60px -24px var(--sombra-funda);
}
body.entrada .selo{box-shadow:0 6px 22px var(--sombra-funda), inset 0 0 0 2px var(--vidro-borda);}

/* A promessa do produto, por cima do cartão. É a mesma frase da página de
   vendas: quem comprou reconhece-a ao entrar. Em ouro claro, que é o que o
   Manual manda usar sobre escuro. */
body.entrada > #app > div{flex-direction:column;gap:0;}
.entrada-promessa{
  display:none;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(1.15rem, 4.4vw, 1.55rem);
  line-height:1.35;
  color:var(--ouro-claro);
  text-align:center;
  margin-bottom:28px;
  max-width:22ch;
  overflow-wrap:anywhere;
}
.entrada-promessa em{font-style:italic;color:var(--papel);}
body.entrada .entrada-promessa{display:block;}
/* O rodapé legal e a nota de "já tens conta" assentam no borgonha, não no
   cartão — passam a ouro claro, que é o que o Manual manda usar sobre escuro. */
body.entrada > #app > div > div > p:last-of-type,
body.entrada .rodape-legal,
body.entrada .rodape-legal a{color:var(--ouro-claro);}