/* =========================================================================
   Garimpo · Extração de dados de arquivos com IA (demo dentro do site pessoal)
   -------------------------------------------------------------------------
   Identidade PRÓPRIA, diferente do site e do Rumo:
     site    = editorial, papel quente, serifa, laranja-brasa
     Rumo    = app de vendas, azul-noite + lima "sinal da IA"
     Garimpo = bancada de dados: verde-malaquita (marca), ouro = tudo que a
               IA fez ou sugeriu, Bricolage Grotesque + Geist Mono nos números
   A única ponte visual é a barra .ponte no topo (cores e fonte do site).
   Prefixos: --g- (cor), --t- (texto), --e- (espaço), --serie- (gráficos).
   ========================================================================= */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  --g-fundo: #EDF1EC;
  --g-superficie: #FFFFFF;
  --g-superficie-2: #E3E9E2;
  --g-texto: #12201B;          /* 16.9:1 sobre branco */
  --g-texto-2: #4A5A53;        /* 7.3:1 */
  --g-linha: #D2DBD3;          /* decorativa */
  --g-borda: #74857D;          /* controles: 3.9:1 */
  --g-marca: #0E5A47;          /* malaquita: marca e botão principal (8.6:1) */
  --g-marca-suave: #DCEFE7;
  --g-sobre-marca: #FFFFFF;
  --g-ia: #F2B635;             /* ouro: o que a IA fez. Sempre com texto escuro */
  --g-sobre-ia: #1E1806;       /* 10.6:1 sobre o ouro */
  --g-ia-suave: #FDF1D3;
  --g-ia-texto: #7A5300;       /* ouro escurecido para texto: 6.4:1 */
  --g-perigo: #B42318;
  --g-perigo-suave: #FDECEA;
  --g-foco: #0B6E58;

  /* Gráficos: série única na cor da marca; pizza usa a paleta categórica validada (ordem fixa) */
  --serie-unica: #1B8A6B;
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100;
  --serie-5: #e87ba4; --serie-6: #008300; --serie-7: #6250d6; --serie-8: #8A938E; /* 8 = "Outros", neutro */
  --grade: #E1E7E1;
  --eixo: #9AA9A1;

  --f-ui: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-num: "Geist Mono", "Cascadia Code", Consolas, monospace;
  --f-ponte: "IBM Plex Mono", Consolas, monospace;

  --t-xs: .75rem; --t-sm: .8125rem; --t-base: .9375rem; --t-md: 1.0625rem;
  --t-lg: 1.375rem; --t-xl: clamp(1.75rem, 1.2rem + 2.4vw, 2.875rem);

  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.25rem; --e-6: 1.5rem; --e-7: 2rem; --e-8: 3rem;

  --raio-p: 8px; --raio: 12px; --raio-g: 18px;
  --sombra-1: 0 1px 2px rgba(18, 32, 27, .06);
  --sombra-2: 0 18px 40px -18px rgba(18, 32, 27, .35), 0 2px 6px rgba(18, 32, 27, .06);

  --rapido: 140ms; --medio: 260ms; --curva: cubic-bezier(.2, .8, .2, 1);
  --altura-ponte: 2.25rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --g-fundo: #0B1311; --g-superficie: #121C19; --g-superficie-2: #1A2622;
    --g-texto: #E3ECE7; --g-texto-2: #A0B2A9; --g-linha: #26332E; --g-borda: #62756C;
    --g-marca: #5FD3B0; --g-marca-suave: #173A30; --g-sobre-marca: #06110D;
    --g-ia-suave: #3A2E0E; --g-ia-texto: #F2C45A;
    --g-perigo: #FF8A80; --g-perigo-suave: #3B1714; --g-foco: #5FD3B0;
    --serie-unica: #4CC9A4;
    --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500;
    --serie-5: #d55181; --serie-6: #008300; --serie-7: #9085e9; --serie-8: #6E7A74;
    --grade: #1F2C28; --eixo: #52645C;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .5);
    --sombra-2: 0 18px 40px -16px rgba(0, 0, 0, .85);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --g-fundo: #0B1311; --g-superficie: #121C19; --g-superficie-2: #1A2622;
  --g-texto: #E3ECE7; --g-texto-2: #A0B2A9; --g-linha: #26332E; --g-borda: #62756C;
  --g-marca: #5FD3B0; --g-marca-suave: #173A30; --g-sobre-marca: #06110D;
  --g-ia-suave: #3A2E0E; --g-ia-texto: #F2C45A;
  --g-perigo: #FF8A80; --g-perigo-suave: #3B1714; --g-foco: #5FD3B0;
  --serie-unica: #4CC9A4;
  --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500;
  --serie-5: #d55181; --serie-6: #008300; --serie-7: #9085e9; --serie-8: #6E7A74;
  --grade: #1F2C28; --eixo: #52645C;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sombra-2: 0 18px 40px -16px rgba(0, 0, 0, .85);
  color-scheme: dark;
}

