/* =====================================================================
   Portal Imobipop — folha de estilos única
   - Celular primeiro; o layout de computador entra por "container query"
     (@container portal), que reage à largura do próprio .portal.
   - Marca base: Imobipop (sempre clara).
   - Variação: .portal-marca-imobiprime — segue o tema do aparelho
     (claro/escuro). Para forçar um tema: .portal-tema-claro / .portal-tema-escuro.
   - Funciona sem JavaScript.
   ===================================================================== */

/* ---------- 1. Variáveis (marca base Imobipop) ---------- */
:root,
.portal {
  /* superfícies e texto */
  --cor-fundo: #f6f7f9;
  --cor-superficie: #ffffff;
  --cor-campo: #f3f5f8;
  --cor-borda: #e3e7ee;
  --cor-borda-forte: #7b8494;
  --cor-texto: #334155;
  --cor-titulo: #1e293b;
  --cor-suave: #526073;
  /* marca */
  --cor-marca: #f96a5a;          /* coral do logo: só barras, ícones e detalhes */
  --cor-marca-texto: #b93a26;    /* coral escurecido: pode ser texto */
  --cor-logo: #f96a5a;
  --cor-barra: #f96a5a;
  --cor-trilho: #e9edf2;
  --cor-link: #125e91;
  --cor-valor: #046bd2;
  --cor-foco: #125e91;
  /* ações */
  --cor-acao: #c73e28;
  --cor-acao-hover: #a9341f;
  --cor-acao-texto: #ffffff;
  --cor-secundario-texto: #1e293b;
  --cor-secundario-borda: #7b8494;
  /* topo, faixa e rodapé */
  --cor-topo: #ffffff;
  --cor-topo-texto: #1e293b;
  --cor-topo-suave: #526073;
  --cor-topo-borda: #e3e7ee;
  --cor-topo-borda-botao: #7b8494;
  --cor-faixa: #125e91;
  --cor-faixa-texto: #ffffff;
  --cor-faixa-suave: #d6e6f2;
  --cor-faixa-trilho: rgba(255, 255, 255, .22);
  --cor-faixa-barra: #ffb4a8;
  --cor-rodape: #125e91;
  --cor-rodape-texto: #ffffff;
  --cor-rodape-link: #ffffff;
  --cor-enfeite: #d8c094;
  --enfeite: none;               /* arcos concêntricos: só na Imobiprime */
  /* situações */
  --ok-fundo: #f0fdf4;      --ok-texto: #166534;
  --info-fundo: #eff6ff;    --info-texto: #1d4ed8;
  --alerta-fundo: #fff7ed;  --alerta-texto: #9a3412;
  --erro-fundo: #fef3f2;    --erro-texto: #b42318;
  --neutro-fundo: #f3f5f8;  --neutro-texto: #526073;
  /* forma */
  --raio: 8px;
  --raio-cartao: 12px;
  --raio-botao: 8px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 20px rgba(15, 23, 42, .05);
  /* espaçamentos */
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px;
  --esp-5: 20px; --esp-6: 24px; --esp-8: 32px; --esp-12: 48px;
  --largura-max: 1120px;
  /* tipografia */
  --fonte-titulo: 'Josefin Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-texto: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fonte-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --botao-caixa: uppercase;
  --botao-espaco: .06em;
}

/* ---------- 2. Variação Imobiprime — tema claro (padrão) ---------- */
.portal.portal-marca-imobiprime {
  color-scheme: light;
  --cor-fundo: #f7f4ee; --cor-superficie: #ffffff; --cor-campo: #faf8f3;
  --cor-borda: #e7dfcf; --cor-borda-forte: #8a7d66;
  --cor-texto: #2b3445; --cor-titulo: #141b2a; --cor-suave: #5a6272;
  --cor-marca: #d8c094; --cor-marca-texto: #7a5f26; --cor-logo: #141b2a;
  --cor-barra: #8a6d2f; --cor-trilho: #ece5d6;
  --cor-link: #7a5f26; --cor-valor: #141b2a; --cor-foco: #7a5f26;
  --cor-acao: #141b2a; --cor-acao-hover: #263552; --cor-acao-texto: #f3e4c4;
  --cor-secundario-texto: #141b2a; --cor-secundario-borda: #141b2a;
  --cor-topo: #d8c094; --cor-topo-texto: #141b2a; --cor-topo-suave: #3d3423;
  --cor-topo-borda: #c4ab7c; --cor-topo-borda-botao: #141b2a;
  --cor-faixa: #efe6d3; --cor-faixa-texto: #141b2a; --cor-faixa-suave: #5c4a22;
  --cor-faixa-trilho: rgba(20, 27, 42, .12); --cor-faixa-barra: #8a6d2f;
  --cor-rodape: #d8c094; --cor-rodape-texto: #141b2a; --cor-rodape-link: #141b2a;
  --cor-enfeite: #c4ab7c; --enfeite: block;
  --neutro-fundo: #f3eee4; --neutro-texto: #5a6272;
  --raio-botao: 999px;
  --sombra: 0 1px 2px rgba(20, 27, 42, .04), 0 8px 24px rgba(20, 27, 42, .05);
}

