/* Portal do cliente: a casca (barra, navegação) e o início. Só tokens de ds/tokens.css; o resto vem do ds.css.
   Celular (até 720 px): a navegação fica fixa embaixo, 5 itens iguais, rótulo de 12 px e alvo de toque de 48 px.
   Acima disso, ela entra na barra do alto, em linha, entre a marca e a conta. */

.ui-pub { --ui-pub-largura: 72rem; }
/* O portal tem a própria barra: a marca da casca pública sairia repetida. */
.ui-pub:has(.ui-portal-barra) > .ui-pub__topo { display: none; }
.ui-pub__conteudo { gap: var(--esp-6); padding-top: 0; padding-bottom: calc(var(--esp-16) + env(safe-area-inset-bottom, 0px)); }

/* Faixas de ponta a ponta sem rolagem lateral: o fundo vai até a borda pelo border-image, o conteúdo fica na coluna. */
.ui-portal-barra { border-image: linear-gradient(to top, var(--linha) 0 1px, var(--superficie) 1px) fill 0 / 0 / 0 100vw; position: relative; z-index: 5; }
/* A faixa da marca encosta na barra (o miolo tem gap entre os blocos). */
.ui-portal-barra + .ui-portal-faixa { margin-top: calc(-1 * var(--esp-6)); }
.ui-portal-barra__dentro { display: flex; align-items: center; gap: var(--esp-4); min-height: 64px; }

.ui-portal-marca { display: inline-flex; align-items: center; gap: var(--esp-3); min-width: 0; color: var(--tinta); text-decoration: none; }
.ui-portal-marca__logo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--raio-m); background: var(--marca); color: var(--sobre-marca); font-weight: 700; font-size: 17px; }
.ui-portal-marca__nome { font-weight: 700; font-size: 16px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ui-portal-conta { display: flex; align-items: center; gap: var(--esp-1); margin-left: auto; }
.ui-portal-conta__sair { margin: 0; }
.ui-portal-conta__eu, .ui-portal-conta__botao { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: 40px; padding: 0 var(--esp-3); border: 0; border-radius: var(--raio-pilula); background: transparent; color: var(--tinta-2); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.ui-portal-conta__eu:hover, .ui-portal-conta__botao:hover { background: var(--superficie-suave); color: var(--tinta); }
.ui-portal-conta__avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--marca-suave); color: var(--marca-forte); font-size: 13px; font-weight: 700; }

/* A navegação. */
.ui-portal-nav { background: var(--superficie); }
.ui-portal-nav__lista { display: flex; margin: 0; padding: 0; list-style: none; }
.ui-portal-nav__li { flex: 1 1 0; min-width: 0; }
.ui-portal-nav__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--alvo-toque); padding: var(--esp-1); color: var(--tinta-2); text-decoration: none; font-size: 12px; line-height: 1.2; text-align: center; }
.ui-portal-nav__item:hover { color: var(--tinta); }
.ui-portal-nav__item.esta-atual,
.ui-portal-nav__item[aria-current="page"] { color: var(--marca); font-weight: 700; }
.ui-portal-nav__rotulo { overflow-wrap: anywhere; }
.ui-portal-nav__selo { position: absolute; top: 2px; right: 20%; }

@media (max-width: 720px) {
  .ui-portal-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; border-top: 1px solid var(--linha); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .ui-portal-conta__rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ui-portal-conta__eu, .ui-portal-conta__botao { padding: 0 var(--esp-2); min-width: 44px; min-height: 44px; justify-content: center; }
}