/* 2. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background: var(--g-fundo);
  color: var(--g-texto);
  font: var(--t-base)/1.55 var(--f-ui);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; line-height: 1.15; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--g-foco); outline-offset: 2px; border-radius: var(--raio-p); }
main:focus { outline: none; }
.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: var(--e-3); top: -4rem; z-index: 100;
  padding: var(--e-2) var(--e-3); background: var(--g-marca); color: var(--g-sobre-marca);
  border-radius: var(--raio-p); text-decoration: none; font-weight: 600;
}
.pular:focus { top: calc(var(--altura-ponte) + var(--e-2)); }

/* 3. PONTE COM O SITE (cores e fonte do site pessoal, fixas) -------------------- */
.ponte {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--e-4);
  height: var(--altura-ponte); padding-inline: var(--e-4);
  background: #F4EFE6; color: #1B1915; border-bottom: 1px solid #CFC5B2;
  font: 500 .75rem/1 var(--f-ponte); white-space: nowrap;
}
.ponte__voltar { text-decoration: none; display: inline-flex; gap: .4em; padding-block: .5rem; }
.ponte__voltar:hover { color: #9C3410; }
.ponte__voltar:focus-visible { outline-color: #B93D0E; }
.ponte__logo { color: #5C554B; }
.ponte__aviso { margin-left: auto; display: inline-flex; align-items: center; gap: .5em; color: #5C554B; }
.ponte__ponto { width: .45rem; height: .45rem; border-radius: 50%; background: #B93D0E; }
.ponte__curto { display: none; }
@media (max-width: 44rem) {
  .ponte { gap: var(--e-3); padding-inline: var(--e-3); }
  .ponte__logo, .ponte__longo { display: none; }
  .ponte__curto { display: inline; }
}

/* 4. TOPO ------------------------------------------------------------------- */
.app { min-height: calc(100vh - var(--altura-ponte)); display: flex; flex-direction: column; }
.topo {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid var(--g-linha);
  background: var(--g-superficie);
}
.marca { display: inline-flex; align-items: center; gap: var(--e-2); text-decoration: none; padding-block: var(--e-1); }
.marca__icone { width: 2rem; height: 2rem; }
.marca__fundo { fill: var(--g-marca); }
.marca__bateia { fill: none; stroke: var(--g-sobre-marca); stroke-width: 2; stroke-linejoin: round; }
.marca__linha { stroke: var(--g-sobre-marca); stroke-width: 1.4; stroke-linecap: round; opacity: .55; }
.marca__pepita { fill: var(--g-ia); }
.marca__nome { font-weight: 700; font-size: var(--t-md); letter-spacing: -.01em; }
.topo__descricao { color: var(--g-texto-2); font-size: var(--t-sm); padding-left: var(--e-3); border-left: 1px solid var(--g-linha); }
.botao-icone {
  margin-left: auto; width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  border: 1px solid var(--g-linha); border-radius: var(--raio-p); background: transparent; color: var(--g-texto-2);
  transition: border-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.botao-icone:hover { border-color: var(--g-borda); color: var(--g-texto); }
.botao-icone svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.icone-sol { display: none !important; }
:root[data-theme="dark"] .icone-sol { display: block !important; }
:root[data-theme="dark"] .icone-lua { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icone-sol { display: block !important; }
  :root:not([data-theme="light"]) .icone-lua { display: none !important; }
}
@media (max-width: 30rem) { .topo__descricao { display: none; } }

/* 5. BOTÕES, SELOS, ALERTAS ------------------------------------------------------ */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 2.75rem; padding: 0 var(--e-5);
  border: 1px solid transparent; border-radius: var(--raio-p);
  font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background var(--rapido) var(--curva), transform var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.botao svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.botao--marca { background: var(--g-marca); color: var(--g-sobre-marca); }
.botao--marca:hover { transform: translateY(-1px); }
.botao--marca:disabled { opacity: .55; transform: none; cursor: not-allowed; }
.botao--leve { background: transparent; border-color: var(--g-linha); color: var(--g-texto); }
.botao--leve:hover { border-color: var(--g-borda); }
.botao--pequeno { min-height: 2.25rem; padding: 0 var(--e-3); font-size: var(--t-sm); }

.selo-formato {
  display: inline-flex; align-items: center; height: 1.375rem; padding: 0 .45rem;
  border-radius: 5px; border: 1px solid currentColor;
  font: 500 .6875rem/1 var(--f-num); letter-spacing: .04em; color: var(--g-texto-2);
}
.selo-ia {
  display: inline-flex; align-items: center; gap: .35em; padding: .2rem .55rem; border-radius: 999px;
  background: var(--g-ia); color: var(--g-sobre-ia); font-size: var(--t-xs); font-weight: 600;
}
.alerta {
  padding: var(--e-3) var(--e-4); border-radius: var(--raio-p);
  background: var(--g-perigo-suave); color: var(--g-texto); border-left: 3px solid var(--g-perigo);
}

/* 6. ESTADO 1: ENTRADA ------------------------------------------------------------ */
main { flex: 1; display: flex; flex-direction: column; }
.entrada {
  width: min(100%, 76rem); margin-inline: auto;
  padding: clamp(1.5rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem) var(--e-8);
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 64rem) { .entrada { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; } }
.sobretitulo { font: 500 var(--t-xs)/1.4 var(--f-num); color: var(--g-ia-texto); letter-spacing: .06em; text-transform: uppercase; }
.entrada h1 { margin-top: var(--e-3); font-size: var(--t-xl); font-weight: 700; letter-spacing: -.025em; }
.entrada h1 em {
  font-style: normal; color: var(--g-marca);
  background: linear-gradient(transparent 62%, var(--g-ia-suave) 62%, var(--g-ia-suave) 92%, transparent 92%);
}
.entrada__lead { margin-top: var(--e-4); font-size: var(--t-md); color: var(--g-texto-2); max-width: 34rem; }
.passos { list-style: none; padding: 0; margin-top: var(--e-6); display: grid; gap: var(--e-2); }
.passos li { display: flex; align-items: center; gap: var(--e-3); font-weight: 500; }
.passos__n {
  width: 1.75rem; height: 1.75rem; display: grid; place-items: center; flex: none;
  border-radius: 50%; border: 1px solid var(--g-borda); font: 500 var(--t-xs)/1 var(--f-num); color: var(--g-texto-2);
}
.passos li:nth-child(2) .passos__n { border-color: var(--g-ia); background: var(--g-ia); color: var(--g-sobre-ia); }

.entrada__acoes { display: grid; gap: var(--e-6); }
.doca {
  position: relative; display: grid; justify-items: center; text-align: center; gap: var(--e-2);
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--e-5);
  background: var(--g-superficie); border: 2px dashed var(--g-borda); border-radius: var(--raio-g);
  transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva), transform var(--medio) var(--curva);
}
.doca.arrastando { border-color: var(--g-marca); background: var(--g-marca-suave); transform: scale(1.01); }
.doca:focus-within { border-color: var(--g-marca); }
.doca__icone { width: 3rem; height: 3rem; fill: none; stroke: var(--g-texto-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.doca__ponto { fill: var(--g-ia); stroke: none; }
.doca__mais { stroke: var(--g-sobre-ia); }
.doca__titulo { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; }
.doca__ou { color: var(--g-texto-2); font-size: var(--t-sm); }
.doca__formatos { margin-top: var(--e-2); font-size: var(--t-sm); }
.doca__fora { color: var(--g-texto-2); font-size: var(--t-sm); }
.doca__estado:empty { display: none; }
.doca__estado { margin-top: var(--e-2); font-weight: 500; }
.doca__estado.erro { color: var(--g-perigo); }
.doca[aria-busy="true"] .botao { pointer-events: none; opacity: .6; }

.exemplos h2 { font-size: var(--t-md); font-weight: 600; margin-bottom: var(--e-3); }
.exemplos__lista { list-style: none; padding: 0; display: grid; gap: var(--e-2); }
@media (min-width: 40rem) { .exemplos__lista { grid-template-columns: 1fr 1fr; } }
.exemplo { position: relative; display: flex; }
.exemplo__botao {
  flex: 1; display: grid; grid-template-columns: auto 1fr; column-gap: var(--e-3); row-gap: 2px; align-items: center;
  text-align: left; padding: var(--e-3) 3rem var(--e-3) var(--e-3); min-height: 3.75rem;
  background: var(--g-superficie); border: 1px solid var(--g-linha); border-radius: var(--raio);
  transition: border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.exemplo__botao:hover { border-color: var(--g-marca); transform: translateY(-1px); }
.exemplo__botao .selo-formato { grid-row: span 2; }
.exemplo__titulo { font-weight: 600; }
.exemplo__detalhe { color: var(--g-texto-2); font-size: var(--t-sm); }
.exemplo__baixar {
  position: absolute; right: var(--e-2); top: 50%; translate: 0 -50%;
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: var(--raio-p); color: var(--g-texto-2);
}
.exemplo__baixar:hover { background: var(--g-superficie-2); color: var(--g-texto); }
.exemplo__baixar svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.privacidade { background: var(--g-superficie); border: 1px solid var(--g-linha); border-radius: var(--raio); }
.privacidade summary {
  display: flex; align-items: center; gap: var(--e-2); min-height: 2.75rem; padding: var(--e-2) var(--e-4);
  cursor: pointer; font-weight: 600; list-style: none;
}
.privacidade summary::-webkit-details-marker { display: none; }
.privacidade summary::after { content: "+"; margin-left: auto; font: 500 var(--t-md)/1 var(--f-num); color: var(--g-texto-2); }
.privacidade[open] summary::after { content: "−"; }
.privacidade summary svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--g-marca); stroke-width: 1.8; stroke-linejoin: round; }
.privacidade ul { padding: 0 var(--e-5) var(--e-4) 2.6rem; display: grid; gap: var(--e-2); color: var(--g-texto-2); font-size: var(--t-sm); }
.privacidade strong { color: var(--g-texto); }

/* 7. ESTADO 2: MESA (conversa + bancada) ----------------------------------------------- */
.mesa { flex: 1; display: grid; }
@media (min-width: 64rem) {
  .mesa { grid-template-columns: minmax(22rem, 27rem) minmax(0, 1fr); }
  .conversa { position: sticky; top: var(--altura-ponte); height: calc(100vh - var(--altura-ponte) - 3.6rem); }
}
.conversa {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--g-superficie); border-right: 1px solid var(--g-linha);
}
@media (max-width: 63.99rem) { .conversa { border-right: 0; border-bottom: 1px solid var(--g-linha); } }

.ficha { padding: var(--e-4); border-bottom: 1px solid var(--g-linha); display: grid; gap: var(--e-2); }
.ficha__topo { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.ficha__nome { font-size: var(--t-base); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.ficha__resumo { font: 400 var(--t-sm)/1.4 var(--f-num); color: var(--g-texto-2); }
.ficha__modo { font-size: var(--t-sm); color: var(--g-texto-2); padding-left: var(--e-3); border-left: 2px solid var(--g-ia); }
.ficha__trecho { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); }
.ficha__trecho select {
  min-height: 2.25rem; padding: 0 var(--e-2); border: 1px solid var(--g-borda); border-radius: var(--raio-p); background: var(--g-superficie);
}
.ficha__avisos { list-style: none; padding: 0; display: grid; gap: var(--e-1); font-size: var(--t-sm); }
.ficha__avisos:empty { display: none; }
.ficha__avisos li { padding: var(--e-2) var(--e-3); border-radius: var(--raio-p); background: var(--g-ia-suave); }

.falas {
  list-style: none; padding: var(--e-4); margin: 0; flex: 1; overflow-y: auto; min-height: 12rem;
  display: flex; flex-direction: column; gap: var(--e-3); scroll-behavior: smooth;
}
.fala { max-width: 92%; animation: subir var(--medio) var(--curva); }
.fala__balao { padding: var(--e-3) var(--e-4); border-radius: var(--raio); white-space: pre-wrap; overflow-wrap: anywhere; }
.fala--visitante { align-self: flex-end; }
.fala--visitante .fala__balao { background: var(--g-marca); color: var(--g-sobre-marca); border-bottom-right-radius: 4px; }
.fala--ia { align-self: flex-start; display: grid; grid-template-columns: auto 1fr; gap: var(--e-2); }
.fala__avatar {
  width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; margin-top: 2px;
  background: var(--g-ia); color: var(--g-sobre-ia); font-size: .8rem; font-weight: 700;
}
.fala--ia .fala__balao { background: var(--g-superficie-2); border-top-left-radius: 4px; }
.fala--erro .fala__balao { background: var(--g-perigo-suave); border-left: 3px solid var(--g-perigo); }
.fala__acoes { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }
.sugestao {
  min-height: 2.25rem; padding: var(--e-1) var(--e-3); text-align: left;
  border: 1px dashed var(--g-borda); border-radius: var(--raio-p); background: transparent; font-size: var(--t-sm);
  transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva);
}
.sugestao:hover { border-style: solid; border-color: var(--g-marca); background: var(--g-marca-suave); }
.fala__link { grid-column: 2; margin-top: var(--e-1); font-size: var(--t-sm); }
.pensando { display: inline-flex; gap: 4px; align-items: center; }
.pensando i { width: 6px; height: 6px; border-radius: 50%; background: var(--g-texto-2); animation: pulo 1s infinite var(--curva); }
.pensando i:nth-child(2) { animation-delay: .15s; }
.pensando i:nth-child(3) { animation-delay: .3s; }

.compositor { padding: var(--e-3) var(--e-4) var(--e-4); border-top: 1px solid var(--g-linha); display: grid; gap: var(--e-2); }
.formatos { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.formatos legend { float: left; margin-right: var(--e-1); font-size: var(--t-sm); font-weight: 600; }
.formatos__dica { font-weight: 400; color: var(--g-texto-2); }
.formato {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 2.25rem; padding: 0 var(--e-3);
  border: 1px solid var(--g-linha); border-radius: 999px; background: transparent; font-size: var(--t-sm);
  transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.formato svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.formato:hover { border-color: var(--g-borda); }
.formato[aria-pressed="true"] { background: var(--g-marca); border-color: var(--g-marca); color: var(--g-sobre-marca); }
.compositor__caixa {
  display: flex; align-items: flex-end; gap: var(--e-2); padding: var(--e-2);
  border: 1px solid var(--g-borda); border-radius: var(--raio); background: var(--g-fundo);
}
.compositor__caixa:focus-within { border-color: var(--g-marca); box-shadow: 0 0 0 3px var(--g-marca-suave); }
.compositor textarea {
  flex: 1; min-height: 2.75rem; max-height: 9rem; resize: none; border: 0; background: transparent; padding: var(--e-2);
  line-height: 1.45;
}
.compositor textarea:focus { outline: none; }
.compositor textarea[aria-invalid="true"] { color: var(--g-perigo); }
.compositor__enviar { flex: none; }
.compositor__rodape { display: flex; justify-content: space-between; gap: var(--e-3); font-size: var(--t-xs); color: var(--g-texto-2); }
.contador { font-family: var(--f-num); }
.contador.quase { color: var(--g-ia-texto); }
.contador.passou { color: var(--g-perigo); font-weight: 600; }

/* 8. BANCADA: análise, tabela, gráficos -------------------------------------------------- */
.bancada { padding: clamp(1rem, 3vw, 2rem); min-width: 0; }
.bancada:focus { outline: none; }
.bancada__vazia {
  min-height: 60vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: var(--e-2);
  color: var(--g-texto-2);
}
.bancada__vazia svg { width: 14rem; margin-bottom: var(--e-3); }
.esboco { fill: none; stroke: var(--g-linha); stroke-width: 2; stroke-linecap: round; }
.esboco--forte { stroke: var(--g-borda); stroke-width: 6; }
.bancada__vazia strong { color: var(--g-texto); font-size: var(--t-md); }

.analise { display: grid; gap: var(--e-5); animation: subir var(--medio) var(--curva); }
.analise__cabeca { display: grid; gap: var(--e-2); }
.analise__origem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--t-sm); color: var(--g-texto-2); }
.analise h2 { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.015em; }
.analise__mensagem { color: var(--g-texto-2); max-width: 46rem; }
.notas { list-style: none; padding: 0; display: grid; gap: var(--e-2); }
.nota {
  display: flex; gap: var(--e-2); align-items: flex-start; padding: var(--e-2) var(--e-3);
  border-radius: var(--raio-p); background: var(--g-ia-suave); font-size: var(--t-sm);
}
.nota--ausente { background: var(--g-perigo-suave); }
.nota svg { width: 1rem; height: 1rem; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.graficos { display: grid; gap: var(--e-4); }
@media (min-width: 90rem) { .graficos--varios { grid-template-columns: 1fr 1fr; } }
.grafico {
  background: var(--g-superficie); border: 1px solid var(--g-linha); border-radius: var(--raio-g);
  padding: var(--e-4) var(--e-4) var(--e-3); min-width: 0;
}
.grafico figcaption { display: flex; justify-content: space-between; gap: var(--e-3); align-items: baseline; margin-bottom: var(--e-3); }
.grafico__titulo { font-weight: 600; }
.grafico__tipo { font: 400 var(--t-xs)/1 var(--f-num); color: var(--g-texto-2); white-space: nowrap; }
.grafico svg { width: 100%; height: auto; overflow: visible; }
.grafico__nota { margin-top: var(--e-2); font-size: var(--t-xs); color: var(--g-texto-2); }
.grafico text { font-family: var(--f-num); font-size: 11px; fill: var(--g-texto-2); }
.grafico .rotulo-valor { fill: var(--g-texto); font-weight: 500; }
.grafico .grade { stroke: var(--grade); stroke-width: 1; }
.grafico .eixo { stroke: var(--eixo); stroke-width: 1; }
.grafico .barra { fill: var(--serie-unica); transition: opacity var(--rapido) var(--curva); }
.grafico .barra--negativa { fill: var(--g-perigo); }
.grafico .linha-serie { fill: none; stroke: var(--serie-unica); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .area-serie { fill: var(--serie-unica); opacity: .08; }
.grafico .ponto { fill: var(--serie-unica); stroke: var(--g-superficie); stroke-width: 2; }
.grafico .mira { stroke: var(--g-texto-2); stroke-width: 1; stroke-dasharray: 3 3; }
.grafico .fatia { stroke: var(--g-superficie); stroke-width: 2; transition: opacity var(--rapido) var(--curva); }
.grafico .alvo { fill: transparent; }
.grafico svg:hover .barra, .grafico svg:hover .fatia { opacity: .55; }
.grafico svg .ativo, .grafico svg:hover .ativo { opacity: 1; }
.legenda { list-style: none; padding: 0; display: grid; gap: var(--e-1); font-size: var(--t-sm); }
.legenda li { display: grid; grid-template-columns: .75rem 1fr auto auto; gap: var(--e-2); align-items: center; }
.legenda__cor { width: .75rem; height: .75rem; border-radius: 3px; }
.legenda__valor, .legenda__pct { font-family: var(--f-num); font-size: var(--t-xs); color: var(--g-texto-2); text-align: right; }
.pizza { display: grid; gap: var(--e-4); align-items: center; }
@media (min-width: 36rem) { .pizza { grid-template-columns: minmax(10rem, 15rem) 1fr; } }

.dica-grafico {
  position: fixed; z-index: 60; pointer-events: none; max-width: 16rem;
  padding: var(--e-2) var(--e-3); border-radius: var(--raio-p);
  background: var(--g-texto); color: var(--g-fundo); font-size: var(--t-sm); box-shadow: var(--sombra-2);
}
.dica-grafico b { display: block; font-family: var(--f-num); font-weight: 500; }

.tabela-bloco { background: var(--g-superficie); border: 1px solid var(--g-linha); border-radius: var(--raio-g); overflow: hidden; }
.tabela-bloco__topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2);
  padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--g-linha);
}
.tabela-bloco__topo h3 { font-size: var(--t-base); font-weight: 600; }
.tabela-bloco__info { font: 400 var(--t-xs)/1.3 var(--f-num); color: var(--g-texto-2); }
.tabela-bloco summary { cursor: pointer; padding: var(--e-3) var(--e-4); font-weight: 600; min-height: 2.75rem; }
.rolagem { overflow: auto; max-height: 34rem; }
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-sm); }
.tabela th, .tabela td { padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--g-linha); text-align: left; vertical-align: top; }
.tabela thead th { position: sticky; top: 0; z-index: 1; background: var(--g-superficie-2); padding: 0; }
.tabela .num { text-align: right; font-family: var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela tbody tr:hover td { background: var(--g-fundo); }
.tabela .vazio { color: var(--g-texto-2); }
.ordenar {
  display: flex; align-items: center; gap: .35rem; width: 100%; min-height: 2.5rem; padding: var(--e-2) var(--e-3);
  border: 0; background: transparent; font-weight: 600; text-align: inherit; white-space: nowrap;
}
.tabela th.num .ordenar { justify-content: flex-end; }
.ordenar::after { content: "↕"; font-family: var(--f-num); color: var(--g-texto-2); opacity: .5; }
th[aria-sort="ascending"] .ordenar::after { content: "↑"; opacity: 1; color: var(--g-marca); }
th[aria-sort="descending"] .ordenar::after { content: "↓"; opacity: 1; color: var(--g-marca); }
.nao-confirmado {
  background: repeating-linear-gradient(135deg, transparent 0 6px, var(--g-ia-suave) 6px 12px);
  box-shadow: inset 0 -2px 0 var(--g-ia);
}
.nao-confirmado::after { content: " ⚠"; color: var(--g-ia-texto); }
.legenda-tabela { padding: var(--e-2) var(--e-4); font-size: var(--t-xs); color: var(--g-texto-2); border-top: 1px solid var(--g-linha); }
.legenda-tabela .nao-confirmado { padding: 0 .25rem; }

/* 9. MOVIMENTO --------------------------------------------------------------------------- */
@keyframes subir { from { transform: translateY(10px); opacity: 0; } }
@keyframes pulo { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .grafico .barra, .grafico .fatia, .grafico .ponto { fill: CanvasText; }
  .nao-confirmado { outline: 1px dashed CanvasText; }
}