/* ---------- 3. Variação Imobiprime — tema escuro ----------
   Entra sozinho quando o aparelho está no modo escuro,
   ou à força com .portal-tema-escuro. */
@media (prefers-color-scheme: dark) {
  .portal.portal-marca-imobiprime:not(.portal-tema-claro) {
    color-scheme: dark;
    --cor-fundo: #0d1320; --cor-superficie: #151d2c; --cor-campo: #0f1624;
    --cor-borda: #26324a; --cor-borda-forte: #6b7894;
    --cor-texto: #d5d9e0; --cor-titulo: #f3efe6; --cor-suave: #a8b0bf;
    --cor-marca: #d8c094; --cor-marca-texto: #d8c094; --cor-logo: #141b2a;
    --cor-barra: #d8c094; --cor-trilho: #26324a;
    --cor-link: #e9d6ad; --cor-valor: #e9d6ad; --cor-foco: #e9d6ad;
    --cor-acao: #d8c094; --cor-acao-hover: #e6d3ad; --cor-acao-texto: #141b2a;
    --cor-secundario-texto: #f3efe6; --cor-secundario-borda: #d8c094;
    --cor-faixa: #080c15; --cor-faixa-texto: #f3efe6; --cor-faixa-suave: #c9ccd3;
    --cor-faixa-trilho: rgba(216, 192, 148, .2); --cor-faixa-barra: #d8c094;
    --cor-enfeite: #d8c094;
    --ok-fundo: rgba(134, 239, 172, .12);    --ok-texto: #86efac;
    --info-fundo: rgba(191, 219, 254, .12);  --info-texto: #bfdbfe;
    --alerta-fundo: rgba(253, 186, 116, .14); --alerta-texto: #fdba74;
    --erro-fundo: rgba(252, 165, 165, .14);  --erro-texto: #fca5a5;
    --neutro-fundo: #1d2738; --neutro-texto: #a8b0bf;
    --sombra: none;
  }
}
.portal.portal-marca-imobiprime.portal-tema-escuro {
  color-scheme: dark;
  --cor-fundo: #0d1320; --cor-superficie: #151d2c; --cor-campo: #0f1624;
  --cor-borda: #26324a; --cor-borda-forte: #6b7894;
  --cor-texto: #d5d9e0; --cor-titulo: #f3efe6; --cor-suave: #a8b0bf;
  --cor-marca: #d8c094; --cor-marca-texto: #d8c094; --cor-logo: #141b2a;
  --cor-barra: #d8c094; --cor-trilho: #26324a;
  --cor-link: #e9d6ad; --cor-valor: #e9d6ad; --cor-foco: #e9d6ad;
  --cor-acao: #d8c094; --cor-acao-hover: #e6d3ad; --cor-acao-texto: #141b2a;
  --cor-secundario-texto: #f3efe6; --cor-secundario-borda: #d8c094;
  --cor-faixa: #080c15; --cor-faixa-texto: #f3efe6; --cor-faixa-suave: #c9ccd3;
  --cor-faixa-trilho: rgba(216, 192, 148, .2); --cor-faixa-barra: #d8c094;
  --cor-enfeite: #d8c094;
  --ok-fundo: rgba(134, 239, 172, .12);    --ok-texto: #86efac;
  --info-fundo: rgba(191, 219, 254, .12);  --info-texto: #bfdbfe;
  --alerta-fundo: rgba(253, 186, 116, .14); --alerta-texto: #fdba74;
  --erro-fundo: rgba(252, 165, 165, .14);  --erro-texto: #fca5a5;
  --neutro-fundo: #1d2738; --neutro-texto: #a8b0bf;
  --sombra: none;
}

/* ---------- 4. Base ---------- */
html, body { margin: 0; }
.portal {
  container: portal / inline-size;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.portal *, .portal *::before, .portal *::after { box-sizing: border-box; }
.portal h1, .portal h2, .portal h3, .portal p, .portal dl, .portal dd, .portal ul, .portal ol, .portal figure, .portal fieldset { margin: 0; }
.portal ul, .portal ol { padding: 0; list-style: none; }
.portal fieldset { padding: 0; border: 0; min-width: 0; }
.portal a { color: var(--cor-link); text-underline-offset: 2px; }
.portal :focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 2px; }
.portal img { display: block; max-width: 100%; }
.portal-visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* largura máxima do conteúdo */
.portal-conteudo { width: 100%; max-width: calc(var(--largura-max) + 2 * var(--esp-4)); margin-inline: auto; padding-inline: var(--esp-4); }

