/* ==========================================================================
   MLL · sistema visual
   Um arquivo, sem build, sem CDN: o sistema roda offline e nada sai da máquina.
   Tokens primeiro; componentes depois; telas quase não têm CSS próprio.
   ========================================================================== */

@view-transition { navigation: auto; }

/* Hospedadas aqui mesmo: o sistema não busca fonte nenhuma na internet.
   Inter (texto, variável 100–900) e Fraunces (títulos, serifa editorial —
   é o que tira a "cara de painel genérico"; usada só em tamanho grande). */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fontes/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fontes/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0300-0301, U+0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 340 720; font-display: swap;
  src: url("/static/fontes/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 340 720; font-display: swap;
  src: url("/static/fontes/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0300-0301, U+0304, U+0308, U+0329, U+1E00-1EFF;
}

:root {
  --fonte: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --fonte-titulo: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --mono: "JetBrains Mono", "Cascadia Code", ui-monospace, Consolas, monospace;

  /* superfícies */
  --fundo: #f6f7f9;
  --fundo-2: #eef0f4;
  --superficie: #ffffff;
  --superficie-2: #fafbfc;
  --borda: #e6e8ee;
  --borda-forte: #d5d9e2;

  /* tinta */
  --texto: #0d1321;
  --texto-2: #475067;
  --texto-3: #8a92a6;

  /* marca — mesmo par azul→violeta do monograma B·V */
  --acento: #3a54f0;
  --acento-forte: #2540d6;
  --acento-2: #7c5cff;
  --acento-suave: #eef1ff;
  --acento-borda: #cfd6ff;
  --acento-texto: #2b41d9;
  --acento-grad: linear-gradient(135deg, var(--acento), var(--acento-2));

  /* rail lateral: superfície de marca fixa, não segue o tema claro/escuro —
     é o mesmo azul-marinho do monograma, sempre. */
  --rail-1: #071237;  /* azul-marinho exato da marca */
  --rail-2: #131e52;
  --rail-borda: rgba(255, 255, 255, .08);
  --rail-texto: rgba(255, 255, 255, .94);
  --rail-texto-2: rgba(255, 255, 255, .64);
  --rail-texto-3: rgba(255, 255, 255, .4);
  --rail-hover: rgba(255, 255, 255, .07);
  --rail-ativo: rgba(255, 255, 255, .1);
  --rail-acento: #93a6ff;
  --rail-brilho: rgba(124, 92, 255, .28);  /* halo do topo do rail; cada produto retinge */

  /* estados */
  --verde: #0f8a5f;  --verde-suave: #e8f7f0;  --verde-borda: #bfe7d4;
  --ambar: #a15c00;  --ambar-suave: #fff5e6;  --ambar-borda: #f6d9a8;
  --vermelho: #d92d3a; --vermelho-suave: #fff0f1; --vermelho-borda: #f8c9cd;
  --violeta: #6d4bd8; --violeta-suave: #f3efff;

  --raio: 14px;
  --raio-sm: 9px;
  --sombra-1: 0 1px 2px rgba(16, 24, 40, .05);
  --sombra-2: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px -4px rgba(16, 24, 40, .08);
  --sombra-3: 0 24px 60px -12px rgba(16, 24, 40, .28);
  --anel: 0 0 0 4px rgba(47, 91, 255, .16);
  --lateral: 248px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

:root[data-tema="escuro"] {
  /* azul-marinho da marca, não cinza neutro — "o app deve ser escuro", nos tons de dentro da logo */
  --fundo: #060a1f;
  --fundo-2: #0a1029;
  --superficie: #0d1436;
  --superficie-2: #111a42;
  --borda: #212a56;
  --borda-forte: #2c3768;
  --texto: #eef0f6;
  --texto-2: #a6adc0;
  --texto-3: #6c7489;
  --acento: #5b7fff;
  --acento-forte: #7391ff;
  --acento-2: #9c7dff;
  --acento-suave: rgba(91, 127, 255, .12);
  --acento-borda: rgba(91, 127, 255, .35);
  --acento-texto: #93abff;
  --verde: #3ecf8e;  --verde-suave: rgba(62, 207, 142, .1);  --verde-borda: rgba(62, 207, 142, .3);
  --ambar: #f5b454;  --ambar-suave: rgba(245, 180, 84, .1);  --ambar-borda: rgba(245, 180, 84, .3);
  --vermelho: #ff6b76; --vermelho-suave: rgba(255, 107, 118, .1); --vermelho-borda: rgba(255, 107, 118, .32);
  --violeta: #a78bfa; --violeta-suave: rgba(167, 139, 250, .12);
  --sombra-1: 0 1px 0 rgba(255, 255, 255, .02);
  --sombra-2: 0 1px 0 rgba(255, 255, 255, .03), 0 8px 24px -8px rgba(0, 0, 0, .5);
  --sombra-3: 0 30px 80px -10px rgba(0, 0, 0, .7);
  --anel: 0 0 0 4px rgba(91, 127, 255, .25);
  color-scheme: dark;
}

/* ==========================================================================
   Arcadia · tema de produto
   Não é paleta nova: é a rampa tonal das duas cores que já estão no
   marca/arcadia.svg — rosa #F472B6 sobre bordô #4A0E22. Os tons
   intermediários (#DB2777, #BE185D, #8E1741) existem só porque o rosa da
   marca não tem contraste para texto sobre branco; a marca continua sendo
   o rosa (fundos escuros, gráficos) e o bordô (rail, plaqueta do ícone).
   Só o Arcadia sobrescreve — Nomos e BlueVault seguem intocados.
   ========================================================================== */
:root[data-produto="arcadia"] {
  --acento: #db2777;
  --acento-forte: #be185d;
  --acento-2: #f472b6;
  --acento-suave: #fdf2f8;
  --acento-borda: #fbcfe8;
  --acento-texto: #be185d;
  --acento-grad: linear-gradient(135deg, #db2777, #f472b6);
  --anel: 0 0 0 4px rgba(219, 39, 119, .18);
  --violeta: #b8317a; --violeta-suave: #fdf2f8;

  --rail-1: #4a0e22;  /* bordô exato da plaqueta do ícone */
  --rail-2: #2c0714;
  --rail-acento: #f9a8d4;
  --rail-brilho: rgba(244, 114, 182, .26);
}

:root[data-produto="arcadia"][data-tema="escuro"] {
  /* escuro com tinta de vinho, não cinza neutro: o escuro do Arcadia tem de
     ser reconhecivelmente o mesmo mundo do bordô da marca. */
  --fundo: #120610;
  --fundo-2: #190a16;
  --superficie: #1c0b19;
  --superficie-2: #24101f;
  --borda: #3a1b2f;
  --borda-forte: #4e2741;
  --texto: #f8eef4;
  --texto-2: #c7aab8;
  --texto-3: #8e7583;
  --acento: #f472b6;
  --acento-forte: #f9a8d4;
  --acento-2: #f9a8d4;
  --acento-suave: rgba(244, 114, 182, .12);
  --acento-borda: rgba(244, 114, 182, .34);
  --acento-texto: #f9a8d4;
  --acento-grad: linear-gradient(135deg, #ec4899, #f9a8d4);
  --anel: 0 0 0 4px rgba(244, 114, 182, .26);
  --violeta: #f0abfc; --violeta-suave: rgba(240, 171, 252, .12);
}

/* ---------- Nomos · preto, branco e grafite ----------
   Identidade deliberadamente separada dos produtos de PI e marketing:
   nenhuma cor de marca, gradiente ou azul atravessa este escopo. */
:root[data-produto="nomos"] {
  --fonte-titulo: var(--fonte);
  --fundo: #f5f5f5;
  --fundo-2: #ebebeb;
  --superficie: #ffffff;
  --superficie-2: #fafafa;
  --borda: #d7d7d7;
  --borda-forte: #b7b7b7;
  --texto: #111111;
  --texto-2: #454545;
  --texto-3: #707070;
  --acento: #111111;
  --acento-forte: #000000;
  --acento-2: #3e3e3e;
  --acento-suave: #eeeeee;
  --acento-borda: #b7b7b7;
  --acento-texto: #111111;
  --acento-grad: #111111;
  --nomos-botao-texto: #ffffff;
  --nomos-botao-hover: #333333;
  --rail-1: #111111;
  --rail-2: #292929;
  --rail-acento: #ffffff;
  --rail-brilho: rgba(255, 255, 255, .12);
  --anel: 0 0 0 4px rgba(17, 17, 17, .18);
  --raio: 10px;
  --raio-sm: 7px;
  --sombra-1: 0 1px 2px rgba(17, 17, 17, .06);
  --sombra-2: 0 8px 24px -14px rgba(17, 17, 17, .3);
  --sombra-3: 0 24px 60px -12px rgba(0, 0, 0, .28);
  --verde: #404040; --verde-suave: #f1f1f1; --verde-borda: #bcbcbc;
  --ambar: #333333; --ambar-suave: #eeeeee; --ambar-borda: #888888;
  --vermelho: #111111; --vermelho-suave: #e8e8e8; --vermelho-borda: #555555;
  --violeta: #454545; --violeta-suave: #eeeeee;
}

:root[data-produto="nomos"][data-tema="escuro"] {
  --fundo: #080808;
  --fundo-2: #1b1b1b;
  --superficie: #191919;
  --superficie-2: #222222;
  --borda: #373737;
  --borda-forte: #505050;
  --texto: #f5f5f5;
  --texto-2: #c2c2c2;
  --texto-3: #a0a0a0;
  --acento: #f5f5f5;
  --acento-forte: #ffffff;
  --acento-2: #d0d0d0;
  --acento-suave: #292929;
  --acento-borda: #666666;
  --acento-texto: #f5f5f5;
  --acento-grad: #f5f5f5;
  --nomos-botao-texto: #111111;
  --nomos-botao-hover: #d8d8d8;
  --rail-1: #050505;
  --rail-2: #171717;
  --rail-acento: #ffffff;
  --rail-brilho: rgba(255, 255, 255, .1);
  --anel: 0 0 0 4px rgba(255, 255, 255, .25);
  --verde: #d0d0d0; --verde-suave: #222222; --verde-borda: #555555;
  --ambar: #e0e0e0; --ambar-suave: #292929; --ambar-borda: #888888;
  --vermelho: #ffffff; --vermelho-suave: #333333; --vermelho-borda: #b0b0b0;
  --violeta: #dddddd; --violeta-suave: #292929;
}

/* ==========================================================================
   BlueVault · operação premium
   O BlueVault compartilha a disciplina tipográfica do MLL, mas não a paleta
   editorial do Arcadia: azul petróleo para contexto, cobre para atenção e
   superfícies quase marfim para manter a leitura de prazos e processos.
   ========================================================================== */
:root[data-produto="bluevault"] {
  --acento: #176b78;
  --acento-forte: #0f5260;
  --acento-2: #4e9c9d;
  --acento-suave: #e8f4f3;
  --acento-borda: #b9d9d8;
  --acento-texto: #0d5a68;
  --acento-grad: linear-gradient(135deg, #176b78, #4e9c9d);
  --rail-acento: #76c8c5;
  --rail-brilho: rgba(78, 156, 157, .3);
  --cobre: #b87532;
  --cobre-suave: #fff4e7;
  --cobre-borda: #edcfab;
  --anel: 0 0 0 4px rgba(23, 107, 120, .18);
}

:root[data-produto="bluevault"][data-tema="escuro"] {
  --fundo: #08151c;
  --fundo-2: #0c2028;
  --superficie: #10262e;
  --superficie-2: #15313a;
  --borda: #24434b;
  --borda-forte: #315963;
  --texto: #edf6f5;
  --texto-2: #a9c2c3;
  --texto-3: #709092;
  --acento: #63c2c0;
  --acento-forte: #8bd4d0;
  --acento-2: #9ad7c7;
  --acento-suave: rgba(99, 194, 192, .12);
  --acento-borda: rgba(99, 194, 192, .34);
  --acento-texto: #8bd4d0;
  --acento-grad: linear-gradient(135deg, #278d96, #8bd4d0);
  --cobre: #e4a963;
  --cobre-suave: rgba(228, 169, 99, .12);
  --cobre-borda: rgba(228, 169, 99, .34);
  --rail-acento: #8bd4d0;
  --rail-brilho: rgba(99, 194, 192, .24);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 14.5px/1.55 var(--fonte); letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--acento-texto); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--acento-borda); }
/* Fraunces é fonte de exibição (eixo óptico "opsz"): abaixo de ~20px o
   desenho fica fino e sem o caráter editorial que ela tem em tamanho grande —
   por isso só o h1 usa serifa. h2/h3 são a mesma Inter, só que num peso mais
   forte, pra hierarquia continuar clara sem ficar com cara de painel genérico. */
h1, h2, h3 { letter-spacing: -.008em; margin: 0; }
h1 {
  font-family: var(--fonte-titulo); font-size: 28px; font-weight: 600; line-height: 1.18;
  font-optical-sizing: auto; font-variation-settings: "SOFT" 20, "opsz" 28;
}
h2 { font-family: var(--fonte); font-size: 16px; font-weight: 700; letter-spacing: -.012em; }
h3 { font-family: var(--fonte); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--texto-2); text-transform: uppercase; }
p { margin: 0 0 10px; }
ul, ol { margin: 6px 0; padding-left: 20px; }
b, strong { font-weight: 620; }
.mono { font-family: var(--mono); font-size: .9em; letter-spacing: 0; font-feature-settings: "zero"; }
.suave { color: var(--texto-2); font-size: 13px; }
.fraco { color: var(--texto-3); font-size: 12.5px; }
.vermelho { color: var(--vermelho); font-weight: 600; }
.icone { width: 18px; height: 18px; flex: none; vertical-align: -4px; }
.icone.p { width: 15px; height: 15px; vertical-align: -3px; }
.icone.g { width: 22px; height: 22px; }
:focus-visible { outline: none; box-shadow: var(--anel); border-radius: 8px; }

/* ---------- casca do app ---------- */
.app { display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 100vh; }

.lateral {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  padding: 18px 14px; border-right: 1px solid var(--rail-borda);
  background:
    radial-gradient(600px 340px at -8% -12%, var(--rail-brilho), transparent 60%),
    linear-gradient(190deg, var(--rail-1), var(--rail-2));
  color: var(--rail-texto);
  view-transition-name: lateral;
}
.lateral .logo { display: flex; align-items: center; gap: 11px; padding: 4px 8px 20px; color: var(--rail-texto); }
.lateral .logo:hover { text-decoration: none; }
.lateral .logo img { width: 30px; height: 30px; filter: drop-shadow(0 4px 14px rgba(60, 80, 255, .45)); }
/* Palavra-marca: um peso só, tracking fechado. A marca não grita. */
.palavra { font-family: var(--fonte-titulo); font-size: 18px; font-weight: 580; letter-spacing: -.008em; line-height: 1; }
.palavra span, .palavra b { font-weight: inherit; color: inherit; }
.lateral .logo small { display: block; font-size: 11px; color: var(--rail-texto-3); margin-top: 3px; letter-spacing: .01em; }

.buscar-atalho {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 16px; padding: 8px 10px;
  border: 1px solid var(--rail-borda); border-radius: 10px; background: rgba(255, 255, 255, .05);
  color: var(--rail-texto-3); font: inherit; font-size: 13px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.buscar-atalho:hover { border-color: rgba(255, 255, 255, .2); color: var(--rail-texto); background: rgba(255, 255, 255, .08); }
.buscar-atalho kbd { margin-left: auto; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: var(--rail-texto-2); box-shadow: none; }
kbd {
  font: 600 10.5px/1 var(--fonte); padding: 3px 5px; border-radius: 5px; color: var(--texto-3);
  border: 1px solid var(--borda); background: var(--fundo); box-shadow: inset 0 -1px 0 var(--borda);
}

.nav-grupo { font-size: 11px; font-weight: 600; color: var(--rail-texto-3); text-transform: uppercase; letter-spacing: .08em; padding: 14px 10px 6px; }
.nav a {
  position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 10px; margin: 1px 0;
  border-radius: 9px; color: var(--rail-texto-2); font-weight: 500; font-size: 14px;
  transition: background .15s, color .15s;
}
.nav a:hover { background: var(--rail-hover); color: var(--rail-texto); text-decoration: none; }
.nav a.ativo { background: var(--rail-ativo); color: #fff; }
.nav a.ativo::before {
  content: ""; position: absolute; left: -14px; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--rail-acento), var(--acento-2));
}
.nav a.ativo .icone { color: var(--rail-acento); }
.nav a .contador { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--rail-texto-3); }
.nav a .em-breve { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--rail-texto-3); border: 1px solid var(--rail-borda); padding: 1px 6px; border-radius: 99px; }
.nav a.desativado { opacity: .48; cursor: default; }
.nav a.desativado:hover { background: none; color: var(--rail-texto-2); }
.nav a img { width: 18px; height: 18px; }

.lateral .rodape { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rail-borda); display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--acento-grad); color: #fff; font-weight: 650; font-size: 12.5px;
  box-shadow: 0 2px 10px -2px rgba(60, 80, 255, .55);
}
.rodape .quem { min-width: 0; line-height: 1.25; }
.rodape .quem b { display: block; font-size: 13px; color: var(--rail-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rodape .quem span { font-size: 11.5px; color: var(--rail-texto-3); }
.rodape .acoes { margin-left: auto; display: flex; gap: 2px; }
.lateral button.fantasma { --b-texto: var(--rail-texto-2); }
.lateral button.fantasma:hover { --b-fundo: rgba(255, 255, 255, .1); --b-texto: #fff; }

.conteudo { min-width: 0; view-transition-name: conteudo; }
.marca-mll { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.topo-movel { display: none; }
main { max-width: 1180px; margin: 0 auto; padding: 34px 40px 90px; animation: entrar .35s var(--ease) both; }
.bluevault-main {
  position: relative;
  isolation: isolate;
}
.bluevault-main::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -34px;
  right: -40px;
  width: min(48vw, 560px);
  height: 260px;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acento) 9%, transparent), transparent 72%);
}
:root[data-produto="bluevault"] .cabecalho {
  position: relative;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--borda);
}
:root[data-produto="bluevault"] .cabecalho::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 92px;
  height: 2px;
  border-radius: 99px;
  background: var(--acento-grad);
}
:root[data-produto="bluevault"] .cabecalho h1 {
  font-size: clamp(26px, 3vw, 36px);
  text-wrap: balance;
}
:root[data-produto="bluevault"] .caixa,
:root[data-produto="bluevault"] .metrica,
:root[data-produto="bluevault"] .tabela {
  box-shadow: 0 1px 1px rgba(11, 40, 48, .04), 0 10px 28px -18px rgba(11, 40, 48, .3);
}
:root[data-produto="bluevault"] .metrica {
  border-top: 2px solid var(--borda);
}
:root[data-produto="bluevault"] .metrica:hover {
  border-top-color: var(--acento);
}
:root[data-produto="bluevault"] .metrica.alerta,
:root[data-produto="bluevault"] .metrica.atencao {
  border-top-color: var(--cobre);
}
:root[data-produto="bluevault"] .metrica .n,
:root[data-produto="bluevault"] .data-bloco .mono,
:root[data-produto="bluevault"] .calendario .dia {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
:root[data-produto="bluevault"] .tabela {
  border-radius: 16px;
}
:root[data-produto="bluevault"] .tabela table {
  min-width: 720px;
}
:root[data-produto="bluevault"] .tabela tbody tr:hover {
  background: linear-gradient(90deg, var(--acento-suave), transparent 78%);
}
:root[data-produto="bluevault"] .tabela td:first-child,
:root[data-produto="bluevault"] .tabela th:first-child {
  padding-left: 20px;
}
:root[data-produto="bluevault"] .cal {
  border: 1px solid var(--borda);
  border-radius: 16px;
  background: var(--superficie);
  box-shadow: 0 1px 1px rgba(11, 40, 48, .04), 0 10px 28px -18px rgba(11, 40, 48, .3);
  overflow: hidden;
}
:root[data-produto="bluevault"] .cal-topo {
  padding: 16px 18px;
  background: linear-gradient(110deg, var(--acento-suave), transparent 68%), var(--superficie);
  border-bottom: 1px solid var(--borda);
}
:root[data-produto="bluevault"] .cal-grade {
  border: 0;
  border-radius: 0;
}
:root[data-produto="bluevault"] .cal-dia:hover {
  background: var(--acento-suave);
}
:root[data-produto="bluevault"] .cal-dia.hoje .cal-num > span {
  box-shadow: 0 0 0 3px var(--acento-borda);
  color: var(--acento-texto);
}
:root[data-produto="bluevault"] .agenda-lado .caixa {
  border-left: 3px solid var(--acento);
}
:root[data-produto="bluevault"] .agenda-lado .caixa.alerta {
  border-left-color: var(--cobre);
}
:root[data-produto="bluevault"] .barra-filtros {
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--superficie-2);
}
:root[data-produto="bluevault"] .grade-2 > .caixa {
  position: relative;
  overflow: hidden;
}
:root[data-produto="bluevault"] .grade-2 > .caixa::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--acento-grad);
}
:root[data-produto="bluevault"] .grade-2 > .caixa:nth-child(2)::before {
  background: linear-gradient(90deg, var(--cobre), #e4bb83);
}
.workspace { max-width: 1080px; margin: 0 auto; padding-top: 24px; }
.workspace-cabecalho { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 42px; }
.workspace-cabecalho h1 { font-size: clamp(30px, 4vw, 46px); margin: 8px 0 12px; }
.workspace-cabecalho p { font-size: 15px; max-width: 52ch; }
.eyebrow { color: var(--acento-texto); font-size: 11px; font-weight: 750; letter-spacing: .14em; }
.workspace-usuario { display: flex; align-items: center; gap: 9px; color: var(--texto-2); font-size: 13px; white-space: nowrap; }
.produtos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.produto-card { min-height: 300px; display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--borda); border-radius: 20px; background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-2); transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.produto-card:hover { transform: translateY(-4px); border-color: var(--acento-borda); box-shadow: var(--sombra-3); text-decoration: none; }
.produto-card.indisponivel { opacity: .43; filter: saturate(.35); cursor: not-allowed; box-shadow: var(--sombra-1); }
.produto-card-topo { display: flex; justify-content: space-between; align-items: center; min-height: 34px; }
.produto-card-topo img { width: 32px; height: 32px; object-fit: contain; }
.produto-cadeado { display: inline-flex; align-items: center; gap: 5px; color: var(--texto-3); font-size: 11px; font-weight: 650; }
.produto-nome { margin-top: 30px; font-family: var(--fonte-titulo); font-size: 30px; font-weight: 620; }
.produto-subtitulo { color: var(--acento-texto); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.produto-card p { color: var(--texto-2); line-height: 1.65; margin: 18px 0 20px; }
.produto-entrar { margin-top: auto; color: var(--texto); font-weight: 650; font-size: 13px; }
@media (max-width: 800px) { .produtos { grid-template-columns: 1fr; } .workspace-cabecalho { align-items: start; flex-direction: column; margin-bottom: 28px; } }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
::view-transition-old(conteudo) { animation: .14s ease-out both sumir; }
::view-transition-new(conteudo) { animation: .24s var(--ease) both aparecer; }
@keyframes sumir { to { opacity: 0; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } }

/* ---------- cabeçalho de página ---------- */
.cabecalho { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.cabecalho .titulos { flex: 1 1 380px; min-width: 0; }
.cabecalho .sobre { font-size: 12.5px; font-weight: 600; color: var(--acento-texto); letter-spacing: .02em; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.cabecalho p { color: var(--texto-2); margin: 8px 0 0; max-width: 72ch; }
.cabecalho .acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.migalha { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-3); margin-bottom: 14px; }
.migalha:hover { color: var(--texto); text-decoration: none; }

.secao { margin-top: 36px; }
.secao-topo { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.secao-topo .fraco { margin-left: auto; }
.secao-topo h2 small { font-weight: 500; color: var(--texto-3); margin-left: 6px; font-size: 13px; }

/* ---------- botões ---------- */
button, .botao {
  --b-fundo: var(--acento-grad); --b-texto: #fff; --b-borda: transparent; --b-brilho: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--b-borda);
  background: var(--b-fundo); color: var(--b-texto); font: 550 13.5px/1 var(--fonte);
  cursor: pointer; white-space: nowrap; text-decoration: none; letter-spacing: -.005em;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), inset 0 1px 0 rgba(255, 255, 255, .14),
              0 8px 20px -8px color-mix(in srgb, var(--acento) var(--b-brilho), transparent);
  transition: background .15s, border-color .15s, transform .08s, box-shadow .2s, opacity .15s;
}
button:hover, .botao:hover { --b-fundo: linear-gradient(135deg, var(--acento-forte), var(--acento-2)); --b-brilho: 45%; text-decoration: none; }
button:active, .botao:active { transform: translateY(1px); }
button.sec, .botao.sec { --b-fundo: var(--superficie); --b-texto: var(--texto); --b-borda: var(--borda-forte); box-shadow: var(--sombra-1); }
button.sec:hover, .botao.sec:hover { --b-fundo: var(--fundo-2); --b-brilho: 0; }
button.fantasma, .botao.fantasma { --b-fundo: transparent; --b-texto: var(--texto-2); box-shadow: none; }
button.fantasma:hover, .botao.fantasma:hover { --b-fundo: var(--fundo-2); --b-texto: var(--texto); --b-brilho: 0; }
button.perigo { --b-fundo: var(--vermelho); }
button.perigo:hover { --b-brilho: 0; }
button.verde, .botao.verde { --b-fundo: #1faa5b; }
button.verde:hover, .botao.verde:hover { --b-fundo: #17924d; --b-brilho: 0; }
button.pequeno, .botao.pequeno { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
button.icone-so, .botao.icone-so { width: 34px; padding: 0; }
button.pequeno.icone-so { width: 30px; }
button[disabled] { opacity: .6; cursor: progress; }
button.carregando { position: relative; color: transparent !important; }
button.carregando::after {
  content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--b-texto) transparent var(--b-texto) transparent;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
form.inline { display: inline; }

/* ---------- formulários ---------- */
label { display: block; font-size: 12.5px; font-weight: 550; color: var(--texto-2); margin: 14px 0 6px; }
input, select, textarea {
  font: inherit; font-size: 14px; color: var(--texto); height: 38px; padding: 0 12px; max-width: 100%;
  border: 1px solid var(--borda-forte); border-radius: 10px; background: var(--superficie);
  box-shadow: var(--sombra-1); transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; padding: 10px 12px; width: 100%; line-height: 1.55; resize: vertical; }
select { padding-right: 32px; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a92a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
input::placeholder, textarea::placeholder { color: var(--texto-3); }
input:hover, select:hover, textarea:hover { border-color: var(--texto-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); box-shadow: var(--anel); }
input[type="radio"], input[type="checkbox"] { height: auto; width: 16px; height: 16px; padding: 0; box-shadow: none; accent-color: var(--acento); vertical-align: -3px; margin: 0 8px 0 0; }
input[type="file"] { height: auto; padding: 18px; width: 100%; border-style: dashed; background: var(--superficie-2); cursor: pointer; color: var(--texto-2); font-size: 13px; }
input[type="file"]::file-selector-button { font: 550 13px var(--fonte); border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); padding: 7px 12px; border-radius: 8px; margin-right: 12px; cursor: pointer; }
.largo { width: 100%; }
.campo-icone { position: relative; display: flex; align-items: center; }
.campo-icone .icone { position: absolute; left: 12px; color: var(--texto-3); pointer-events: none; }
.campo-icone input { padding-left: 38px; width: 100%; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 18px; }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.linha-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.opcao { display: flex; align-items: center; gap: 4px; padding: 12px 14px; margin: 8px 0; border: 1px solid var(--borda); border-radius: 11px; color: var(--texto); font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color .15s, background .15s; }
.opcao:hover { border-color: var(--borda-forte); }
.opcao:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.opcao input[type="number"] { width: 90px; height: 32px; margin: 0 8px; }

/* ---------- superfícies ---------- */
.caixa { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px 22px; box-shadow: var(--sombra-1); }
.caixa + .caixa { margin-top: 14px; }
:where(.grade-2, .familia-grade, .metricas) > .caixa + .caixa { margin-top: 0; }
.caixa h2 { margin-bottom: 4px; }
.caixa-titulo { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.caixa-titulo .bolha { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento); }

/* avisos em linha */
.aviso-linha, .msg {
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: 12px; margin: 0 0 12px;
  border: 1px solid var(--acento-borda); background: var(--acento-suave); color: var(--texto); font-size: 13.5px;
}
.aviso-linha > .icone, .msg > .icone { margin-top: 1px; color: var(--acento); }
.aviso-linha.ambar, .caixa.aviso { border-color: var(--ambar-borda); background: var(--ambar-suave); }
.aviso-linha.ambar > .icone { color: var(--ambar); }
.aviso-linha.vermelho, .msg.erro { border-color: var(--vermelho-borda); background: var(--vermelho-suave); }
.aviso-linha.vermelho > .icone, .msg.erro > .icone { color: var(--vermelho); }
.aviso-linha.verde, .msg.ok { border-color: var(--verde-borda); background: var(--verde-suave); }
.aviso-linha.verde > .icone, .msg.ok > .icone { color: var(--verde); }
.aviso-linha ul { margin: 6px 0 0; }

/* ---------- métricas ---------- */
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.metrica {
  position: relative; display: block; overflow: hidden; padding: 18px 18px 16px; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.metrica:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--borda-forte); text-decoration: none; }
.metrica .topo { display: flex; align-items: center; justify-content: space-between; color: var(--texto-2); font-size: 13px; font-weight: 500; }
.metrica .topo .bolha { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--fundo-2); color: var(--texto-2); }
.metrica .n { font-family: var(--fonte); font-size: 34px; font-weight: 680; letter-spacing: -.03em; line-height: 1; margin: 16px 0 6px; font-variant-numeric: tabular-nums; }
.metrica .l { color: var(--texto-3); font-size: 12.5px; }
.metrica.alerta { border-color: var(--vermelho-borda); }
.metrica.alerta .bolha { background: var(--vermelho-suave); color: var(--vermelho); }
.metrica.alerta::after { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--vermelho), transparent); }
.metrica.atencao .bolha { background: var(--ambar-suave); color: var(--ambar); }
.metrica.atencao::after { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--ambar), transparent); }