@media (min-width: 721px) {
  .ui-pub__conteudo { padding-bottom: var(--esp-10); }
  .ui-portal-nav { background: transparent; }
  .ui-portal-nav__lista { gap: var(--esp-1); }
  .ui-portal-nav__li { flex: 0 0 auto; }
  .ui-portal-nav__item { flex-direction: row; gap: var(--esp-2); min-height: 64px; padding: 0 var(--esp-3); font-size: 14px; font-weight: 600; }
  .ui-portal-nav__item::after { content: ""; position: absolute; left: var(--esp-3); right: var(--esp-3); bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
  .ui-portal-nav__item.esta-atual::after,
  .ui-portal-nav__item[aria-current="page"]::after { background: var(--marca); }
  .ui-portal-nav__selo { position: static; }
}
/* Até 1.000 px a barra não cabe com rótulos: a navegação desce para uma linha própria, ainda no alto. */
@media (min-width: 721px) and (max-width: 1000px) {
  .ui-portal-barra__dentro { flex-wrap: wrap; row-gap: 0; }
  .ui-portal-nav { order: 3; flex-basis: 100%; border-top: 1px solid var(--linha); }
  .ui-portal-nav__item { min-height: 52px; }
}

/* A faixa do alto: a saudação e o "Precisa de você", na cor da empresa. */
.ui-portal-faixa { display: grid; gap: var(--esp-5); padding-block: var(--esp-8); border-image: linear-gradient(var(--marca) 0 0) fill 0 / 0 / 0 100vw; color: var(--sobre-marca); }
.ui-portal-faixa__ola { display: flex; flex-direction: column; gap: var(--esp-2); align-self: center; min-width: 0; }
.ui-portal-faixa__empresa { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.8; }
.ui-portal-faixa__titulo { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 700; text-wrap: balance; }
.ui-portal-faixa__resumo { margin: 0; font-size: 17px; opacity: 0.9; }

.ui-portal-pede { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; padding: var(--esp-5); border-radius: var(--raio-g); background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-flutuante); }
.ui-portal-pede__titulo { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinta-2); }
.ui-portal-pede__lista { display: flex; flex-direction: column; gap: var(--esp-3); margin: 0; padding: 0; list-style: none; }
.ui-portal-pede__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3) var(--esp-4); padding-left: var(--esp-4); border-left: 4px solid var(--marca); }
.ui-portal-pede__item--perigo { border-left-color: var(--perigo); }
.ui-portal-pede__item--atencao { border-left-color: var(--atencao); }
.ui-portal-pede__texto { flex: 1 1 14rem; min-width: 0; text-wrap: pretty; display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 1.4; }
.ui-portal-pede__quando { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinta-2); }
.ui-portal-pede__item--perigo .ui-portal-pede__quando { color: var(--perigo); }
.ui-portal-pede__item--atencao .ui-portal-pede__quando { color: var(--atencao); }
.ui-portal-pede__vazio { display: flex; align-items: flex-start; gap: var(--esp-2); margin: 0; color: var(--tinta-2); }
.ui-portal-pede__vazio .ui-icone { flex: none; color: var(--ok); }

/* O painel: a coluna principal (serviços, chamados, avisos) e a lateral (faturas, atalhos). */
.ui-portal-painel { display: grid; gap: var(--esp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.ui-portal-painel__principal, .ui-portal-painel__lado { display: flex; flex-direction: column; gap: var(--esp-6); min-width: 0; }
.ui-portal-secao { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.ui-portal-secao__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3); }
.ui-portal-secao__titulo { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 700; }

/* O serviço: plano e situação na linha do ícone; roteador e ações no rodapé, separados por uma linha. */
.ui-portal-servico { gap: var(--esp-4); }
.ui-portal-servico__topo { display: flex; align-items: flex-start; gap: var(--esp-3); }
.ui-portal-servico__icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--raio-m); background: var(--marca-suave); color: var(--marca-forte); }
.ui-portal-servico__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-portal-servico__plano { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 700; }
.ui-portal-servico__onde { margin: 0; color: var(--tinta-2); font-size: 14px; overflow-wrap: anywhere; }
.ui-portal-servico__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); padding-top: var(--esp-4); border-top: 1px solid var(--linha); }
.ui-portal-servico__roteador { flex: 1 1 16rem; min-width: 0; font-size: 14px; color: var(--tinta-2); }
.ui-portal-servico__roteador p { margin: 0; }
.ui-portal-servico__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-4); }
/* O roteador que não respondeu, dentro do cartão: uma linha discreta, não um alerta. */
.ui-portal-servico__roteador .ui-sem-resposta { padding: 0; border: 0; background: transparent; gap: var(--esp-2); color: var(--tinta-2); }
.ui-portal-servico__roteador .ui-sem-resposta .ui-icone { width: 16px; height: 16px; color: var(--atencao); }
.ui-portal-servico__roteador .ui-sem-resposta .ui-botao { min-height: 0; padding: 0; border: 0; background: transparent; color: var(--marca); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }

/* As faturas: o valor em aberto é o destaque, o botão de pagar ocupa a largura. */
.ui-portal-faturas__valor { display: flex; flex-direction: column; gap: var(--esp-1); }
.ui-portal-faturas__rotulo { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinta-2); }
.ui-portal-faturas__total { font-size: 36px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-portal-faturas__fatos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); margin-top: var(--esp-2); }
.ui-portal-faturas__pagar { justify-content: center; width: 100%; }
.ui-portal-faturas__em-dia { display: flex; align-items: center; gap: var(--esp-2); margin: 0; }
.ui-portal-faturas__em-dia .ui-icone { color: var(--ok); }

/* Os atalhos: linhas inteiras clicáveis, ícone, rótulo e seta. */
.ui-portal-atalhos { gap: var(--esp-2); }
.ui-portal-atalhos__lista { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--esp-3)); padding: 0; list-style: none; }
.ui-portal-atalho { display: flex; align-items: center; gap: var(--esp-3); min-height: 52px; padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-m); color: var(--tinta); font-weight: 600; text-decoration: none; }
.ui-portal-atalho:hover { background: var(--superficie-suave); }
.ui-portal-atalho__icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--raio-m); background: var(--marca-suave); color: var(--marca-forte); }
.ui-portal-atalho__rotulo { flex: 1; min-width: 0; }
.ui-portal-atalho > .ui-icone:last-child { color: var(--tinta-3); }