/* ---------- 5. Moldura: topo, abas, rodapé ---------- */
.portal-topo { background: var(--cor-topo); color: var(--cor-topo-texto); border-bottom: 1px solid var(--cor-topo-borda); }
.portal-topo > .portal-conteudo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); min-height: 64px; padding-block: var(--esp-2); }
.portal .portal-marca { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: 44px; color: var(--cor-logo); text-decoration: none; }
.portal-logo-texto { font-family: var(--fonte-titulo); font-weight: 700; font-size: 17px; line-height: .92; letter-spacing: .03em; text-transform: uppercase; }
.portal-logo-fino { font-family: var(--fonte-titulo); font-weight: 300; font-size: 21px; line-height: .85; }
.portal-logo-fino em { display: block; padding-left: 22px; font-style: italic; }
.portal-logo-equipe { margin-left: var(--esp-2); padding-left: var(--esp-3); border-left: 1px solid var(--cor-borda); color: var(--cor-suave); font-size: 13px; font-weight: 600; }
.portal-conta { display: flex; align-items: center; gap: var(--esp-3); }
.portal-conta-nome { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.portal-conta-nome strong { font-size: 15px; font-weight: 600; }
.portal-conta-nome span { font-size: 12px; color: var(--cor-topo-suave); }

.portal-abas { display: flex; gap: var(--esp-1); border-bottom: 1px solid var(--cor-borda); }
.portal .portal-abas a { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: 48px; padding: 0 var(--esp-3); margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--cor-suave); font-weight: 600; text-decoration: none; }
.portal .portal-abas a[aria-current="page"] { color: var(--cor-titulo); border-bottom-color: var(--cor-marca); }

.portal-subtopo { background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); }
.portal-subtopo .portal-abas { border-bottom: 0; }
.portal legend { padding: 0; margin-bottom: var(--esp-2); }

.portal-contratos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.portal-contratos > span { font-size: 13px; color: var(--cor-faixa-suave); }
.portal .portal-contratos a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--esp-4); border: 1px solid var(--cor-faixa-trilho); border-radius: 999px; color: var(--cor-faixa-texto); font-size: 14px; font-weight: 600; text-decoration: none; }
.portal .portal-contratos a[aria-current="true"] { background: var(--cor-faixa-texto); border-color: var(--cor-faixa-texto); color: var(--cor-faixa); }

.portal-rodape { margin-top: auto; padding: var(--esp-5) var(--esp-4) var(--esp-6); background: var(--cor-rodape); color: var(--cor-rodape-texto); font-size: 13px; text-align: center; }
.portal .portal-rodape a { color: var(--cor-rodape-link); font-weight: 600; }