/* status da rotina */
.status { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.status .pilula { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 99px; border: 1px solid var(--borda); background: var(--superficie); font-size: 12.5px; color: var(--texto-2); box-shadow: var(--sombra-1); }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); flex: none; }
.ponto.ok { background: var(--verde); box-shadow: 0 0 0 3px var(--verde-suave); }
.ponto.pend { background: var(--vermelho); box-shadow: 0 0 0 3px var(--vermelho-suave); animation: pulsar 2s infinite; }
.ponto.aviso { background: var(--ambar); box-shadow: 0 0 0 3px var(--ambar-suave); }
@keyframes pulsar { 50% { box-shadow: 0 0 0 6px transparent; } }

/* ---------- tabelas ---------- */
.tabela { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-1); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
th, td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borda); }
th { position: sticky; top: 0; z-index: 1; background: var(--superficie-2); color: var(--texto-3); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; padding-top: 10px; padding-bottom: 10px; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--superficie-2); }
tbody tr:last-child td { border-bottom: 0; }
td.acoes { text-align: right; white-space: nowrap; }
td.acoes > * + * { margin-left: 6px; }
td .suave, td .fraco { margin-top: 2px; }
tr.clicavel { cursor: pointer; }
th.ordenavel { cursor: pointer; user-select: none; }
th.ordenavel:hover { color: var(--texto-2); }
th.ordenavel:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
th.ordenavel::after { content: ""; display: inline-block; width: 10px; margin-left: 4px; opacity: .35; }
th.ordenavel.asc::after { content: "▲"; opacity: 1; }
th.ordenavel.desc::after { content: "▼"; opacity: 1; }
.titulo-celula { font-weight: 560; color: var(--texto); }
a.titulo-celula:hover { color: var(--acento-texto); }