/* Os chamados: uma lista com divisórias, sem recuo extra. */
.ui-portal-chamados { padding-block: var(--esp-2); }
.ui-portal-chamados__lista { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ui-portal-chamado { display: flex; align-items: center; gap: var(--esp-3); padding-block: var(--esp-3); }
.ui-portal-chamado + .ui-portal-chamado { border-top: 1px solid var(--linha); }
.ui-portal-chamado__icone { flex: none; color: var(--tinta-3); }
.ui-portal-chamado__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.ui-portal-pets { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

.ui-portal-aviso__foto { width: 56px; height: 56px; flex: none; border-radius: var(--raio-m); object-fit: cover; }
.ui-portal-visor { width: 100%; min-height: 70vh; border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--superficie); }
.ui-redondo--g > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

@media (max-width: 560px) {
  .ui-portal-faixa { padding-block: var(--esp-6); }
  .ui-portal-faixa__titulo { font-size: 26px; }
  .ui-portal-pede { padding: var(--esp-4); }
  .ui-portal-pede__item .ui-botao { width: 100%; justify-content: center; }
  .ui-portal-servico__acoes { width: 100%; justify-content: space-between; }
}

@media (min-width: 900px) {
  .ui-portal-faixa { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); align-items: center; gap: var(--esp-8); }
}

/* Numa coluna só, as faturas e os atalhos sobem para logo depois dos serviços. */
@media (max-width: 999px) {
  .ui-portal-painel { display: flex; flex-direction: column; align-items: stretch; }
  .ui-portal-painel__principal, .ui-portal-painel__lado { display: contents; }
  .ui-portal-painel__principal > :first-child { order: 1; }
  .ui-portal-painel__lado > * { order: 2; }
  .ui-portal-painel__principal > :not(:first-child) { order: 3; }
}

@media (min-width: 1000px) {
  .ui-portal-painel { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--esp-8); }
  .ui-portal-painel__lado { position: sticky; top: var(--esp-4); }
}

/* A entrada (documento, código, link): a marca da empresa à esquerda, o cartão à direita.
   No celular, a marca vira uma faixa curta em cima e o cartão sobe por cima dela. */
.ui-pub:has(.ui-portal-entrada) > .ui-pub__topo,
.ui-pub:has(.ui-portal-entrada) > .ui-pub__rodape { display: none; }
.ui-pub:has(.ui-portal-entrada) { --ui-pub-largura: 100%; }
.ui-pub:has(.ui-portal-entrada) > .ui-pub__conteudo { padding: 0; }
.ui-portal-entrada { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.ui-portal-entrada__marca { display: flex; flex-direction: column; gap: var(--esp-6); padding: var(--esp-6) var(--esp-4) var(--esp-16); background: var(--marca); color: var(--sobre-marca); }
.ui-portal-entrada__empresa { display: flex; align-items: center; gap: var(--esp-3); }
.ui-portal-entrada__logo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--raio-m); background: var(--sobre-marca); color: var(--marca); font-size: 19px; font-weight: 700; }
.ui-portal-entrada__nome { font-size: 18px; font-weight: 700; }
.ui-portal-entrada__promessa { display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-portal-entrada__rotulo { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.ui-portal-entrada__chamada { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 700; text-wrap: balance; max-width: 26ch; }
.ui-portal-entrada__itens { display: none; flex-direction: column; gap: var(--esp-4); margin: var(--esp-4) 0 0; padding: 0; list-style: none; }
.ui-portal-entrada__itens li { display: flex; align-items: center; gap: var(--esp-3); font-size: 16px; }
.ui-portal-entrada__icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--sobre-marca) 14%, transparent); }