/* ---------- 6. Botões ---------- */
.portal-botao, .portal a.portal-botao,
.portal-botao-secundario, .portal a.portal-botao-secundario {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: 48px; padding: 0 var(--esp-5);
  border: 1.5px solid var(--cor-acao); border-radius: var(--raio-botao);
  background: var(--cor-acao); color: var(--cor-acao-texto);
  font: inherit; font-size: 14px; font-weight: 700;
  letter-spacing: var(--botao-espaco); text-transform: var(--botao-caixa);
  text-decoration: none; text-align: center; cursor: pointer;
}
.portal-botao:hover { background: var(--cor-acao-hover); border-color: var(--cor-acao-hover); }
.portal-botao-secundario, .portal a.portal-botao-secundario { background: transparent; border-color: var(--cor-secundario-borda); color: var(--cor-secundario-texto); }
.portal-botao-secundario:hover { background: var(--cor-campo); }
.portal .portal-botao-pequeno { min-height: 44px; padding: 0 var(--esp-4); font-size: 13px; }
.portal .portal-botao-bloco { display: flex; width: 100%; }
.portal .portal-topo .portal-botao-secundario { color: var(--cor-topo-texto); border-color: var(--cor-topo-borda-botao); }
.portal .portal-botao-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--cor-link); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
/* Google: segue o guia de marca — fundo branco, borda cinza, "G" original */
.portal .portal-botao-google { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 var(--esp-4); border: 1px solid #747775; border-radius: 4px; background: #ffffff; color: #1f1f1f; font-family: Roboto, var(--fonte-texto); font-size: 15px; font-weight: 500; text-decoration: none; cursor: pointer; }
.portal .portal-botao-google:hover { background: #f8f9fa; }
.portal-acoes { display: grid; gap: 10px; }
.portal-acoes-2 { display: flex; gap: 10px; }
.portal-acoes-2 > * { flex: 1 1 0; padding-inline: 10px !important; font-size: 13px !important; }

/* Melhoria com JavaScript: o servidor escreve <html class="portal-sem-js">
   e o portal.js tira a classe. Sem JS, os botões "Copiar" somem e o texto
   continua selecionável com um toque (user-select: all). */
.portal-sem-js [data-portal-copiar] { display: none !important; }

/* ---------- 7. Formulários ---------- */
.portal-form { display: flex; flex-direction: column; gap: var(--esp-4); }
.portal-campo { display: flex; flex-direction: column; gap: 6px; }
.portal-rotulo { font-size: 14px; font-weight: 600; color: var(--cor-titulo); }
.portal-dica { font-size: 13px; color: var(--cor-suave); }
.portal-form input[type="email"], .portal-form input[type="text"], .portal-form select, .portal-form textarea, .portal-campo-texto {
  width: 100%; min-height: 48px; padding: 10px 14px;
  border: 1.5px solid var(--cor-borda-forte); border-radius: var(--raio);
  background: var(--cor-superficie); color: var(--cor-titulo);
  font: inherit; font-size: 16px;   /* 16px evita zoom automático no iPhone */
}
.portal-form textarea { min-height: 128px; resize: vertical; }
.portal-form select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.portal-form input:focus-visible, .portal-form select:focus-visible, .portal-form textarea:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 1px; border-color: var(--cor-foco); }
.portal-form [aria-invalid="true"] { border-color: var(--erro-texto); }
.portal .portal-codigo-input { font-family: var(--fonte-mono); font-size: 26px; letter-spacing: .45em; text-align: center; }
.portal-erro { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; font-weight: 600; color: var(--erro-texto); }
.portal-erro svg { flex: none; margin-top: 2px; }
.portal-opcoes { display: grid; gap: var(--esp-2); }
.portal-opcao { display: flex; align-items: center; gap: var(--esp-3); min-height: 52px; padding: var(--esp-3) var(--esp-4); border: 1.5px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie); color: var(--cor-titulo); font-weight: 600; cursor: pointer; }
.portal-opcao input { width: 20px; height: 20px; margin: 0; accent-color: var(--cor-acao); flex: none; }
.portal-opcao:has(input:checked) { border-color: var(--cor-acao); background: var(--cor-campo); }
.portal-arquivo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); padding: var(--esp-4); border: 1.5px dashed var(--cor-borda-forte); border-radius: var(--raio); background: var(--cor-campo); }
.portal-arquivo input { max-width: 100%; font: inherit; font-size: 14px; color: var(--cor-texto); }

/* ---------- 8. Avisos (topo da tela) ---------- */
.portal-aviso { display: flex; align-items: flex-start; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border-radius: var(--raio); background: var(--info-fundo); color: var(--info-texto); font-size: 14px; font-weight: 600; }
.portal-aviso svg { flex: none; margin-top: 1px; }
.portal-aviso p { font-weight: 400; color: inherit; }
.portal-aviso-ok { background: var(--ok-fundo); color: var(--ok-texto); }
.portal-aviso-erro { background: var(--erro-fundo); color: var(--erro-texto); }
.portal-aviso-alerta { background: var(--alerta-fundo); color: var(--alerta-texto); }

/* ---------- 9. Entrada (login) e estados de página ---------- */
.portal-entrada { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--esp-4); padding: var(--esp-6) var(--esp-4) var(--esp-12); }
.portal-entrada > * { width: 100%; max-width: 440px; }
.portal-cartao-entrada { position: relative; display: flex; flex-direction: column; gap: var(--esp-5); padding: var(--esp-6) var(--esp-5); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); box-shadow: var(--sombra); }
.portal-cartao-entrada header { display: flex; flex-direction: column; gap: var(--esp-2); }
.portal-sobretitulo { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cor-marca-texto); }
.portal-cartao-entrada h1 { font-family: var(--fonte-titulo); font-size: 28px; line-height: 1.15; font-weight: 700; color: var(--cor-titulo); }
.portal-apoio { font-size: 15px; color: var(--cor-suave); }
.portal-email-escolhido { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border-radius: var(--raio); background: var(--cor-campo); font-weight: 600; color: var(--cor-titulo); word-break: break-all; }
.portal-links-linha { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--esp-2) var(--esp-4); }
.portal-separador { display: flex; align-items: center; gap: var(--esp-3); color: var(--cor-suave); font-size: 13px; }
.portal-separador::before, .portal-separador::after { content: ""; flex: 1; height: 1px; background: var(--cor-borda); }
.portal-outra-entrada { text-align: center; font-size: 14px; color: var(--cor-suave); }
.portal-estado-icone { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--cor-campo); color: var(--cor-marca-texto); }