/* ---------- selos ---------- */
.selo {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; letter-spacing: .005em;
  background: var(--fundo-2); color: var(--texto-2); border: 1px solid transparent;
}
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.selo.sem-ponto::before { display: none; }
.selo.ok { background: var(--verde-suave); color: var(--verde); }
.selo.pend { background: var(--vermelho-suave); color: var(--vermelho); }
.selo.info { background: var(--acento-suave); color: var(--acento-texto); }
.selo.aviso { background: var(--ambar-suave); color: var(--ambar); }
.selo.violeta { background: var(--violeta-suave); color: var(--violeta); }
a.selo:hover { text-decoration: none; filter: brightness(.97); }

/* ---------- prazo ---------- */
.data-bloco { display: flex; align-items: center; gap: 12px; }
.calendario {
  width: 46px; flex: none; text-align: center; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--borda); background: var(--superficie); box-shadow: var(--sombra-1);
}
.calendario .mes { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 0; background: var(--fundo-2); color: var(--texto-2); }
.calendario .dia { font-family: var(--fonte); font-size: 18px; font-weight: 700; line-height: 1; padding: 5px 0 6px; font-variant-numeric: tabular-nums; }
.calendario.urgente { border-color: var(--vermelho-borda); }
.calendario.urgente .mes { background: var(--vermelho); color: #fff; }
.calendario.proximo .mes { background: var(--ambar); color: #fff; }
.contagem { font-size: 12px; font-weight: 600; color: var(--texto-2); white-space: nowrap; }
.contagem.urgente { color: var(--vermelho); }
.contagem.proximo { color: var(--ambar); }

details > summary { cursor: pointer; list-style: none; color: var(--texto-3); font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; user-select: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: 4px; }
details[open] > summary::before { transform: rotate(45deg); }
details > summary:hover { color: var(--texto); }
details .memoria { margin: 8px 0 0; padding: 10px 12px 10px 28px; border-radius: 10px; background: var(--fundo-2); color: var(--texto-2); font-size: 12.5px; }

/* menu suspenso (sem JS) */
.menu { position: relative; display: inline-block; }
.menu > summary { margin: 0; color: inherit; }
.menu > summary::before { display: none; }
.menu-painel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 230px; padding: 12px;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; box-shadow: var(--sombra-3);
  text-align: left; animation: entrar .18s var(--ease);
}
.menu-painel label:first-child { margin-top: 0; }
.menu-painel select { width: 100%; margin-bottom: 10px; }

/* ---------- estado vazio ---------- */
.vazio { display: grid; place-items: center; text-align: center; padding: 48px 20px; border: 1px dashed var(--borda-forte); border-radius: var(--raio); color: var(--texto-2); background: var(--superficie-2); }
.vazio .bolha { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 12px; background: var(--superficie); color: var(--texto-3); border: 1px solid var(--borda); box-shadow: var(--sombra-1); }
.vazio b { color: var(--texto); display: block; margin-bottom: 2px; }
.vazio p { margin: 0; font-size: 13px; max-width: 46ch; }

/* ---------- lista de propriedades ---------- */
.propriedades { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 24px; }
.propriedades dt { font-size: 12px; color: var(--texto-3); font-weight: 550; margin-bottom: 4px; }
.propriedades dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* ---------- linha do tempo ---------- */
.tempo { position: relative; margin: 0; padding: 0; list-style: none; }
.tempo li { position: relative; padding: 0 0 22px 28px; }
.tempo li::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: -2px; width: 1.5px; background: var(--borda); }
.tempo li:last-child::before { display: none; }
.tempo .marco { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--borda-forte); background: var(--superficie); }
.tempo .marco.pend { border-color: var(--vermelho); box-shadow: 0 0 0 3px var(--vermelho-suave); }
.tempo .marco.ok { border-color: var(--verde); }
.tempo .marco.info { border-color: var(--acento); }