.ui-portal-entrada__lado { display: flex; flex-direction: column; align-items: center; gap: var(--esp-4); padding: 0 var(--esp-4) var(--esp-8); background: var(--fundo); }
.ui-portal-entrada__cartao { display: flex; flex-direction: column; gap: var(--esp-5); width: 100%; max-width: 28rem; margin-top: calc(-1 * var(--esp-10)); padding: var(--esp-6); border-radius: var(--raio-g); background: var(--superficie); box-shadow: var(--sombra-flutuante); }
.ui-portal-entrada__topo { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-portal-entrada__passo { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--marca-forte); }
.ui-portal-entrada__titulo { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 700; text-wrap: balance; }
.ui-portal-entrada__apoio { margin: 0; color: var(--tinta-2); line-height: 1.5; }
.ui-portal-entrada__form { display: flex; flex-direction: column; gap: var(--esp-4); margin: 0; }
.ui-portal-entrada__form .ui-entrada { min-height: 52px; font-size: 18px; }
.ui-portal-entrada__form .ui-aceite__digitos { font-size: 28px; letter-spacing: 0.5em; text-align: center; font-variant-numeric: tabular-nums; padding-left: 0.5em; }
.ui-portal-entrada__acao { width: 100%; min-height: 52px; justify-content: center; font-size: 16px; }
.ui-portal-entrada__outras { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); padding-top: var(--esp-4); border-top: 1px solid var(--linha); }
.ui-portal-entrada__outras form { margin: 0; }
.ui-portal-entrada__link { padding: var(--esp-2) 0; border: 0; background: none; color: var(--marca-forte); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ui-portal-entrada__rodape { margin: 0; color: var(--tinta-2); font-size: 14px; text-align: center; }
.ui-portal-entrada__seguro { display: flex; align-items: center; gap: var(--esp-2); margin: 0; max-width: 28rem; color: var(--tinta-2); font-size: 13px; text-align: center; }

@media (min-width: 900px) {
  .ui-portal-entrada { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .ui-portal-entrada__marca { justify-content: space-between; padding: var(--esp-10) var(--esp-12); }
  .ui-portal-entrada__promessa { margin-bottom: auto; margin-top: auto; }
  .ui-portal-entrada__chamada { font-size: 36px; }
  .ui-portal-entrada__itens { display: flex; }
  .ui-portal-entrada__lado { justify-content: center; padding: var(--esp-10); }
  .ui-portal-entrada__cartao { margin-top: 0; padding: var(--esp-8); box-shadow: var(--sombra); }
}

/* O alto das páginas internas: título e frase de apoio, com folga da barra. */
.ui-portal-pagina__topo { display: flex; flex-direction: column; gap: var(--esp-1); padding-top: var(--esp-2); }
.ui-portal-pagina__titulo { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 700; }
.ui-portal-pagina__apoio { margin: 0; color: var(--tinta-2); }
.ui-portal-servicos { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); }
.ui-portal-voltar { display: inline-flex; align-items: center; gap: var(--esp-1); align-self: flex-start; margin-bottom: calc(-1 * var(--esp-3)); padding: var(--esp-1) 0; color: var(--tinta-2); font-weight: 600; text-decoration: none; }
.ui-portal-voltar:hover { color: var(--marca-forte); }

/* O contrato. */
.ui-portal-servico__icone--g { width: 56px; height: 56px; }
.ui-portal-contrato__plano { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 700; }
.ui-portal-contrato__alerta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3) var(--esp-4); padding: var(--esp-4); border-radius: var(--raio-m); background: var(--perigo-fundo); border: 1px solid var(--perigo-linha); }
.ui-portal-contrato__alerta > .ui-icone { flex: none; color: var(--perigo); }
.ui-portal-contrato__alerta-texto { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-portal-contrato__alerta-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.ui-portal-conexao__teste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3) var(--esp-4); padding: var(--esp-4); border-radius: var(--raio-m); background: var(--superficie-suave); }
.ui-portal-conexao__ultimo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-portal-conexao__dica { margin: 0; font-size: 14px; }
.ui-portal-conexao .ui-roteador { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-2); }
.ui-portal-conexao .ui-roteador__nome { display: inline-flex; align-items: center; gap: var(--esp-2); font-weight: 600; }
.ui-portal-contrato__cancelar { margin: 0; padding-inline: var(--esp-2); font-size: 14px; }
.ui-portal-contrato__cancelar a { color: var(--tinta-2); }