/* ---------- 10. Faixa (cabeçalho do morador) ---------- */
.portal-faixa { position: relative; overflow: hidden; background: var(--cor-faixa); color: var(--cor-faixa-texto); }
.portal-faixa > .portal-conteudo { position: relative; display: flex; flex-direction: column; gap: 18px; padding-bottom: 64px; }
.portal-faixa .portal-abas { border-bottom-color: var(--cor-faixa-trilho); }
.portal .portal-faixa .portal-abas a { color: var(--cor-faixa-suave); }
.portal .portal-faixa .portal-abas a[aria-current="page"] { color: var(--cor-faixa-texto); border-bottom-color: var(--cor-faixa-barra); }
.portal-arcos { display: var(--enfeite); position: absolute; top: -70px; right: -70px; color: var(--cor-enfeite); opacity: .45; pointer-events: none; }
.portal-faixa-corpo { display: flex; flex-direction: column; gap: 18px; }
.portal-cabecalho { position: relative; display: flex; flex-direction: column; gap: var(--esp-2); }
.portal-cabecalho h1 { font-family: var(--fonte-titulo); font-size: 32px; line-height: 1.1; font-weight: 700; color: var(--cor-faixa-texto); }
.portal-cabecalho p { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-2); color: var(--cor-faixa-suave); }
.portal-cabecalho .portal-sobretitulo { color: var(--cor-faixa-suave); }
.portal-etiqueta { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 6px; border: 1px solid var(--etiqueta-borda, transparent); background: var(--etiqueta-fundo, var(--cor-titulo)); color: var(--etiqueta-texto, #fff); font-size: 13px; font-weight: 700; }
/* cores das etiquetas de prédio (como no site) */
.portal-predio-casari { --etiqueta-fundo: #b45309; --etiqueta-texto: #ffffff; }
.portal-predio-corujas { --etiqueta-fundo: #b42318; --etiqueta-texto: #ffffff; }
.portal-predio-mirante { --etiqueta-fundo: #4f46e5; --etiqueta-texto: #ffffff; }
.portal-predio-veri { --etiqueta-fundo: #15803d; --etiqueta-texto: #ffffff; }
.portal-marca-imobiprime .portal-etiqueta { --etiqueta-fundo: transparent; --etiqueta-texto: var(--cor-faixa-texto); --etiqueta-borda: var(--cor-enfeite); }

.portal-resumo { display: flex; flex-direction: column; gap: 14px; }
.portal-resumo-topo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--esp-2) var(--esp-3); }
.portal-resumo h2 { font-family: var(--fonte-titulo); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.portal-codigo-contrato { font-family: var(--fonte-mono); font-size: 12px; color: var(--cor-suave); }
.portal-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px var(--esp-4); }
.portal-dados-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); }
.portal-dados dt { font-size: 12px; color: var(--cor-suave); }
.portal-dados dd { font-size: 16px; font-weight: 600; color: var(--cor-titulo); }
.portal-prazo { display: flex; flex-direction: column; gap: var(--esp-2); }
.portal-prazo-datas { display: flex; justify-content: space-between; gap: var(--esp-3); font-size: 13px; color: var(--cor-suave); }
.portal-prazo-datas strong { color: var(--cor-titulo); }
.portal-barra { height: 8px; border-radius: 999px; background: var(--cor-trilho); overflow: hidden; }
.portal-barra span { display: block; height: 100%; border-radius: inherit; background: var(--cor-barra); }
.portal-prazo-texto { font-size: 13px; color: var(--cor-suave); }
.portal-prazo-texto strong { color: var(--cor-titulo); }
.portal-faixa .portal-codigo-contrato, .portal-faixa .portal-dados dt, .portal-faixa .portal-prazo-datas, .portal-faixa .portal-prazo-texto { color: var(--cor-faixa-suave); }
.portal-faixa .portal-dados dd, .portal-faixa .portal-prazo-datas strong, .portal-faixa .portal-prazo-texto strong { color: var(--cor-faixa-texto); }
.portal-faixa .portal-barra { background: var(--cor-faixa-trilho); }
.portal-faixa .portal-barra span { background: var(--cor-faixa-barra); }

/* ---------- 11. Área principal e cartões ---------- */
.portal-principal { flex: 1; display: flex; flex-direction: column; gap: var(--esp-4); width: 100%; max-width: calc(var(--largura-max) + 2 * var(--esp-4)); margin-inline: auto; padding: var(--esp-5) var(--esp-4) var(--esp-8); }
.portal-sobreposto { position: relative; margin-top: -44px; padding-top: 0; }
.portal-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); align-items: start; }
.portal-cartao { position: relative; display: flex; flex-direction: column; gap: var(--esp-4); padding: var(--esp-5); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); box-shadow: var(--sombra); }
.portal-cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.portal-cartao h2 { font-family: var(--fonte-titulo); font-size: 20px; line-height: 1.2; font-weight: 700; color: var(--cor-titulo); }
.portal-cartao h3 { font-size: 15px; font-weight: 700; color: var(--cor-titulo); }
.portal-titulo-pagina { display: flex; flex-direction: column; gap: var(--esp-1); }
.portal-titulo-pagina h1 { font-family: var(--fonte-titulo); font-size: 28px; line-height: 1.15; font-weight: 700; color: var(--cor-titulo); }
.portal-titulo-pagina p { color: var(--cor-suave); }
.portal .portal-voltar { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--cor-link); font-weight: 600; text-decoration: none; }

