/* Casca do Stage app: o HUB do César (stg-arquivos, static/style.css), copiado com os valores exatos.
   O HUB é o site stageaec.com.br medido: cabeçalho de 64 px, lockup 134×32, pílula terra, link sublinhado,
   rodapé .site-footer, campos, botões e modal.
   Tudo aqui vive dentro de .hub (cabeçalho, rodapé, modal, aviso e a página de entrada), porque o dashboard
   do Brain tem os próprios tokens (--ink, --bg, --line) no :root e não pode ser redesenhado.
   No fim do arquivo: o encaixe do dashboard na casca (só posição e o que a casca passou a fazer). */

/* ---------- tokens do HUB ---------- */
.hub {
  --paper: #EDE7D9; --paper2: #E3DBC9; --gap: #E6E1CD;
  --ink: #211B12; --muted: #655D4E; --rule: #C9C0AC;
  --olive: #4A4D33; --terra: #A9663F; --terra-soft: #E9C7A8; --white: #F8F4EC; --active: #8A4E2E;
  --sans: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.22, .68, .18, 1);
  --space: clamp(22px, 4.45vw, 84px);
  --header: 64px;
  --shadow: 0 10px 30px #211b120f;
  color-scheme: light;
}
@media (max-width: 760px) { .hub { --header: 60px; } }
html[data-theme="dark"] .hub {
  --paper: #211B12; --paper2: #2B241A; --gap: #2B241A;
  --ink: #EDE7D9; --muted: #B3A893; --rule: #3F3628;
  --olive: #9A9D78; --terra: #C98A5F; --white: #2A2319; --active: #D99E78;
  --shadow: 0 10px 30px #0006;
  color-scheme: dark;
}

