/* Template "grafite" — pacote gerado por build.js em 2026-09-13.
   NÃO editar aqui: edite base/estrutura.css, temas/_pecas.css e temas/grafite/tema.css e rode "node build.js grafite". */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

/* ==================== 1. ESTRUTURA ==================== */

/* DASHBOARD BASE — ESTRUTURA (igual para todos os templates)
   Só layout: grade, posições, rolagem e responsivo. Nada de cor, sombra ou fonte.
   Tamanhos vêm de variáveis que o tema.css pode ajustar. */

:root {
  --app-rail-w: 6.6rem;      /* largura do trilho de ícones */
  --app-nav-w: 27rem;        /* trilho + submenu */
  --app-gap: 1.4rem;         /* espaço entre blocos */
  --app-pad: 4rem;           /* respiro lateral do conteúdo */
  --app-topo-h: 5.2rem;
}

*, *::before, *::after { box-sizing: border-box; }
body { min-width: 32rem; margin: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Casca ---------- */
.app { min-height: 100vh; display: grid; grid-template-columns: var(--app-nav-w) minmax(0, 1fr); }

.app-nav {
  position: fixed; z-index: 20; inset: 0 auto 0 0;
  width: var(--app-nav-w);
  display: grid; grid-template-columns: var(--app-rail-w) minmax(0, 1fr);
  pointer-events: none;
}
.app-rail, .app-submenu { pointer-events: auto; }
.app-fundo { display: none; }  /* só existe no menu do celular/tablet */

/* Trilho */
.app-rail { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 0; isolation: isolate; }
.app-rail__logo { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.app-rail__logo img { display: block; max-width: 100%; height: auto; }
.app-rail__nav {
  position: relative; isolation: isolate; flex: 1; min-height: 0; width: 100%;
  display: grid; grid-auto-rows: max-content; align-content: start; justify-items: center;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none;
}
.app-rail__nav::-webkit-scrollbar { display: none; }
.app-rail__item { position: relative; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none; }
.app-rail__item span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.app-rail__sair { flex-shrink: 0; margin-top: auto; }
.app-rail__ponte { position: absolute; z-index: -1; top: 0; right: 0; pointer-events: none; transform: translateY(var(--ponte-y, 0)); }

/* Submenu */
.app-rail { z-index: 2; }
.app-submenu {
  position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  transition: transform 280ms cubic-bezier(.4, 0, .2, 1), opacity 220ms ease 60ms;
}
/* Troca de área: recolhe para trás do trilho e volta com o conteúdo novo (tempo casado com app.js) */
.app-nav.is-fechando .app-submenu { transform: translateX(-100%); opacity: 0; pointer-events: none; transition: transform 280ms cubic-bezier(.4, 0, .2, 1), opacity 200ms ease; }
.app-rail__ponte { transition: opacity 160ms ease; }
.app-nav.is-fechando .app-rail__ponte { opacity: 0; }
.app-submenu__topo, .app-submenu__rodape { flex-shrink: 0; }
.app-submenu__fechar { display: none; }
.app-submenu__rolagem { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.app-submenu__area { display: grid; align-content: start; gap: 1.8rem; }
.app-submenu__texto { margin: 0; }
.app-submenu__acoes { display: grid; gap: .7rem; }
.app-submenu__lista { display: grid; }
.app-submenu__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-decoration: none; }
.app-submenu__rodape { display: flex; align-items: center; margin-top: auto; }

/* Área principal */
.app-principal { grid-column: 2; min-width: 0; padding: 2rem var(--app-pad) 5rem; }
.app-topo { display: flex; align-items: center; gap: 1.2rem; min-height: var(--app-topo-h); }
.app-topo__menu { display: none !important; }
.app-topo__trilha { flex: 1; min-width: 0; }
/* Páginas da área no topo (só temas sem submenu mostram com display:flex) */
.app-topo__paginas { display: none; flex: 1; min-width: 0; align-items: center; gap: 1.6rem; }
.app-topo__area { flex-shrink: 0; white-space: nowrap; }
.app-topo__abas { display: flex; gap: .4rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.app-topo__abas::-webkit-scrollbar { display: none; }
.app-topo__aba { flex-shrink: 0; display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap; text-decoration: none; cursor: pointer; }
.app-topo__acoes { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }
.app-icone { position: relative; display: grid; place-items: center; flex-shrink: 0; padding: 0; cursor: pointer; }
.app-icone__contador { position: absolute; top: -.2rem; right: -.2rem; display: grid; place-items: center; }
.app-perfil { display: flex; align-items: center; gap: .8rem; cursor: pointer; }
.app-perfil__nome { display: grid; text-align: left; line-height: 1.15; }
.app-conteudo { display: grid; gap: var(--app-gap); margin-top: 2.2rem; outline: 0; }

/* ---------- Peças de conteúdo ---------- */
.pagina-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.pagina-topo__acoes { display: flex; flex-wrap: wrap; gap: .8rem; }

.grade { display: grid; gap: var(--app-gap); align-items: start; }
.grade[data-cols="2"]   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade[data-cols="3"]   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade[data-cols="4"]   { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade[data-cols="2-1"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grade[data-cols="1-2"] { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

.bloco { min-width: 0; }
.bloco__topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.bloco__pilha { display: grid; gap: 1.6rem; }
.bloco__acoes-area { display: none; gap: .8rem; flex-wrap: wrap; }  /* só temas sem submenu mostram (display:flex) */
.bloco__rodape { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.indicador { position: relative; display: grid; align-content: start; min-width: 0; }
.indicador__icone { position: absolute; z-index: 1; top: 1.6rem; right: 1.6rem; display: grid; place-items: center; }

.grafico { display: block; width: 100%; height: 12rem; overflow: visible; }

.lista { display: grid; margin: 0; padding: 0; list-style: none; }
.lista__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; }
.lista__icone { display: grid; place-items: center; }
.lista__texto strong, .lista__texto small { display: block; }

.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.filtros__busca { flex: 1 1 24rem; }
.filtros__select { flex: 0 1 20rem; }
.filtros__select select { width: 100%; }

/* Tabela SEM rolagem lateral: quando o espaço fica curto, cada linha vira um cartão.
   Container query = reage à largura da própria tabela (com ou sem submenu). Rótulos: data-label (app.js preenche). */
.tbl { container-type: inline-size; overflow: visible; }
@container (max-width: 760px) {
  :root .app-principal .tbl { border: 0 !important; border-radius: 0 !important; }
  :root .app-principal .tbl :is(table, tbody, tr, td) { display: block; width: 100%; }
  :root .app-principal .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  :root .app-principal .tbl tbody { display: grid; gap: 1rem; }
  :root .app-principal .tbl tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.6rem; padding: 1.4rem 1.6rem; }
  :root .app-principal .tbl td { padding: 0 !important; border: 0 !important; background: transparent !important; white-space: normal !important; text-align: left !important; min-width: 0; overflow-wrap: anywhere; }
  :root .app-principal .tbl td::before { content: attr(data-label); display: block; margin-bottom: .2rem; font-size: 1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
  :root .app-principal .tbl td:first-child { grid-column: 1 / -1; font-size: 1.6rem; font-weight: 700; }
  :root .app-principal .tbl td:first-child::before, :root .app-principal .tbl td.tabela__acoes::before { display: none; }
  :root .app-principal .tbl td.tabela__acoes { grid-column: 1 / -1; width: auto; padding-top: .8rem !important; }
  :root .app-principal .tabela__botoes { justify-content: flex-start; }
}
.tabela__acoes { width: 1%; white-space: nowrap; text-align: right; }
.tabela__acoes [sw-dropdown-mn] { left: auto; right: 0; }
.tabela__botoes { display: inline-flex; align-items: center; justify-content: flex-end; gap: .2rem; }

.linha { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }

/* Formulário em seções: explicação à esquerda, campos à direita */
.form { display: grid; gap: 0; }
.form-secao { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: 2.4rem 4rem; padding-block: 2.4rem; }
.form-secao:first-child { padding-top: .4rem; }
.form-secao__info h4, .form-secao__info p { margin: 0; }
.form-secao__campos { display: grid; gap: 1.4rem; align-content: start; }
.form-editor { display: grid; gap: .7rem; min-width: 0; }
.form-opcoes { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; align-items: center; }
.form-acoes { display: flex; justify-content: flex-end; gap: .8rem; padding-top: 2rem; }
@media (max-width: 900px) { .form-secao { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; } }

/* Formulário dentro do painel (50% da tela): seções empilhadas, rodapé fixo */
/* padding 0: a rolagem do corpo encosta na borda do painel; cada parte cuida do próprio respiro */
[sw-panel].painel-form { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.painel-form [sw-panel-hdr], .painel-form [sw-panel-ftr] { margin: 0; }
.painel-form__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.6rem; flex-shrink: 0; }
.painel-form__titulo { display: flex; align-items: center; gap: 1.4rem; min-width: 0; }
.painel-form__titulo h3, .painel-form__titulo p { margin: 0; }
.painel-form__icone { display: grid; place-items: center; flex-shrink: 0; }
.painel-form__atalhos { display: flex; gap: .6rem; overflow-x: auto; flex-shrink: 0; scrollbar-width: none; }
.painel-form__atalhos a { flex-shrink: 0; text-decoration: none; white-space: nowrap; }
.painel-form__corpo { flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth; }
.form--painel .form-secao { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; scroll-margin-top: 1.2rem; }
.form--painel .form-secao__info { display: flex; align-items: center; gap: 1.2rem; }
.form-secao__icone { display: grid; place-items: center; flex-shrink: 0; }
.painel-form__rodape { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-shrink: 0; }
.painel-form__botoes { display: flex; gap: .8rem; margin-left: auto; }

/* Painel de visualização (somente leitura) */
.painel-ver__dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2.4rem; margin: 0; }
.painel-ver__dados > div { min-width: 0; }
.painel-ver__dados dd { margin: .3rem 0 0; overflow-wrap: anywhere; }
.painel-ver__texto p { margin: 0; }

.vazio { display: grid; justify-items: center; gap: .8rem; text-align: center; padding: 4rem 2rem; }
.vazio__texto { margin: 0; }

/* Carregando (skeleton) */
.carregando { display: grid; gap: .9rem; align-content: start; }

/* ---------- Responsivo ---------- */
@media (max-width: 1180px) {
  :root { --app-pad: 2.4rem; }
  .grade[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade[data-cols="3"], .grade[data-cols="2-1"], .grade[data-cols="1-2"] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 920px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app-principal { grid-column: 1; }
  .app-topo__menu { display: grid !important; }
  .app-nav { width: min(82vw, 34rem); transform: translateX(-105%);  /* sobra uma faixa do fundo para tocar e fechar */ transition: transform 260ms cubic-bezier(.22, 1, .36, 1); }
  body.menu-aberto .app-nav { transform: none; }
  .app-fundo { display: block; position: fixed; z-index: 19; inset: 0; opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
  body.menu-aberto .app-fundo { opacity: 1; pointer-events: auto; }
  body.menu-aberto { overflow: hidden; }  /* página travada atrás da gaveta */
  /* painel de cadastro ocupa a tela toda no tablet/celular */
  [sw-panel].painel-form { --sw-panel-sz: 100% !important; }
  .app-submenu__fechar { display: grid; place-items: center; align-self: flex-end; }
}

@media (max-width: 700px) {
  :root { --app-pad: 1.2rem; }
  .app-principal { padding-block: 1.4rem 3rem; }
  .app-topo { flex-wrap: wrap; }
  .app-topo__trilha { order: 3; flex-basis: 100%; }
  .app-topo__acoes { margin-left: auto; }
  .app-perfil__nome, .app-topo__telacheia { display: none !important; }
  .pagina-topo { align-items: flex-start; flex-direction: column; }
  .grade[data-cols="2"], .grade[data-cols="4"] { grid-template-columns: minmax(0, 1fr); }
  [sw-frm-row] { grid-template-columns: minmax(0, 1fr) !important; }
  .lista__item { grid-template-columns: auto minmax(0, 1fr); }
  .lista__item > [sw-badge] { grid-column: 2; justify-self: start; }
  .app-topo__paginas { order: 3; flex-basis: 100%; }
  .app-topo__area { display: none; }
  .bloco__acoes-area { width: 100%; }
  .bloco__acoes-area [sw-btn] { flex: 1; }
  .filtros__busca, .filtros__select { flex: 1 1 100%; }
  .painel-ver__dados { grid-template-columns: minmax(0, 1fr); }
  .painel-form__rodape { flex-wrap: wrap; }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ==================== 2. PEÇAS ==================== */

/* PEÇAS — pele comum dos temas, 100% dirigida por tokens.
   Um tema = importa este arquivo + define tokens --t-* (página) e --m-* (menu) + poucas regras de assinatura.
   O menu segue a estrutura criada pelo Sandro: trilho + ponte + submenu.

   Índice
    1. Ponte com o SWCore        6. Formulário (seções, campo flutuante, select, editor, validação)
    2. Cena e tipografia         7. Painéis (formulário e visualização)
    3. Superfícies               8. Tabela, badges, alertas, progresso, timeline
    4. Menu lateral              9. Movimento
    5. Topo e conteúdo          10. Responsivo

   Escopo dos componentes SWCore: :is(.app-principal, [sw-modal], [sw-panel]) — o menu lateral não é afetado. */

/* ============ 1. PONTE COM O SWCORE ============ */
:root, html[sw-theme="light"], html[sw-theme="dark"] {
  --sw-pri: var(--t-pri);
  --sw-pri-glow: color-mix(in oklch, var(--t-pri) 25%, transparent);
  --sw-grad-pri: var(--t-grad-pri);
  --sw-bg: var(--t-bg);
  --sw-sur: var(--t-campo);
  --sw-bor: var(--t-borda);
  --sw-txt: var(--t-txt);
  --sw-txt-mut: var(--t-mudo);
  --sw-r: var(--t-raio-p);
}

/* ============ 2. CENA E TIPOGRAFIA ============ */
html { background: var(--t-bg); }
body { background: transparent; color: var(--t-txt); -webkit-font-smoothing: antialiased; }  /* body transparente: senão cobre a cena */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--t-cena); }
.app-principal, .app-submenu, [sw-modal], [sw-panel], [sw-dropdown-mn] { font-family: var(--t-fonte); }

/* ============ 3. SUPERFÍCIES ============ */
.app-conteudo [sw-card], [sw-modal-box], [sw-panel], [sw-dropdown-mn] {
  background: var(--t-sup);
  border: var(--t-sup-borda);
  box-shadow: var(--t-sup-sombra);
  -webkit-backdrop-filter: var(--t-desfoque);
  backdrop-filter: var(--t-desfoque);
  color: var(--t-txt);
}
.app-conteudo [sw-card] { border-radius: var(--t-raio); overflow: visible; }
.app-conteudo :is(.sw-card-hdr, .sw-card-ftr) { background: transparent; border-color: var(--t-borda); }
.app-conteudo .sw-card-hdr { padding: 1.8rem 2.2rem 1.4rem; }
.app-conteudo .sw-card-bdy { padding: 2rem 2.2rem; }
.app-conteudo .sw-card-ftr { padding: 1.4rem 2.2rem; }
[sw-dropdown-mn] { border-radius: var(--t-raio-p); }
[sw-modal-box] { border-radius: var(--t-raio); }

/* ============ 4. MENU LATERAL ============ */
.app-nav { --sw-pri: var(--m-pri); --sw-grad-pri: var(--m-grad-pri); --sw-pri-glow: color-mix(in oklch, var(--m-pri) 25%, transparent); }

.app-rail {
  width: 5.8rem; height: calc(100dvh - 2.4rem);
  margin: 1.2rem 0 1.2rem 1rem; padding: 2rem 0;
  border-radius: var(--m-rail-raio); background: var(--m-rail);
  border: var(--m-rail-borda); box-shadow: var(--m-rail-sombra);
}
.app-rail__logo img { width: 4rem; filter: var(--m-logo-filtro); }
.app-rail__nav { gap: .55rem; margin-top: 4.8rem; padding-block: 1.8rem; }
.app-rail__item { width: 4rem; height: 4rem; border-radius: 1.15rem; color: var(--m-rail-icone); font-size: 2.4rem; transition: color 180ms ease; }
.app-rail__item.is-preview { color: var(--m-ativo-icone); }
.app-rail__ponte { width: calc(100% * 6 / 7); aspect-ratio: 2 / 3; height: auto; fill: var(--m-menu); transition: transform 320ms cubic-bezier(.22, 1, .36, 1), opacity 160ms ease; }

.app-submenu {
  height: calc(100dvh - 6rem); margin: 3rem 2rem 3rem 0; padding: 2rem 1rem 2rem 2rem;
  border-radius: 0 var(--m-menu-raio) var(--m-menu-raio) 0;
  background: var(--m-menu); color: var(--m-txt); box-shadow: var(--m-menu-sombra);
}
.app-submenu__topo small { color: var(--m-mudo); font-size: 1rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.app-submenu__topo h1 { margin: .35rem 0 2rem; color: var(--m-txt); font-size: 2rem; font-weight: 700; line-height: 1.05; }
.app-submenu__rolagem { padding-right: .5rem; scrollbar-width: thin; scrollbar-color: var(--m-borda) transparent; }
.app-submenu__texto { color: var(--m-mudo); font-size: 1.3rem; line-height: 1.5; }
.app-submenu__acoes { padding-bottom: 1.8rem; border-bottom: 1px solid var(--m-borda); }
.app-submenu [sw-btn] { font-family: var(--t-fonte); font-weight: 600; border-radius: var(--m-item-raio, 1.2rem); justify-content: center; }
.app-submenu [sw-btn]:not([sw-btn~="pri"]) { background: var(--m-hover-bg); border: 1px solid var(--m-borda); color: var(--m-txt); box-shadow: none; }
.app-submenu__lista { gap: .38rem; }
.app-submenu__item {
  position: relative; min-height: 3.8rem; padding: .65rem 1rem; border-radius: var(--m-item-raio, 1.2rem);
  color: var(--m-mudo); font-size: 1.45rem; font-weight: 600;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.app-submenu__item b { font-size: 1.05rem; }
.app-submenu__item:is(:hover, :focus-visible) { background: var(--m-hover-bg); color: var(--m-txt); transform: translateX(.35rem); }
.app-submenu__item[aria-current="page"] { background: var(--m-ativo-bg); color: var(--m-ativo-txt); box-shadow: var(--m-ativo-sombra, none); }
.app-submenu__rodape { gap: .85rem; padding-top: 2rem; border-top: 1px solid var(--m-borda); color: var(--m-mudo); font-size: 1.2rem; font-weight: 700; }
.app-submenu__rodape i { width: .8rem; height: .8rem; border-radius: 50%; background: var(--t-suc); box-shadow: 0 0 0 .42rem color-mix(in oklch, var(--t-suc) 20%, transparent); }
.app-submenu__fechar { width: 3.8rem; height: 3.8rem; margin: -.8rem -.2rem .6rem 0; border: 1px solid var(--m-borda); border-radius: 50%; background: transparent; color: var(--m-txt); }
.is-trocando :is(.app-submenu__topo, .app-submenu__area:not([hidden])) { animation: pecaLado 260ms cubic-bezier(.22, 1, .36, 1) both; }

/* ============ 5. TOPO E CONTEÚDO ============ */
.app-principal { padding-top: 1.2rem; }
.app-topo {
  position: sticky; top: 1.2rem; z-index: 10;
  padding: .6rem .6rem .6rem 1.8rem; border-radius: var(--t-raio);
  background: var(--t-topo-bg); border: var(--t-topo-borda); box-shadow: var(--t-topo-sombra);
  -webkit-backdrop-filter: var(--t-desfoque); backdrop-filter: var(--t-desfoque);
}
.app-topo__trilha { font-weight: 600; }
.app-icone, .app-perfil { border: var(--t-btn-borda); background: var(--t-btn-bg); box-shadow: var(--t-btn-sombra); color: var(--t-txt); border-radius: var(--t-raio-p); }
.app-icone { width: 4.2rem; height: 4.2rem; font-size: 1.9rem; transition: transform .2s; }
.app-icone:hover { transform: translateY(-1px); }
.app-icone__contador { min-width: 1.8rem; height: 1.8rem; padding: 0 .35rem; border-radius: 99px; background: var(--t-err); color: #fff; font-size: 1rem; font-weight: 700; line-height: 1; }
.app-perfil { min-height: 4.2rem; padding: .35rem 1.1rem .35rem .35rem; }
.app-perfil [sw-avt], .painel-form__titulo [sw-avt] { background: var(--t-grad-pri); color: var(--t-sobre-pri); }
/* Paginação: o marcador usa --sw-pri (= --t-pri); o SWCore pinta o número ativo de #fff fixo,
   que some quando a primária é clara (grafite à noite). Texto sobre a primária = --t-sobre-pri. */
.sw-pagination-it.is-act { color: var(--t-sobre-pri); }
.app-perfil__nome strong { font-size: 1.25rem; }
.app-perfil__nome small { color: var(--t-mudo); font-size: 1.05rem; }
.app-topo__telacheia span { position: relative; width: 1.7rem; height: 1.7rem; }
.app-topo__telacheia span::before, .app-topo__telacheia span::after {
  content: ""; position: absolute; inset: 0; border: 2px solid currentColor; border-radius: .25rem;
  clip-path: polygon(0 0, 42% 0, 42% 18%, 18% 18%, 18% 42%, 0 42%, 0 0, 58% 0, 100% 0, 100% 42%, 82% 42%, 82% 18%, 58% 18%);
}
.app-topo__telacheia span::after { transform: rotate(180deg); }
.app-fundo { background: rgba(0, 0, 0, .4); }

.pagina-topo { padding: 1.2rem .4rem .4rem; }
.pagina-topo__rotulo, .bloco__rotulo { color: var(--t-rotulo, var(--t-pri)); font-size: 1.05rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.pagina-topo__titulo { margin: .5rem 0 0; color: var(--t-txt); font-size: clamp(3rem, 3.4vw, 4.6rem); font-weight: var(--t-titulo-peso, 800); letter-spacing: -.03em; line-height: 1; }
.pagina-topo__texto { max-width: 64rem; margin: 1rem 0 0; color: var(--t-mudo); font-size: 1.5rem; }
.bloco__titulo { margin: .3rem 0 0; font-size: 1.85rem; font-weight: 700; letter-spacing: -.01em; }
.bloco__rodape small { color: var(--t-mudo); }

.indicador { min-height: 13rem; padding: 2rem 2.2rem; transition: transform .25s, box-shadow .25s; }
.indicador:hover { transform: translateY(-3px); }
.indicador__icone { width: 4.2rem; height: 4.2rem; border-radius: var(--t-raio-p); background: var(--t-icone-bg); color: var(--t-pri); font-size: 2rem; }
.indicador__rotulo { color: var(--t-mudo); font-size: 1.3rem; font-weight: 600; }
.indicador__valor { margin-top: 1rem; font-size: var(--t-valor-tam, 3.2rem); font-weight: var(--t-valor-peso, 800); letter-spacing: -.03em; line-height: 1; }
.indicador__variacao { justify-self: start; margin-top: 1.4rem; padding: .3rem .9rem; border-radius: 99px; background: var(--t-leve); color: var(--t-mudo); font-size: 1.15rem; font-weight: 700; }
.indicador__variacao[data-tipo="suc"] { color: var(--t-suc); background: color-mix(in oklch, var(--t-suc) 14%, transparent); }
.indicador__variacao[data-tipo="ale"] { color: var(--t-ale); background: color-mix(in oklch, var(--t-ale) 14%, transparent); }
.indicador__variacao[data-tipo="err"] { color: var(--t-err); background: color-mix(in oklch, var(--t-err) 14%, transparent); }

.lista { gap: .6rem; }
.lista__item { min-height: 6.2rem; padding: 1rem 1.2rem; border-radius: var(--t-raio-p); background: var(--t-leve); box-shadow: var(--t-leve-sombra, none); transition: transform .2s; }
.lista__item:hover { transform: translateX(3px); }
.lista__icone { width: 4.2rem; height: 4.2rem; border-radius: var(--t-raio-p); background: var(--t-grad-pri); color: var(--t-sobre-pri); font-size: 1.9rem; }
.lista__texto strong { font-weight: 700; }
.lista__texto small { margin-top: .2rem; color: var(--t-mudo); }

.grafico { height: 13rem; }
.grafico__cor-topo { stop-color: var(--t-pri); stop-opacity: .35; }
.grafico__cor-base { stop-color: var(--t-pri); stop-opacity: 0; }
.grafico__area { fill: url(#graficoDegrade); }
.grafico__linha { fill: none; stroke: var(--t-pri); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.grafico__grade { stroke: var(--t-borda); stroke-width: 1; vector-effect: non-scaling-stroke; }

.vazio__icone { display: grid; place-items: center; width: 7.2rem; height: 7.2rem; border-radius: var(--t-raio); font-size: 3.4rem; color: var(--t-pri); background: var(--t-icone-bg); }
.vazio__titulo { font-size: 1.8rem; font-weight: 700; }
.vazio__texto { color: var(--t-mudo); }

.carregando__rotulo { color: var(--t-mudo); font-size: 1.2rem; font-weight: 600; }

/* Botões (SWCore) */
:is(.app-principal, [sw-modal], [sw-panel]) [sw-btn] { font-family: var(--t-fonte); font-weight: 600; border-radius: var(--t-raio-p); }
:where(.app-principal, [sw-modal], [sw-panel], .app-submenu) [sw-btn] { min-height: 3.8rem; padding: .7rem 1.6rem; font-size: 1.35rem; border-width: 1px; gap: .6rem; }
:is(.app-principal, [sw-modal], [sw-panel]) [sw-btn~="pri"]:not([sw-btn~="ghost"]):not([sw-btn~="out"]) {
  background: var(--t-grad-pri); color: var(--t-sobre-pri); border-color: transparent; box-shadow: var(--t-pri-sombra);
}
:is(.app-principal, [sw-modal], [sw-panel]) [sw-btn]:not([sw-btn~="pri"]):not([sw-btn~="suc"]):not([sw-btn~="err"]):not([sw-btn~="ale"]):not([sw-btn~="inf"]):not([sw-btn~="ghost"]) {
  background: var(--t-btn-bg); border: var(--t-btn-borda); box-shadow: var(--t-btn-sombra); color: var(--t-txt);
}
:is(.app-principal, [sw-modal], [sw-panel]) [sw-btn~="ghost"] { color: var(--t-pri); }

/* ============ 6. FORMULÁRIO ============ */
.form-secao + .form-secao { border-top: 1px solid var(--t-borda); }
.form-secao__info h4 { font-size: 1.55rem; font-weight: 700; color: var(--t-txt); }
.form-secao__info p { margin-top: .5rem; color: var(--t-mudo); font-size: 1.3rem; line-height: 1.5; }
.form-secao__icone { width: 3.6rem; height: 3.6rem; border-radius: var(--t-raio-p); background: var(--t-icone-bg); color: var(--t-pri); font-size: 1.7rem; }
.form-acoes { border-top: 1px solid var(--t-borda); }

/* Campo base */
:is(.app-principal, [sw-modal], [sw-panel]) [sw-inp] {
  font-family: var(--t-fonte); border-radius: var(--t-raio-p);
  background-color: var(--t-campo);  /* background-color, não background: preserva o que o SWCore desenha por imagem */
  border: var(--t-campo-borda); box-shadow: var(--t-campo-sombra); color: var(--t-txt);
  transition: border-color .2s, box-shadow .2s;
}
:is(.app-principal, [sw-modal], [sw-panel]) [sw-inp]:focus { border-color: var(--t-pri); box-shadow: var(--t-campo-sombra), 0 0 0 .35rem color-mix(in oklch, var(--t-pri) 20%, transparent); }
.app-principal [sw-adn] { background: transparent; border-color: var(--t-borda); color: var(--t-mudo); }
:is(.app-principal, [sw-panel]) [sw-fle] { background: var(--t-leve); border-color: color-mix(in oklch, var(--t-pri) 35%, transparent); border-radius: var(--t-raio); }

/* Rótulo flutuante: fica no meio do campo e sobe PARA DENTRO dele ao focar/preencher */
:is(.app-principal, [sw-panel], [sw-modal]) [sw-fld~="float"] [sw-inp] { min-height: 5.4rem; padding: 2.2rem 1.4rem .7rem; }
:is(.app-principal, [sw-panel], [sw-modal]) [sw-fld~="float"] > label { top: 2.7rem; left: 1.4rem; padding: 0; font-size: 1.4rem; color: var(--t-mudo); background: transparent !important; }
:is(.app-principal, [sw-panel], [sw-modal]) [sw-fld~="float"] :is([sw-inp]:focus, [sw-inp]:not(:placeholder-shown), select[sw-inp]) ~ label {
  top: .8rem; transform: none; font-size: 1.1rem; font-weight: 600; letter-spacing: .02em;
}
:is(.app-principal, [sw-panel], [sw-modal]) [sw-fld~="float"] [sw-inp]:focus ~ label { color: var(--t-pri); }
:is(.app-principal, [sw-panel], [sw-modal]) [sw-fld~="float"] > label.is-req::after { content: " *"; color: var(--t-err); }
:is(.app-principal, [sw-panel], [sw-modal]) [sw-fld] .sw-fld-hint { margin-top: .4rem; color: var(--t-mudo); font-size: 1.15rem; }

/* Select: seta própria (cor do tema) — pula no hover, gira com mola ao abrir */
:is(.app-principal, [sw-modal], [sw-panel]) select[sw-inp] { appearance: none; -webkit-appearance: none; background-image: none; padding-right: 4.4rem; cursor: pointer; text-overflow: ellipsis; }
:is(.app-principal, [sw-modal], [sw-panel]) select[sw-inp]:hover { border-color: color-mix(in oklch, var(--t-pri) 45%, var(--t-borda)); }
:is(.app-principal, [sw-modal], [sw-panel]) :is([sw-fld]:has(> select[sw-inp]), .filtros__select) { position: relative; }
:is(.app-principal, [sw-modal], [sw-panel]) :is([sw-fld]:has(> select[sw-inp]), .filtros__select)::after {
  content: ""; position: absolute; right: 1.8rem; top: 2.7rem; width: .75rem; height: .75rem;
  border-right: 2px solid var(--t-mudo); border-bottom: 2px solid var(--t-mudo); border-radius: 0 0 .15rem 0;
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), border-color .2s;
}
:is(.app-principal, [sw-modal], [sw-panel]) .filtros__select::after { top: 50% !important; }  /* o :is acima tem especificidade maior */
:is(.app-principal, [sw-modal], [sw-panel]) :is([sw-fld]:has(> select[sw-inp]), .filtros__select):hover:not(:focus-within)::after { border-color: var(--t-txt); animation: setaPulo .9s ease-in-out infinite; }
:is(.app-principal, [sw-modal], [sw-panel]) :is([sw-fld]:has(> select[sw-inp]), .filtros__select):focus-within::after { border-color: var(--t-pri); transform: translateY(-25%) rotate(-135deg); }
@keyframes setaPulo { 0%, 100% { transform: translateY(-70%) rotate(45deg); } 50% { transform: translateY(-20%) rotate(45deg); } }

/* Lista de opções (Chrome/Edge com base-select; demais navegadores ficam com a lista nativa) */
:is(.app-principal, [sw-modal], [sw-panel]) select[sw-inp] option { background: var(--t-bg); color: var(--t-txt); }
@supports (appearance: base-select) {
  :is(.app-principal, [sw-modal], [sw-panel]) :is(select[sw-inp], select[sw-inp]::picker(select)) { appearance: base-select; }
  :is(.app-principal, [sw-modal], [sw-panel]) select[sw-inp]::picker-icon { display: none; }
  :is(.app-principal, [sw-modal], [sw-panel]) select[sw-inp]::picker(select) {
    margin-block: .6rem; padding: .6rem; border: 1px solid var(--t-borda); border-radius: var(--t-raio-p);
    background: var(--t-bg); color: var(--t-txt); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .35);
    opacity: 0; transform: translateY(-.6rem) scale(.98);
    transition: opacity .18s ease, transform .22s cubic-bezier(.22, 1, .36, 1), display .22s allow-discrete, overlay .22s allow-discrete;
  }
  :is(.app-principal, [sw-modal], [sw-panel]) select[sw-inp]:open::picker(select) { opacity: 1; transform: none; }
  @starting-style { :is(.app-principal, [sw-modal], [sw-panel]) select[sw-inp]:open::picker(select) { opacity: 0; transform: translateY(-.6rem) scale(.98); } }
  :is(.app-principal, [sw-modal], [sw-panel]) select[sw-inp] option {
    display: flex; align-items: center; gap: 1rem; min-height: 3.8rem; padding: .8rem 1.2rem;
    border-radius: calc(var(--t-raio-p) * .7); background: transparent; font-size: 1.4rem; cursor: pointer; transition: background .15s, color .15s;
  }
  :is(.app-principal, [sw-modal], [sw-panel]) select[sw-inp] option:is(:hover, :focus-visible) { background: var(--t-leve); outline: none; }
  :is(.app-principal, [sw-modal], [sw-panel]) select[sw-inp] option:checked { background: color-mix(in oklch, var(--t-pri) 12%, transparent); color: var(--t-pri); font-weight: 600; }
  :is(.app-principal, [sw-modal], [sw-panel]) select[sw-inp] option::checkmark { order: 1; margin-left: auto; content: "✓"; color: var(--t-pri); font-weight: 700; }
  :is(.app-principal, [sw-modal], [sw-panel]) select[sw-inp] option[value=""] { color: var(--t-mudo); }
}

/* Editor de texto (SWEditor) */
.form-editor__rotulo { padding-left: .2rem; color: var(--t-mudo); font-size: 1.2rem; font-weight: 600; letter-spacing: .02em; }
:is(.app-principal, [sw-modal], [sw-panel]) .sw-editor-box {
  border: var(--t-campo-borda); border-radius: var(--t-raio-p); background-color: var(--t-campo);
  box-shadow: var(--t-campo-sombra); font-family: var(--t-fonte); transition: border-color .2s, box-shadow .2s;
}
:is(.app-principal, [sw-modal], [sw-panel]) .sw-editor-box:focus-within { border-color: var(--t-pri); box-shadow: var(--t-campo-sombra), 0 0 0 .35rem color-mix(in oklch, var(--t-pri) 20%, transparent); }
:is(.app-principal, [sw-modal], [sw-panel]) .sw-editor-tb { gap: .4rem; padding: .6rem .8rem; background: var(--t-leve); border-bottom: 1px solid var(--t-borda); }
:is(.app-principal, [sw-modal], [sw-panel]) .sw-editor-grp { gap: .2rem; border-right-color: var(--t-borda); }
:is(.app-principal, [sw-modal], [sw-panel]) .sw-editor-btn { width: 3.2rem; height: 3.2rem; border-radius: calc(var(--t-raio-p) * .7); color: var(--t-mudo); }
:is(.app-principal, [sw-modal], [sw-panel]) .sw-editor-btn:hover { background: var(--t-campo); color: var(--t-txt); }
:is(.app-principal, [sw-modal], [sw-panel]) .sw-editor-btn.is-act { background: color-mix(in oklch, var(--t-pri) 14%, transparent); border-color: transparent; color: var(--t-pri); }
:is(.app-principal, [sw-modal], [sw-panel]) .sw-editor-fmt { background: var(--t-campo); border: 1px solid var(--t-borda); border-radius: calc(var(--t-raio-p) * .7); color: var(--t-txt); padding: .5rem .9rem; }
:is(.app-principal, [sw-modal], [sw-panel]) .sw-editor-ed { padding: 1.4rem 1.6rem; color: var(--t-txt); font-size: 1.45rem; line-height: 1.7; }
:is(.app-principal, [sw-modal], [sw-panel]) .sw-editor-ed[placeholder]:empty::before { color: var(--t-mudo); }
:is(.app-principal, [sw-modal], [sw-panel]) :is(.sw-editor-stat, .sw-editor-rz) { background: var(--t-leve); border-top-color: var(--t-borda); color: var(--t-mudo); }
.sw-editor-box.sw-editor-fullscreen { background-color: var(--t-bg) !important; }

/* Validação: mensagem embaixo do campo (ocupa espaço, não sobrepõe) + campo pintado.
   O sw-valid marca .is-err/.is-ok no próprio input; exemplos estáticos marcam no [sw-fld]. Cobre os dois. */
:is(.app-principal, [sw-panel], [sw-modal]) :is(.sw-fld-msg, .sw-fld-ok) {
  position: static; justify-content: flex-start; text-align: left; white-space: normal;
  margin-top: 0; padding-left: .2rem; font-size: 1.15rem; font-weight: 600;
}
:is(.app-principal, [sw-panel], [sw-modal]) .sw-fld-msg { color: var(--t-err); }
:is(.app-principal, [sw-panel], [sw-modal]) :is([sw-inp].is-err, [sw-fld].is-err [sw-inp]) { border: 1px solid var(--t-err) !important; background-color: color-mix(in oklch, var(--t-err) 7%, var(--t-campo)); }
:is(.app-principal, [sw-panel], [sw-modal]) :is([sw-inp].is-err, [sw-fld].is-err [sw-inp]):focus { box-shadow: 0 0 0 .35rem color-mix(in oklch, var(--t-err) 20%, transparent); }
:is(.app-principal, [sw-panel], [sw-modal]) :is([sw-inp].is-err ~ label, [sw-fld].is-err > label) { color: var(--t-err) !important; }
:is(.app-principal, [sw-panel], [sw-modal]) :is([sw-inp].is-ok, [sw-fld].is-ok [sw-inp]) { border: 1px solid var(--t-suc) !important; }

/* ============ 7. PAINÉIS ============ */
.painel-form__topo { padding: 2.4rem 2.8rem 1.6rem; border-bottom: 0 !important; }
.painel-form__titulo h3 { font-size: 2.2rem; font-weight: var(--t-titulo-peso, 700); letter-spacing: -.02em; }
.painel-form__titulo p { margin-top: .3rem; color: var(--t-mudo); font-size: 1.3rem; }
.painel-form__icone { width: 4.8rem; height: 4.8rem; border-radius: var(--t-raio-p); background: var(--t-grad-pri); color: var(--t-sobre-pri); font-size: 2.2rem; box-shadow: var(--t-pri-sombra); }
.painel-form__atalhos { padding: 0 2.8rem 1.6rem; border-bottom: 1px solid var(--t-borda); }
.painel-form__atalhos a { padding: .6rem 1.4rem; border-radius: 99px; background: var(--t-leve); color: var(--t-mudo); font-size: 1.25rem; font-weight: 600; transition: background .2s, color .2s; }
.painel-form__atalhos a:hover { background: var(--t-icone-bg); color: var(--t-txt); }
.painel-form__corpo { padding: .4rem 2.8rem 2.4rem !important; scrollbar-width: thin; scrollbar-color: var(--t-borda) transparent; }
.form--painel .form-secao { padding-block: 2.2rem; }
.form--painel .form-secao__info h4 { font-size: 1.5rem; }
.form--painel .form-secao__info p { margin-top: .15rem; font-size: 1.2rem; }
.painel-form__rodape { padding: 1.6rem 2.8rem !important; border-top: 1px solid var(--t-borda); background: var(--t-sup); }
.painel-form__rodape small { color: var(--t-mudo); font-size: 1.2rem; }

/* Painel de visualização (somente leitura) */
.painel-ver__dados dt { color: var(--t-mudo); font-size: 1.1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.painel-ver__dados dd { color: var(--t-txt); font-size: 1.45rem; }
.painel-ver__texto { color: var(--t-txt); font-size: 1.45rem; line-height: 1.7; }

/* ============ 8. TABELA, BADGES, ALERTAS, PROGRESSO, TIMELINE ============ */
.app-principal .tbl { --tb-row-bg: transparent; --tb-row-alt: transparent; --tb-row-hvr: var(--t-leve); background: transparent; }
.app-principal .tbl table { background: transparent; }
.app-principal .tbl th { padding: .9rem 1.2rem; background: transparent; color: var(--t-mudo); font-size: 1.1rem; font-weight: 700; letter-spacing: .08em; white-space: nowrap; border-color: var(--t-borda); }
.app-principal .tbl td { padding: .45rem 1.2rem; background: transparent; color: var(--t-txt); font-size: 1.35rem; line-height: 1.3; white-space: nowrap; border-color: var(--t-borda); }
.app-principal .tbl [sw-badge] { font-size: 1.05rem; padding-block: .15rem; }
.app-principal .tabela__botoes [sw-btn] { width: 3.2rem; height: 3.2rem; min-height: 3.2rem; padding: 0; font-size: 1.6rem; color: var(--t-mudo); border-radius: var(--t-raio-p); }
.app-principal .tabela__botoes [sw-btn]:hover { color: var(--t-pri); background: var(--t-leve); }
.app-principal .tabela__botoes .tabela__excluir:hover { color: var(--t-err); background: color-mix(in oklch, var(--t-err) 12%, transparent); }

:is(.app-principal, [sw-panel]) [sw-badge] { border-radius: 99px; font-weight: 700; }
.app-principal [sw-alert] { background: var(--t-leve); border-radius: var(--t-raio-p); box-shadow: var(--t-leve-sombra, none); }
.app-principal [sw-tabs-nav] { border-color: var(--t-borda); }
.app-principal [sw-prg] { background: var(--t-leve); border-radius: 99px; overflow: hidden; box-shadow: var(--t-campo-sombra); }
.app-principal [sw-prg-bar] { background: var(--t-grad-pri); border-radius: 99px; }

:is(.app-principal, [sw-panel]) .sw-tml-ttl { color: var(--t-txt); font-weight: 600; }
:is(.app-principal, [sw-panel]) :is(.sw-tml-tme, .sw-tml-txt) { color: var(--t-mudo); }

/* Tabela em cartões (celular/tablet): visual do cartão vem do tema */
@container (max-width: 760px) {
  :root .app-principal .tbl tr { background: var(--t-leve); border: 1px solid var(--t-borda); border-radius: var(--t-raio-p); }
  :root .app-principal .tbl td::before { color: var(--t-mudo); }
}

/* ============ 9. MOVIMENTO ============ */
@media (prefers-reduced-motion: no-preference) {
  .app-conteudo > * { animation: pecaSobe .5s cubic-bezier(.22, 1, .36, 1) both; }
  .app-conteudo > *:nth-child(2) { animation-delay: 60ms; }
  .app-conteudo > *:nth-child(3) { animation-delay: 120ms; }
  .app-conteudo > *:nth-child(n+4) { animation-delay: 180ms; }
}
@keyframes pecaSobe { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: none; } }
@keyframes pecaLado { from { opacity: 0; transform: translateX(-.8rem); } to { opacity: 1; transform: none; } }

/* ============ 10. RESPONSIVO ============ */
@media (max-width: 920px) { .app-submenu { margin-right: 0; } .app-topo { top: .8rem; } }
@media (max-width: 700px) {
  .app-topo { padding-left: 1rem; }
  :is(.painel-form__topo, .painel-form__rodape) { padding-inline: 1.8rem !important; }
  .painel-form__atalhos { padding-inline: 1.8rem; }
  .painel-form__corpo { padding-inline: 1.8rem !important; }
}
@media (max-width: 420px) { .app-rail { margin-left: .6rem; } .app-submenu { margin-block: 1.2rem; height: calc(100dvh - 2.4rem); } }


/* ==================== 3. TEMA ==================== */

/* ----- tema: grafite ----- */

/* TEMPLATE OFICIAL Nº 1 — Grafite
   Monocromático e suave: dia claro com cards e submenu brancos, noite grafite com vidro.
   Números grandes e finos, bordas pontilhadas, ícones soltos (sem caixa), cor só nos status.
   Arquivo independente (não depende de outros temas). Pacote para projetos: node build.js grafite */
/* ============ TOKENS — DIA ============ */
:root, html[sw-theme="light"] {
  --t-fonte: "Inter", system-ui, -apple-system, sans-serif;
  --t-bg: #d4d4d4;
  --t-cena:
    radial-gradient(90% 70% at 25% 0%, #eeeeee 0%, transparent 60%),
    radial-gradient(70% 60% at 100% 100%, #c2c2c2 0%, transparent 60%),
    #d7d7d7;
  --t-txt: #2b2b2b;
  --t-mudo: #6b6b6b;
  --t-rotulo: #6b6b6b;
  --t-borda: rgba(0, 0, 0, .06);
  --t-pri: #3f3f3f;
  --t-grad-pri: linear-gradient(180deg, #565656, #3f3f3f);
  --t-sobre-pri: #f5f5f5;
  --t-pri-sombra: 0 8px 18px -10px rgba(0, 0, 0, .35);
  --t-suc: #2f8a4a;
  --t-ale: #8a5a00;
  --t-err: #c2453d;
  --t-sup: #ffffff;                                   /* cards brancos */
  --t-sup-borda: 1px solid rgba(0, 0, 0, .05);
  --t-sup-sombra: 0 1px 2px rgba(0, 0, 0, .03), 0 14px 36px -24px rgba(0, 0, 0, .2);
  --t-desfoque: none;
  --t-raio: 1.8rem;
  --t-raio-p: 1.2rem;
  --t-topo-bg: rgba(255, 255, 255, .75);
  --t-topo-borda: 1px solid rgba(0, 0, 0, .05);
  --t-topo-sombra: 0 10px 28px -20px rgba(0, 0, 0, .3);
  --t-campo: #f5f5f5;
  --t-campo-borda: 1px dashed rgba(0, 0, 0, .18);
  --t-campo-sombra: none;
  --t-btn-bg: #ffffff;
  --t-btn-borda: 1px dashed rgba(0, 0, 0, .18);
  --t-btn-sombra: none;
  --t-leve: #f3f3f3;
  --t-icone-bg: #f0f0f0;
  --t-titulo-peso: 500;
  --t-valor-peso: 300;
  --t-valor-tam: 5.2rem;

  --m-rail: #484848;
  --m-rail-borda: 0;
  --m-rail-sombra: none;         /* sem sombra: ela cairia no submenu e separaria da ponte */
  --m-rail-raio: 1.8rem;
  --m-rail-icone: #f4f4f4;
  --m-ativo-icone: #3f3f3f;
  --m-logo-filtro: brightness(0) invert(1);
  --m-menu: #ffffff;             /* submenu branco (a ponte usa a mesma cor) */
  --m-menu-sombra: 12px 0 30px -20px rgba(0, 0, 0, .18);
  --m-menu-raio: 1.8rem;
  --m-txt: #2b2b2b;
  --m-mudo: #6b6b6b;
  --m-hover-bg: #f5f5f5;
  --m-ativo-bg: #efefef;
  --m-ativo-txt: #2b2b2b;
  --m-ativo-sombra: 0 6px 16px -10px rgba(0, 0, 0, .3);
  --m-pri: #3f3f3f;
  --m-grad-pri: linear-gradient(180deg, #565656, #3f3f3f);
  --m-borda: rgba(0, 0, 0, .08);
}

/* ============ TOKENS — NOITE ============ */
html[sw-theme="dark"] {
  --t-bg: #0f0f0f;
  --t-cena:
    radial-gradient(90% 70% at 25% 0%, #2b2b2b 0%, transparent 60%),
    radial-gradient(70% 60% at 100% 100%, #1a1a1a 0%, transparent 60%),
    #0f0f0f;
  --t-txt: #f5f5f5;
  --t-mudo: #989898;
  --t-rotulo: #989898;
  --t-borda: rgba(255, 255, 255, .1);
  --t-pri: #f5f5f5;
  --t-grad-pri: linear-gradient(180deg, #ffffff, #d1d1d1);
  --t-sobre-pri: #111111;
  --t-pri-sombra: 0 10px 24px -12px rgba(255, 255, 255, .25);
  --t-suc: #4cd964;
  --t-ale: #ffcc00;
  --t-err: #ff6961;
  --t-sup: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  --t-sup-borda: 1px solid rgba(255, 255, 255, .1);
  --t-sup-sombra: 0 24px 50px -24px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
  --t-desfoque: blur(30px) saturate(115%);
  --t-topo-bg: rgba(255, 255, 255, .04);
  --t-topo-borda: 1px solid rgba(255, 255, 255, .08);
  --t-topo-sombra: 0 12px 30px -18px rgba(0, 0, 0, .4);
  --t-campo: rgba(255, 255, 255, .03);
  --t-campo-borda: 1px dashed rgba(255, 255, 255, .2);
  --t-btn-bg: rgba(255, 255, 255, .04);
  --t-btn-borda: 1px dashed rgba(255, 255, 255, .2);
  --t-leve: rgba(255, 255, 255, .04);
  --t-icone-bg: rgba(255, 255, 255, .06);

  --m-rail: #000000;
  --m-rail-icone: #e5e5e5;
  --m-ativo-icone: #f5f5f5;
  --m-menu: #1c1c1c;
  --m-menu-sombra: 12px 0 30px -18px rgba(0, 0, 0, .9);
  --m-txt: #f5f5f5;
  --m-mudo: #989898;
  --m-hover-bg: rgba(255, 255, 255, .05);
  --m-ativo-bg: rgba(255, 255, 255, .1);
  --m-ativo-txt: #f5f5f5;
  --m-ativo-sombra: inset 0 1px 0 rgba(255, 255, 255, .08);
  --m-pri: #484848;
  --m-grad-pri: linear-gradient(180deg, #5a5a5a, #3a3a3a);
  --m-borda: rgba(255, 255, 255, .08);
}

/* ============ MEDIDAS ============ */
:root { --app-nav-w: 31rem; }  /* submenu mais largo: é a central da área */

/* ============ ASSINATURA ============ */
/* Submenu começa exatamente na cor da ponte (mesma peça) e escurece bem de leve no fim.
   srgb: em oklch um cinza tingido desvia de tom. */
.app-submenu { border: 0; background: linear-gradient(90deg, var(--m-menu) 0%, var(--m-menu) 40%, color-mix(in srgb, var(--m-menu) 94%, #000) 100%); }
.app-submenu [sw-btn]:not([sw-btn~="pri"]) { border-style: dashed; background: transparent; }

/* Indicadores: ícone gigante, solto e transparente, saindo pela lateral do card */
.indicador { overflow: hidden !important; isolation: isolate; }
.indicador > *:not(.indicador__icone) { position: relative; z-index: 1; }
.indicador__icone {
  z-index: 0; top: 50%; right: -2.4rem; width: auto; height: auto;
  background: none; border: 0; box-shadow: none; border-radius: 0;
  font-size: 13rem; line-height: 1; color: var(--t-txt); opacity: .08;
  transform: translateY(-50%) rotate(-12deg);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .5s;
  pointer-events: none;
}
.indicador:hover .indicador__icone { opacity: .13; transform: translateY(-50%) rotate(-4deg) scale(1.08); }
.indicador:nth-child(4) .indicador__icone { color: var(--t-err); opacity: .1; }
.indicador__valor { letter-spacing: -.05em; }
.indicador__variacao { border: 1px dashed currentColor; background: transparent !important; }

/* Tipografia fina e grande, bordas pontilhadas */
.pagina-topo__titulo { letter-spacing: -.045em; }
.bloco__titulo { font-weight: 500; font-size: 2.2rem; }
.app-conteudo .sw-card-hdr { border-style: dashed; border-width: 0 0 1px; border-radius: var(--t-raio) var(--t-raio) 0 0; }
.app-conteudo .sw-card-ftr { border-style: dashed; border-width: 1px 0 0; border-radius: 0 0 var(--t-raio) var(--t-raio); }
.grafico__cor-topo { stop-opacity: .18; }
.grafico__linha { stroke-width: 1.5; }

/* Ícones soltos: botões só de ícone, ícones de lista e de seção — sem caixa, só o ícone, maior */
.app-principal .tabela__botoes [sw-btn],
.app-principal [sw-btn~="sqr"][sw-btn~="ghost"],
.app-topo .app-icone {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  color: var(--t-mudo); transition: color .2s, transform .2s;
}
.app-principal .tabela__botoes { gap: 0; }
.app-principal .tabela__botoes [sw-btn] { width: 3.4rem; height: 3.4rem; font-size: 2.1rem; }
.app-principal [sw-btn~="sqr"][sw-btn~="ghost"] { font-size: 2.2rem; }
.app-topo .app-icone { font-size: 2.4rem; color: var(--t-txt); }
.app-topo .app-icone.app-topo__telacheia span { width: 2rem; height: 2rem; }
.app-principal .tabela__botoes [sw-btn]:hover,
.app-principal [sw-btn~="sqr"][sw-btn~="ghost"]:hover,
.app-topo .app-icone:hover { color: var(--t-pri); transform: scale(1.12); }
.app-principal .tabela__botoes .tabela__excluir:hover { color: var(--t-err); }

.lista__icone, .form-secao__icone {
  width: 3.2rem; height: 3.2rem; background: transparent !important; border: 0 !important;
  box-shadow: none !important; border-radius: 0; color: var(--t-txt); font-size: 2.6rem;
}
.form-secao__icone { font-size: 2.4rem; color: var(--t-mudo); }

/* ============ CINZAS VARIADOS (só neutros; cor apenas nos status) ============ */
:root, html[sw-theme="light"] {
  --g-50: #fafafa; --g-100: #f2f2f2; --g-150: #ebebeb; --g-200: #e3e3e3; --g-300: #cfcfcf;
  --g-400: #b5b5b5; --g-500: #8f8f8f; --g-600: #6b6b6b; --g-700: #4d4d4d; --g-800: #333333;
  /* fundo em camadas de cinza: claro no alto, médio no meio, mais escuro embaixo */
  --t-cena:
    radial-gradient(70% 55% at 18% 0%, #f7f7f7 0%, transparent 62%),
    radial-gradient(55% 45% at 85% 12%, #e2e2e2 0%, transparent 65%),
    radial-gradient(60% 55% at 55% 60%, #cdcdcd 0%, transparent 70%),
    radial-gradient(70% 60% at 100% 100%, #b4b4b4 0%, transparent 65%),
    linear-gradient(180deg, #dcdcdc 0%, #cbcbcb 100%);
  --t-leve: linear-gradient(180deg, #f7f7f7, #efefef);
  --m-rail: linear-gradient(180deg, #5a5a5a 0%, #454545 55%, #333333 100%);
}
html[sw-theme="dark"] {
  --g-50: #1f1f1f; --g-100: #262626; --g-150: #2c2c2c; --g-200: #333333; --g-300: #3d3d3d;
  --g-400: #525252; --g-500: #6e6e6e; --g-600: #8c8c8c; --g-700: #b0b0b0; --g-800: #d6d6d6;
  --t-cena:
    radial-gradient(70% 55% at 18% 0%, #303030 0%, transparent 62%),
    radial-gradient(55% 45% at 85% 12%, #242424 0%, transparent 65%),
    radial-gradient(60% 55% at 55% 60%, #1b1b1b 0%, transparent 70%),
    radial-gradient(70% 60% at 100% 100%, #0a0a0a 0%, transparent 65%),
    linear-gradient(180deg, #161616 0%, #0c0c0c 100%);
  --t-leve: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .025));
  --m-rail: linear-gradient(180deg, #262626 0%, #121212 60%, #000000 100%);
}

/* Cabeçalho da tabela e rodapé dos cards num cinza mais fechado; linha zebrada bem sutil */
.app-principal .tbl thead th { background: var(--g-100); }
.app-principal .tbl thead th:first-child { border-radius: var(--t-raio-p) 0 0 var(--t-raio-p); }
.app-principal .tbl thead th:last-child { border-radius: 0 var(--t-raio-p) var(--t-raio-p) 0; }
.app-principal .tbl tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--g-50) 70%, transparent); }
.app-principal .tbl tbody tr:hover td { background: var(--g-150); }
.app-conteudo .sw-card-ftr { background: linear-gradient(180deg, transparent, var(--g-50)); }

/* Itens da lista com degradê de cinza e realce ao passar */
.lista__item { background: var(--t-leve); border: 1px solid var(--g-150); }
.lista__item:hover { border-color: var(--g-300); }
.lista__icone { color: var(--g-700); }

/* Gráfico, progresso e topo em escala de cinza */
.grafico__linha { stroke: var(--g-700); }
.grafico__cor-topo { stop-color: var(--g-500); stop-opacity: .35; }
.grafico__cor-base { stop-color: var(--g-400); stop-opacity: 0; }
.grafico__grade { stroke: var(--g-200); }
.app-principal [sw-prg] { background: var(--g-150); }
.app-principal [sw-prg-bar] { background: linear-gradient(90deg, var(--g-500), var(--g-800)); }
.app-topo { background: linear-gradient(180deg, color-mix(in srgb, var(--g-50) 80%, transparent), color-mix(in srgb, var(--g-100) 70%, transparent)); }
.app-conteudo .indicador { background: linear-gradient(160deg, var(--t-sup) 55%, var(--g-100) 100%); }  /* .app-conteudo: vence a regra geral dos cards */
.indicador__icone { color: var(--g-600); }