/* selos */
.portal-selo { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; border-radius: 999px; background: var(--info-fundo); color: var(--info-texto); font-size: 12px; font-weight: 700; white-space: nowrap; }
.portal-selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.portal-selo-ok { background: var(--ok-fundo); color: var(--ok-texto); }
.portal-selo-alerta, .portal-selo-saida { background: var(--alerta-fundo); color: var(--alerta-texto); }
.portal-selo-erro { background: var(--erro-fundo); color: var(--erro-texto); }
.portal-selo-neutro, .portal-em-breve { background: var(--neutro-fundo); color: var(--neutro-texto); }
.portal-em-breve::before { display: none; }
.portal-faixa .portal-selo-saida { background: var(--alerta-fundo); color: var(--alerta-texto); }

/* boleto */
.portal-boleto-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--esp-3); }
.portal-valor { display: block; font-size: 32px; line-height: 1.1; font-weight: 700; color: var(--cor-valor); letter-spacing: -.01em; }
.portal-nota { font-size: 14px; color: var(--cor-suave); }
.portal-nota strong { color: var(--cor-titulo); }
.portal-linha-digitavel { padding: var(--esp-3); border: 1px dashed var(--cor-borda-forte); border-radius: var(--raio); background: var(--cor-campo); font-family: var(--fonte-mono); font-size: 13px; line-height: 1.5; color: var(--cor-titulo); word-break: break-all; user-select: all; }
.portal-detalhes { border-top: 1px solid var(--cor-borda); }
.portal-detalhes summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; font-weight: 600; color: var(--cor-titulo); list-style: none; }
.portal-detalhes summary::-webkit-details-marker { display: none; }
.portal-detalhes summary svg { color: var(--cor-suave); transition: transform .15s; }
.portal-detalhes[open] summary svg { transform: rotate(90deg); }
.portal-lista li { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: 10px 0; border-top: 1px solid var(--cor-borda); }
.portal-lista li > span:first-child { display: flex; flex-direction: column; color: var(--cor-titulo); font-weight: 600; font-size: 14px; }
.portal-lista small { font-size: 12px; font-weight: 400; color: var(--cor-suave); }
.portal-lista-valor { font-size: 14px; color: var(--cor-texto); white-space: nowrap; }
.portal-contagem { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 var(--esp-2); border-radius: 999px; background: var(--cor-campo); color: var(--cor-titulo); font-size: 13px; font-weight: 700; }

/* chamados (lista do morador) */
.portal .portal-linha-chamado { display: flex; align-items: center; gap: var(--esp-3); min-height: 64px; padding: var(--esp-3) 0; border-top: 1px solid var(--cor-borda); color: var(--cor-texto); text-decoration: none; }
.portal-linha-chamado > span { flex: 1; display: flex; flex-direction: column; gap: var(--esp-1); min-width: 0; }
.portal-linha-chamado > svg { color: var(--cor-suave); flex: none; }
.portal-chamado-linha { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--esp-2) var(--esp-3); }
.portal-chamado-num { font-family: var(--fonte-mono); font-size: 12px; color: var(--cor-suave); }
.portal-chamado-titulo { font-size: 16px; font-weight: 600; color: var(--cor-titulo); }
.portal-chamado-meta { font-size: 13px; color: var(--cor-suave); }

/* estado vazio */
.portal-vazio { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--esp-4); border: 1px dashed var(--cor-borda); border-radius: var(--raio); background: var(--cor-campo); }
.portal-vazio svg { color: var(--cor-marca-texto); margin-bottom: 2px; }
.portal-vazio strong { color: var(--cor-titulo); font-size: 15px; }
.portal-vazio p { font-size: 14px; color: var(--cor-suave); }