/* ---------- base do HUB, sem peso para as classes mandarem ---------- */
.hub, .hub *, .hub *::before, .hub *::after { box-sizing: border-box; }
.hub { color: var(--ink); font: 18px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
html:has(> body.hub) { -webkit-text-size-adjust: 100%; scroll-padding-top: 86px; }
body.hub { margin: 0; background: var(--paper); overflow-x: clip; }
:where(.hub) button, :where(.hub) input, :where(.hub) select, :where(.hub) textarea { font: inherit; color: inherit; }
:where(.hub) button { cursor: pointer; border-radius: 0; }
:where(.hub) button:disabled { cursor: default; opacity: .32; }
:where(.hub) a { color: inherit; text-decoration: none; }
:where(.hub) button, :where(.hub) a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.hub [hidden] { display: none !important; }
.hub ::selection { background: var(--olive); color: var(--paper); }
.hub button:focus-visible, .hub a:focus-visible, .hub input:focus-visible, .hub select:focus-visible, .hub textarea:focus-visible, .hub summary:focus-visible { outline: 2px solid var(--terra); outline-offset: 6px; }
:where(.hub) img { max-width: 100%; }
:where(.hub) h1, :where(.hub) h2, :where(.hub) h3, :where(.hub) p, :where(.hub) figure { margin: 0; }
:where(.hub) h1, :where(.hub) h2, :where(.hub) h3 { font-weight: 400; }
:where(.hub) h1, :where(.hub) h2 { font-family: var(--display); letter-spacing: -.055em; line-height: 1.08; text-wrap: balance; }
:where(.hub) h1 { font-size: clamp(36px, 4.8vw, 76px); }
:where(.hub) h2 { font-size: clamp(36px, 4.8vw, 76px); }
:where(.hub) h3 { font-family: var(--sans); font-size: clamp(21px, 1.95vw, 30px); letter-spacing: -.035em; line-height: 1.2; }

.hub .small, .hub .mono-label { font: 10px/1.6 var(--mono); letter-spacing: .065em; text-transform: uppercase; }
.hub .mono-label { color: var(--muted); }

/* ==========================================================================
   CABEÇALHO: .site-header do HUB
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header);
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  padding-inline: var(--space);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.site-header.scrolled { border-bottom-color: color-mix(in srgb, var(--rule) 65%, transparent); }

.hub .brand { position: relative; display: block; width: 134px; flex: 0 0 134px; height: 32px; }
.hub .brand img { width: 134px; height: auto; display: block; }
.hub .brand-dark, .hub .brand-light { position: absolute; inset: 0; transition: opacity .25s; }
.hub .brand-light { opacity: 0; }
html[data-theme="dark"] .hub .brand-light { opacity: 1; }
html[data-theme="dark"] .hub .brand-dark { opacity: 0; }

.hub .desktop-nav { display: flex; align-items: center; gap: 30px; font-size: 12px; }
.hub .desktop-nav > a, .hub .desktop-nav > button {
  position: relative; padding: 12px 0; min-height: 44px; display: flex; align-items: center; gap: 6px;
  white-space: nowrap; background: none; border: 0; color: inherit;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .13em; font-size: 11px;
}
.hub .desktop-nav > a::after, .hub .desktop-nav > button::after {
  content: ''; height: 1px; position: absolute; bottom: 8px; left: 0; right: 0; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.hub .desktop-nav > a:hover::after, .hub .desktop-nav > a[aria-current]::after,
.hub .desktop-nav > button:hover::after, .hub .desktop-nav > button[aria-current]::after { transform: scaleX(1); }
.hub .desktop-nav .n { color: var(--terra); font: 9px var(--mono); }

.hub .header-end { display: flex; align-items: center; gap: 14px; }
.hub .header-location, .hub .usuario { font: 10px/1.6 var(--mono); letter-spacing: .04em; white-space: nowrap; color: var(--muted); }

.hub .header-contact {
  display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 9px 0;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .13em; font-size: 11px;
  white-space: nowrap; color: inherit;
  background: none; border: 0; border-bottom: 1px solid currentColor;
}

/* ---------- botão: a pílula do site ---------- */
.hub .header-access, .hub .btn {
  display: inline-block; font-family: var(--mono); text-transform: uppercase; font-size: 11px; line-height: 1.6; letter-spacing: .13em; color: var(--ink); text-decoration: none;
  padding: 9px 16px; border: 1px solid var(--rule); border-radius: 22px; background: transparent;
  transition: background .2s, color .2s, border-color .2s; white-space: nowrap; text-align: center;
}
.site-header .header-access { margin-left: 12px; }
.hub .header-access:hover, .hub .btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.hub .header-access.is-client, .hub .btn.primary { background: var(--terra); color: var(--paper); border-color: var(--terra); }
.hub .header-access.is-client:hover, .hub .btn.primary:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.hub .btn:disabled, .hub .btn.primary:disabled { opacity: .32; background: transparent; color: var(--ink); border-color: var(--rule); }
.hub .btn.full { display: block; width: 100%; min-height: 44px; }

.hub .text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 44px; border-bottom: 1px solid currentColor; padding: 9px 0; font-size: 15px; background: none; border-top: 0; border-left: 0; border-right: 0; color: inherit; }
.hub .text-link .arrow, .hub .text-link > span:last-child { display: inline-block; transition: transform .3s var(--ease); font-size: 23px; line-height: 1; }
.hub .text-link:hover .arrow, .hub .text-link:hover > span:last-child { transform: translate(3px, -3px); }