/* ---------- checklist ---------- */
.checklist form { margin: 0; }
.checklist button.item {
  --b-fundo: transparent; --b-texto: var(--texto); display: flex; justify-content: flex-start; gap: 12px; width: 100%;
  height: auto; padding: 10px 10px; border-radius: 10px; box-shadow: none; font-weight: 500; white-space: normal; text-align: left; line-height: 1.4;
}
.checklist button.item:hover { --b-fundo: var(--fundo-2); }
.checklist .caixinha { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--borda-forte); display: grid; place-items: center; flex: none; color: #fff; transition: all .15s; }
.checklist .feito .caixinha { background: var(--verde); border-color: var(--verde); }
.checklist .feito span.texto { color: var(--texto-3); text-decoration: line-through; text-decoration-color: var(--borda-forte); }
.progresso { height: 6px; border-radius: 99px; background: var(--fundo-2); overflow: hidden; margin: 10px 0 14px; }
.progresso i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--acento), #7aa0ff); transition: width .4s var(--ease); }
.progresso.completo i { background: var(--verde); }

/* ---------- texto de relatório / rascunho ---------- */
pre {
  margin: 0; padding: 18px 20px; border-radius: var(--raio); overflow-x: auto; white-space: pre-wrap;
  background: #0b0f19; color: #d7deee; border: 1px solid #1c2233; font: 12.5px/1.65 var(--mono);
}
.bolha-whats { background: #e7fbe9; border: 1px solid #bfe9c6; border-radius: 16px 16px 4px 16px; padding: 14px 16px; white-space: pre-wrap; color: #0b2e13; font-size: 13.5px; max-width: 520px; box-shadow: var(--sombra-1); }
:root[data-tema="escuro"] .bolha-whats { background: #0f2e1d; border-color: #1c4a30; color: #d5f5df; }

/* ---------- toasts ---------- */
.toasts { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 44px)); }
.toast {
  display: flex; gap: 11px; align-items: flex-start; padding: 13px 14px 13px 16px; border-radius: 13px;
  background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra-3); font-size: 13.5px;
  animation: toast-entra .38s var(--ease) both;
}
.toast .icone { margin-top: 1px; }
.toast.ok .icone { color: var(--verde); }
.toast.erro { border-color: var(--vermelho-borda); }
.toast.erro .icone { color: var(--vermelho); }
.toast button { margin-left: auto; margin-top: -4px; margin-right: -6px; }
.toast.saindo { animation: toast-sai .25s ease-in both; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes toast-sai { to { opacity: 0; transform: translateX(16px); } }

/* ---------- paleta de comandos ---------- */
.paleta-fundo { position: fixed; inset: 0; z-index: 80; background: rgba(8, 12, 22, .42); backdrop-filter: blur(6px); display: grid; justify-items: center; align-items: start; padding-top: 12vh; animation: aparecer .15s ease-out; }
.paleta { width: min(600px, calc(100vw - 32px)); background: var(--superficie); border: 1px solid var(--borda); border-radius: 18px; box-shadow: var(--sombra-3); overflow: hidden; animation: toast-entra .22s var(--ease); }
.paleta .campo { display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--borda); }
.paleta .campo .icone { color: var(--texto-3); }
.paleta input { flex: 1; border: 0; box-shadow: none !important; height: 58px; padding: 0; font-size: 16px; background: transparent; }
.paleta ul { list-style: none; margin: 0; padding: 8px; max-height: 360px; overflow-y: auto; }
.paleta li a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--texto); font-size: 14px; }
.paleta li a .icone { color: var(--texto-3); }
.paleta li a small { margin-left: auto; color: var(--texto-3); font-size: 12px; }
.paleta li a.sel, .paleta li a:hover { background: var(--acento-suave); text-decoration: none; }
.paleta li a.sel .icone { color: var(--acento); }
.paleta .rodape-paleta { display: flex; gap: 14px; padding: 10px 18px; border-top: 1px solid var(--borda); color: var(--texto-3); font-size: 12px; background: var(--superficie-2); }