/* atalhos do prédio */
.portal-grade-secoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.portal .portal-secao-link { display: flex; flex-direction: column; gap: 6px; min-height: 96px; padding: 14px; border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-campo); color: var(--cor-texto); text-decoration: none; }
.portal-secao-link svg { color: var(--cor-marca-texto); }
.portal-secao-link strong { font-size: 15px; color: var(--cor-titulo); line-height: 1.2; }
.portal-secao-link span { font-size: 12px; color: var(--cor-suave); }

/* confirmação */
.portal-confirmacao { align-items: flex-start; }
.portal-numero-chamado { display: inline-block; padding: var(--esp-2) var(--esp-3); border-radius: var(--raio); background: var(--cor-campo); font-family: var(--fonte-mono); font-size: 20px; font-weight: 700; color: var(--cor-titulo); letter-spacing: .04em; }

/* ---------- 12. Meu prédio ---------- */
.portal-predio-capa { position: relative; overflow: hidden; border-radius: var(--raio-cartao); aspect-ratio: 16 / 10; background: var(--cor-campo); }
.portal-predio-capa img { width: 100%; height: 100%; object-fit: cover; }
.portal-predio-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); align-items: start; }
.portal-indice { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.portal .portal-indice a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--cor-borda); border-radius: 999px; background: var(--cor-superficie); color: var(--cor-titulo); font-size: 14px; font-weight: 600; text-decoration: none; }
.portal-indice-titulo { width: 100%; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cor-suave); }
.portal-secoes { display: flex; flex-direction: column; gap: var(--esp-4); }
.portal-secao { scroll-margin-top: var(--esp-4); }
.portal-cartao-topo .portal-secao-icone { display: inline-flex; color: var(--cor-marca-texto); }
.portal-titulo-icone { display: flex; align-items: center; gap: 10px; }
.portal-avisos-lista li { display: flex; flex-direction: column; gap: 2px; padding: var(--esp-3) 0; border-top: 1px solid var(--cor-borda); }
.portal-avisos-lista time { font-size: 12px; font-weight: 700; color: var(--cor-marca-texto); text-transform: uppercase; letter-spacing: .04em; }
.portal-avisos-lista strong { color: var(--cor-titulo); }
.portal-avisos-lista p { font-size: 14px; color: var(--cor-suave); }
.portal-copiar { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-campo); }
.portal-copiar dt { font-size: 12px; color: var(--cor-suave); }
.portal-copiar dd { font-family: var(--fonte-mono); font-size: 16px; font-weight: 700; color: var(--cor-titulo); user-select: all; word-break: break-all; }
.portal-texto { font-size: 15px; color: var(--cor-texto); }
.portal-texto strong { color: var(--cor-titulo); }
.portal-itens li { position: relative; padding: 6px 0 6px 18px; font-size: 15px; }
.portal-itens li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--cor-marca); }
.portal .portal-doc { display: flex; align-items: center; gap: var(--esp-3); min-height: 56px; padding: var(--esp-3) 0; border-top: 1px solid var(--cor-borda); color: var(--cor-titulo); font-weight: 600; text-decoration: none; }
.portal-doc svg:first-child { color: var(--cor-marca-texto); flex: none; }
.portal-doc span { flex: 1; display: flex; flex-direction: column; }
.portal-doc small { font-size: 12px; font-weight: 400; color: var(--cor-suave); }
.portal-tabela-valores div { display: flex; justify-content: space-between; gap: var(--esp-3); padding: 10px 0; border-top: 1px solid var(--cor-borda); }
.portal-tabela-valores dt { color: var(--cor-texto); }
.portal-tabela-valores dd { font-weight: 600; color: var(--cor-titulo); white-space: nowrap; }
.portal-tabela-valores .portal-total { border-top: 2px solid var(--cor-titulo); }
.portal-tabela-valores .portal-total dt, .portal-tabela-valores .portal-total dd { font-weight: 700; color: var(--cor-titulo); font-size: 17px; }