/* Faturas: o total em aberto no alto, cada conta em aberto num cartão clicável, as pagas numa lista. */
.ui-portal-total { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--esp-3) var(--esp-6); padding: var(--esp-5) var(--esp-6); border-radius: var(--raio-g); background: var(--superficie); box-shadow: var(--sombra); border-left: 6px solid var(--marca); }
.ui-portal-total__valor { display: flex; flex-direction: column; gap: var(--esp-1); }
.ui-portal-total__fatos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); color: var(--tinta-2); }
.ui-portal-faturas__lista { display: flex; flex-direction: column; gap: var(--esp-3); margin: 0; padding: 0; list-style: none; }
.ui-portal-fatura { display: flex; align-items: center; gap: var(--esp-4); padding: var(--esp-4) var(--esp-5); border: 1px solid transparent; border-radius: var(--raio-g); background: var(--superficie); box-shadow: var(--sombra); color: var(--tinta); text-decoration: none; transition: border-color 0.15s ease; }
.ui-portal-fatura:hover { border-color: var(--marca-linha); }
.ui-portal-fatura--vencida { border-left: 4px solid var(--perigo); }
.ui-portal-fatura__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ui-portal-fatura__fatos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-3); }
.ui-portal-fatura__valor { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-portal-pagas { padding-block: var(--esp-2); }
.ui-portal-pagas__lista { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ui-portal-paga { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--esp-3) var(--esp-4); padding-block: var(--esp-3); }
.ui-portal-paga + .ui-portal-paga { border-top: 1px solid var(--linha); }
.ui-portal-paga__icone { color: var(--ok); display: inline-flex; }
.ui-portal-paga__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-portal-paga__links { display: flex; flex-wrap: wrap; gap: var(--esp-3); font-size: 14px; }
.ui-portal-paga__links .ui-link { display: inline-flex; align-items: center; gap: 4px; }
.ui-portal-paga__valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
@media (max-width: 640px) {
  .ui-portal-fatura { flex-wrap: wrap; padding: var(--esp-4); }
  .ui-portal-fatura__texto { flex-basis: calc(100% - 64px); }
  .ui-portal-fatura__valor { margin-left: 56px; }
  .ui-portal-fatura__pagar { margin-left: auto; }
  .ui-portal-paga { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ui-portal-paga__links { grid-column: 2 / -1; grid-row: 2; }
}

/* O detalhe de uma conta. */
.ui-portal-cobranca__cabeca { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--esp-4); }
.ui-portal-cobranca__id { display: flex; flex-direction: column; gap: var(--esp-1); min-width: 0; flex: 1 1 18rem; }
.ui-portal-cobranca__titulo { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 700; text-wrap: balance; }
.ui-portal-cobranca__valor { display: flex; flex-direction: column; align-items: flex-end; gap: var(--esp-2); }
.ui-portal-pix .ui-cartao__titulo, .ui-portal-boleto .ui-cartao__titulo, .ui-portal-cobranca ~ .ui-portal-painel .ui-cartao__titulo { display: inline-flex; align-items: center; gap: var(--esp-2); }
.ui-portal-pix .ui-cartao__titulo .ui-icone, .ui-portal-boleto .ui-cartao__titulo .ui-icone { color: var(--marca); }
@media (max-width: 640px) { .ui-portal-cobranca__valor { align-items: flex-start; } }
.ui-portal-pix__corpo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-5); }
.ui-portal-pix__qr { flex: none; width: 184px; max-width: 100%; padding: var(--esp-2); border: 1px solid var(--linha); border-radius: var(--raio-m); background: var(--papel); }
.ui-portal-pix__qr svg { display: block; width: 100%; height: auto; }
.ui-portal-pix__copiar { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-3); }
.ui-portal-pix__copiar > p, .ui-portal-boleto > p { margin: 0; }
.ui-portal-copiar { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-portal-copiar__texto { width: 100%; min-height: 0; padding: var(--esp-3); border: 1px dashed var(--linha-forte); border-radius: var(--raio-m); background: var(--superficie-suave); color: var(--tinta); font-family: var(--font-mono); font-size: 14px; line-height: 1.5; resize: none; overflow-wrap: anywhere; field-sizing: content; }
.ui-portal-copiar__botao { align-self: flex-start; }

/* Chamados: linhas clicáveis; o alto da página com o botão ao lado do título. */
.ui-portal-pagina__topo--acao { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--esp-3); }
.ui-portal-chamado--link { margin-inline: calc(-1 * var(--esp-3)); padding-inline: var(--esp-3); border-radius: var(--raio-m); color: var(--tinta); text-decoration: none; }
.ui-portal-chamado--link:hover { background: var(--superficie-suave); }
.ui-portal-chamados__lista > li + li { border-top: 1px solid var(--linha); }
.ui-portal-chamado--link > .ui-icone:last-child { color: var(--tinta-3); }
.ui-portal-chamado__visita { display: inline-flex; align-items: center; gap: 4px; color: var(--marca-forte); font-size: 14px; font-weight: 600; }
.ui-portal-form { max-width: 44rem; }