/* ---------- tela de login ---------- */
.entrada { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.entrada .vitrine {
  position: relative; overflow: hidden; color: #fff; padding: 48px 56px; display: flex; flex-direction: column;
  background-color: var(--rail-1);
  background-image: radial-gradient(1200px 600px, #2b46e6 0%, transparent 55%),
                     radial-gradient(900px 500px, #7c5cff 0%, transparent 50%);
  background-repeat: no-repeat;
  background-position: 10% -10%, 110% 110%;
  background-size: 130% 130%, 130% 130%;
  animation: vitrine-luzes 26s ease-in-out infinite alternate;
}
@keyframes vitrine-luzes {
  0%   { background-position: 4% -14%,  114% 118%; }
  50%  { background-position: 22% 4%,   96%  96%; }
  100% { background-position: 10% -6%,  108% 104%; }
}
.vitrine::before { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%); }
.vitrine > * { position: relative; }
.vitrine .logo { display: flex; align-items: center; gap: 12px; }
.vitrine .logo img { width: 40px; height: 40px; }
.vitrine .logo .palavra { font-size: 20px; }
.vitrine .chamada { margin-top: auto; max-width: 480px; }
.vitrine h1 { font-size: 40px; font-weight: 640; letter-spacing: -.035em; line-height: 1.08; }
.vitrine h1 em { font-style: normal; background: linear-gradient(90deg, #9fb8ff, #d4c4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vitrine .chamada p { color: rgba(255,255,255,.66); font-size: 15px; margin-top: 14px; }
.vitrine .familia { display: flex; gap: 10px; margin-top: 34px; flex-wrap: wrap; }
.vitrine .familia span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 7px; border-radius: 99px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); font-size: 12.5px; color: rgba(255,255,255,.82); backdrop-filter: blur(8px); }
.vitrine .familia img { width: 20px; height: 20px; }
.vitrine .rodape-vitrine { margin-top: 44px; font-size: 12px; color: rgba(255,255,255,.4); }
.cofre-anim { position: absolute; right: -120px; top: 50%; width: 520px; height: 520px; transform: translateY(-58%); opacity: .5; pointer-events: none; }
.cofre-anim circle { fill: none; stroke: rgba(255,255,255,.14); }
.cofre-anim .gira { transform-origin: 260px 260px; animation: girar 60s linear infinite; }
.cofre-anim .gira-2 { transform-origin: 260px 260px; animation: girar 90s linear infinite reverse; }
.entrada .formulario { display: grid; place-items: center; padding: 40px 24px; background: var(--fundo); }
.entrada .formulario .cartao { width: 100%; max-width: 380px; }
.entrada .formulario h2 { font-size: 26px; font-weight: 650; letter-spacing: -.03em; }
.entrada .formulario .suave { margin: 6px 0 22px; }
.entrada .formulario button { width: 100%; height: 42px; margin-top: 22px; font-size: 14.5px; }
.entrada .formulario input { width: 100%; height: 42px; }
.entrada .seguranca { display: flex; gap: 8px; align-items: center; margin-top: 26px; color: var(--texto-3); font-size: 12.5px; }

/* ---------- página da marca ---------- */
.marca-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 72px 48px; color: var(--texto); text-align: center;
  background: var(--superficie); border: 1px solid var(--borda); }
.marca-hero img { width: 96px; height: 96px; }
.marca-hero .palavra { font-size: 44px; margin-top: 22px; }
.construcao { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.construcao figure { margin: 0; padding: 22px; border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie); text-align: center; }
.construcao svg { width: 96px; height: 96px; }
.construcao figcaption { margin-top: 10px; font-size: 12.5px; color: var(--texto-2); }
.marca-hero p { color: rgba(255,255,255,.62); margin: 10px auto 0; max-width: 520px; }
.familia-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.familia-grade .caixa { text-align: center; padding: 30px 20px; }
.familia-grade img { width: 64px; height: 64px; }
.familia-grade .palavra { margin: 14px 0 6px; font-size: 22px; }
.amostras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.amostra { border-radius: 14px; overflow: hidden; border: 1px solid var(--borda); background: var(--superficie); }
.amostra i { display: block; height: 78px; }
.amostra div { padding: 10px 12px; font-size: 12.5px; }
.amostra code { font-family: var(--mono); color: var(--texto-3); font-size: 11.5px; }
.fundos-marca { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.fundos-marca div { height: 130px; border-radius: 14px; display: grid; place-items: center; border: 1px solid var(--borda); }
.fundos-marca img { width: 52px; height: 52px; }

/* ---------- controle segmentado ---------- */
.segmentado { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--fundo-2); border: 1px solid var(--borda); }
.segmentado a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 9px; color: var(--texto-2); font-weight: 550; font-size: 13px; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.segmentado a:hover { color: var(--texto); text-decoration: none; }
.segmentado a.ativo { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-2); }
.segmentado a small { font-size: 11px; color: var(--texto-3); font-weight: 500; }
.segmentado.pequeno a { padding: 5px 11px; font-size: 12.5px; }
.barra-filtros { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.busca-codigos { margin-left: auto; min-width: 260px; }

/* ---------- faixa de resumo ---------- */
.faixa-resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 22px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-1); overflow: hidden; }
.faixa-resumo > div { padding: 14px 18px; display: flex; align-items: baseline; gap: 8px; border-right: 1px solid var(--borda); }
.faixa-resumo > div:last-child { border-right: 0; }
.faixa-resumo b { font-size: 24px; font-weight: 680; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.faixa-resumo span { color: var(--texto-3); font-size: 12.5px; }
.faixa-resumo .alerta b { color: var(--vermelho); }
.faixa-resumo .atencao b { color: var(--ambar); }

/* ---------- calendário visual ---------- */
.agenda-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.cal { background: var(--superficie); border: 1px solid var(--borda); border-radius: 18px; box-shadow: var(--sombra-2); overflow: hidden; }
.cal-topo { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; }
.cal-topo h2 { font-size: 24px; font-weight: 560; }
.cal-topo h2 span { color: var(--texto-3); font-weight: 400; }
.cal-topo .acoes { display: flex; gap: 6px; }
.cal-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--borda); }
.cal-semana { padding: 9px 10px; font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); background: var(--superficie-2); border-bottom: 1px solid var(--borda); }
.cal-dia { min-height: 112px; padding: 8px 8px 10px; border-right: 1px solid var(--borda); border-bottom: 1px solid var(--borda); display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: background .15s; }
.cal-dia:nth-child(7n) { border-right: 0; }
.cal-dia:hover { background: var(--superficie-2); }
.cal-dia.fds { background: color-mix(in srgb, var(--fundo-2) 45%, transparent); }
.cal-dia.fora { opacity: .42; }
.cal-dia.feriado { background: var(--ambar-suave); }
.cal-num { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 13px; font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.cal-num span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.cal-num em { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ambar); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-dia.hoje .cal-num span { background: var(--acento); color: #fff; box-shadow: 0 4px 12px -4px var(--acento); }
.cal-chip { --c: var(--acento); display: flex; align-items: center; gap: 6px; padding: 3px 7px; border-radius: 7px; font-size: 11.5px; font-weight: 550; color: var(--texto); background: color-mix(in srgb, var(--c) 11%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex: none; }
.cal-chip:hover { text-decoration: none; filter: brightness(.97); }
.cal-chip.vencido { --c: var(--vermelho); }
.cal-chip.urgente { --c: var(--vermelho); }
.cal-chip.proximo { --c: var(--ambar); }
.cal-chip.ok { --c: var(--verde); }
.cal-chip.proposta { border-style: dashed; }
.cal-mais { font-size: 11px; font-weight: 600; color: var(--texto-3); padding-left: 4px; }
.cal-legenda { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 20px; font-size: 12px; color: var(--texto-3); border-top: 1px solid var(--borda); background: var(--superficie-2); }
.cal-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.ponto-leg { width: 9px; height: 9px; border-radius: 3px; background: var(--verde); }
.ponto-leg.vencido, .ponto-leg.urgente { background: var(--vermelho); }
.ponto-leg.proximo { background: var(--ambar); }
.ponto-leg.tracejado { background: transparent; border: 1.5px dashed var(--texto-3); }
.agenda-lado { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 20px; }
.lado-bloco { padding: 16px; }
.lado-bloco h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; }
.lado-bloco.alerta { border-color: var(--vermelho-borda); }
.lado-bloco.alerta h3 { color: var(--vermelho); }
.lado-item { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0 -8px; border-radius: 10px; color: var(--texto); }
.lado-item:hover { background: var(--fundo-2); text-decoration: none; }
.lado-texto { min-width: 0; flex: 1; line-height: 1.3; }
.lado-texto b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lado-texto span { font-size: 12px; color: var(--texto-3); }
.calendario.mini { width: 38px; }
.calendario.mini .dia { font-size: 15px; padding: 3px 0 4px; }
.prioridade { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; font-weight: 650; background: var(--fundo-2); color: var(--texto-2); }
.prioridade.p4 { background: var(--vermelho); color: #fff; }
.prioridade.p3 { background: var(--vermelho-suave); color: var(--vermelho); }
.prioridade.p1 { color: var(--texto-3); }
.contagem.vencido { color: var(--vermelho); }

/* ---------- etapas e formulários grandes ---------- */
.etapas { display: flex; gap: 8px; list-style: none; padding: 0; margin: -8px 0 24px; flex-wrap: wrap; }
.etapas li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 99px; font-size: 13px; font-weight: 550; color: var(--texto-3); background: var(--fundo-2); }
.etapas li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: var(--superficie); border: 1px solid var(--borda); }
.etapas li.atual { color: var(--texto); background: var(--acento-suave); }
.etapas li.atual span { background: var(--acento); color: #fff; border-color: var(--acento); }
.etapas li.feito span { background: var(--verde); color: #fff; border-color: var(--verde); }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.formulario-grande { padding: 26px 28px; }
.formulario-grande label:first-child { margin-top: 0; }
.formulario-grande textarea { font-size: 15px; }
.como-funciona h3, .duas-colunas aside h3 { font-size: 16px; margin-bottom: 10px; }
.passos { list-style: none; padding: 0; margin: 0; counter-reset: passo; }
.passos li { position: relative; padding: 0 0 14px 34px; color: var(--texto-2); font-size: 13.5px; counter-increment: passo; }
.passos li::before { content: counter(passo); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: var(--acento-suave); color: var(--acento-texto); }
.historico a { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px; margin: 0 -10px; border-radius: 10px; color: var(--texto); }
.historico a:hover { background: var(--fundo-2); text-decoration: none; }
.historico a span:first-child { font-weight: 600; font-size: 13.5px; }
.historico small { grid-column: 1; color: var(--texto-3); font-size: 12px; }
.historico .riscos { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 4px; align-items: center; }
.risco-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--texto-3); }
.risco-ponto.baixo { background: var(--verde); }
.risco-ponto.medio { background: var(--ambar); }
.risco-ponto.alto { background: var(--vermelho); }

/* ---------- viabilidade ---------- */
.nomes-pesquisa { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.nome-chip { padding: 8px 16px; border-radius: 99px; background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra-1); font-family: var(--fonte-titulo); font-size: 17px; font-weight: 560; }
.grade-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.classe-card { position: relative; display: flex; gap: 14px; margin: 0; padding: 16px 16px 14px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); box-shadow: var(--sombra-1); cursor: pointer; color: var(--texto); font-weight: 400; font-size: 13.5px; transition: border-color .15s, box-shadow .15s, background .15s; }
.classe-card:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-2); }
.classe-card:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.classe-card input { position: absolute; top: 14px; right: 12px; }
.classe-num { font-family: var(--fonte-titulo); font-size: 34px; font-weight: 600; line-height: 1; color: var(--acento-texto); min-width: 44px; }
.classe-corpo { min-width: 0; padding-right: 20px; }
.classe-corpo b { display: block; font-weight: 600; line-height: 1.35; }
.classe-corpo .palavras { display: flex; gap: 5px; flex-wrap: wrap; margin: 8px 0 6px; }
.classe-corpo .palavras span { font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: 99px; background: var(--superficie); border: 1px solid var(--acento-borda); color: var(--acento-texto); }
.classe-corpo ul { margin: 4px 0 0; padding-left: 16px; color: var(--texto-2); font-size: 12.5px; }
.lista-classes { columns: 2; font-size: 12.5px; color: var(--texto-2); padding-left: 0; list-style: none; margin-top: 8px; }
.lista-classes li { break-inside: avoid; padding: 2px 0; }
.recomendado { display: flex; align-items: center; gap: 14px; padding: 16px 20px; margin-bottom: 16px; border-radius: var(--raio); background: linear-gradient(135deg, var(--verde-suave), transparent); border: 1px solid var(--verde-borda); }
.recomendado > .icone { color: var(--verde); width: 26px; height: 26px; }
.recomendado small { display: block; color: var(--texto-3); font-size: 12px; }
.recomendado b { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600; }
.resultados-nomes { display: grid; gap: 16px; margin-bottom: 16px; }
.resultado-nome header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.resultado-nome h2 { font-size: 24px; font-weight: 580; }
.resultado-nome h3 { font-size: 14px; margin: 20px 0 8px; }
.resultado-nome .leitura { margin: 10px 0 16px; color: var(--texto-2); font-size: 14.5px; max-width: 80ch; }
.risco-selo { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 99px; font-size: 13px; font-weight: 650; }
.risco-selo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.risco-selo.baixo { background: var(--verde-suave); color: var(--verde); }
.risco-selo.medio { background: var(--ambar-suave); color: var(--ambar); }
.risco-selo.alto { background: var(--vermelho-suave); color: var(--vermelho); }
.risco-selo.indeterminado { background: var(--fundo-2); color: var(--texto-2); }
.numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; }
.numeros > div { padding: 12px 16px; border-right: 1px solid var(--borda); }
.numeros > div:last-child { border-right: 0; }
.numeros b { display: block; font-size: 22px; font-weight: 680; letter-spacing: -.03em; }
.numeros span { font-size: 12px; color: var(--texto-3); }
.descritivas { font-size: 13.5px; color: var(--texto-2); }
.texto-oficial { white-space: pre-wrap; max-height: 320px; overflow: auto; }
.caixa.oficial { border-color: var(--acento-borda); }