.hub .round { width: 48px; height: 48px; flex: none; display: inline-grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; font-size: 21px; line-height: 1; padding: 0; cursor: pointer; transition: background .25s, color .25s; }
.hub .round:hover { background: var(--ink); color: var(--paper); }
.hub .tema-toggle { width: 38px; height: 38px; flex: none; display: inline-grid; place-items: center; border: 1px solid var(--rule); border-radius: 50%; background: transparent; color: var(--ink); font-size: 15px; line-height: 1; padding: 0; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.hub .tema-toggle:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- layout de página (entrada) ---------- */
.hub > main { padding-inline: var(--space); max-width: 1920px; margin-inline: auto; padding-top: 40px; padding-bottom: clamp(78px, 9vw, 150px); }
.hub .section { padding-block: clamp(78px, 9vw, 150px); }
.hub .section-top { margin-bottom: 42px; }
.hub .section-top .small { display: block; margin-bottom: 22px; }
.hub .section-top > p { margin-top: 20px; font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 44ch; }

/* ==========================================================================
   RODAPÉ: .site-footer do HUB, 1:1
   ========================================================================== */
.site-footer { border-top: 1px solid var(--rule); padding-top: 40px; color: var(--ink); background: var(--paper); }
.hub .footer-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 40px; padding-inline: var(--space); }
.hub .footer-top > a:first-child { justify-self: start; display: block; position: relative; width: 200px; }
.hub .footer-logo { width: 200px; height: auto; display: block; }
.hub .footer-top > a:first-child .brand-dark { position: relative; display: block; }
.hub .footer-top > a:first-child .brand-light { position: absolute; inset: 0; }
.hub .footer-top > p { text-align: center; margin: 0; font-size: 13px; color: var(--muted); }
.hub .footer-top > .round { justify-self: end; }
.hub .footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; margin-top: 20px; padding: 30px var(--space); font: 9px/1.7 var(--mono); color: var(--muted); }
.hub .footer-since { text-align: center; }
.hub .footer-social { justify-self: end; display: inline-flex; gap: 14px; align-items: center; }
.hub .footer-social a { display: inline-flex; color: inherit; opacity: .65; }
.hub .footer-social a:hover { opacity: 1; }
.hub .construction-signoff { background: #4A4D33; color: #EDE7D9; padding: 60px var(--space) 68px; }
.hub .signoff-meta { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font: 9px/1.7 var(--mono); letter-spacing: .06em; color: #C9C6B4; }
.hub .signoff-meta a { color: #C9C6B4; border-bottom: 1px solid rgba(255, 255, 255, .28); padding-bottom: 1px; transition: color .2s, border-color .2s; }
.hub .signoff-meta a:hover { color: #FFF; border-color: #FFF; }
@media (max-width: 860px) {
  .hub .footer-top { display: flex; justify-content: space-between; }
  .hub .footer-bottom { display: flex; flex-direction: column; align-items: flex-start; }
  .hub .footer-since { text-align: left; }
  .hub .footer-social { justify-self: start; }
}
@media (max-width: 760px) {
  .site-footer { padding-top: 35px; }
  .hub .footer-top { flex-wrap: wrap; align-items: center; gap: 26px; }
  .hub .footer-top > p { order: 3; flex-basis: 100%; }
  .hub .footer-top > a:first-child, .hub .footer-logo { width: 170px; }
  .hub .footer-bottom { font-size: 8px; padding-block: 20px; margin-top: 15px; gap: 5px; }
  .hub .construction-signoff { padding-block: 42px 47px; }
}

/* ==========================================================================
   FORMULÁRIOS: campos do HUB (borda 1px rule, 48 px, raio 0, fundo transparente)
   ========================================================================== */
.hub .field { display: block; margin: 0 0 18px; }
.hub .field .mono-label { display: block; margin-bottom: 8px; }
.hub .field input, .hub .field select, .hub .field textarea, .hub .modal textarea {
  width: 100%; background: transparent; color: var(--ink); border: 1px solid var(--rule); padding: 12px; font-size: 16px; min-height: 48px; border-radius: 0;
}
.hub .field textarea, .hub .modal textarea { min-height: 125px; resize: vertical; }
.hub .field input:disabled { color: var(--muted); }
.hub .field input:focus, .hub .field select:focus, .hub .field textarea:focus, .hub .modal textarea:focus { outline: 2px solid var(--terra); outline-offset: 0; border-color: var(--terra); }
.hub .form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .hub .form-pair { grid-template-columns: 1fr; gap: 0; } }

/* ==========================================================================
   MODAL e aviso: o dialog do HUB
   ========================================================================== */
.modal-bg.hub { position: fixed; inset: 0; background: rgba(25, 23, 14, .58); display: grid; place-items: center; z-index: 90; padding: 22px; }
.hub .modal { width: min(560px, 100%); background: var(--paper); border: 1px solid var(--rule); padding: 28px 30px; max-height: 90vh; overflow: auto; box-shadow: var(--shadow); }
.hub .modal h3 { margin: 6px 0 4px; }
.hub .modal .sub { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.hub .modal .acoes { display: flex; gap: 16px; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.hub .modal .erro { color: var(--terra); font-size: 14px; margin: 0 0 12px; }
.toast.hub { position: fixed; bottom: 24px; right: 24px; background: var(--ink); color: var(--paper); padding: 14px 18px; font-size: 14px; max-width: 420px; z-index: 95; box-shadow: var(--shadow); }
.toast.hub.erro { background: var(--terra); }

/* ---------- responsivo do cabeçalho, como o HUB ---------- */
@media (max-width: 1100px) { .hub .desktop-nav { gap: 22px; } .hub .header-location, .hub .usuario { display: none; } }
@media (max-width: 760px) {
  .site-header { padding-inline: 22px; gap: 26px; }
  .hub .brand, .hub .brand img { width: 124px; flex-basis: 124px; }
  .hub .brand { height: 30px; }
  .hub .desktop-nav, .hub .header-contact { display: none; }
  .hub > main { padding-top: 26px; }
  .hub .section-top { margin-bottom: 24px; }
  .hub .section-top > p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub *, .hub *::before, .hub *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   ENTRADA (quem não entrou): os padrões da capa do HUB (static/capa.html)
   ========================================================================== */
.hub > main.capa { padding-top: 0; padding-bottom: 0; }
.hub .capa .section { border-top: 1px solid var(--rule); }
.hub .capa .hero { border-top: 0; padding-top: clamp(40px, 6vw, 96px); }
.hub .capa .hero h1 { font-size: clamp(40px, 4.3vw, 68px); letter-spacing: -.055em; line-height: 1.09; max-width: 16ch; margin: 0 0 30px; }
.hub .capa .hero .small { display: block; margin-bottom: 22px; color: var(--muted); }
.hub .capa .lead { font-size: clamp(18px, 1.8vw, 25px); line-height: 1.55; letter-spacing: -.02em; max-width: 720px; }
.hub .contact-actions { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; margin-top: 36px; }
.hub .capa .garantias { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px 44px; }
.hub .capa .garantias .small { display: block; color: var(--terra); margin-bottom: 8px; }
.hub .capa .garantias p { font-size: 15px; line-height: 1.62; }
.hub .capa .nota { margin-top: 22px; font-size: 14px; color: var(--muted); max-width: 720px; }
@media (max-width: 760px) {
  .hub .contact-actions { gap: 14px; margin-top: 28px; align-items: flex-start; flex-direction: column; }
}
/* página de aviso do servidor (mapa sendo gerado, erro de montagem) */
.aviso-simples { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #EDE7D9; color: #211B12; font: 16px/1.6 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; }
html[data-theme="dark"] .aviso-simples { background: #211B12; color: #EDE7D9; }

/* ==========================================================================
   O QUE A CASCA ACRESCENTA AO HUB (derivado dos mesmos tokens)
   ========================================================================== */
/* navegação do painel: os itens cabem no meio; o espaço entre eles encolhe antes de tudo */
.hub .app-nav { flex: 0 1 auto; min-width: 0; gap: clamp(12px, calc(4vw - 34px), 30px); }
.hub .nav-sep { width: 1px; height: 14px; background: var(--rule); flex: none; }
/* o painel fica colado no cabeçalho: a linha de baixo é a do HUB depois de rolar (.scrolled) */
body.painel .site-header { border-bottom-color: color-mix(in srgb, var(--rule) 65%, transparent); height: calc(var(--header) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
.hub .header-access .curto { display: none; }

/* modal da proposta e do aparelho */
.hub .modal.larga { width: min(780px, 100%); }
.hub .modal .topo-modal { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.hub .modal .fechar-modal { width: 38px; height: 38px; margin: -6px -8px 0 0; }
.hub .modal .bloco { border-top: 1px solid var(--rule); padding: 22px 0 4px; margin-top: 22px; }
.hub .modal .bloco > .mono-label { display: block; margin-bottom: 12px; }
.hub .modal .bloco > .mono-label.forte { color: var(--terra); }
.hub .modal .bloco p { font-size: 15px; line-height: 1.6; }
.hub .modal .bloco ol { margin: 10px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.6; }
.hub .caminhos { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.hub .caminhos li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.hub .caminhos code { font: 12px/1.5 var(--mono); overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
/* etiqueta: o .chip do HUB (mono 9 px, raio 22 px) com outro nome, porque o dashboard já tem um .chip */
.hub .etq { display: inline-block; flex: none; padding: 2px 9px; font: 9px/1.6 var(--mono); letter-spacing: .065em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 22px; color: var(--muted); }
.hub .etq.ok { color: var(--olive); }
.hub .etq.alerta { color: var(--terra); border-color: var(--terra); }
.hub .dados { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 22px; margin: 0; }
.hub .dados > div { min-width: 0; }
.hub .dados dt { font: 10px/1.6 var(--mono); letter-spacing: .065em; text-transform: uppercase; color: var(--muted); }
.hub .dados dd { margin: 4px 0 0; font-size: 17px; letter-spacing: -.02em; line-height: 1.3; overflow-wrap: anywhere; }
.hub .dados dd small { display: block; margin-top: 4px; font-size: 13px; letter-spacing: 0; color: var(--muted); }
@media (max-width: 760px) { .hub .dados { grid-template-columns: 1fr 1fr; } }
.hub .pergunta { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 14px 0; border-top: 1px solid var(--rule); }
.hub .pergunta > .num { font: 10px/1.6 var(--mono); letter-spacing: .065em; color: var(--muted); padding-top: 4px; }
.hub .pergunta .field { margin: 10px 0 0; }
.hub .dobra { border-top: 1px solid var(--rule); margin-top: 22px; }
.hub .dobra + .dobra { margin-top: 0; }
.hub .dobra > summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; min-height: 44px; cursor: pointer; list-style: none;
  font: 400 11px/1.6 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink); }
.hub .dobra > summary::-webkit-details-marker { display: none; }
.hub .dobra > summary::after { content: '+'; font: 16px/1 var(--mono); color: var(--terra); }
.hub .dobra[open] > summary::after { content: '\2212'; }
.hub .dobra > summary small { font: 9px/1.6 var(--mono); letter-spacing: .065em; color: var(--muted); margin-left: auto; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.hub .dobra.falta > summary { color: var(--terra); }
.hub .dobra > :not(summary) { margin-bottom: 18px; }
.hub .field .ajuda { display: block; margin: -4px 0 8px; font-size: 13px; color: var(--muted); }
.hub .field.falta .mono-label { color: var(--terra); }
.hub .field textarea.linhas { min-height: 0; font: 13px/1.5 var(--mono); }
.hub .confirma { border-top: 1px solid var(--terra); margin-top: 24px; padding-top: 18px; }
.hub .confirma p { font-size: 15px; line-height: 1.6; }
.hub .confirma .acoes { margin-top: 16px; }
.hub .linha-estado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; }
/* texto da proposta (markdown seguro de /lib/markdown.js) */
.hub .md { font-size: 15px; line-height: 1.62; overflow-wrap: anywhere; }
.hub .md > * { margin: 0 0 12px; }
.hub .md h2, .hub .md h3, .hub .md h4, .hub .md h5 { font: 600 15px/1.4 var(--sans); letter-spacing: -.01em; margin: 20px 0 8px; }
.hub .md h2 { font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.hub .md ul, .hub .md ol { padding-left: 20px; }
.hub .md code { font: 12px/1.5 var(--mono); background: color-mix(in srgb, var(--rule) 40%, transparent); padding: 1px 4px; }
.hub .md pre { overflow: auto; border: 1px solid var(--rule); padding: 12px; }
.hub .md pre code { background: none; padding: 0; }
.hub .md blockquote { margin-inline: 0; padding-left: 14px; border-left: 1px solid var(--terra); color: var(--muted); }
.hub .md a { border-bottom: 1px solid var(--rule); }
.hub .md table { border-collapse: collapse; font-size: 13px; }
.hub .md td, .hub .md th { border-bottom: 1px solid var(--rule); padding: 6px 12px 6px 0; text-align: left; }

/* celular: na entrada a pílula do cabeçalho some, como no HUB (a do hero fica). No painel, a pílula e a conta
   continuam à mão, porque são o único caminho até a proposta, as notificações e o sair. */
@media (max-width: 860px) {
  body.hub > .site-header .header-access { display: none !important; }
  .hub .header-access .longo { display: none; }
  .hub .header-access .curto { display: inline; }
}
@media (max-width: 760px) {
  .hub.site-header .header-end { gap: 10px; }
  .hub.site-header .header-access { margin-left: 0; padding: 9px 12px; }
  .hub.site-header #cascaConta.header-contact { display: inline-grid; place-items: center; width: 38px; height: 38px; min-height: 0; padding: 0; border: 1px solid var(--rule); border-radius: 50%; letter-spacing: 0; }
  .hub #cascaConta .longo { display: none; }
  .hub .modal { padding: 22px 20px; }
  .toast.hub { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}
@media (min-width: 761px) { .hub #cascaConta .curto { display: none; } }
/* celular: alvo de toque de 44 px (Apple HIG) no J e no tema */
@media (max-width: 760px) { .hub .tema-toggle, .hub.site-header #cascaConta.header-contact { width: 44px; height: 44px; } }

/* ==========================================================================
   ENCAIXE DO DASHBOARD DO BRAIN NA CASCA
   Só posição e o que a casca passou a fazer. O desenho das vistas não muda.
   ========================================================================== */
body.painel { --casca-topo: calc(64px + env(safe-area-inset-top, 0px)); height: auto; min-height: 100%; overflow-x: clip; overflow-y: auto; }
@media (max-width: 760px) { body.painel { --casca-topo: calc(60px + env(safe-area-inset-top, 0px)); } }
/* o dashboard era a tela inteira (#app fixo); agora ocupa o que sobra abaixo do cabeçalho */
#painel-brain { position: relative; height: calc(100vh - var(--casca-topo)); height: calc(100dvh - var(--casca-topo)); min-height: 480px; overflow: hidden; }
body.painel #app { position: absolute; inset: 0; height: auto; min-height: 0; }
/* aberto por cima: a página de trás não rola */
body.painel.modal-pmo, body.painel.casca-modal { overflow: hidden; }
/* a marca é o lockup do cabeçalho; o tema é o toggle do cabeçalho */
body.painel #coluna .cab .marca, body.painel #tema { display: none !important; }
body.painel #topo .marca { visibility: hidden; height: 0; overflow: hidden; }
/* a navegação das cinco áreas mora no cabeçalho (desktop) e na barra de baixo (celular) */
@media (max-width: 760px) { .hub .app-nav { display: none; } }
/* nenhuma conversa com agente na tela até um agente responder de verdade */
body.painel [data-conv], body.painel #conv, body.painel #conv-in, body.painel #conv-env, body.painel #conv-parar { display: none !important; }
/* celular: o detalhe aberto por cima ocupa a tela toda. O dashboard já pede top:0 e bottom:0, mas a altura de 55%
   da gaveta continuava valendo e o projeto abria só na metade de cima. */
@media (max-width: 760px) { body.painel.modal-pmo #painel { height: auto; border-radius: 0; } }

/* Conversas: contador de não lidas (no cabeçalho e na barra de baixo) */
.cv-link .cv-n { font-style: normal; }
.cv-link .cv-n:not([hidden]) { display: inline-block; min-width: 18px; margin-left: 2px; padding: 0 5px; border-radius: 999px; background: var(--terra); color: var(--paper);
  font: 600 11px/18px "JetBrains Mono", monospace; text-align: center; letter-spacing: 0; }

/* ==========================================================================
   CELULAR: cinco botões embaixo (Meu dia, Tarefas, Conversas, Projetos, Brain)
   ========================================================================== */
.cinco { display: none; }
/* app interno de três pessoas: o rodapé institucional do site não entra no painel */
body.painel .site-footer { display: none; }
@media (max-width: 760px) {
  body.painel { --casca-baixo: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .cinco.hub { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr);
    height: var(--casca-baixo); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--white); border-top: 1px solid var(--rule); font: 9px/1 var(--mono); }
  .cinco.hub > * { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0;
    background: none; border: 0; padding: 0; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
  .cinco.hub > [aria-current="page"] { color: var(--active); }
  .cinco.hub > [aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 2px; background: var(--terra); }
  .cinco.hub .cv-n:not([hidden]) { position: absolute; top: 6px; left: calc(50% + 5px); margin: 0; min-width: 16px; padding: 0 4px; font: 600 9.5px/16px var(--mono); }
  /* o dashboard e a página de conversas terminam em cima da barra */
  #painel-brain { height: calc(100vh - var(--casca-topo) - var(--casca-baixo)); height: calc(100dvh - var(--casca-topo) - var(--casca-baixo)); min-height: 0; }
  /* conversa aberta, janela por cima e globo em tela cheia cobrem a barra */
  body.cv-aberta .cinco.hub, body.modal-pmo .cinco.hub, body.globo-cheio .cinco.hub { display: none; }
  body.globo-cheio .site-header { display: none; }
  body.globo-cheio #painel-brain { height: 100vh; height: 100dvh; }
  .toast.hub { bottom: calc(var(--casca-baixo, 0px) + 16px); }
}

/* Proposta de agente em linguagem de gente: cada lugar com o que é, o caminho pequeno embaixo; decisão presa no rodapé */
.hub .modal .o-que-e { font-size: 15px; line-height: 1.6; }
.hub .caminhos.gente li { flex-direction: column; align-items: flex-start; gap: 2px; }
.hub .caminhos.gente b { font-weight: 600; font-size: 15px; }
.hub .caminhos.gente small { font: 11px/1.5 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.hub .caminhos.gente small code { font: inherit; }
.hub .modal.proposta .pe-fixo { position: sticky; bottom: -28px; margin: 22px -30px -28px; padding: 14px 30px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--paper); border-top: 1px solid var(--rule); }
.hub .modal.proposta .pe-fixo .acoes, .hub .modal.proposta .pe-fixo .confirma { margin-top: 0; }
.hub .modal.proposta .pe-fixo .confirma { border-top: 0; padding-top: 0; }
@media (max-width: 760px) {
  .hub .modal.proposta .pe-fixo { bottom: -22px; margin: 18px -20px -22px; padding-inline: 20px; }
  .hub .modal.proposta .pe-fixo .acoes { gap: 8px; }
  .hub .modal.proposta .pe-fixo .btn { padding: 9px 12px; }
}

/* lista de propostas: nome e botão na mesma linha, sempre */
.hub-modal .caminhos.propostas li, .caminhos.propostas li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: nowrap; }
.caminhos.propostas li > span { min-width: 0; }
.caminhos.propostas li > .btn { flex: none; }

/* gravador de voz do painel (falar a tarefa, gravar ideia, nota da tarefa). A faixa leva .hub para ter as cores da casa:
   fora dela o texto saía escuro no fundo escuro (José, 14/11: "o botão de gravação é estranho e frio"). */
.vz-faixa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: center; padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)); pointer-events: none; font: 16px/1.4 var(--sans); }
.vz-caixa { pointer-events: auto; width: min(520px, 100%); background: var(--white); color: var(--ink); border: 1px solid var(--rule); border-top: 3px solid var(--terra); border-radius: 18px; padding: 16px 18px; box-shadow: 0 16px 40px rgba(33, 27, 18, .22); display: grid; gap: 12px; }
.vz-tit { margin: 0; font: 500 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--terra); }
.vz-estado { margin: 0; display: flex; align-items: center; gap: 12px; min-height: 36px; font-size: 15px; color: var(--muted); }
.vz-tempo { font: 600 28px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.vz-ponto { position: relative; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--terra); }
.vz-ponto::after { content: ""; position: absolute; inset: -6px; border: 2px solid var(--terra); border-radius: 50%; opacity: 0; animation: vz-pulso 1.6s var(--ease) infinite; }
@keyframes vz-pulso { from { transform: scale(.6); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }
.vz-nivel { display: inline-flex; align-items: center; gap: 3px; height: 30px; margin-left: auto; }
.vz-nivel i { width: 4px; height: 6px; border-radius: 2px; background: var(--terra); transition: height .08s linear; }
@media (prefers-reduced-motion: reduce) { .vz-ponto::after { animation: none; } .vz-nivel i { transition: none; } }
.vz-bts { display: flex; gap: 10px; justify-content: flex-end; }
.vz-bts[hidden] { display: none; }
.vz-bts button { min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--ink); font: 500 12px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; }
.vz-bts .vz-pronto { flex: 1; max-width: 240px; background: var(--terra); color: var(--paper); border-color: var(--terra); }

/* visor de arquivo (visor.js): PDF, apresentação e imagem dentro do app, com Fechar grande sempre à vista (13/11) */
html.vs-travado, html.vs-travado body { overflow: hidden; }
.vs-tela { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: var(--paper, #F4EFE6); }
.vs-barra { display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--rule, #d8d0c2); background: var(--paper, #F4EFE6); }
.vs-fechar { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 0; background: var(--ink, #1d1b18); color: var(--paper, #F4EFE6); font: 700 14px/1 var(--sans, system-ui); cursor: pointer; flex: none; touch-action: manipulation; }
.vs-fechar:focus-visible, .vs-salvar:focus-visible { outline: 2px solid var(--terra, #A9573A); outline-offset: 2px; }
.vs-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.3 var(--sans, system-ui); color: var(--ink, #1d1b18); }
.vs-salvar { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule, #d8d0c2); color: var(--ink, #1d1b18); text-decoration: none; font: 600 13px/1 var(--sans, system-ui); flex: none; }
.vs-corpo { position: relative; flex: 1; min-height: 0; background: #fff; display: flex; align-items: center; justify-content: center; overflow: auto; -webkit-overflow-scrolling: touch; }
.vs-quadro { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.vs-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vs-carregando { position: absolute; top: 40%; left: 0; right: 0; text-align: center; color: var(--muted, #6f675c); font: 13px var(--sans, system-ui); margin: 0; }
@media (max-width: 520px) { .vs-salvar span { display: none; } .vs-salvar { padding: 0 12px; } }
.vz-bts [hidden] { display: none; }