/* Casca da área de cliente: só o que é próprio da plataforma. Tokens e componentes (cabeçalho, botão, cartão, campo,
   rodapé) vêm de sistema.css, a MESMA cópia do site (sistema-design\copiar.mjs). */

/* ---------- esqueleto (igual ao do site) ---------- */
.pagina > .contentor { display: flex; flex-direction: column; gap: var(--e-5); padding-block: var(--e-5); }
@media (max-width: 599px) { .pagina > .contentor { padding-block: var(--e-5) var(--e-7); } }
.pag-cabeca { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2); max-width: 820px; }

/* ---------- entrar ---------- */
.acesso { width: 100%; max-width: 360px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--e-4); }
.acesso .pag-cabeca { align-items: center; text-align: center; margin-bottom: var(--e-2); }
.acesso .lead { font-size: var(--t-corpo); }
.acesso-form { display: flex; flex-direction: column; gap: var(--e-3); }
.acesso-form.cartao > * + * { margin-top: 0; }
.campo input.codigo { font-size: var(--t-h2); font-weight: var(--peso-forte); letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; min-height: 40px; padding-inline: var(--e-2); }
.acesso-mais { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2); }
.acesso-mais .ligacao { border: 0; background: none; padding: 0; min-height: var(--controlo); cursor: pointer; font-size: var(--t-pequeno); }
.acesso-mais .ligacao:disabled { color: var(--texto-2); cursor: default; text-decoration: none; }
.acesso .estado-msg { text-align: center; }
.acesso .estado-msg:empty { display: none; }
.acesso-aviso h2 { font-size: var(--t-h3); }
.acesso-aviso p { color: var(--texto-2); }
.acesso-aviso .acoes { margin-top: var(--e-4); }
.acesso-nota { text-align: center; font-size: var(--t-pequeno); }
.acesso-nota a { color: var(--texto); }

/* ---------- conteúdo da área (início e conta) ---------- */
.casca-main { max-width: calc(var(--largura) + 2 * var(--e-5)); margin: 0 auto; padding: var(--e-5); }
.casca-main:focus { outline: none; }
.casca-main h1 { margin-bottom: var(--e-1); }
.casca-sub { color: var(--texto-2); font-size: var(--t-corpo); line-height: 1.45; margin-bottom: var(--e-4) !important; max-width: var(--largura-texto); }
.modulo p { color: var(--texto-2); }
.mais { margin-top: var(--e-2); }
.mais h2 { font-size: var(--t-h3); }
.esp-vista .ajuda { margin-top: var(--e-3); }
@media (max-width: 599px) { .casca-main { padding: var(--e-4); } }

/* ---------- cabeçalho injetado no Painel e no painel de vendas ---------- */
.casca-barra { position: sticky; top: 0; z-index: 50; }
.casca-barra .topo { font-family: var(--fonte); font-size: var(--t-corpo); line-height: 1.5; }

/* Telemóvel: o botão flutuante «Perguntar à IA» nunca tapa o fim do conteúdo nem um elemento focado (WCAG 2.4.11). */
@media (max-width: 899px) {
  html { scroll-padding-bottom: 104px; }
  body[data-pagina="resultados"] footer { padding-bottom: 120px; }
}

/* Ecrã único de entrada (05/11/2026, pedido do dono): só a aplicação, sem menu nem conteúdo de marketing. */
body.app-unica { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.app-palco { flex: 1; display: grid; place-items: center; padding: var(--e-5) var(--e-4); background: var(--fundo-2); }
.app-palco .acesso { width: 100%; max-width: 340px; display: grid; gap: var(--e-4); }
.app-marca { display: flex; align-items: center; justify-content: center; gap: var(--e-2); font-weight: var(--peso-forte); font-size: var(--t-lead); letter-spacing: -.01em; }
.app-marca .logo { width: auto; height: 28px; }
.app-palco .pag-cabeca { text-align: center; }
.app-palco .pag-cabeca h1 { font-size: var(--t-h1); margin: 0; }
.app-palco .acesso-form { padding: var(--e-5); background: var(--fundo); }
.app-rodape { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-1) var(--e-4); padding: var(--e-3) var(--e-4); font-size: var(--t-mini); color: var(--texto-2); background: var(--fundo-2); }
.app-rodape a { color: inherit; text-decoration: none; }
.app-rodape a:hover { text-decoration: underline; }
/* Palavra-passe (05/11/2026): botão «Mostrar» dentro do campo, «Manter sessão iniciada», lista de clientes (admin). */
.senha-caixa { position: relative; }
.senha-caixa input { padding-right: 80px; }
.senha-ver { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); min-height: 28px; min-width: 28px; padding: 0 var(--e-2); border: 0; background: none; cursor: pointer; font-size: var(--t-pequeno); }
.caixa-opcao { display: flex; align-items: center; gap: var(--e-2); min-height: var(--controlo); font-size: var(--t-pequeno); }
.caixa-opcao input { width: 16px; height: 16px; margin: 0; accent-color: var(--acento); }
.caixa-opcao label { font-weight: var(--peso-medio); cursor: pointer; }
.conta-form { max-width: 400px; margin-bottom: var(--e-3); }
/* a tabela de clientes usa .tabela de sistema.css (faixas, sem linhas): ver area.css */
/* Consentimento OAuth e confirmação humana (MCP): lista de termos e selos, só tokens. */
.lv-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--e-1) var(--e-3); margin: var(--e-2) 0; }
.lv-dl dt { color: var(--texto-2); }
.lv-dl dd { margin: 0; overflow-wrap: anywhere; }
.lv-texto-curto { white-space: pre-wrap; max-height: var(--texto-max-altura); overflow: auto; }
.lv-selo { display: inline-flex; border-radius: var(--raio-pilula); padding: var(--e-1) var(--e-2); font-size: var(--t-mini); font-weight: var(--peso-forte); background: var(--fundo-3); color: var(--texto); }
.lv-aviso { color: var(--aviso); }
.lv-lista { margin: var(--e-2) 0; padding-left: var(--e-5); }
@media (max-width: 520px) { .lv-dl { grid-template-columns: 1fr; } }
.lv-imgs { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; margin: var(--e-2) 0; padding: 0; }
.lv-imgs img { display: block; width: 120px; height: 150px; object-fit: cover; border-radius: var(--raio-2); background: var(--fundo-3); }
.lv-lista-ligacoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.lv-ligacao p { margin: 0 0 var(--e-2); }
/* Escolher o cliente (Telas v2, revisão da fase 3): lista sem pontos, botões iguais e neutros com «Atual» à vista, até 480 px */
.lista-escolher { list-style: none; margin: 0 0 var(--e-4); padding: 0; display: grid; gap: var(--e-3); max-width: 480px; }
.lista-escolher .escolher-cli { justify-content: space-between; gap: var(--e-3); }
.lista-escolher .escolher-cli[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--acento); }