/* ==========================================================================
   Arcadia · telas de marketing
   Sem biblioteca de gráfico e sem CDN: a nuvem é tamanho de fonte num
   container que quebra linha (o tamanho vem calculado do servidor) e o mapa
   é barra por estado. Nada aqui busca script nem fonte na internet.
   O que muda de tom em relação ao resto do app é deliberado: Arcadia é o
   produto que a pessoa mostra pro cliente, então tem respiro maior, um
   cabeçalho com peso editorial e cor usada como codificação de dado
   (momentum, intensidade), nunca como enfeite.
   ========================================================================== */

/* cabeçalho editorial de página -------------------------------------------- */
.arc-topo {
  position: relative; overflow: hidden; margin: 0 0 26px; padding: 30px 32px 26px;
  border: 1px solid var(--borda); border-radius: 22px; box-shadow: var(--sombra-1);
  background:
    radial-gradient(720px 300px at 4% -60%, color-mix(in srgb, var(--acento) 13%, transparent), transparent 72%),
    var(--superficie);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 32px; align-items: end;
}
.arc-topo::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, var(--acento), var(--acento-2), transparent 68%);
}
.arc-topo h1 {
  font-size: clamp(28px, 3.4vw, 40px); font-variation-settings: "SOFT" 20, "opsz" 40;
  margin: 12px 0 0; text-wrap: balance;
}
.arc-topo h1 .conta {
  font-family: var(--fonte); font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  color: var(--texto-3); font-variant-numeric: tabular-nums; margin-left: 10px; vertical-align: 5px;
}
.arc-nota { margin: 12px 0 0; max-width: 74ch; color: var(--texto-2); font-size: 14.5px; line-height: 1.6; }
.arc-nota b { color: var(--texto); font-weight: 620; }