/* A conversa: uma janela de chat, com o cabeçalho de quem atende, as mensagens rolando e o compositor embaixo. */
.ui-portal-chat { display: flex; flex-direction: column; height: calc(100dvh - 64px - 2 * var(--esp-6)); min-height: 26rem; border-radius: var(--raio-g); background: var(--superficie); box-shadow: var(--sombra); overflow: hidden; }
.ui-portal-chat__topo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); padding: var(--esp-4) var(--esp-5); border-bottom: 1px solid var(--linha); }
.ui-portal-chat__avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--marca); color: var(--sobre-marca); font-weight: 700; font-size: 18px; }
.ui-portal-chat__quem { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-portal-chat__nome { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; }
.ui-portal-chat__horario { margin: 0; color: var(--tinta-2); font-size: 14px; }
.ui-portal-chat__protocolo { color: var(--tinta-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.ui-portal-chat__corpo { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; padding: var(--esp-5); overflow-y: auto; background: var(--fundo); }
.ui-portal-chat__corpo .ui-conversa { gap: var(--esp-3); }
.ui-portal-chat__corpo .ui-balao { max-width: min(36rem, 85%); border-radius: 16px; box-shadow: var(--sombra); overflow-wrap: anywhere; }
/* O componente nomeia do lado da equipe: "--atendente" é o balão do próprio cliente (à direita, na cor da empresa). */
.ui-portal-chat__corpo .ui-balao--atendente { align-self: flex-end; background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); border-bottom-right-radius: 4px; }
.ui-portal-chat__corpo .ui-balao--atendente .ui-balao__hora { color: inherit; opacity: 0.8; }
.ui-portal-chat__corpo .ui-balao:not(.ui-balao--atendente) { align-self: flex-start; background: var(--superficie); border-bottom-left-radius: 4px; }
.ui-portal-chat__corpo .ui-balao--iris { border-color: var(--ia-linha); }
.ui-portal-chat__corpo .ui-conversa__sistema { align-self: center; max-width: 36rem; padding: var(--esp-1) var(--esp-3); border-radius: var(--raio-pilula); background: var(--superficie-suave); color: var(--tinta-2); font-size: 13px; text-align: center; }
.ui-portal-chat__pe { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-4) var(--esp-5); border-top: 1px solid var(--linha); background: var(--superficie); }
.ui-portal-chat__pe .ui-compositor { display: flex; flex-direction: column; gap: var(--esp-2); padding-top: 0; border-top: 0; }
.ui-portal-chat__pe .ui-compositor > .ui-campo__rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ui-portal-chat__pe textarea { min-height: 52px; border-radius: var(--raio-m); resize: vertical; }
.ui-portal-chat__pe .ui-compositor__linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.ui-portal-chat__pe .ui-compositor__acoes { margin-left: auto; }
.ui-portal-chat__pe > .ui-acoes { justify-content: flex-start; }
.ui-portal-chat__pe .ui-campo__erro:empty { display: none; }
@media (max-width: 720px) {
  .ui-portal-chat { height: calc(100dvh - 64px - 72px); min-height: 22rem; margin-inline: calc(-1 * var(--esp-4)); margin-top: calc(-1 * var(--esp-6)); border-radius: 0; }
  .ui-portal-chat__corpo { padding: var(--esp-4); }
  .ui-portal-chat__pe { padding: var(--esp-3) var(--esp-4); }
}
.ui-portal-compartilha { display: flex; flex-direction: column; gap: var(--esp-2); margin: 0; padding: 0; list-style: none; }
.ui-portal-compartilha li { display: flex; align-items: flex-start; gap: var(--esp-2); }
.ui-portal-compartilha .ui-icone { flex: none; margin-top: 3px; color: var(--marca); }
.ui-portal-atalho__rotulo { display: flex; flex-direction: column; gap: 2px; }
.ui-portal-atalho__apoio { font-weight: 400; font-size: 13px; }
.ui-portal-pedidos form { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-portal-pedidos > * + * { padding-top: var(--esp-4); border-top: 1px solid var(--linha); }
.ui-portal-vazio { align-items: center; padding-block: var(--esp-10); text-align: center; }
.ui-portal-vazio__titulo { margin: 0; font-size: 18px; font-weight: 700; }
.ui-portal-documentos .ui-portal-documento { padding-inline: 0; }
.ui-portal-documentos > li + li { border-top: 1px solid var(--linha); }

/* As páginas para imprimir: a marca da empresa no alto, com a cor dela também no papel. */
.ui-portal-impressao { display: flex; flex-direction: column; gap: var(--esp-5); }
.ui-pub:has(.ui-portal-impressao) .ui-pub__topo { border-bottom: 3px solid var(--marca); padding-bottom: var(--esp-4); margin-bottom: var(--esp-2); }
.ui-pub:has(.ui-portal-impressao) .ui-pub__logo { width: 48px; height: 48px; font-size: 22px; }
.ui-pub:has(.ui-portal-impressao) .ui-pub__empresa { font-size: 20px; }
.ui-portal-impressao .ui-cartao__titulo { color: var(--marca-forte); }
.ui-portal-impressao th { color: var(--marca-forte); }
@media print {
  .ui-pub__logo, .ui-portal-impressao, .ui-pub__topo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ui-portal-impressao .ui-cartao { box-shadow: none; border: 1px solid var(--linha); break-inside: avoid; }
}

/* Agenda: os horários marcados como cartões com a folhinha do dia; o "Marcar" ao lado no notebook. */
.ui-portal-agenda { display: grid; gap: var(--esp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .ui-portal-agenda { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--esp-8); } .ui-portal-agenda__marcar { position: sticky; top: var(--esp-4); } }
.ui-portal-marcados { display: flex; flex-direction: column; gap: var(--esp-3); margin: 0; padding: 0; list-style: none; }
.ui-portal-marcado { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--esp-3) var(--esp-4); padding: var(--esp-4); border-radius: var(--raio-g); background: var(--superficie); box-shadow: var(--sombra); }
.ui-portal-marcado__dia { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; padding: var(--esp-2) 0; border-radius: var(--raio-m); background: var(--marca-suave); color: var(--marca-forte); line-height: 1.1; }
.ui-portal-marcado__mes, .ui-portal-marcado__semana { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ui-portal-marcado__numero { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-portal-marcado__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-portal-marcado__quando { align-self: flex-start; padding: 2px 10px; border-radius: var(--raio-pilula); background: var(--superficie-suave); color: var(--tinta-2); font-size: 13px; font-weight: 700; }
.ui-portal-marcado__quando--perto { background: var(--marca); color: var(--sobre-marca); }
.ui-portal-marcado__titulo { font-size: 17px; line-height: 1.3; }
.ui-portal-marcado__texto .ui-apoio { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ui-portal-marcado__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.ui-portal-marcado__acoes form { margin: 0; }
@media (max-width: 640px) {
  .ui-portal-marcado { grid-template-columns: auto minmax(0, 1fr); }
  .ui-portal-marcado__acoes { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .ui-portal-marcado__acoes > *, .ui-portal-marcado__acoes .ui-botao { width: 100%; justify-content: center; }
}
.ui-portal-vazio--curto { flex-direction: row; justify-content: flex-start; padding-block: var(--esp-5); text-align: left; }
.ui-portal-marcar .ui-cartao__titulo { display: inline-flex; align-items: center; gap: var(--esp-2); }
.ui-portal-marcar .ui-cartao__titulo .ui-icone { color: var(--marca); }
.ui-portal-marcar__form .ui-entrada, .ui-portal-marcar__form select { width: 100%; max-width: 100%; }
.ui-portal-marcar__ver { width: 100%; justify-content: center; }
.ui-portal-horarios { display: flex; flex-direction: column; gap: var(--esp-4); padding-top: var(--esp-4); border-top: 1px solid var(--linha); }
.ui-portal-horarios__dia { display: flex; flex-direction: column; gap: var(--esp-2); }
.ui-portal-horarios__titulo { margin: 0; font-size: 15px; font-weight: 700; }
.ui-portal-horarios__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--esp-2); }
.ui-portal-horarios__grade form { margin: 0; }
.ui-portal-horarios__grade .ui-botao { width: 100%; justify-content: center; font-variant-numeric: tabular-nums; }
.ui-portal-horarios__grade .ui-botao:hover { border-color: var(--marca); color: var(--marca-forte); }

/* Texto na cor da empresa usa a forte: uma cor clara (salmão, amarelo) some sobre o branco. */
.ui-pub .ui-link, .ui-pub .ui-botao--fantasma, .ui-portal-nav__item.esta-atual, .ui-portal-nav__item[aria-current="page"],
.ui-portal-atalho__icone, .ui-portal-servico__icone, .ui-portal-marcar .ui-cartao__titulo .ui-icone, .ui-portal-pix .ui-cartao__titulo .ui-icone,
.ui-portal-boleto .ui-cartao__titulo .ui-icone, .ui-portal-compartilha .ui-icone, .ui-portal-acao__icone { color: var(--marca-forte); }
.ui-portal-nav__item.esta-atual::after, .ui-portal-nav__item[aria-current="page"]::after { background: var(--marca-forte); }
.ui-portal-marcado__texto .ui-apoio { display: block; }
.ui-portal-marcado__texto .ui-apoio .ui-icone { vertical-align: -2px; }

/* O "Feito." de uma Proposta: uma faixa de sucesso, e não um cartão dentro do cartão. */
.ui-portal-feito { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--esp-3) var(--esp-4); border-left: 4px solid var(--ok); }
.ui-portal-feito__icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ok-fundo); color: var(--ok); }
.ui-portal-feito__texto { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ui-portal-feito__texto > * { margin: 0; }
/* Dentro da lista da agenda, a Proposta (o Confirmar ou o Feito) toma a linha inteira do horário. */
.ui-portal-marcado:has(#proposta) { display: block; padding: 0; background: none; box-shadow: none; }
.ui-portal-marcado #proposta { width: 100%; }

/* Conversa: o "digitando…", a conversa vazia com as perguntas prontas, o "Falar com uma pessoa" no cabeçalho. */
.ui-portal-chat__pessoa { margin-left: auto; }
.ui-portal-chat__pe > .ui-acoes { display: none; }
.ui-portal-chat__pe .ui-compositor__acoes .ui-botao[disabled] { opacity: 0.6; cursor: progress; }
.ui-digitando { display: inline-flex; align-items: center; min-height: 40px; padding: 10px 16px !important; margin-top: var(--esp-3); }
.ui-digitando__pontos { display: inline-flex; gap: 4px; }
.ui-digitando__pontos span { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-3); animation: ui-pula 1.2s infinite ease-in-out; }
.ui-digitando__pontos span:nth-child(2) { animation-delay: 0.15s; }
.ui-digitando__pontos span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ui-pula { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ui-digitando__pontos span { animation: none; } }
.ui-portal-chat__boas { display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); max-width: 30rem; margin: var(--esp-6) auto var(--esp-4); text-align: center; }
.ui-portal-chat__avatar--g { width: 56px; height: 56px; }
.ui-portal-chat__boas-titulo { margin: var(--esp-2) 0 0; font-size: 20px; font-weight: 700; }
.ui-portal-chat__boas .ui-apoio { margin: 0; }
.ui-portal-chat__sugestoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-2); margin-top: var(--esp-3); }
.ui-portal-chat__sugestoes form { margin: 0; }
.ui-portal-chat__sugestao { min-height: 40px; padding: 8px 16px; border: 1px solid var(--marca-linha); border-radius: var(--raio-pilula); background: var(--superficie); color: var(--marca-forte); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ui-portal-chat__sugestao:hover { background: var(--marca-suave); }
.ui-portal-chat__corpo .ui-balao__quem { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; font-weight: 700; color: var(--ia); }
.ui-portal-chat__corpo .ui-balao__hora { align-self: flex-end; font-size: 11px; color: var(--tinta-3); }
@media (max-width: 560px) { .ui-portal-chat__pessoa { width: 100%; justify-content: center; } }

/* Conversa: o link dos atendimentos anteriores e o aviso de encerrado. */
.ui-portal-chat__anteriores { margin-left: auto; }
.ui-portal-chat__anteriores + .ui-portal-chat__pessoa { margin-left: 0; }
.ui-portal-chat__encerrado { display: flex; align-items: center; gap: var(--esp-2); margin: 0; padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-m); background: var(--ok-fundo); color: var(--ok); font-size: 14px; font-weight: 600; }
.ui-portal-chat--leitura { min-height: 0; }
.ui-portal-chat--leitura .ui-portal-chat__corpo { min-height: 0; max-height: none; }