/* ---------- 13. Área do colaborador ---------- */
.portal-filtros { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); padding: var(--esp-4); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); }
.portal-filtros .portal-campo { gap: var(--esp-1); }
.portal-filtros .portal-rotulo { font-size: 13px; }
.portal-fila { display: flex; flex-direction: column; gap: var(--esp-2); }
.portal-fila-cabecalho { display: none; }
.portal .portal-fila-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--esp-3); padding: 14px var(--esp-4); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); color: var(--cor-texto); text-decoration: none; }
.portal-fila-item:hover { border-color: var(--cor-borda-forte); }
.portal-fila-onde { grid-column: 1; font-weight: 700; color: var(--cor-titulo); }
.portal-fila-situacao { grid-column: 2; grid-row: 1; justify-self: end; }
.portal-fila-resumo { grid-column: 1 / -1; display: flex; flex-direction: column; color: var(--cor-titulo); }
.portal-fila-resumo small { font-family: var(--fonte-mono); font-size: 12px; color: var(--cor-suave); }
.portal-fila-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-3); font-size: 13px; color: var(--cor-suave); }
.portal-idade { display: inline-flex; align-items: center; gap: var(--esp-1); font-size: 13px; color: var(--cor-suave); white-space: nowrap; }
.portal-idade-antigo { color: var(--erro-texto); font-weight: 700; }
.portal .portal-fila-item.portal-fila-antigo { border-color: var(--erro-texto); box-shadow: inset 0 0 0 1px var(--erro-texto); }
.portal-detalhe { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); align-items: start; }
.portal-historico { display: flex; flex-direction: column; gap: var(--esp-3); }
.portal-historico li { display: flex; flex-direction: column; gap: var(--esp-1); padding: var(--esp-3) var(--esp-4); border-radius: var(--raio); background: var(--cor-campo); }
.portal-historico li.portal-da-equipe { background: var(--info-fundo); }
.portal-historico li.portal-do-sistema { padding: var(--esp-1) 0; background: none; font-size: 13px; color: var(--cor-suave); text-align: center; }
.portal-historico-autor { display: flex; justify-content: space-between; gap: var(--esp-3); font-size: 13px; color: var(--cor-suave); }
.portal-historico-autor strong { color: var(--cor-titulo); }
.portal-fotos { display: flex; gap: var(--esp-2); }
.portal-foto { width: 72px; height: 72px; border-radius: var(--raio); background: var(--cor-trilho); display: flex; align-items: center; justify-content: center; color: var(--cor-suave); }
.portal-dados-lista div { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--cor-borda); }
.portal-dados-lista dt { font-size: 12px; color: var(--cor-suave); }
.portal-dados-lista dd { font-weight: 600; color: var(--cor-titulo); word-break: break-word; }

/* ---------- 14. Computador (o .portal com 760px ou mais) ---------- */
@container portal (min-width: 760px) {
  .portal-conteudo { padding-inline: var(--esp-8); }
  .portal-principal { padding: var(--esp-8) var(--esp-8) var(--esp-12); gap: var(--esp-5); }
  .portal-sobreposto { padding-top: 0; }
  .portal-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-5); }
  .portal-largo { grid-column: 1 / -1; }
  .portal-faixa > .portal-conteudo { gap: var(--esp-6); padding-bottom: 76px; }
  .portal-faixa-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--esp-12); align-items: end; }
  .portal-cabecalho h1 { font-size: 40px; }
  .portal-arcos { top: -60px; right: 4%; width: 360px; height: 360px; }
  .portal-grade-secoes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .portal-cartao { padding: var(--esp-6); }
  .portal-entrada { justify-content: center; padding-block: var(--esp-12); }
  .portal-cartao-entrada { padding: var(--esp-8); }
  .portal-titulo-pagina h1 { font-size: 34px; }
  .portal-form-largo { max-width: 720px; }
  .portal-opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-predio-layout { grid-template-columns: 220px minmax(0, 1fr); gap: var(--esp-8); }
  .portal-indice { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .portal .portal-indice a { justify-content: flex-start; border: 0; border-radius: var(--raio); background: none; padding: 0 var(--esp-3); }
  .portal .portal-indice a[aria-current="true"] { background: var(--cor-superficie); box-shadow: var(--sombra); }
  .portal-predio-capa { aspect-ratio: 21 / 8; }
  .portal-filtros { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; }
  .portal-fila { gap: 0; border: 1px solid var(--cor-borda); border-radius: var(--raio-cartao); overflow: hidden; background: var(--cor-superficie); }
  .portal-fila-cabecalho, .portal .portal-fila-item { display: grid; grid-template-columns: 1fr 1.6fr 0.9fr 1.2fr 96px 176px; align-items: center; gap: var(--esp-4); padding: 14px var(--esp-5); }
  .portal-fila-situacao { order: 9; }
  .portal-fila-cabecalho { background: var(--cor-campo); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-suave); }
  .portal .portal-fila-item { border: 0; border-top: 1px solid var(--cor-borda); border-radius: 0; }
  .portal .portal-fila-item.portal-fila-antigo { border-color: var(--cor-borda); box-shadow: none; background: var(--erro-fundo); }
  .portal-fila-onde, .portal-fila-situacao, .portal-fila-resumo, .portal-fila-meta { grid-column: auto; grid-row: auto; justify-self: start; }
  .portal-fila-meta { display: contents; }
  .portal-detalhe { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--esp-6); }
}