/* linha de contexto: produto · seção · organização dona do dado */
.arc-trilha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.arc-trilha .marca {
  display: inline-flex; align-items: center; gap: 6px; color: var(--acento-texto);
  font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase;
}
.arc-trilha .secao-nome { color: var(--texto-3); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.arc-org {
  display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 11px 0 9px;
  border-radius: 99px; border: 1px solid var(--acento-borda); background: var(--acento-suave);
  color: var(--acento-texto); font-size: 11.5px; font-weight: 650; letter-spacing: -.005em;
}
.arc-org::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.arc-acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.arc-acoes .segmentado { max-width: 100%; overflow-x: auto; }

/* barra de controles (janela, status) -------------------------------------- */
.arc-controles {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 20px;
}
.arc-controles .rotulo {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3);
}
.arc-controles .direita { margin-left: auto; }

/* nuvem de palavras --------------------------------------------------------- */
.nuvem-palco {
  position: relative; overflow: hidden; padding: 44px 34px 26px;
  border: 1px solid var(--borda); border-radius: 22px; box-shadow: var(--sombra-2);
  background:
    radial-gradient(620px 300px at 50% -30%, color-mix(in srgb, var(--acento) 11%, transparent), transparent 70%),
    var(--superficie);
}
.nuvem {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px 26px;
  margin: 0 auto; max-width: 860px;
}
.nuvem span {
  color: var(--texto-2); font-weight: 620; letter-spacing: -.02em; line-height: 1.2; cursor: default;
  transition: color .18s var(--ease), transform .18s var(--ease);
}
.nuvem span:hover { color: var(--acento); transform: translateY(-2px); }
.nuvem span.sobe { color: var(--acento-texto); }
.nuvem span.desce { color: var(--texto-3); }
.nuvem-legenda {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--borda);
  font-size: 12px; color: var(--texto-3);
}
.nuvem-legenda span { display: inline-flex; align-items: center; gap: 7px; }
.nuvem-legenda i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.nuvem-legenda .sobe { color: var(--acento-texto); }
.nuvem-legenda .estavel { color: var(--texto-2); }

/* mapa por UF --------------------------------------------------------------- */
.mapa-uf {
  display: grid; gap: 1px; padding: 10px; border: 1px solid var(--borda);
  border-radius: 18px; background: var(--superficie); box-shadow: var(--sombra-1);
}
.mapa-uf .linha {
  display: grid; grid-template-columns: 22px minmax(0, 190px) 1fr 62px; align-items: center;
  gap: 16px; padding: 7px 12px; border-radius: 11px; transition: background .14s;
}
.mapa-uf .linha:hover { background: var(--superficie-2); }
.mapa-uf .pos { font-size: 11px; font-weight: 700; color: var(--texto-3); text-align: right; font-variant-numeric: tabular-nums; }
.mapa-uf .uf { font-size: 13.5px; color: var(--texto-3); min-width: 0; }
.mapa-uf .uf b { color: var(--texto); font-weight: 600; }
.mapa-uf .trilho { height: 10px; border-radius: 99px; background: var(--fundo-2); overflow: hidden; }
.mapa-uf .trilho i {
  display: block; height: 100%; width: var(--p, 0%); border-radius: 99px; background: var(--acento-grad);
  transform-origin: left center; animation: barra-cresce .55s var(--ease) both;
}
@keyframes barra-cresce { from { transform: scaleX(0); } }
.mapa-uf .n { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; color: var(--texto-2); }
.mapa-uf .linha.lider .uf b { color: var(--acento-texto); }
.mapa-uf .linha.lider .n { color: var(--texto); }
.mapa-uf .linha.lider .trilho i { box-shadow: 0 2px 12px -3px var(--acento); }

/* destaque de número — o KPI que a tela existe para responder --------------- */
.arc-destaque {
  position: relative; overflow: hidden; display: grid; gap: 4px; padding: 26px 28px;
  border: 1px solid var(--acento-borda); border-radius: 18px; margin: 0 0 14px;
  background: linear-gradient(135deg, var(--acento-suave), transparent 70%), var(--superficie);
}
.arc-destaque .rotulo { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acento-texto); }
.arc-destaque .valor {
  font-family: var(--fonte); font-size: clamp(34px, 5vw, 48px); font-weight: 680; letter-spacing: -.035em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.arc-destaque .l { color: var(--texto-2); font-size: 13px; max-width: 62ch; }
.arc-destaque.indefinido { border-color: var(--ambar-borda); background: linear-gradient(135deg, var(--ambar-suave), transparent 70%), var(--superficie); }
.arc-destaque.indefinido .rotulo { color: var(--ambar); }

/* Os números do Arcadia são em reais e por isso mais largos que os de
   contagem do resto do app: 30px cabe "R$ 1.863,00" numa linha só. */
:root[data-produto="arcadia"] .metrica .n { font-size: 30px; }

/* formulários de lançamento (direitos, resultados) -------------------------- */
.arc-form { display: grid; gap: 14px; padding: 22px 24px; }
.arc-form .campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 0 16px; }
.arc-form label { margin: 0 0 12px; }
.arc-form label.assinatura { display: flex; align-items: center; gap: 0; margin: 0; font-size: 13px; color: var(--texto); }
.arc-form input, .arc-form select { width: 100%; }
.arc-form .rodape-form {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--borda);
}
.arc-form .rodape-form .fraco { max-width: 58ch; margin: 0; }

/* conteúdo redigido da pauta ------------------------------------------------ */
.arc-texto {
  padding: 16px 18px; border-radius: 12px; background: var(--fundo-2); color: var(--texto-2);
  font-size: 13.5px; line-height: 1.65; white-space: pre-wrap;
}
.arc-texto + .arc-texto { margin-top: 12px; }
.arc-texto .etiqueta {
  display: block; margin-bottom: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-3);
}

/* noticiário do radar ------------------------------------------------------- */
.radar-feed { display: grid; gap: 10px; }
.radar-feed article {
  display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--borda);
  border-radius: 14px; background: var(--superficie); box-shadow: var(--sombra-1);
}
.radar-feed article:hover { border-color: var(--borda-forte); }
/* A borda lateral marca a notícia que cita um termo monitorado. É só
   destaque: a notícia que não casou continua na lista, porque esconder
   o que o casamento por substring não pegou seria confundir "não
   mencionou o termo" com "não interessa". */