/* A pesquisa de avaliação: cinco notas grandes, um toque. */
.ui-portal-pesquisa { align-items: center; max-width: 34rem; width: 100%; margin: var(--esp-4) auto 0; padding: var(--esp-8) var(--esp-6); text-align: center; }
.ui-portal-pesquisa__titulo { margin: var(--esp-2) 0 0; font-size: 24px; line-height: 1.25; font-weight: 700; text-wrap: balance; }
.ui-portal-pesquisa > .ui-apoio { margin: 0; }
.ui-portal-pesquisa__form { display: flex; flex-direction: column; gap: var(--esp-5); width: 100%; margin-top: var(--esp-4); text-align: left; }
.ui-portal-notas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--esp-2); margin: 0; padding: 0; border: 0; }
.ui-portal-nota { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--esp-3) var(--esp-1); border: 1px solid var(--linha-media); border-radius: var(--raio-m); background: var(--superficie); cursor: pointer; text-align: center; }
.ui-portal-nota input { position: absolute; opacity: 0; pointer-events: none; }
.ui-portal-nota__numero { font-size: 24px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ui-portal-nota__rotulo { font-size: 12px; color: var(--tinta-2); }
.ui-portal-nota:hover { border-color: var(--marca); }
.ui-portal-nota:has(input:checked) { border-color: var(--marca); background: var(--marca); }
.ui-portal-nota:has(input:checked) .ui-portal-nota__numero, .ui-portal-nota:has(input:checked) .ui-portal-nota__rotulo { color: var(--sobre-marca); }
.ui-portal-nota:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
.ui-portal-pesquisa__enviar { width: 100%; justify-content: center; min-height: 48px; }
.ui-portal-pesquisa .ui-portal-feito__icone { width: 56px; height: 56px; }

/* O fim de um atendimento corta a conversa; o botão das anteriores fica no topo. */
.ui-conversa__divisor { display: flex; align-items: center; gap: var(--esp-3); margin: var(--esp-3) 0; color: var(--ok); font-size: 13px; font-weight: 700; }
.ui-conversa__divisor::before, .ui-conversa__divisor::after { content: ""; flex: 1; height: 1px; background: var(--ok-linha); }
.ui-conversa__divisor > span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--ok-linha); border-radius: var(--raio-pilula); background: var(--ok-fundo); white-space: nowrap; }
.ui-conversa__divisor .ui-icone { width: 14px; height: 14px; }
.ui-conversa__anteriores { display: flex; justify-content: center; margin-bottom: var(--esp-3); }
.ui-portal-chat__corpo > .ui-conversa__anteriores .ui-botao { font-size: 14px; }
.ui-portal-chat__corpo { display: flex; flex-direction: column; gap: var(--esp-3); }

/* O portal instalável (PW): o logo da empresa na barra e na entrada, e o cartão "Instalar o app". */
.ui-portal-marca__logo img, .ui-portal-entrada__logo img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; background: white; }
.ui-portal-instalar { display: flex; gap: var(--esp-4); align-items: center; flex-wrap: wrap; }
.ui-portal-instalar[hidden] { display: none; }
.ui-portal-instalar__icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--raio-m); overflow: hidden; background: var(--marca); color: var(--sobre-marca); font-weight: 700; font-size: 20px; }
.ui-portal-instalar__icone img { width: 100%; height: 100%; object-fit: contain; }
.ui-portal-instalar__texto { flex: 1 1 16rem; min-width: 0; }
.ui-portal-instalar__texto .ui-acoes { margin-top: var(--esp-3); }
.ui-portal-instalar__texto [hidden] { display: none; }
@media (max-width: 720px) { .ui-portal-instalar .ui-acoes { flex-direction: column; align-items: stretch; } }