.portal-body {
  /* Tokens da marca aplicados somente ao Portal do Cliente. */
  --portal-primary:#008037; --portal-primary-deep:#005927; --portal-forest:#003d1a;
  --portal-accent:#00d15c; --portal-mint:#e6f5ed; --portal-smoke:#f0f4f2;
  --portal-border:#d1ded8; --portal-muted:#5d7166; --portal-shadow:0 8px 24px -6px rgba(0,61,26,.16),0 4px 10px -2px rgba(0,61,26,.08);
  min-height:100vh; margin:0; background:linear-gradient(135deg,var(--portal-smoke) 0%,#fdfcf8 55%,var(--portal-mint) 100%); color:#1a1a1a; font-family:"Manrope",Inter,ui-sans-serif,system-ui,sans-serif;
}
.portal-body h1,.portal-body h2,.portal-body h3 { font-family:"Sora",Inter,ui-sans-serif,system-ui,sans-serif; letter-spacing:-.03em; }
.portal-body button,.portal-body .primary-button,.portal-body .secondary-button { border-radius:10px; }
.portal-body .primary-button { background:var(--portal-primary); color:#fff; border-color:var(--portal-primary); box-shadow:0 5px 12px rgba(0,128,55,.18); }
.portal-body .primary-button:hover { background:var(--portal-primary-deep); border-color:var(--portal-primary-deep); }
.portal-body .secondary-button { border-color:var(--portal-border); color:var(--portal-forest); background:#fff; }
.portal-body .secondary-button:hover { border-color:var(--portal-primary); color:var(--portal-primary-deep); background:var(--portal-mint); }
.portal-body :where(a,button,input,textarea):focus-visible { outline:0; box-shadow:0 0 0 2px #fff,0 0 0 4px var(--portal-primary); }
.portal-main { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:32px 0 56px; }
.portal-login-shell { min-height:calc(100vh - 88px); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr); align-items:center; gap:0; overflow:hidden; border:1px solid rgba(34,74,51,.14); border-radius:28px; background:rgba(255,255,252,.82); box-shadow:0 24px 70px rgba(31,65,43,.12); }
.portal-brand-panel { align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding:clamp(38px,7vw,88px); background:linear-gradient(145deg,var(--portal-forest),var(--portal-primary-deep) 60%,var(--portal-primary)); color:#fff; }
/* A logo pode ter cores escuras e não deve depender de filtro para ficar
   legível sobre o painel verde. A própria imagem recebe uma superfície
   clara controlada; se falhar, o JS apresenta o nome público no mesmo
   tratamento visual. */
/* max-height evita que uma logo retrato/quadrada (ex.: avatar enviado por um
   escritório) fique gigante; o logotipo horizontal continua limitado pela largura. */
.portal-brand-panel img { width:min(260px,82%); height:auto; max-height:120px; object-fit:contain; margin-bottom:48px; }
/* Achado do usuário (17/09/2026): a logo aqui reaproveita tenant-branding.js
   (mesma logo cadastrada no painel interno), que aplica a classe
   .brand-avatar compartilhada -- essa classe tem estilo de avatar circular
   pequeno (borda, fundo, object-fit:cover) pensado pro navbar, incompatível
   com a logo grande deste painel. Neutraliza só o que não se aplica aqui. */
.portal-brand-panel img.brand-avatar { box-sizing:border-box; min-height:82px; max-height:106px; padding:12px 18px; border:1px solid rgba(255,255,255,.7); border-radius:15px; background:rgba(255,255,252,.96); object-fit:contain; flex:initial; filter:none; }
.portal-brand-fallback { align-self:flex-start; box-sizing:border-box; width:min(260px,82%); min-height:82px; margin-bottom:48px; padding:22px 18px; border:1px solid rgba(255,255,255,.7); border-radius:15px; background:rgba(255,255,252,.96); color:var(--portal-forest); font-family:"Sora",Inter,ui-sans-serif,system-ui,sans-serif; font-size:1.35rem; font-weight:800; letter-spacing:-.03em; text-align:center; }
.portal-brand-panel .eyebrow { color:#bce6cc; }
.portal-brand-panel h1 { max-width:460px; margin:12px 0 18px; font-family:Georgia,serif; font-size:clamp(2.3rem,5vw,4.4rem); line-height:1.03; font-weight:500; letter-spacing:-.04em; }
.portal-brand-panel > p:not(.eyebrow) { max-width:440px; color:#e5f4e9; font-size:1.05rem; line-height:1.65; }
.portal-benefits { display:grid; gap:12px; margin-top:38px; color:#e9f7ed; font-size:.92rem; }
.portal-login-card { width:min(100%,440px); justify-self:center; box-sizing:border-box; padding:clamp(30px,5vw,58px); }
.portal-card-heading h2 { margin:8px 0 10px; font-family:Georgia,serif; font-size:2.25rem; font-weight:500; }
.portal-card-heading p:not(.eyebrow) { margin:0 0 30px; color:var(--muted); line-height:1.5; }
.portal-login-card form { display:grid; gap:16px; }
.portal-login-card label { display:grid; gap:7px; color:var(--ink); font-size:.86rem; font-weight:700; }
.portal-login-card input { width:100%; box-sizing:border-box; min-height:48px; padding:12px 14px; border:1px solid var(--portal-border); border-radius:11px; background:#fff; color:#1a1a1a; font:inherit; outline:none; transition:border-color .2s,box-shadow .2s; }
.portal-login-card input:focus { border-color:var(--portal-primary); box-shadow:0 0 0 3px rgba(0,128,55,.13); }
.portal-login-shell .portal-login-card { border-radius:var(--radius-xl,1.25rem); }
.portal-submit { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:50px; margin-top:5px; font-size:.95rem; background:var(--portal-accent)!important; border-color:var(--portal-accent)!important; color:#1a1a1a!important; box-shadow:0 12px 28px rgba(0,209,92,.28); }
.portal-submit:hover { background:#00a347!important; border-color:#00a347!important; color:#fff!important; transform:translateY(-1px); }
.portal-submit span { font-size:1.25rem; line-height:0; }
.portal-recovery { margin-top:28px; padding-top:24px; border-top:1px solid #e0e7e1; }
.portal-recovery h3 { margin:0 0 5px; font-size:1rem; }
.portal-recovery > p { margin:0 0 14px; color:var(--muted); font-size:.84rem; }
.portal-recovery form { display:grid; gap:10px; }
.portal-recovery form label { width:100%; }
.portal-recovery form label.sr-only { position:static!important; width:auto!important; height:auto!important; padding:0!important; margin:0!important; overflow:visible!important; clip:auto!important; white-space:normal!important; border:0!important; }
.portal-recovery form button { justify-self:start; white-space:nowrap; }
.portal-recovery form .status-message { margin:0; }
.portal-login-card .status-message:empty { display:none; }
.portal-security { margin:28px 0 0; color:var(--muted); font-size:.75rem; line-height:1.45; text-align:center; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.portal-app { display:grid; gap:18px; }
.portal-app-header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:10px 4px 18px; }
.portal-app-header h2 { margin:5px 0 4px; font-family:Georgia,serif; font-size:2.35rem; font-weight:500; }
.portal-app-header-actions { display:flex; align-items:center; gap:16px; }
/* Item 4/5 do pedido de melhorias do cliente final (17/09/2026): personagem
   fixo segurando dinamicamente a logo do cliente. Coordenadas da logo em %
   (76.55/28.07/15.15) calculadas sobre a imagem-base de 1254x1254px, onde a
   mão fica vazia -- por isso escalam corretamente com qualquer largura. */
.portal-mascote { position:relative; width:132px; flex:none; }
.portal-mascote-img { display:block; width:100%; height:auto; }
.portal-mascote-logo { position:absolute; left:76.55%; top:28.07%; width:15.15%; aspect-ratio:1/1; transform:translate(-50%,-50%); border-radius:50%; object-fit:cover; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.25); }
@media (max-width:760px) { .portal-mascote { display:none; } }
.portal-app-subtitle { margin:0; color:var(--muted); }
.portal-summary-card, .portal-content-card { padding:26px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,252,.92); box-shadow:0 10px 30px rgba(31,65,43,.06); }
.portal-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:18px; }
.portal-section-heading h2 { margin:5px 0 0; font-family:Georgia,serif; font-size:1.55rem; font-weight:500; }
.portal-live-status { display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border-radius:999px; background:#e6f3ea; color:#17603f; font-size:.75rem; font-weight:700; white-space:nowrap; }
.portal-live-status i { width:7px; height:7px; border-radius:50%; background:#2aa56c; }
.portal-summary-card #summary > p { margin:0 0 20px; padding:13px 15px; border-radius:10px; background:#f1f6f1; color:#315140; }
.portal-summary-card #summary h3 { margin:24px 0 9px; padding-bottom:8px; border-bottom:1px solid #e3ebe4; font-size:1rem; color:#29523d; }
.portal-summary-card #summary h3:first-of-type { margin-top:0; }
.portal-summary-card .portal-row { align-items:center; justify-content:space-between; min-height:42px; box-sizing:border-box; }
.portal-pending-status { color:var(--portal-muted); font-size:.82rem; }
.portal-journey-marca { margin:0 0 9px; font-size:.86rem; font-weight:700; color:#29523d; }
.portal-journey-block + .portal-journey-block { margin-top:26px; }
.portal-journey { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin:4px 0 6px; padding:0; list-style:none; }
.portal-journey li { position:relative; display:grid; justify-items:center; gap:7px; min-width:0; padding:0 6px; text-align:center; color:var(--portal-muted); }
.portal-journey li::before { content:""; position:absolute; z-index:0; top:20px; right:50%; width:100%; height:2px; background:#dce5df; }
.portal-journey li:nth-child(5n + 1)::before { display:none; }
.portal-journey-node { display:grid; justify-items:center; gap:7px; width:100%; padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
.portal-journey-node:hover strong,.portal-journey-node:focus-visible strong { text-decoration:underline; }
/* Mascote foguete + logo do cliente no lugar do círculo genérico (achado do
   usuário, 21/09/2026) -- mesma imagem/coordenadas de .portal-mascote no
   cabeçalho (app/web/static/portal-cliente.css), só menor; as porcentagens
   de posição da logo são relativas à imagem, então funcionam em qualquer
   tamanho, só o tamanho da logo precisa crescer pra continuar legível. */
.portal-journey li > .portal-journey-node > .portal-journey-icon { position:relative; z-index:1; width:40px; height:40px; }
.portal-journey-mascote { display:block; width:100%; height:100%; object-fit:contain; }
.portal-journey-logo { position:absolute; left:76.55%; top:28.07%; width:34%; aspect-ratio:1/1; transform:translate(-50%,-50%); border-radius:50%; object-fit:cover; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3); }
.portal-journey li > .portal-journey-node > span { display:grid; gap:2px; min-width:0; }
.portal-journey strong { font-size:.76rem; line-height:1.25; color:inherit; }
.portal-journey small { font-size:.67rem; line-height:1.3; color:inherit; }
.portal-journey .is-pendente .portal-journey-mascote { filter:grayscale(1); opacity:.4; }
.portal-journey .is-concluida { color:#276342; }
.portal-journey .is-concluida::before,.portal-journey .is-atual::before { background:var(--portal-primary); }
.portal-journey .is-atual { color:var(--portal-forest); font-weight:700; }
.portal-journey .is-atual > .portal-journey-node > .portal-journey-icon { filter:drop-shadow(0 0 3px rgba(0,128,55,.6)); }
.portal-journey .has-alerta > .portal-journey-node > .portal-journey-icon { filter:drop-shadow(0 0 3px rgba(200,121,12,.7)); }
.portal-journey-alerta { margin:2px 0 16px; padding:8px 10px; border-radius:8px; background:#fff3d6; color:#7a5a0a; font-size:.78rem; text-align:center; }
.portal-journey-previsao { margin:2px 0 16px; color:var(--portal-muted); font-size:.74rem; text-align:center; font-style:italic; }
.portal-drawer-body { display:grid; gap:4px; padding:18px 22px 22px; min-width:min(360px,80vw); }
.portal-drawer-body header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.portal-drawer-body h3 { margin:0 0 4px; font-size:1.1rem; }
.portal-drawer-body > p#journey-drawer-situacao { margin:0; color:var(--portal-muted); font-size:.86rem; }
.portal-drawer-alerta { margin:6px 0; padding:8px 10px; border-radius:8px; background:#fff3d6; color:#7a5a0a; font-size:.82rem; }
.portal-drawer-previsao { margin:0 0 10px; color:var(--portal-muted); font-size:.82rem; font-style:italic; }
.portal-drawer-eventos { display:grid; gap:8px; margin:10px 0 0; padding:0; list-style:none; }
.portal-drawer-eventos li { display:flex; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:8px; background:#f8faf7; font-size:.84rem; }
.portal-drawer-eventos small { color:var(--portal-muted); }
.portal-drawer-vazio { margin:10px 0 0; color:var(--portal-muted); font-size:.84rem; }
.portal-action-error { display:block; flex-basis:100%; color:#a33128; font-size:.8rem; }
.portal-communication-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:18px; }
.portal-messages { display:grid; gap:9px; max-height:270px; overflow:auto; margin-bottom:15px; }
.portal-messages p { margin:0; padding:11px 13px; border-radius:10px; background:#f3f6f2; line-height:1.5; }
.portal-messages small { color:var(--muted); }
/* Achado médio da auditoria fina do Portal do Cliente (Fase 13.4,
   23/09/2026): mensagem do cliente e resposta da equipe eram idênticas,
   sem diferenciação visual -- mesma ideia de admin-leads.css
   (.portal-message-client/.portal-message-operator), com o lado alinhado
   invertido pro ponto de vista de quem está no portal. */
.portal-messages p.portal-message-mine { background:var(--portal-mint); border:1px solid var(--portal-border); margin-left:15%; }
.portal-messages p.portal-message-team { background:#fffaf0; border:1px solid #f0e2c2; margin-right:15%; }
.portal-action-form { display:grid; gap:10px; }
.portal-action-form textarea { width:100%; min-height:90px; box-sizing:border-box; resize:vertical; padding:11px 12px; border:1px solid var(--line); border-radius:10px; font:inherit; }
.portal-action-form input[type=file] { width:100%; box-sizing:border-box; padding:11px; border:1px dashed #b9cbbd; border-radius:10px; background:#f8faf7; }
.portal-action-form button { justify-self:start; }
/* Achado médio da auditoria fina do Portal do Cliente (Fase 13.2,
   23/09/2026): campo de código de confirmação de 6 dígitos no diálogo de
   assinatura -- mesmo tratamento visual dos inputs do login (borda,
   padding), com destaque tipográfico pro código em si. */
.portal-codigo-input { width:100%; box-sizing:border-box; min-height:48px; padding:12px 14px; border:1px solid var(--portal-border); border-radius:11px; background:#fff; font:inherit; font-size:1.2rem; letter-spacing:.3em; text-align:center; }
.portal-codigo-input:focus { outline:none; border-color:var(--portal-primary); box-shadow:0 0 0 3px rgba(0,128,55,.13); }
.portal-help-text { margin:0 0 20px; color:var(--muted); line-height:1.5; }
/* Fase 13.5 da auditoria fina do Portal do Cliente (23/09/2026): a tela de
   login promete "Processos e prazos", mas nada na área logada mostrava
   isso -- os endpoints já existiam no backend e nunca eram consultados
   pelo front. Cartões simples, reaproveitando .rpi-progress/.w-pct-N
   (já globais, vindos de styles.css) pra barra de progresso do processo. */
.portal-processo { padding:12px 13px; border-radius:10px; background:#f3f6f2; }
.portal-processo + .portal-processo { margin-top:9px; }
.portal-processo-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; font-size:.86rem; }
.portal-processo-head span { color:var(--muted); font-size:.78rem; }
.portal-processo p { margin:0 0 8px; color:var(--muted); font-size:.84rem; }
.portal-processo-alerta { display:block; margin-top:6px; color:#7a5a0a; font-size:.78rem; }
#portal-processos, #portal-prazos { display:grid; gap:9px; }
#portal-processos > p, #portal-prazos > p { margin:0; padding:11px 13px; border-radius:10px; background:#f1f6f1; color:#315140; }
/* Achado da validação do Portal do Cliente (17/09/2026): o cliente enviava
   um documento e não via confirmação nem os arquivos já enviados -- o
   endpoint de listagem existia no backend, mas nunca era consultado aqui. */
.portal-sent-files { display:grid; gap:8px; margin-bottom:16px; }
.portal-sent-files-title { margin:0; font-size:.82rem; font-weight:700; color:var(--muted); }
.portal-brand-materials { display:grid; gap:8px; }
.portal-brand-materials .portal-row { align-items:center; justify-content:space-between; }
@media (max-width:760px) { .portal-app-header { align-items:flex-start; flex-direction:column; } .portal-app-header h2 { font-size:2rem; } .portal-summary-card, .portal-content-card { padding:20px 16px; } .portal-communication-grid { grid-template-columns:1fr; } .portal-section-heading { flex-direction:column; } .portal-live-status { align-self:flex-start; } .portal-journey { grid-template-columns:1fr; gap:0; } .portal-journey li { min-height:48px; padding:0; text-align:left; } .portal-journey-node { grid-template-columns:30px 1fr; justify-items:start; text-align:left; } .portal-journey li::before { top:-32px; left:14px; width:2px; height:40px; } .portal-journey li:nth-child(5n + 1)::before { display:block; } .portal-journey li:first-child::before { display:none; } }
@media (max-width:760px) { .portal-main { width:100%; padding:0; } .portal-login-shell { min-height:100vh; grid-template-columns:1fr; border:0; border-radius:0; } .portal-brand-panel { min-height:330px; padding:36px 28px; } .portal-brand-panel img { width:180px; height:auto; max-height:96px; object-fit:contain; margin-bottom:28px; } .portal-brand-panel h1 { font-size:2.55rem; } .portal-benefits { grid-template-columns:1fr 1fr; gap:8px; margin-top:25px; font-size:.8rem; } .portal-login-card { width:100%; padding:34px 28px 46px; } }
@media (max-width:760px) { .portal-brand-fallback { width:220px; min-height:70px; margin-bottom:28px; padding:18px 16px; } }