.radar-feed article.casou { border-left: 3px solid var(--acento); }
.radar-feed .meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.radar-feed article > a {
  color: var(--texto); font-weight: 600; font-size: 14.5px; line-height: 1.45;
}
.radar-feed .chamada { margin: 0; color: var(--texto-2); font-size: 13px; line-height: 1.6; }
.radar-feed .casamento {
  display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--acento-texto);
}
.radar-feed.largo article { padding: 16px 18px; }

@media (max-width: 760px) {
  .arc-topo { grid-template-columns: 1fr; padding: 22px 20px; border-radius: 18px; }
  .arc-acoes { align-items: stretch; }
  .nuvem-palco { padding: 28px 18px 20px; }
  /* O tamanho de cada termo vem em px do servidor (é o dado). Em tela
     estreita não dá para recalcular sem mentir sobre a proporção, então a
     nuvem inteira encolhe junto — a razão entre os termos fica intacta. */
  .nuvem { zoom: .74; gap: 6px 16px; }
  .mapa-uf .linha { grid-template-columns: 18px minmax(0, 104px) 1fr 48px; gap: 10px; padding: 7px 6px; }
}

/* ---------- responsivo ---------- */
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; z-index: 70; left: 0; top: 0; width: 280px; transform: translateX(-100%); transition: transform .28s var(--ease); box-shadow: var(--sombra-3); background: var(--superficie); }
  .app.menu-aberto .lateral { transform: none; }
  .app.menu-aberto::after { content: ""; position: fixed; inset: 0; z-index: 65; background: rgba(8, 12, 22, .4); }
  .topo-movel {
    display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30; padding: 10px 16px;
    background: linear-gradient(120deg, var(--rail-1), var(--rail-2)); color: var(--rail-texto);
    border-bottom: 1px solid var(--rail-borda);
  }
  .topo-movel img { width: 28px; height: 28px; }
  .topo-movel .palavra { color: var(--rail-texto); font-size: 16px; }
  .topo-movel button.fantasma { --b-texto: var(--rail-texto-2); }
  .topo-movel button.fantasma:hover { --b-fundo: rgba(255, 255, 255, .1); --b-texto: #fff; }
  main { padding: 22px 16px 80px; }
  .metricas { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metrica { padding: 14px; }
  .metrica .n { font-size: 28px; margin: 10px 0 4px; }
  h1 { font-size: 22px; }
  .entrada { grid-template-columns: 1fr; }
  .entrada .vitrine { padding: 30px 26px; min-height: 280px; }
  .vitrine h1 { font-size: 28px; }
  .cofre-anim { display: none; }
  .arc-topo h1 { font-size: clamp(24px, 6vw, 32px); }
}

@media (max-width: 640px) {
  :root[data-produto="bluevault"] .bluevault-main::before { display: none; }
  :root[data-produto="bluevault"] .cabecalho { padding-bottom: 16px; margin-bottom: 20px; }
  :root[data-produto="bluevault"] .cabecalho .acoes,
  :root[data-produto="bluevault"] .cabecalho .acoes > *,
  :root[data-produto="bluevault"] .segmentado { width: 100%; }
  :root[data-produto="bluevault"] .cabecalho .acoes > .botao { flex: 1; }
  :root[data-produto="bluevault"] .segmentado a { flex: 1; justify-content: center; }
  :root[data-produto="bluevault"] .faixa-resumo { grid-template-columns: 1fr 1fr; }
  :root[data-produto="bluevault"] .faixa-resumo > div { padding: 11px 12px; }
  :root[data-produto="bluevault"] .agenda-layout { grid-template-columns: 1fr; }
  :root[data-produto="bluevault"] .agenda-lado { position: static; }
  :root[data-produto="bluevault"] .cal-dia { min-height: 88px; padding: 6px 4px; }
  :root[data-produto="bluevault"] .cal-chip { font-size: 10px; padding: 3px 4px; }
  :root[data-produto="bluevault"] .cal-chip i { display: none; }
  :root[data-produto="bluevault"] .barra-filtros { align-items: stretch; }
  :root[data-produto="bluevault"] .barra-filtros .segmentado { overflow-x: auto; width: 100%; }
  :root[data-produto="bluevault"] .grade-2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  @view-transition { navigation: none; }
}

/* ---------- Nomos · componentes de produto ---------- */
:root[data-produto="nomos"] .lateral { background: var(--rail-1); }
.app-nomos .lateral .logo { padding-bottom: 24px; }
.app-nomos .avatar { background: #eeeeee; color: #111111; box-shadow: none; }
.app-nomos .lateral .logo img { filter: none; }
.app-nomos .lateral .logo .marca-mll { border-color: rgba(255,255,255,.5); }
.app-nomos .nav a.ativo { background: #fff; color: #111; }
.app-nomos .nav a.ativo .icone { color: #111; }
.app-nomos .nav a.ativo::before { background: #fff; }
.app-nomos .cabecalho .sobre { color: var(--texto-2); text-transform: uppercase; letter-spacing: .11em; font-size: 10.5px; }
.app-nomos h1 {
  font-size: clamp(26px, 3vw, 36px); font-weight: 650;
  letter-spacing: -.035em; font-variation-settings: normal;
}
.app-nomos .cabecalho { padding-bottom: 24px; border-bottom: 1px solid var(--borda); }
:root[data-produto="nomos"] .botao:not(.sec):not(.fantasma),
:root[data-produto="nomos"] button:not(.sec):not(.fantasma):not(.buscar-atalho) {
  --b-fundo: var(--acento); --b-texto: var(--nomos-botao-texto); box-shadow: none;
}
:root[data-produto="nomos"] .botao:not(.sec):not(.fantasma):hover,
:root[data-produto="nomos"] button:not(.sec):not(.fantasma):not(.buscar-atalho):hover {
  --b-fundo: var(--nomos-botao-hover);
}
.app-nomos .buscar-atalho { box-shadow: none; }
.app-nomos .progresso i { background: var(--acento); }
.app-nomos pre { background: var(--superficie-2); color: var(--texto); border-color: var(--borda); }
.app-nomos .cal-dia.hoje .cal-num span,
.app-nomos .etapas li.atual span { color: var(--nomos-botao-texto); }
.app-nomos .calendario.urgente .mes,
.app-nomos .calendario.proximo .mes,
.app-nomos .prioridade.p4,
.app-nomos .etapas li.feito span,
.app-nomos .checklist .feito .caixinha { color: var(--superficie); }
.app-nomos .tabela { border-radius: 10px; }
.app-nomos th { letter-spacing: .1em; }
.app-nomos tbody tr:hover { background: var(--fundo-2); }
.app-nomos .selo.info { background: var(--acento-suave); color: var(--texto); border-color: var(--borda); }
.app-nomos .selo.ok { color: var(--verde); }
.app-nomos .selo.pend { color: var(--vermelho); }
.app-nomos .selo.pend, .app-nomos .selo.alerta { border: 1px dashed currentColor; }
.app-nomos .aviso-linha, .app-nomos .msg.erro { border-left: 3px solid var(--texto); }
.app-nomos .barra-filtros select { min-width: 0; max-width: 100%; }
.app-nomos select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}
.app-nomos .barra-filtros { flex-wrap: wrap; }
.app-nomos .nomos-documento-card { overflow-wrap: anywhere; }
.app-nomos td.mono { white-space: nowrap; }
.app-nomos a:not(.botao):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.nomos-vazio { min-height: 230px; border-style: solid; border-color: var(--borda); }
.nomos-vazio .bolha { border-radius: 10px; color: var(--texto-2); }
.nomos-vazio .botao { margin-top: 16px; }
.app-nomos .estado-erro {
  display: inline-flex; align-items: flex-start; gap: 7px; max-width: 34ch;
  color: var(--vermelho); font-size: 12.5px; line-height: 1.4;
}
.app-nomos .estado-erro::before { content: "!"; display: inline-grid; place-items: center; width: 17px; height: 17px; flex: none; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; font-weight: 750; }

.nomos-documentos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.nomos-form { display: grid; gap: 16px; margin-top: 18px; min-width: 0; }
.nomos-form label { display: grid; gap: 6px; }
.nomos-form textarea { min-height: 130px; font-family: var(--mono); }
.nomos-form button { justify-self: start; max-width: 100%; height: auto; min-height: 36px; white-space: normal; padding-block: 10px; }
.nomos-form input[type="file"] { width: 100%; min-width: 0; }
.nomos-acervo { list-style: none; padding: 0; }
.nomos-acervo li { padding: 16px 0; border-bottom: 1px solid var(--borda); overflow-wrap: anywhere; }
.nomos-documento-card { padding: 22px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra-1); }
.nomos-calculadora td:nth-child(4) { font-size: 15px; font-weight: 650; }
.nomos-calculadora td:nth-child(5) { min-width: 190px; }

@media (max-width: 760px) {
  .nomos-documentos { grid-template-columns: 1fr; }
  .app-nomos .tabela table { min-width: 720px; }
  .nomos-calculadora table { min-width: 760px; }
}