/* =====================================================================
   SFX — Sistema Integrado de Gestão
   Folha de estilo única. Design "claro e moderno":
   fundo claro, superfícies brancas, cantos arredondados, sombras suaves.
   Sem dependências, sem build, sem CDN.
   ===================================================================== */

/* ------------------------------------------------------------ tokens */
:root {
  color-scheme: light;

  /* marca */
  --marca:        #0f6b8a;
  --marca-escura: #0b4f66;
  --marca-clara:  #3f97b6;
  --marca-fraca:  #e6f2f7;
  --marca-contorno:#bfdde8;

  /* estados */
  --sucesso:      #12805c;
  --sucesso-fraca:#e4f4ee;
  --atencao:      #b3730b;
  --atencao-fraca:#fdf2df;
  --erro:         #c0392f;
  --erro-fraca:   #fdeceb;
  --info:         #0f6b8a;
  --info-fraca:   #e6f2f7;

  /* superfícies */
  --fundo:        #f6f8fa;
  --fundo-2:      #eef2f5;
  --superficie:   #ffffff;
  --superficie-2: #f9fbfc;
  --borda:        #e3e9ee;
  --borda-forte:  #cfd9e1;

  /* texto */
  --texto:        #14212b;
  --texto-2:      #536470;
  --texto-3:      #7d8d99;

  /* formas */
  --r-p: 8px;
  --r:   12px;
  --r-g: 16px;
  --r-pill: 999px;

  --sombra-1: 0 1px 2px rgba(16, 35, 47, .05), 0 1px 3px rgba(16, 35, 47, .04);
  --sombra-2: 0 2px 6px rgba(16, 35, 47, .06), 0 8px 20px rgba(16, 35, 47, .05);
  --sombra-3: 0 10px 30px rgba(16, 35, 47, .12), 0 30px 60px rgba(16, 35, 47, .10);

  --lateral-l: 248px;
  --topo-h: 62px;

  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --marca:        #3ea3c6;
    --marca-escura: #2a89aa;
    --marca-clara:  #79c8e2;
    --marca-fraca:  #12303b;
    --marca-contorno:#1d4b5c;

    --sucesso:      #3fbf90;
    --sucesso-fraca:#10312a;
    --atencao:      #dfa73f;
    --atencao-fraca:#33280f;
    --erro:         #ef6f63;
    --erro-fraca:   #3a1a19;
    --info:         #3ea3c6;
    --info-fraca:   #12303b;

    --fundo:        #0d1519;
    --fundo-2:      #111b21;
    --superficie:   #16222a;
    --superficie-2: #1a2830;
    --borda:        #25353f;
    --borda-forte:  #344854;

    --texto:        #e7eef2;
    --texto-2:      #a3b4bf;
    --texto-3:      #7c8e9a;

    --sombra-1: 0 1px 2px rgba(0,0,0,.4);
    --sombra-2: 0 2px 6px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.3);
    --sombra-3: 0 10px 30px rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.4);
  }
}

/* ------------------------------------------------------------ base */
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--marca); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 24px; }
h2 { font-size: 19px; }
h3 { font-size: 15px; }
h4 { font-size: 13.5px; }
p { color: var(--texto-2); }

::selection { background: var(--marca-fraca); color: var(--texto); }

* { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--texto-3); background-clip: content-box; }

.num, .valor, td.num, th.num, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ícones */
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico.p { width: 15px; height: 15px; }
.ico.g { width: 22px; height: 22px; }

/* =====================================================================
   LOGIN
   ===================================================================== */
.login-tela {
  min-height: 100%;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--fundo);
}
.login-arte {
  position: relative;
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  background:
    radial-gradient(1100px 600px at 12% 8%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(150deg, #0f6b8a 0%, #0b4f66 55%, #083a4d 100%);
  overflow: hidden;
}
.login-arte::after {
  content: '';
  position: absolute;
  right: -140px; bottom: -160px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
}
.login-marca {
  display: inline-flex; align-items: center; gap: 13px;
  font-size: 27px; font-weight: 700; letter-spacing: .06em;
  margin-bottom: 26px; position: relative; z-index: 1;
}
.login-marca .sigla {
  width: 52px; height: 52px; border-radius: 14px; flex: none;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  display: grid; place-items: center; font-size: 21px; letter-spacing: .04em;
}
.login-marca .texto-marca { display: flex; flex-direction: column; line-height: 1.15; }
.login-marca .texto-marca small {
  font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
  color: rgba(255,255,255,.72); text-transform: none; margin-top: 3px;
}
.login-arte h2 { font-size: 30px; max-width: 15ch; margin-bottom: 14px; position: relative; z-index: 1; }
.login-arte p { color: rgba(255,255,255,.82); max-width: 46ch; font-size: 14.5px; position: relative; z-index: 1; }
.login-arte ul { list-style: none; margin-top: 30px; display: grid; gap: 13px; position: relative; z-index: 1; }
.login-arte li {
  display: flex; gap: 11px; align-items: flex-start;
  color: rgba(255,255,255,.9); font-size: 14px; max-width: 44ch;
}
.login-arte li svg { margin-top: 2px; opacity: .85; }

.login-painel {
  display: flex; flex-direction: column; justify-content: center;
  padding: 48px 6vw;
  background: var(--fundo);
}
.login-painel .caixa {
  width: 100%; max-width: 400px; margin: 0 auto;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-g);
  box-shadow: var(--sombra-2);
  padding: 30px 28px;
}
.login-painel h1 { font-size: 21px; margin-bottom: 5px; }
.login-painel .sub { color: var(--texto-2); font-size: 13.5px; margin-bottom: 22px; }
.login-rodape {
  margin-top: 20px; font-size: 13px; color: var(--texto-2);
  text-align: center; max-width: 400px; margin-left: auto; margin-right: auto;
}

@media (max-width: 940px) {
  .login-tela { grid-template-columns: 1fr; }
  .login-arte { padding: 30px 22px 26px; }
  .login-arte h2 { font-size: 22px; margin-bottom: 8px; }
  .login-arte ul { display: none; }
  .login-arte p { font-size: 13.5px; }
  .login-marca { font-size: 22px; margin-bottom: 18px; }
  .login-marca .sigla { width: 42px; height: 42px; font-size: 17px; }
  .login-painel { padding: 22px 16px 40px; }
  .login-painel .caixa { padding: 22px 18px; box-shadow: var(--sombra-1); }
}

/* =====================================================================
   ESTRUTURA DO PAINEL
   ===================================================================== */
.app { display: none; min-height: 100%; }
.app.ativo { display: block; }

/* --------------------------------------------------- barra lateral */
.lateral {
  position: fixed; inset: 0 auto 0 0;
  width: var(--lateral-l);
  background: var(--superficie);
  border-right: 1px solid var(--borda);
  display: flex; flex-direction: column;
  z-index: 40;
}
.lateral-marca {
  display: flex; align-items: center; gap: 11px;
  height: var(--topo-h); padding: 0 18px;
  border-bottom: 1px solid var(--borda);
  flex: none;
}
.marca-sigla {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: linear-gradient(140deg, var(--marca), var(--marca-escura));
  color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 14px; letter-spacing: .04em;
}
.lateral-marca .nome { display: flex; flex-direction: column; min-width: 0; }
.lateral-marca .nome b { font-size: 14px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral-marca .nome span {
  font-size: 10.5px; color: var(--texto-3); text-transform: uppercase;
  letter-spacing: .07em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.lateral-nav { flex: 1; overflow-y: auto; padding: 12px 10px 14px; }
.lateral-grupo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--texto-3); font-weight: 650;
  padding: 14px 8px 6px;
}
.lateral-nav .lateral-grupo:first-child { padding-top: 2px; }
.lateral-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px; margin-bottom: 1px;
  border: 0; border-radius: var(--r-p);
  background: transparent; color: var(--texto-2);
  font: inherit; font-size: 13.5px; text-align: left;
  cursor: pointer; transition: background .12s, color .12s;
}
.lateral-item svg { opacity: .75; }
.lateral-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-item:hover { background: var(--fundo-2); color: var(--texto); }
.lateral-item.ativo { background: var(--marca-fraca); color: var(--marca-escura); font-weight: 620; }
.lateral-item.ativo svg { opacity: 1; }
@media (prefers-color-scheme: dark) { .lateral-item.ativo { color: var(--marca-clara); } }

.lateral-rodape {
  flex: none; padding: 12px 16px; border-top: 1px solid var(--borda);
  font-size: 11.5px; color: var(--texto-3); line-height: 1.6;
}

/* --------------------------------------------------- topo */
.topo {
  position: fixed; top: 0; right: 0; left: var(--lateral-l);
  height: var(--topo-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  z-index: 30;
}
.topo-menu { display: none; }
.topo-marca-mobile { display: none; }

/* busca global */
.busca-global { position: relative; flex: 1; max-width: 420px; }
.campo-busca {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 10px 0 11px;
  border: 1px solid var(--borda); border-radius: var(--r-p);
  background: var(--fundo-2);
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.campo-busca:focus-within {
  background: var(--superficie); border-color: var(--marca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 16%, transparent);
}
.campo-busca input {
  flex: 1; border: 0; background: transparent; padding: 0; height: 100%;
  font: inherit; font-size: 13.5px; color: var(--texto); min-height: 0;
}
.campo-busca input:focus { outline: 0; box-shadow: none; }
.campo-busca > svg { color: var(--texto-3); }
.campo-busca .atalho {
  font-size: 11px; color: var(--texto-3); border: 1px solid var(--borda-forte);
  border-radius: 5px; padding: 0 6px; font-family: var(--fonte-mono); line-height: 17px;
}
.busca-resultados {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r); box-shadow: var(--sombra-3);
  max-height: 420px; overflow-y: auto; padding: 6px; z-index: 60;
}
.busca-resultados .grupo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--texto-3); padding: 8px 10px 4px; font-weight: 650;
}
.busca-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--r-p);
  background: transparent; color: var(--texto); font: inherit; text-align: left;
  cursor: pointer;
}
.busca-item:hover, .busca-item.marcado { background: var(--marca-fraca); }
.busca-item .cresce { min-width: 0; flex: 1; }
.busca-item .principal { font-size: 13.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca-item .secundario { font-size: 11.5px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busca-item svg { color: var(--texto-3); }
.busca-vazio { padding: 20px 14px; text-align: center; color: var(--texto-3); font-size: 13px; }

.topo-espaco { flex: 1; }

/* seletor de competência */
.competencia-topo { display: flex; align-items: center; gap: 6px; }
.competencia-topo .rot {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texto-3); font-weight: 650;
}
.competencia-topo select {
  height: 34px; min-height: 34px; padding: 0 26px 0 9px; font-size: 13px;
  background-color: var(--fundo-2); width: auto;
}

.topo-usuario {
  display: flex; align-items: center; gap: 9px;
  padding-left: 12px; border-left: 1px solid var(--borda);
  cursor: pointer; background: none; border-top: 0; border-right: 0; border-bottom: 0;
  font: inherit; color: var(--texto); border-radius: 0;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--marca-fraca); color: var(--marca-escura);
  display: grid; place-items: center; font-weight: 650; font-size: 12.5px;
}
@media (prefers-color-scheme: dark) { .avatar { color: var(--marca-clara); } }
.topo-usuario .texto { display: flex; flex-direction: column; line-height: 1.3; max-width: 160px; align-items: flex-start; }
.topo-usuario b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.topo-usuario span { font-size: 11px; color: var(--texto-3); }

/* menu suspenso */
.menu-flutuante {
  position: fixed; z-index: 90; min-width: 214px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r); box-shadow: var(--sombra-3); padding: 6px;
}
.menu-flutuante button, .menu-flutuante a {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--r-p);
  background: transparent; color: var(--texto); font: inherit; font-size: 13.5px;
  text-align: left; cursor: pointer; text-decoration: none;
}
.menu-flutuante button:hover, .menu-flutuante a:hover { background: var(--fundo-2); text-decoration: none; }
.menu-flutuante .separador { height: 1px; background: var(--borda); margin: 5px 2px; }
.menu-flutuante .cabecalho {
  padding: 8px 10px 6px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--texto-3); font-weight: 650;
}

/* --------------------------------------------------- conteúdo */
.conteudo {
  margin-left: var(--lateral-l);
  padding: calc(var(--topo-h) + 22px) 24px 60px;
  max-width: 1620px;
}

/* --------------------------------------------------- responsivo */
.lateral-fundo { display: none; }

@media (max-width: 1080px) {
  :root { --lateral-l: 0px; }
  .lateral {
    width: 272px; transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--sombra-3);
  }
  .lateral.aberta { transform: translateX(0); }
  .lateral-fundo.visivel {
    display: block; position: fixed; inset: 0; z-index: 39;
    background: rgba(10, 25, 33, .45);
  }
  .topo { left: 0; padding: 0 12px; gap: 8px; }
  .topo-menu {
    display: grid; place-items: center; width: 38px; height: 38px; flex: none;
    border: 1px solid var(--borda); border-radius: var(--r-p);
    background: var(--superficie); color: var(--texto); cursor: pointer;
  }
  .topo-marca-mobile { display: flex; align-items: center; gap: 8px; }
  .conteudo { margin-left: 0; padding: calc(var(--topo-h) + 16px) 14px 60px; }
  .topo-usuario .texto { display: none; }
  .topo-usuario { padding-left: 8px; }
  .competencia-topo .rot { display: none; }
  .pagina-titulo h1 { font-size: 21px; }
}
/* No celular o topo vira duas linhas: navegação em cima, busca embaixo. */
@media (max-width: 780px) {
  :root { --topo-h: 104px; }
  .topo {
    height: auto; min-height: var(--topo-h);
    flex-wrap: wrap; align-content: center; padding: 9px 12px; gap: 8px;
  }
  .campo-busca .atalho { display: none; }
  .busca-global { order: 5; flex: 1 1 100%; max-width: none; }
  .topo-espaco { display: none; }
  .topo-marca-mobile { display: none; }
  .competencia-topo { margin-left: auto; }
  .competencia-topo select { max-width: 108px; padding-right: 24px; }
  .topo-usuario { border-left: 0; padding-left: 4px; }
}

/* =====================================================================
   CABEÇALHO DE PÁGINA
   ===================================================================== */
.pagina-titulo {
  display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.pagina-titulo .texto { flex: 1; min-width: 240px; }
.pagina-titulo h1 { font-size: 24px; margin-bottom: 4px; }
.pagina-titulo p { color: var(--texto-2); font-size: 14px; max-width: 82ch; line-height: 1.5; }
.pagina-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 560px) {
  .pagina-acoes { width: 100%; }
  .pagina-acoes .btn { flex: 1 1 auto; }
}

/* =====================================================================
   GRADES
   ===================================================================== */
.grade { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: 2fr 1fr; }
.g-1-2 { grid-template-columns: 1fr 2fr; }
.span2 { grid-column: span 2; }

@media (max-width: 1400px) { .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-2-1, .g-1-2 { grid-template-columns: 1fr; }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .g2, .g3, .g4, .g5, .g6 { grid-template-columns: 1fr; }
  .span2 { grid-column: span 1; }
  .grade { gap: 12px; }
}

.mt { margin-top: 14px; }
.mb { margin-bottom: 12px; }
.esquerda { margin-right: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* =====================================================================
   CARTÕES
   ===================================================================== */
.card {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  box-shadow: var(--sombra-1);
  overflow: hidden;
  min-width: 0;
}
.card-cab {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 15px 18px 13px;
  border-bottom: 1px solid var(--borda);
}
.card-cab h3 { font-size: 14.5px; }
.card-cab > .campo-ajuda { flex-basis: 100%; margin: -7px 0 0; }
.card-cab .card-acoes { margin-left: auto; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.card-corpo { padding: 18px; }
.card-corpo.sem-padding { padding: 0; }
.card-nota {
  padding: 11px 18px; background: var(--superficie-2);
  border-top: 1px solid var(--borda);
  font-size: 12px; color: var(--texto-3); line-height: 1.55;
}
@media (max-width: 560px) {
  .card-corpo { padding: 14px; }
  .card-cab { padding: 13px 14px 11px; }
  .card-cab .card-acoes { margin-left: 0; flex-basis: 100%; }
}

/* --------------------------------------------------- KPI */
.stat {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  box-shadow: var(--sombra-1);
  padding: 15px 17px 14px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.stat::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--borda-forte); }
.stat.primaria::before { background: var(--marca); }
.stat.sucesso::before  { background: var(--sucesso); }
.stat.atencao::before  { background: var(--atencao); }
.stat.erro::before     { background: var(--erro); }
.stat .rotulo {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-3); font-weight: 620;
  display: flex; align-items: center; gap: 6px;
}
.stat .valor {
  font-size: 27px; font-weight: 660; letter-spacing: -.02em; line-height: 1.15;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.stat .valor.menor { font-size: 19px; }
.stat .variacao { font-size: 12px; color: var(--texto-2); line-height: 1.45; }
.stat.primaria .valor { color: var(--marca); }
.stat.sucesso  .valor { color: var(--sucesso); }
.stat.atencao  .valor { color: var(--atencao); }
.stat.erro     .valor { color: var(--erro); }
.stat.clicavel { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.stat.clicavel:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); }
@media (max-width: 760px) { .stat .valor { font-size: 23px; } .stat { padding: 13px 14px; } }

/* =====================================================================
   BOTÕES
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 0 15px;
  border: 1px solid var(--borda-forte); border-radius: var(--r-p);
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: 13.5px; font-weight: 550;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .06s;
}
a.btn { text-decoration: none; }
.btn:hover:not(:disabled) { background: var(--fundo-2); border-color: var(--texto-3); text-decoration: none; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn.primario {
  background: var(--marca); border-color: var(--marca); color: #fff;
  box-shadow: 0 1px 2px rgba(15, 107, 138, .25);
}
.btn.primario:hover:not(:disabled) { background: var(--marca-escura); border-color: var(--marca-escura); }
.btn.perigo { background: var(--erro); border-color: var(--erro); color: #fff; }
.btn.perigo:hover:not(:disabled) { filter: brightness(.92); background: var(--erro); border-color: var(--erro); }
.btn.sucesso { background: var(--sucesso); border-color: var(--sucesso); color: #fff; }
.btn.fantasma { background: transparent; border-color: transparent; color: var(--texto-2); }
.btn.fantasma:hover:not(:disabled) { background: var(--fundo-2); border-color: transparent; color: var(--texto); }
.btn.p { min-height: 30px; padding: 0 10px; font-size: 12.5px; gap: 5px; border-radius: 7px; }
.btn.p .ico { width: 14px; height: 14px; }
.btn.g { min-height: 48px; padding: 0 22px; font-size: 15.5px; border-radius: var(--r); }
.btn.bloco { width: 100%; }
.btn.so-ico { padding: 0; width: 38px; }
.btn.so-ico.p { width: 30px; }

@media (prefers-color-scheme: dark) {
  .btn.primario, .btn.perigo, .btn.sucesso { color: #07222c; }
}

.girinho {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: girar .7s linear infinite; flex: none;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* =====================================================================
   FORMULÁRIOS
   ===================================================================== */
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > label { font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
input, select, textarea {
  width: 100%; min-height: 38px; padding: 8px 11px;
  border: 1px solid var(--borda-forte); border-radius: var(--r-p);
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: 13.5px;
  transition: border-color .12s, box-shadow .12s;
}
input[type=number], input[inputmode=numeric] { font-variant-numeric: tabular-nums; }
textarea { min-height: 76px; resize: vertical; line-height: 1.5; }
select {
  appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237d8d99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
input:focus, select:focus, textarea:focus, .btn:focus-visible, .lateral-item:focus-visible, .busca-item:focus-visible, .passo:focus-visible {
  outline: 0; border-color: var(--marca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 18%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--texto-3); }
input:disabled, select:disabled, textarea:disabled { background: var(--fundo-2); color: var(--texto-3); cursor: not-allowed; }

input[type=checkbox] {
  width: 18px; height: 18px; min-height: 0; margin: 0; flex: none;
  accent-color: var(--marca); cursor: pointer;
}
.campo-linha { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; min-height: 38px; }
.campo-ajuda { font-size: 12px; color: var(--texto-3); line-height: 1.5; }

/* data com máscara dd/mm/aaaa */
.campo-data { position: relative; }
.campo-data input { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.campo.invalido input, .campo.invalido select { border-color: var(--erro); }

/* competência (mês + ano) */
.campo-competencia { display: flex; gap: 6px; }
/* O último filho é o input escondido do valor: mire nas classes, não na posição. */
.campo-competencia select { flex: 1.5; min-width: 0; }
.campo-competencia select.ano { flex: 1; }

.form-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.form-grade.c1 { grid-template-columns: 1fr; }
.form-grade.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grade.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grade .span2 { grid-column: span 2; }
.form-grade .span3 { grid-column: span 3; }
.form-grade .span4 { grid-column: span 4; }
.form-grade.c2 .span3, .form-grade.c2 .span4 { grid-column: span 2; }
.form-grade.c3 .span4 { grid-column: span 3; }
.form-grade.c1 .span2, .form-grade.c1 .span3, .form-grade.c1 .span4 { grid-column: span 1; }

@media (max-width: 900px) {
  .form-grade, .form-grade.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grade .span3, .form-grade .span4 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .form-grade, .form-grade.c2, .form-grade.c3 { grid-template-columns: 1fr; }
  .form-grade .span2, .form-grade .span3, .form-grade .span4 { grid-column: span 1; }
}

/* linha de filtros */
.filtros { display: flex; gap: 11px; align-items: flex-end; flex-wrap: wrap; }
.filtros .campo { min-width: 145px; flex: 0 1 auto; }
.filtros .campo.larga { min-width: 230px; flex: 1 1 230px; }
.filtros .btn { flex: none; }
@media (max-width: 560px) {
  .filtros .campo, .filtros .campo.larga { min-width: 0; flex: 1 1 100%; }
  .filtros .btn { width: 100%; }
}

/* =====================================================================
   TABELAS
   ===================================================================== */
.tabela-caixa { display: flex; flex-direction: column; min-width: 0; }
.tabela-topo {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--borda);
  background: var(--superficie);
}
.busca-tabela { position: relative; flex: 1 1 190px; max-width: 300px; }
.busca-tabela input { padding-left: 33px; min-height: 34px; }
.busca-tabela > svg { position: absolute; left: 10px; top: 9px; color: var(--texto-3); }
.tabela-topo .acoes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tabela-contagem { margin-left: auto; font-size: 12.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.tabela-rolagem { overflow: auto; }

table.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.tabela th {
  position: sticky; top: 0; z-index: 2;
  background: var(--superficie-2);
  padding: 10px 12px; text-align: left;
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-3); white-space: nowrap;
  border-bottom: 1px solid var(--borda);
}
table.tabela th.ordenavel { cursor: pointer; user-select: none; }
table.tabela th.ordenavel:hover { color: var(--texto); background: var(--fundo-2); }
table.tabela th .seta { margin-left: 4px; font-size: 8px; color: var(--marca); }
table.tabela td {
  padding: 9px 12px; border-bottom: 1px solid var(--borda);
  color: var(--texto); vertical-align: middle;
}
table.tabela tbody tr { transition: background .1s; }
table.tabela tbody tr:hover { background: var(--superficie-2); }
table.tabela tbody tr.clicavel { cursor: pointer; }
table.tabela tbody tr.clicavel:hover { background: var(--marca-fraca); }
table.tabela tbody tr.selecionada { background: var(--marca-fraca); box-shadow: inset 3px 0 0 var(--marca); }
table.tabela tfoot td {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--superficie-2);
  font-weight: 650; border-top: 1px solid var(--borda-forte); border-bottom: 0;
  font-variant-numeric: tabular-nums;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.cen, th.cen { text-align: center; }
.nowrap { white-space: nowrap; }
.mono, table.tabela .mono, .aviso .mono { font-family: var(--fonte-mono); font-size: .92em; }
.truncar { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.tabela td select, table.tabela td input { min-height: 30px; padding: 4px 8px; font-size: 12.5px; }
.negativo { color: var(--erro); font-weight: 600; }
.positivo { color: var(--sucesso); font-weight: 600; }

/* paginação */
.tabela-pe {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--borda);
  background: var(--superficie-2); font-size: 12.5px; color: var(--texto-2);
}
.tabela-pe .paginas { margin-left: auto; display: flex; gap: 5px; align-items: center; }
.tabela-pe .pagina-info { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-pe select { min-height: 30px; padding: 3px 26px 3px 8px; font-size: 12.5px; width: auto; }

/* cartões empilhados no celular */
.lista-cartoes { display: none; }
.linha-cartao { display: none; }
@media (max-width: 760px) {
  .tabela-caixa.cartoes .tabela-rolagem { display: none; }
  .tabela-caixa.cartoes .lista-cartoes { display: grid; gap: 10px; padding: 12px; }
  .linha-cartao {
    display: block; background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--r); padding: 12px 13px;
  }
  .linha-cartao.clicavel { cursor: pointer; }
  .linha-cartao .titulo-cartao {
    font-weight: 650; font-size: 14.5px; margin-bottom: 9px;
    display: flex; gap: 8px; align-items: flex-start; justify-content: space-between;
  }
  .linha-cartao .par {
    display: flex; gap: 12px; justify-content: space-between; align-items: baseline;
    padding: 5px 0; border-top: 1px dashed var(--borda); font-size: 13px;
  }
  .linha-cartao .par:first-of-type { border-top: 0; }
  .linha-cartao .par .rot { color: var(--texto-3); font-size: 12px; flex: none; }
  .linha-cartao .par .val { text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
  .linha-cartao .acoes-cartao { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
  .tabela-topo { padding: 10px 12px; }
  .busca-tabela { max-width: none; }
  .tabela-contagem { margin-left: 0; }
  .truncar { max-width: none; white-space: normal; }
}

/* =====================================================================
   ESQUELETOS (carregamento)
   ===================================================================== */
.esqueleto {
  background: linear-gradient(90deg, var(--fundo-2) 25%, var(--borda) 37%, var(--fundo-2) 63%);
  background-size: 400% 100%;
  animation: brilho 1.3s ease-in-out infinite;
  border-radius: 6px; height: 12px;
}
@keyframes brilho { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.esqueleto-linha { display: flex; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--borda); align-items: center; }
.esqueleto-linha .esqueleto { flex: 1; }
.esqueleto-card { padding: 17px; }
.esqueleto-card .esqueleto + .esqueleto { margin-top: 11px; }

.carregando {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 50px 20px; color: var(--texto-3); font-size: 13px;
}
.carregando .giro {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--borda); border-top-color: var(--marca);
  animation: girar .8s linear infinite;
}

/* =====================================================================
   ESTADO VAZIO
   ===================================================================== */
.vazio {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 7px; padding: 40px 26px; color: var(--texto-2);
}
.vazio .icone {
  width: 54px; height: 54px; border-radius: 16px; margin-bottom: 5px;
  background: var(--marca-fraca); color: var(--marca);
  display: grid; place-items: center;
}
.vazio .icone svg { width: 26px; height: 26px; stroke-width: 1.5; }
.vazio b { font-size: 15px; color: var(--texto); font-weight: 620; }
.vazio p { font-size: 13.5px; max-width: 48ch; line-height: 1.55; }
.vazio .btn { margin-top: 9px; }

/* =====================================================================
   ETIQUETAS E BARRAS
   ===================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 620; white-space: nowrap;
  border: 1px solid transparent; line-height: 1.6;
}
.badge.neutro  { background: var(--fundo-2);      color: var(--texto-2);  border-color: var(--borda); }
.badge.info    { background: var(--info-fraca);    color: var(--info);     border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.badge.primaria{ background: var(--marca-fraca);   color: var(--marca);    border-color: var(--marca-contorno); }
.badge.sucesso { background: var(--sucesso-fraca); color: var(--sucesso);  border-color: color-mix(in srgb, var(--sucesso) 22%, transparent); }
.badge.atencao { background: var(--atencao-fraca); color: var(--atencao);  border-color: color-mix(in srgb, var(--atencao) 24%, transparent); }
.badge.erro    { background: var(--erro-fraca);    color: var(--erro);     border-color: color-mix(in srgb, var(--erro) 22%, transparent); }

.barra { height: 7px; background: var(--fundo-2); border-radius: var(--r-pill); overflow: hidden; min-width: 54px; }
.barra > i { display: block; height: 100%; background: var(--marca); border-radius: var(--r-pill); transition: width .3s; }
.barra.erro > i    { background: var(--erro); }
.barra.atencao > i { background: var(--atencao); }
.barra.sucesso > i { background: var(--sucesso); }
.barra-rotulo { display: flex; align-items: center; gap: 8px; }
.barra-rotulo .barra { flex: 1; }
.barra-rotulo span { font-size: 12px; color: var(--texto-2); font-variant-numeric: tabular-nums; }

.chip-linha { display: flex; gap: 5px; flex-wrap: wrap; }

/* =====================================================================
   ABAS INTERNAS
   ===================================================================== */
.abas {
  display: flex; gap: 4px; margin-bottom: 14px; overflow-x: auto;
  padding: 4px; background: var(--fundo-2); border-radius: var(--r);
  border: 1px solid var(--borda);
}
.abas button {
  padding: 8px 14px; border: 0; border-radius: var(--r-p);
  background: transparent; color: var(--texto-2);
  font: inherit; font-size: 13.5px; font-weight: 550;
  white-space: nowrap; cursor: pointer; transition: background .12s, color .12s;
}
.abas button:hover { color: var(--texto); }
.abas button.ativa { background: var(--superficie); color: var(--marca); box-shadow: var(--sombra-1); font-weight: 620; }

/* =====================================================================
   PASSO A PASSO (ciclo mensal)
   ===================================================================== */
.passos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--borda); border-radius: var(--r);
  overflow: hidden; background: var(--superficie); box-shadow: var(--sombra-1);
}
.passo {
  position: relative; display: flex; flex-direction: column; gap: 7px;
  padding: 16px 18px;
  border-right: 1px solid var(--borda);
  background: var(--superficie); text-align: left;
  font: inherit; color: var(--texto); cursor: pointer;
  transition: background .12s;
}
.passo:last-child { border-right: 0; }
.passo:hover { background: var(--superficie-2); }
.passo .topo-passo { display: flex; align-items: center; gap: 10px; }
.passo .numero {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 680;
  background: var(--fundo-2); color: var(--texto-3);
  border: 1.5px solid var(--borda-forte);
  font-variant-numeric: tabular-nums;
}
.passo .nome { font-size: 13.5px; font-weight: 640; }
.passo .detalhe { font-size: 12.5px; color: var(--texto-2); line-height: 1.45; }
.passo .estado { font-size: 11.5px; font-weight: 620; display: flex; align-items: center; gap: 5px; }

.passo.concluido .numero { background: var(--sucesso); border-color: var(--sucesso); color: #fff; }
.passo.concluido .estado { color: var(--sucesso); }
.passo.atual { background: var(--marca-fraca); }
.passo.atual .numero { background: var(--marca); border-color: var(--marca); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 18%, transparent); }
.passo.atual .estado, .passo.atual .nome { color: var(--marca-escura); }
@media (prefers-color-scheme: dark) {
  .passo.atual .estado, .passo.atual .nome { color: var(--marca-clara); }
  .passo.concluido .numero, .passo.atual .numero { color: #07222c; }
}
.passo.pendente .estado { color: var(--texto-3); }

@media (max-width: 1080px) {
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passo:nth-child(2) { border-right: 0; }
  .passo:nth-child(-n+2) { border-bottom: 1px solid var(--borda); }
}
@media (max-width: 620px) {
  .passos { grid-template-columns: 1fr; }
  .passo { border-right: 0; border-bottom: 1px solid var(--borda); }
  .passo:last-child { border-bottom: 0; }
}

/* =====================================================================
   JANELAS (MODAIS)
   ===================================================================== */
.modal-fundo {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10, 25, 33, .5);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 18px; overflow-y: auto;
  animation: surgir .14s ease;
}
@keyframes surgir { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 720px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-g);
  box-shadow: var(--sombra-3);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 64px);
  animation: sobe .18s cubic-bezier(.2,.8,.3,1);
}
@keyframes sobe { from { transform: translateY(12px); opacity: .6; } to { transform: none; opacity: 1; } }
.modal.larga { max-width: 1180px; }
.modal.estreita { max-width: 440px; }
.modal-cab {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px 15px; border-bottom: 1px solid var(--borda); flex: none;
}
.modal-cab h3 { font-size: 17px; }
.modal-cab small { display: block; color: var(--texto-3); font-size: 12.5px; margin-top: 3px; }
.modal-fechar {
  margin-left: auto; width: 32px; height: 32px; flex: none;
  border: 1px solid var(--borda); border-radius: var(--r-p);
  background: var(--superficie); color: var(--texto-2);
  display: grid; place-items: center; cursor: pointer; font-size: 18px; line-height: 1;
}
.modal-fechar:hover { background: var(--fundo-2); color: var(--texto); }
.modal-corpo { padding: 20px; overflow-y: auto; flex: 1; }
.modal-pe {
  display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--borda);
  background: var(--superficie-2); flex: none;
}

@media (max-width: 760px) {
  .modal-fundo { padding: 0; align-items: flex-end; }
  .modal, .modal.larga, .modal.estreita {
    max-width: none; max-height: 94vh;
    border-radius: var(--r-g) var(--r-g) 0 0; border-bottom: 0;
  }
  .modal-corpo { padding: 16px; }
  .modal-cab { padding: 16px 16px 13px; }
  .modal-pe { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .modal-pe .btn { flex: 1 1 auto; }
  .modal-pe .esquerda { flex-basis: 100%; margin-right: 0; }
  .modal-pe .esquerda .btn { flex: 1; }
}

/* =====================================================================
   AVISOS (TOASTS)
   ===================================================================== */
.toasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 200;
  display: flex; flex-direction: column; gap: 9px; max-width: min(400px, calc(100vw - 36px));
}
.toast {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borda); border-left: 4px solid var(--marca);
  border-radius: var(--r); box-shadow: var(--sombra-3);
  padding: 12px 14px; font-size: 13.5px; line-height: 1.45;
  animation: entra .2s cubic-bezier(.2,.8,.3,1);
}
.toast b { display: block; font-size: 13px; margin-bottom: 2px; }
/* Atenção: `.conteudo` também é a área principal do painel, que tem margem à
   esquerda e um padding grande. Sem zerar isso aqui, o texto do aviso ficava
   empurrado para o canto, em uma palavra por linha. */
.toast .conteudo {
  min-width: 0; flex: 1 1 auto;
  margin-left: 0; padding: 0; max-width: none;
}
.toast.sucesso { border-left-color: var(--sucesso); }
.toast.sucesso > .ico { color: var(--sucesso); }
.toast.atencao { border-left-color: var(--atencao); }
.toast.atencao > .ico { color: var(--atencao); }
.toast.erro { border-left-color: var(--erro); }
.toast.erro > .ico { color: var(--erro); }
.toast > .ico { color: var(--marca); margin-top: 1px; }
@keyframes entra { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 760px) { .toasts { right: 10px; left: 10px; bottom: 14px; max-width: none; } }

/* =====================================================================
   FAIXAS DE AVISO
   ===================================================================== */
.aviso {
  display: block; padding: 13px 15px;
  border: 1px solid var(--marca-contorno); border-left: 4px solid var(--marca);
  border-radius: var(--r-p);
  background: var(--marca-fraca); color: var(--texto);
  font-size: 13px; line-height: 1.55;
}
.aviso b { display: block; margin-bottom: 3px; font-size: 13.2px; font-weight: 650; }
.aviso.atencao { background: var(--atencao-fraca); border-color: color-mix(in srgb, var(--atencao) 28%, transparent); border-left-color: var(--atencao); }
.aviso.erro    { background: var(--erro-fraca);    border-color: color-mix(in srgb, var(--erro) 28%, transparent);    border-left-color: var(--erro); }
.aviso.sucesso { background: var(--sucesso-fraca); border-color: color-mix(in srgb, var(--sucesso) 28%, transparent); border-left-color: var(--sucesso); }
.aviso.legal { font-size: 12.5px; }
.aviso .com-icone { display: flex; gap: 11px; align-items: flex-start; }
.aviso .com-icone > .ico { flex: none; margin-top: 1px; }

/* =====================================================================
   LISTAS
   ===================================================================== */
.lista-def { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 18px; }
.lista-def > div { padding: 7px 0; border-bottom: 1px dashed var(--borda); min-width: 0; }
.lista-def dt { font-size: 11px; color: var(--texto-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 620; margin-bottom: 2px; }
.lista-def dd { font-size: 13.5px; color: var(--texto); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.lista-simples { list-style: none; }
.lista-simples li { padding: 9px 0; border-bottom: 1px solid var(--borda); font-size: 13.5px; }
.lista-simples li:last-child { border-bottom: 0; }

.lista-marcada { padding-left: 20px; font-size: 13.5px; color: var(--texto-2); line-height: 1.6; }
.lista-marcada li { margin-bottom: 5px; }

.texto-parecer {
  white-space: pre-wrap; font-size: 13.5px; line-height: 1.65; color: var(--texto);
  background: var(--superficie-2); border: 1px solid var(--borda);
  border-radius: var(--r-p); padding: 16px; max-height: 60vh; overflow-y: auto;
}
.rolagem-y { overflow-y: auto; }

/* =====================================================================
   GRÁFICOS SVG
   ===================================================================== */
.grafico { display: block; }
.grafico text { font-family: var(--fonte); font-size: 11px; fill: var(--texto-3); font-variant-numeric: tabular-nums; }
.grafico text.rotulo-valor { fill: var(--texto-2); font-weight: 620; font-size: 11px; }
.grafico .grade-linha { stroke: var(--borda); stroke-width: 1; stroke-dasharray: 3 4; }
.grafico .eixo { stroke: var(--borda-forte); stroke-width: 1.2; }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--texto-2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; }

/* =====================================================================
   PORTAL DO FUNCIONÁRIO (celular primeiro)
   ===================================================================== */
body.portal { background: var(--fundo); }
.portal-topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--marca-escura); color: #fff;
}
.portal-topo .sigla {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22);
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.portal-topo .nome { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.portal-topo .nome b { font-size: 16px; }
.portal-topo .nome small { font-size: 11.5px; color: rgba(255,255,255,.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-topo .btn {
  margin-left: auto; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff;
  min-height: 38px;
}
.portal-topo .btn:hover:not(:disabled) { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.4); }

.portal-corpo {
  max-width: 640px; margin: 0 auto;
  padding: 16px 14px calc(40px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
body.portal .card-corpo { padding: 16px; }
body.portal h2 { font-size: 18px; }

.portal-saudacao {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--r-g); padding: 16px 17px; box-shadow: var(--sombra-1);
}
.portal-saudacao h2 { font-size: 20px; margin-bottom: 2px; }
.portal-saudacao .nome-completo { color: var(--texto-2); font-size: 14px; }
.portal-saudacao dl { margin-top: 14px; }

/* cartão grande do pagamento */
.pagamento-destaque {
  border-radius: var(--r-g); overflow: hidden; color: #fff;
  background: linear-gradient(145deg, #0f6b8a 0%, #0b4f66 100%);
  box-shadow: 0 10px 26px rgba(11, 79, 102, .3);
}
.pagamento-destaque .faixa {
  padding: 14px 18px 0; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.72); font-weight: 650;
}
.pagamento-destaque .corpo { padding: 8px 18px 18px; }
.pagamento-destaque .frase {
  font-size: 25px; font-weight: 680; line-height: 1.22; letter-spacing: -.02em;
  margin-bottom: 5px;
}
.pagamento-destaque .frase .destaque { color: #a8e4f7; }
.pagamento-destaque .quando { font-size: 16px; color: rgba(255,255,255,.92); font-weight: 550; }
.pagamento-destaque .valor-liquido { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); }
.pagamento-destaque .valor-liquido .rot {
  font-size: 11.5px; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .07em; font-weight: 620;
}
.pagamento-destaque .valor-liquido .num {
  font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.pagamento-destaque .valor-liquido .ref { font-size: 13px; color: rgba(255,255,255,.78); }
.pagamento-destaque .btn {
  margin-top: 16px; width: 100%;
  background: #fff; border-color: #fff; color: var(--marca-escura);
  min-height: 54px; font-size: 16px; font-weight: 660; border-radius: var(--r);
}
.pagamento-destaque .btn:hover:not(:disabled) { background: #e8f5fa; border-color: #e8f5fa; }
.pagamento-destaque dl.extra { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.pagamento-destaque dl.extra dt { font-size: 11px; color: rgba(255,255,255,.72); text-transform: uppercase; letter-spacing: .05em; font-weight: 620; }
.pagamento-destaque dl.extra dd { font-size: 14px; color: #fff; font-weight: 550; }

.portal-linha {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--borda);
}
.portal-linha:last-child { border-bottom: 0; }
.portal-linha .cresce { flex: 1; min-width: 0; }
.portal-linha .rot { font-size: 12.5px; color: var(--texto-3); }
.portal-linha .principal { font-size: 15px; font-weight: 620; }
.portal-linha .valor-mes { font-size: 16px; font-weight: 680; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.portal-linha .btn { flex: none; }

body.portal .lista-def dd { font-size: 15px; }
body.portal .btn { min-height: 46px; font-size: 15px; }
body.portal .btn.p { min-height: 38px; font-size: 13.5px; }
body.portal input, body.portal select { min-height: 48px; font-size: 16px; }
body.portal .campo > label { font-size: 14px; }
body.portal .campo-ajuda { font-size: 13px; }
body.portal .aviso { font-size: 14px; padding: 14px 16px; }
body.portal .vazio p { font-size: 14px; }
body.portal .card-cab h3 { font-size: 16px; }

@media (min-width: 700px) { .portal-corpo { padding: 24px 16px 60px; } }

/* =====================================================================
   NOVIDADES: aparência, construtor de abas, abas personalizadas e IA
   ===================================================================== */

/* ------------------------------------------------------------ utilidades */
.cresce { flex: 1; min-width: 0; }
.acoes-linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acoes-linha.cen { justify-content: center; }
.acoes-linha > .campo-ajuda { margin: 0; }

.marca-logo { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.marca-sigla.com-logo, .login-marca .sigla.com-logo { background: var(--superficie); padding: 3px; }

/* ------------------------------------------------------------ seletor de cor */
.grade-cores { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.linha-cor { display: flex; gap: 8px; align-items: center; }
.entrada-cor {
  width: 46px; height: 38px; flex: none; padding: 3px; cursor: pointer;
  border: 1px solid var(--borda-forte); border-radius: var(--r-p); background: var(--superficie);
}
.entrada-cor::-webkit-color-swatch-wrapper { padding: 0; }
.entrada-cor::-webkit-color-swatch { border: 0; border-radius: 5px; }
.texto-cor { flex: 1; min-width: 0; text-transform: lowercase; }
.selo-cor { font-size: 12px; color: var(--erro); margin-top: 3px; }

.logo-linha { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.logo-atual {
  width: 76px; height: 76px; flex: none; display: grid; place-items: center; overflow: hidden;
  border: 1px dashed var(--borda-forte); border-radius: var(--r); background: var(--superficie-2);
}
.logo-atual img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.logo-atual .marca-sigla { position: static; width: auto; height: auto; }

/* ------------------------------------------------------------ prévia da aparência */
.previa-aparencia { background: var(--fundo); border-radius: 0 0 var(--r-g) var(--r-g); overflow: hidden; }
.previa-caixa { display: grid; gap: 1px; background: var(--borda); }
.previa-login { background: var(--marca); color: #fff; padding: 18px 16px; }
.previa-login .p-marca { display: flex; gap: 11px; align-items: center; }
.previa-login .p-marca img { width: 38px; height: 38px; object-fit: contain; background: #fff; border-radius: 9px; padding: 3px; }
.p-sigla {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 9px;
  background: rgba(255,255,255,.18); font-weight: 750; font-size: 13px; letter-spacing: .04em;
}
.previa-login .p-marca b { display: block; font-size: 15px; }
.previa-login .p-marca small { opacity: .82; font-size: 11.5px; }
.p-frase { margin-top: 12px; font-size: 16px; font-weight: 620; line-height: 1.3; }

.previa-app { display: grid; grid-template-columns: 132px 1fr; background: var(--fundo); min-height: 210px; }
.p-lateral { background: var(--superficie); border-right: 1px solid var(--borda); padding: 10px 8px; display: grid; gap: 3px; align-content: start; }
.p-item {
  display: flex; gap: 7px; align-items: center; padding: 6px 8px; border-radius: 7px;
  font-size: 11.5px; color: var(--texto-2); white-space: nowrap; overflow: hidden;
}
.p-item.ativo { background: var(--marca-fraca); color: var(--marca); font-weight: 620; }
.p-conteudo { padding: 14px; display: grid; gap: 9px; align-content: start; }
.p-titulo { font-size: 16px; font-weight: 660; color: var(--texto); }
.p-sub { font-size: 11.5px; color: var(--texto-2); margin-top: -6px; }
.p-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p-kpi { background: var(--superficie); border: 1px solid var(--borda); border-radius: 9px; padding: 8px 10px; }
.p-kpi span { display: block; font-size: 10.5px; color: var(--texto-3); }
.p-kpi b { font-size: 15px; color: var(--texto); }
.p-kpi.primaria b { color: var(--marca); }
.p-avisos { display: flex; gap: 6px; flex-wrap: wrap; }
.p-botoes { display: flex; gap: 7px; flex-wrap: wrap; }
.p-botoes .btn { pointer-events: none; opacity: 1; }
@media (max-width: 520px) { .previa-app { grid-template-columns: 1fr; } .p-lateral { display: none; } }

/* ------------------------------------------------------------ assistente */
.assistente-topo { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.assistente-topo h2 { font-size: 19px; }
.assistente-topo p { margin-top: 4px; max-width: 76ch; }

.assistente-passos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  list-style: none; padding: 0; margin: 0;
}
.ap-passo button {
  width: 100%; display: flex; gap: 9px; align-items: center; text-align: left; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r);
  padding: 11px 12px; font: inherit; color: var(--texto-2); min-height: 52px;
  border-top: 3px solid var(--borda);
}
.ap-passo button:hover { border-color: var(--borda-forte); }
.ap-numero {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--fundo-2); color: var(--texto-3); font-size: 12px; font-weight: 700;
}
.ap-nome { font-size: 13px; font-weight: 600; line-height: 1.25; }
.ap-passo.atual button { border-top-color: var(--marca); color: var(--texto); box-shadow: var(--sombra-1); }
.ap-passo.atual .ap-numero { background: var(--marca); color: #fff; }
.ap-passo.concluido button { border-top-color: var(--sucesso); }
.ap-passo.concluido .ap-numero { background: var(--sucesso-fraca); color: var(--sucesso); }
.assistente-pe {
  display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borda);
}
@media (max-width: 760px) {
  .assistente-passos { grid-template-columns: repeat(2, 1fr); }
  .assistente-pe { flex-direction: column-reverse; align-items: stretch; }
  .assistente-pe > .btn, .assistente-pe .acoes-linha .btn { width: 100%; justify-content: center; }
  .assistente-pe .acoes-linha { flex-direction: column-reverse; }
}

/* ------------------------------------------------------------ cartões de escolha */
.grade-escolha { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.grade-escolha.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cartao-escolha {
  display: flex; gap: 13px; align-items: flex-start; text-align: left; cursor: pointer; font: inherit;
  background: var(--superficie); border: 1.5px solid var(--borda); border-radius: var(--r-g);
  padding: 16px; color: var(--texto); transition: border-color .15s, box-shadow .15s, transform .12s;
}
.cartao-escolha:hover { border-color: var(--marca-contorno); box-shadow: var(--sombra-2); transform: translateY(-1px); }
.cartao-escolha.escolhido { border-color: var(--marca); background: var(--marca-fraca); }
.ce-ico {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px;
  background: var(--marca-fraca); color: var(--marca);
}
.cartao-escolha.escolhido .ce-ico { background: var(--marca); color: #fff; }
.ce-texto { display: grid; gap: 4px; min-width: 0; }
.ce-texto b { font-size: 15px; font-weight: 650; }
.ce-frase { font-size: 13px; color: var(--texto-2); line-height: 1.45; }
.ce-exemplos { font-size: 12px; color: var(--texto-3); line-height: 1.45; }
.ce-marca { flex: none; color: var(--texto-3); }
.cartao-escolha.escolhido .ce-marca { color: var(--marca); }

/* ------------------------------------------------------------ escolha de ícone */
.grade-icones { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.opcao-icone {
  display: grid; gap: 5px; justify-items: center; cursor: pointer; font: inherit; color: var(--texto-2);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-p); padding: 10px 5px;
}
.opcao-icone span { font-size: 11px; text-align: center; line-height: 1.2; }
.opcao-icone:hover { border-color: var(--marca-contorno); color: var(--texto); }
.opcao-icone.escolhido { border-color: var(--marca); background: var(--marca-fraca); color: var(--marca); font-weight: 620; }

.previa-menu { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pm-item {
  display: flex; gap: 9px; align-items: center; padding: 8px 12px; border-radius: 8px;
  background: var(--marca-fraca); color: var(--marca); font-weight: 620; font-size: 13.5px;
}

/* ------------------------------------------------------------ construtor de campos */
.lista-campos { display: grid; gap: 12px; }
.campo-construtor {
  border: 1px solid var(--borda); border-radius: var(--r); padding: 13px 14px; background: var(--superficie-2);
}
.campo-construtor.arrastando { opacity: .45; }
.campo-construtor.alvo { border-color: var(--marca); box-shadow: 0 0 0 2px var(--marca-fraca); }
.cc-cab { display: flex; gap: 8px; align-items: center; margin-bottom: 11px; }
.cc-cab b { font-size: 12.5px; color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; }
.cc-pegar { cursor: grab; color: var(--texto-3); display: flex; }
.cc-pegar:active { cursor: grabbing; }
.cc-marcas { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.cc-marcas .campo { margin: 0; }
.vazio-campos {
  display: grid; gap: 7px; justify-items: center; text-align: center; padding: 26px 16px;
  border: 1px dashed var(--borda-forte); border-radius: var(--r); color: var(--texto-3);
}
.vazio-campos b { color: var(--texto); font-size: 14px; }
.vazio-campos p { font-size: 13px; max-width: 52ch; }

/* ------------------------------------------------------------ prévia da tela criada */
.previa-tela { border: 1px solid var(--borda); border-radius: var(--r); overflow: hidden; }
.pt-cab {
  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 14px 15px; border-bottom: 1px solid var(--borda);
}
.pt-cab h3 { font-size: 16px; }
.pt-cab .btn { pointer-events: none; }
.pt-filtros { display: flex; gap: 7px; flex-wrap: wrap; padding: 11px 15px; background: var(--superficie-2); border-bottom: 1px solid var(--borda); }
.pt-filtro {
  font-size: 12px; color: var(--texto-2); background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--r-pill); padding: 4px 12px;
}
.pt-filtro.busca { color: var(--texto-3); font-style: italic; }
.previa-tela table.tabela td { color: var(--texto-3); }

/* ------------------------------------------------------------ markdown / conteúdo */
.markdown { color: var(--texto-2); font-size: 14px; line-height: 1.65; }
.markdown > *:first-child { margin-top: 0; }
.markdown h2 { font-size: 19px; color: var(--texto); margin: 20px 0 8px; }
.markdown h3 { font-size: 16px; color: var(--texto); margin: 18px 0 7px; }
.markdown h4, .markdown h5 { font-size: 14px; color: var(--texto); margin: 15px 0 6px; }
.markdown p { margin: 0 0 11px; }
.markdown ul, .markdown ol { margin: 0 0 12px; }
.markdown b { color: var(--texto); }
.markdown code { background: var(--fundo-2); padding: 1px 5px; border-radius: 4px; }
.markdown hr { border: 0; border-top: 1px solid var(--borda); margin: 18px 0; }
.conteudo-aba { max-width: 82ch; }
.previa-conteudo {
  border: 1px solid var(--borda); border-radius: var(--r); padding: 16px;
  background: var(--superficie-2); max-height: 460px; overflow: auto;
}

/* ------------------------------------------------------------ anexo */
.campo-anexo { display: flex; gap: 8px; align-items: center; min-height: 38px; flex-wrap: wrap; }
.anexo-atual { display: flex; gap: 8px; align-items: center; font-size: 13px; flex-wrap: wrap; }
.campo.faltando > label { color: var(--atencao); }
.campo.faltando input, .campo.faltando select { border-color: var(--atencao); background: var(--atencao-fraca); }

/* ------------------------------------------------------------ envio de imagem (IA) */
.envio-previa { display: grid; gap: 10px; }
.zona-envio {
  width: 100%; min-height: 190px; cursor: pointer; font: inherit; color: var(--texto-2);
  border: 2px dashed var(--borda-forte); border-radius: var(--r-g); background: var(--superficie-2);
  padding: 20px; display: grid; place-items: center; transition: border-color .15s, background .15s;
}
.zona-envio:hover, .zona-envio.sobre { border-color: var(--marca); background: var(--marca-fraca); }
.ze-vazia { display: grid; gap: 6px; justify-items: center; text-align: center; color: var(--texto-3); }
.ze-vazia b { font-size: 15px; color: var(--texto); }
.ze-vazia span { font-size: 13px; max-width: 46ch; }
.ze-cheia { display: grid; gap: 10px; justify-items: center; width: 100%; }
.ze-cheia img { max-width: 100%; max-height: 320px; border-radius: var(--r); box-shadow: var(--sombra-2); }
.ze-pdf { display: grid; gap: 8px; justify-items: center; color: var(--marca); }
.ze-info { display: grid; gap: 2px; justify-items: center; text-align: center; }
.ze-info b { font-size: 13.5px; color: var(--texto); word-break: break-all; }
.ze-info span { font-size: 12px; color: var(--texto-3); }

.revisao-imagem { width: 100%; border-radius: var(--r); border: 1px solid var(--borda); background: var(--superficie-2); }

.ia-desligada { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 14px 4px; }
.ia-desligada > * { max-width: 70ch; width: 100%; }
.ia-desligada h2 { font-size: 20px; }
.ia-desligada p { font-size: 14px; }
.ia-desligada .aviso { text-align: left; }
.ia-desligada-ico {
  width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%;
  background: var(--marca-fraca); color: var(--marca);
}
.ia-desligada-ico.ok { background: var(--sucesso-fraca); color: var(--sucesso); }

/* ------------------------------------------------------------ sugestões de aparência */
.lista-sugestoes { display: grid; gap: 8px; }
.linha-sugestao {
  display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  border: 1px solid var(--borda); border-radius: var(--r-p); padding: 10px 12px; background: var(--superficie-2);
}
.ls-de-para { display: flex; gap: 9px; align-items: center; font-size: 13px; color: var(--texto-2); flex-wrap: wrap; }
.ls-atual, .ls-novo { display: flex; gap: 6px; align-items: center; }
.ls-atual { color: var(--texto-3); text-decoration: line-through; }
.ls-novo { color: var(--texto); font-weight: 620; }
.amostra-cor { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--borda-forte); flex: none; }

/* ------------------------------------------------------------ matriz de permissões */
.grupo-permissoes + .grupo-permissoes { margin-top: 6px; }
.gp-titulo {
  display: flex; gap: 10px; align-items: baseline; padding: 14px 16px 8px;
  border-top: 1px solid var(--borda);
}
.grupo-permissoes:first-child .gp-titulo { border-top: 0; }
.gp-titulo b { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); }
.grupo-permissoes .tabela-caixa { border: 0; }
.grupo-permissoes .badge { margin-left: 7px; }

/* No celular a matriz vira cartão: o trio herdar/liberar/bloquear precisa de
   uma linha inteira, senão o terceiro botão fica fora da tela. */
@media (max-width: 760px) {
  .grupo-permissoes .linha-cartao .par { flex-direction: column; align-items: stretch; gap: 6px; }
  .grupo-permissoes .linha-cartao .par .val { text-align: left; }
  .grupo-permissoes [role="group"] { display: flex; flex-wrap: wrap; }
  .grupo-permissoes [role="group"] .btn { flex: 1 1 auto; justify-content: center; }
  .gp-titulo { padding: 14px 12px 4px; }
}

/* =====================================================================
   IMPORTAÇÃO DE DOCUMENTOS
   ===================================================================== */

/* ------------------------------------------------------------ caixa de envio dentro das abas */
.caixa-envio-raiz { display: grid; gap: 10px; }
.caixa-envio {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 13px 15px; text-align: left;
  border: 1.5px dashed var(--borda-forte); border-radius: var(--r);
  background: var(--superficie-2); color: var(--texto);
  font: inherit; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.caixa-envio:hover, .caixa-envio.sobre { border-color: var(--marca); background: var(--marca-fraca); }
.caixa-envio:disabled { opacity: .6; cursor: progress; }
.cev-ico {
  width: 40px; height: 40px; border-radius: var(--r-p); flex: none;
  display: grid; place-items: center;
  background: var(--marca-fraca); color: var(--marca);
}
.cev-texto { display: grid; gap: 2px; flex: 1; min-width: 0; }
.cev-texto b { font-size: 14px; font-weight: 650; }
.cev-texto > span { font-size: 12.5px; color: var(--texto-2); line-height: 1.45; }
.cev-exemplos { font-size: 11.5px; color: var(--texto-3); }
.cev-botao {
  flex: none; padding: 7px 13px; border-radius: var(--r-p);
  background: var(--marca); color: #fff; font-size: 12.5px; font-weight: 600;
}
.ce-andamento, .pe-andamento { display: grid; gap: 7px; }
.cea-linha, .pea-linha { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.cea-linha b, .pea-linha b { font-size: 13px; flex: 1; min-width: 0; }
@media (max-width: 560px) {
  .caixa-envio { flex-wrap: wrap; align-items: flex-start; }
  .cev-botao { width: 100%; text-align: center; padding: 10px 13px; }
}

/* ------------------------------------------------------------ fila de arquivos */
.fila-envio { display: grid; gap: 8px; }
.fe-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--r-p);
  background: var(--superficie-2);
}
.fe-item.pronto { border-color: color-mix(in srgb, var(--sucesso) 34%, transparent); background: var(--sucesso-fraca); }
.fe-item.erro   { border-color: color-mix(in srgb, var(--erro) 34%, transparent);    background: var(--erro-fraca); }
.fe-item.duvida { border-color: color-mix(in srgb, var(--atencao) 34%, transparent); background: var(--atencao-fraca); }
.fe-ico { flex: none; color: var(--texto-3); }
.fe-item.pronto .fe-ico { color: var(--sucesso); }
.fe-item.erro .fe-ico { color: var(--erro); }
.fe-item.duvida .fe-ico { color: var(--atencao); }
.fe-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fe-texto b { font-size: 13.2px; }
.fe-texto .campo-ajuda { margin: 0; overflow: hidden; text-overflow: ellipsis; }
.fe-barra { flex: none; width: 150px; }
.fe-marca { flex: none; }
@media (max-width: 560px) {
  .fe-item { flex-wrap: wrap; }
  .fe-barra, .fe-marca { width: 100%; }
}

/* ------------------------------------------------------------ conferência */
.conf-cab { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.conf-ico {
  width: 46px; height: 46px; border-radius: var(--r); flex: none;
  display: grid; place-items: center;
  background: var(--marca-fraca); color: var(--marca);
}
.conf-texto { flex: 1; min-width: 220px; display: grid; gap: 5px; }
.conf-texto h3 { font-size: 17px; line-height: 1.3; }
.conf-texto .campo-ajuda { margin: 0; }
.conf-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.conf-linha .campo-ajuda { margin: 0; }
.conf-motivo { font-size: 13px; color: var(--texto-2); line-height: 1.5; margin: 2px 0 0; }
.conf-acao { flex: none; }
.conf-resumo {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 17px; border-radius: var(--r);
  background: var(--marca-fraca);
  border: 1px solid var(--marca-contorno);
  border-left: 4px solid var(--marca);
  color: var(--texto);
}
.conf-resumo.neutra { background: var(--superficie-2); border-color: var(--borda); border-left-color: var(--borda-forte); }
.conf-resumo.neutra b, .conf-resumo.neutra > .ico { color: var(--texto-2); }
.conf-resumo > .ico { flex: none; color: var(--marca); margin-top: 2px; }
.conf-resumo b { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--marca); }
.conf-resumo p { margin: 4px 0 0; font-size: 15.5px; line-height: 1.5; font-weight: 550; }
.conf-botoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.conf-botoes .campo-ajuda { margin: 0; flex: 1; min-width: 230px; }
@media (max-width: 560px) {
  .conf-acao, .conf-acao .btn { width: 100%; justify-content: center; }
  .conf-botoes .btn { width: 100%; justify-content: center; }
  .conf-resumo p { font-size: 14.5px; }
}

/* cartões que só explicam, sem serem clicáveis */
.cartao-escolha.sem-clique { cursor: default; }
.cartao-escolha.sem-clique:hover { border-color: var(--borda); box-shadow: none; transform: none; }

/* ------------------------------------------------------------ botão flutuante de envio */
.fab-envio {
  position: fixed; z-index: 45;
  right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  background: linear-gradient(140deg, var(--marca), var(--marca-escura));
  color: #fff; box-shadow: var(--sombra-3);
  transition: transform .14s, box-shadow .14s;
}
.fab-envio:hover { transform: translateY(-2px) scale(1.04); }
.fab-envio.aberto { transform: rotate(45deg) scale(.94); }
.fab-envio:focus-visible { outline: 3px solid color-mix(in srgb, var(--marca) 45%, transparent); outline-offset: 3px; }

.fundo-envio { position: fixed; inset: 0; z-index: 94; background: rgba(10, 25, 33, .42); }
.painel-envio {
  position: fixed; z-index: 95;
  top: 0; right: 0; bottom: 0; width: 382px; max-width: 92vw;
  background: var(--superficie); border-left: 1px solid var(--borda);
  box-shadow: var(--sombra-3);
  display: flex; flex-direction: column;
  transform: translateX(102%); transition: transform .2s ease;
}
.painel-envio.visivel { transform: translateX(0); }
.pe-cab {
  display: flex; align-items: flex-start; gap: 10px; flex: none;
  padding: 16px 16px 13px; border-bottom: 1px solid var(--borda);
}
.pe-cab > div { flex: 1; min-width: 0; }
.pe-cab h3 { font-size: 16px; margin-bottom: 3px; }
.pe-cab small { font-size: 12px; color: var(--texto-2); line-height: 1.45; display: block; }
.pe-corpo { flex: 1; overflow-y: auto; padding: 14px 16px 24px; display: grid; gap: 12px; align-content: start; }
.pe-envio {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  padding: 14px; border: 1.5px dashed var(--borda-forte); border-radius: var(--r);
  background: var(--superficie-2); color: var(--texto); font: inherit; cursor: pointer;
}
.pe-envio:hover { border-color: var(--marca); background: var(--marca-fraca); }
.pe-envio-ico {
  width: 42px; height: 42px; border-radius: var(--r-p); flex: none; display: grid; place-items: center;
  background: var(--marca); color: #fff;
}
.pe-envio-texto { display: grid; gap: 3px; min-width: 0; }
.pe-envio-texto b { font-size: 14px; font-weight: 650; }
.pe-envio-texto > span { font-size: 12.5px; color: var(--texto-2); line-height: 1.45; }
.pe-envio-texto .campo-ajuda { margin: 0; font-size: 11.5px; }
.pe-titulo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--texto-3); font-weight: 650; padding-top: 4px;
}
.pe-lista { display: grid; gap: 7px; }
.pe-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--r-p);
  background: var(--superficie); color: var(--texto); font: inherit; cursor: pointer;
}
.pe-item:hover { background: var(--marca-fraca); border-color: var(--marca-contorno); }
.pe-item > .ico { flex: none; color: var(--texto-3); }
.pe-item-ico {
  width: 32px; height: 32px; border-radius: var(--r-p); flex: none; display: grid; place-items: center;
  background: var(--marca-fraca); color: var(--marca);
}
.pe-item-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pe-item-texto b { font-size: 13.2px; font-weight: 600; }
.pe-item-texto > span { font-size: 11.8px; color: var(--texto-2); line-height: 1.4; }
body.com-painel-envio { overflow: hidden; }

/* No celular o painel sobe de baixo, e o botão fica acima da área do sistema. */
@media (max-width: 760px) {
  .fab-envio { right: 14px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; }
  /* espaço extra no fim da página: o botão flutuante nunca cobre o conteúdo */
  .conteudo { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .painel-envio {
    top: auto; left: 0; right: 0; width: auto; max-width: none;
    max-height: 86vh; border-left: 0; border-top: 1px solid var(--borda);
    border-radius: var(--r-g) var(--r-g) 0 0;
    transform: translateY(102%);
  }
  .painel-envio.visivel { transform: translateY(0); }
  .pe-corpo { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* =====================================================================
   POLIMENTO VISUAL — camada de acabamento por cima do tema base.
   Sombras mais macias, cartões que respondem ao toque, gráficos e KPIs
   com mais presença, e o seletor de pílulas (Mês a mês / Ano inteiro).
   ===================================================================== */

/* cartões e KPIs com vida */
.card {
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.card:hover {
  box-shadow: var(--sombra-2);
  border-color: var(--marca-contorno);
}
.stat {
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.stat::before {
  content: '';
  position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg, var(--marca-clara), var(--marca));
  border-radius: 0 3px 3px 0;
  opacity: .9;
}
.stat.sucesso::before { background: linear-gradient(180deg, #2aa77e, var(--sucesso)); }
.stat.atencao::before { background: linear-gradient(180deg, #d99a2b, var(--atencao)); }
.stat.erro::before    { background: linear-gradient(180deg, #d95c50, var(--erro)); }
.stat:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.stat .valor { letter-spacing: -.4px; }

/* botões com profundidade e resposta */
.btn { transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
.btn.primario {
  background: linear-gradient(160deg, var(--marca) 0%, var(--marca-escura) 100%);
  box-shadow: 0 3px 10px rgba(15, 107, 138, .28);
}
.btn.primario:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 107, 138, .36); }
.btn.perigo:hover:not(:disabled)   { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.985); }

/* tabelas: linha sob o mouse com contraste suave */
tbody tr { transition: background .12s ease; }

/* gráficos: fundo próprio e tooltips nativos com destaque */
.grafico { background: linear-gradient(180deg, var(--superficie), var(--superficie-2)); border-radius: var(--r-p); }
.grafico rect { transition: opacity .12s ease; cursor: pointer; }
.grafico rect:hover { opacity: .78; }
.grafico circle { cursor: pointer; }
.grafico text { font-size: 10px; fill: var(--texto-3); }
.grade-linha { stroke: var(--borda); stroke-width: 1; }
.eixo { stroke: var(--borda-forte); stroke-width: 1.2; }

/* seletor de pílulas (Mês a mês / Ano inteiro) */
.seletor-pilula {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--fundo-2); border: 1px solid var(--borda); border-radius: var(--r-pill);
}
.seletor-pilula .pilula {
  border: 0; background: transparent; color: var(--texto-2);
  font: inherit; font-weight: 600; font-size: 13.5px;
  padding: 7px 18px; border-radius: var(--r-pill); cursor: pointer;
  transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.seletor-pilula .pilula:hover { color: var(--marca-escura); }
.seletor-pilula .pilula.ativa {
  background: var(--superficie); color: var(--marca-escura);
  box-shadow: var(--sombra-1);
}

/* relatório escrito pela IA: leitura confortável */
.relatorio-ia .texto-corrido {
  white-space: pre-wrap;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--marca);
  border-radius: var(--r-p);
  padding: 18px 20px;
  font-size: 14.5px;
  line-height: 1.7;
}

/* avisos com um respiro melhor */
.aviso { border-radius: var(--r-p); }
.aviso.sucesso { background: var(--sucesso-fraca); border-color: #bfe4d5; }

/* barra de rolagem discreta (navegadores WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 8px; border: 2px solid var(--fundo); }
::-webkit-scrollbar-thumb:hover { background: var(--texto-3); }

/* =====================================================================
   MATRIZ DE PERMISSÕES (Usuários › Telas) — visual novo
   ===================================================================== */

/* resumo ao vivo no topo do cartão */
.perm-resumo {
  margin: 14px 16px 0;
  padding: 14px 16px;
  background: linear-gradient(160deg, var(--marca-fraca), var(--superficie));
  border: 1px solid var(--marca-contorno);
  border-radius: var(--r);
}
.perm-resumo-titulo { margin-bottom: 9px; }
.perm-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.perm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-pill);
  padding: 5px 12px 5px 9px;
  font-size: 12.5px; font-weight: 600; color: var(--marca-escura);
  box-shadow: var(--sombra-1);
  animation: chipEntra .18s ease;
}
.perm-chip svg { color: var(--marca); }
@keyframes chipEntra { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }

/* ícone da tela na primeira coluna */
.perm-icone {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: var(--marca-fraca); color: var(--marca-escura);
  border: 1px solid var(--marca-contorno);
  border-radius: 10px;
}

/* controle segmentado Herdar · Liberar · Bloquear */
.seg3 {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--r-pill);
}
.seg3-op {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--texto-3);
  padding: 6px 13px; border-radius: var(--r-pill);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.seg3-op:hover { color: var(--texto); }
.seg3-op.ativa { background: var(--superficie); box-shadow: var(--sombra-1); }
.seg3-op.herdar.ativa   { color: var(--marca-escura); }
.seg3-op.liberar.ativa  { color: var(--sucesso); background: var(--sucesso-fraca); box-shadow: inset 0 0 0 1px #bfe4d5; }
.seg3-op.bloquear.ativa { color: var(--erro); background: var(--erro-fraca); box-shadow: inset 0 0 0 1px #f2c6c2; }

/* grupos da matriz */
.grupo-permissoes { margin-top: 6px; }
.grupo-permissoes .gp-titulo {
  display: flex; align-items: baseline; gap: 10px;
  padding: 14px 16px 8px;
  border-top: 1px solid var(--borda);
}
.grupo-permissoes:first-of-type .gp-titulo { border-top: 0; }
.grupo-permissoes .gp-titulo b {
  font-size: 12px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--texto-2);
}

/* =====================================================================
   GRÁFICOS ANIMADOS — as barras crescem, linhas e fatias surgem.
   Tudo desliga sozinho para quem pediu menos movimento no aparelho.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* barras: crescem do eixo para cima */
  .grafico rect {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: sfxBarra .65s cubic-bezier(.2, .8, .3, 1) backwards;
  }
  .grafico rect:nth-of-type(2n)  { animation-delay: .05s; }
  .grafico rect:nth-of-type(3n)  { animation-delay: .10s; }
  .grafico rect:nth-of-type(5n)  { animation-delay: .16s; }
  .grafico rect:nth-of-type(7n)  { animation-delay: .22s; }
  @keyframes sfxBarra { from { transform: scaleY(0); } }

  /* linha e pontos: surgem depois das barras */
  .grafico polyline, .grafico path:not(.rosca-fatia) {
    animation: sfxSurge .5s ease .45s backwards;
  }
  .grafico circle:not(.rosca-fatia) { animation: sfxSurge .4s ease .6s backwards; }
  @keyframes sfxSurge { from { opacity: 0; } }

  /* fatias da rosca: varrem uma a uma (delay por fatia vem inline) */
  .grafico path.rosca-fatia {
    transform-box: fill-box;
    transform-origin: center;
    animation: sfxFatia .55s cubic-bezier(.2, .8, .3, 1) backwards;
  }
  @keyframes sfxFatia { from { opacity: 0; transform: scale(.75); } }

  /* números dos KPIs sobem suavemente ao entrar */
  .stat { animation: sfxSobeKpi .35s ease backwards; }
  .stat:nth-child(2) { animation-delay: .06s; }
  .stat:nth-child(3) { animation-delay: .12s; }
  .stat:nth-child(4) { animation-delay: .18s; }
  @keyframes sfxSobeKpi { from { opacity: 0; transform: translateY(8px); } }
}

/* rosca com legenda dentro de cartões */
.rosca-e-legenda { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------ Contador: quem paga o quê */
.qpq {
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 14px 16px;
  background: var(--superficie-2);
}
.qpq-titulo {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; margin-bottom: 8px;
  border-bottom: 2px solid var(--borda);
}
.qpq-titulo.retido  { border-bottom-color: var(--atencao); color: var(--atencao); }
.qpq-titulo.empresa { border-bottom-color: var(--erro);    color: var(--erro); }
.qpq-titulo b { color: var(--texto); font-size: 13.5px; }
.qpq-linha {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; font-size: 13.5px;
  border-bottom: 1px dashed var(--borda);
}
.qpq-linha span { color: var(--texto-2); }
.qpq-linha b { font-variant-numeric: tabular-nums; }
.qpq-linha.forte { border-bottom: 0; margin-top: 2px; }
.qpq-linha.forte span, .qpq-linha.forte b { color: var(--texto); font-weight: 700; }
.qpq-linha.forte b { font-size: 15px; }

/* laudo técnico */
.laudo p {
  margin: 0 0 12px; font-size: 14px; line-height: 1.65; color: var(--texto);
  padding-left: 14px; border-left: 3px solid var(--marca-contorno);
}
.laudo p:last-child { color: var(--texto-3); font-size: 12.5px; }
.laudo p.laudo-alerta { border-left-color: var(--erro); background: var(--erro-fraca); padding: 10px 12px; border-radius: 0 var(--r-p) var(--r-p) 0; }

/* ------------------------------------------------ Lucro por contrato */
.margem-caixa { display: flex; align-items: center; gap: 9px; min-width: 130px; }
.margem-barra {
  flex: 1; height: 8px; border-radius: 6px;
  background: var(--fundo-2); overflow: hidden;
}
.margem-barra i {
  display: block; height: 100%; border-radius: 6px;
  transition: width .5s cubic-bezier(.2, .8, .3, 1);
}

/* ------------------------------------------------ botão "?" explica imposto */
.explica { position: relative; display: inline-block; margin-left: 6px; vertical-align: middle; }
.explica-botao {
  width: 18px; height: 18px; padding: 0;
  border: 1.5px solid var(--marca-contorno); border-radius: 50%;
  background: var(--marca-fraca); color: var(--marca-escura);
  font: 700 11px/1 inherit; cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.explica-botao:hover { transform: scale(1.12); }
.explica-botao.aberto { background: var(--marca); border-color: var(--marca); color: #fff; }
.explica-caixa {
  position: fixed; z-index: 90; left: -9999px; top: 0;
  width: min(340px, calc(100vw - 24px));
  display: block; text-align: left; white-space: normal;
  /* o balão vive dentro de títulos em maiúsculas: aqui volta ao normal */
  text-transform: none; letter-spacing: normal; font-weight: 400;
  font-size: 13.5px; line-height: 1.55;
  background: var(--superficie);
  border: 1px solid var(--marca-contorno); border-radius: var(--r);
  box-shadow: var(--sombra-3);
  padding: 11px 13px;
  animation: explicaAbre .18s ease;
}
@keyframes explicaAbre { from { opacity: 0; transform: translateY(-5px); } }
.explica-topo { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 5px; }
.explica-topo b { font-size: 13px; color: var(--marca-escura); flex: 1; }
.explica-fechar {
  border: 0; background: transparent; cursor: pointer; flex: none;
  font-size: 17px; line-height: 1; color: var(--texto-3); padding: 0 2px;
}
.explica-fechar:hover { color: var(--texto); }
.explica-texto { display: block; font-size: 12.5px; line-height: 1.55; color: var(--texto-2); font-weight: 400; }

/* =====================================================================
   CARTÃO DE CONTRATO — visual novo
   ===================================================================== */
.cartao-contrato { overflow: hidden; }
.cartao-contrato.inativo { opacity: .68; }
.cc-faixa {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px;
  background: linear-gradient(160deg, var(--marca-fraca), var(--superficie));
  border-bottom: 1px solid var(--borda);
}
.cc-icone {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--marca), var(--marca-escura));
  color: #fff; border-radius: 12px;
  box-shadow: 0 4px 12px rgba(15, 107, 138, .30);
}
.cc-ident { flex: 1; min-width: 0; }
.cc-codigo { font-size: 17px; font-weight: 800; letter-spacing: .2px; }
.cc-nome { font-size: 13px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-cliente { font-size: 12px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* gente do contrato */
.cc-gente { margin-bottom: 14px; }
.cc-gente-topo { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13.5px; }
.cc-gente-topo svg { vertical-align: -3px; color: var(--marca); }
.cc-gente-topo b { font-size: 16px; }
.cc-gente-barra {
  height: 10px; border-radius: 6px; overflow: hidden;
  background: var(--marca); /* operação = cor da marca */
}
.cc-gente-barra i.adm { display: block; height: 100%; background: var(--sucesso); transition: width .6s cubic-bezier(.2,.8,.3,1); }
.cc-gente-legenda { display: flex; gap: 16px; margin-top: 7px; font-size: 12.5px; color: var(--texto-2); flex-wrap: wrap; }
.cc-gente-legenda .ponto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.cc-gente-legenda .ponto.adm { background: var(--sucesso); }
.cc-gente-legenda .ponto.ope { background: var(--marca); }

/* fatos por extenso */
.cc-fatos { display: grid; gap: 9px; }
.cc-fato { display: flex; align-items: flex-start; gap: 10px; }
.cc-fato-icone {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  background: var(--fundo-2); color: var(--texto-2);
  border: 1px solid var(--borda); border-radius: 9px;
}
.cc-fato-textos { display: flex; flex-direction: column; min-width: 0; }
.cc-fato-rotulo { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--texto-3); font-weight: 700; }
.cc-fato-valor { font-size: 13.5px; color: var(--texto); }
.cc-acoes { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }

/* =====================================================================
   TEMA ESCOLHIDO À MÃO (menu do usuário): html[data-tema] vence o sistema.
   Sem data-tema, vale o automático (prefers-color-scheme acima).
   ===================================================================== */
html[data-tema="escuro"], html.tema-escuro {
  color-scheme: dark;
  --marca:        #3ea3c6;
  --marca-escura: #2a89aa;
  --marca-clara:  #79c8e2;
  --marca-fraca:  #12303b;
  --marca-contorno:#1d4b5c;
  --sucesso:      #3fbf90;
  --sucesso-fraca:#10312a;
  --atencao:      #dfa73f;
  --atencao-fraca:#33280f;
  --erro:         #ef6f63;
  --erro-fraca:   #3a1a19;
  --info:         #3ea3c6;
  --info-fraca:   #12303b;
  --fundo:        #0d1519;
  --fundo-2:      #111b21;
  --superficie:   #16222a;
  --superficie-2: #1a2830;
  --borda:        #25353f;
  --borda-forte:  #344854;
  --texto:        #e7eef2;
  --texto-2:      #a3b4bf;
  --texto-3:      #7c8e9a;
  --sombra-1: 0 1px 2px rgba(0,0,0,.4);
  --sombra-2: 0 2px 6px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.3);
  --sombra-3: 0 10px 30px rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.4);
}
html[data-tema="escuro"] .lateral-item.ativo, html.tema-escuro .lateral-item.ativo { color: var(--marca-clara); }
html[data-tema="escuro"] .avatar, html.tema-escuro .avatar { color: var(--marca-clara); }
html[data-tema="escuro"] .btn.primario,
html[data-tema="escuro"] .btn.perigo,
html[data-tema="escuro"] .btn.sucesso { color: #07222c; }
html[data-tema="escuro"] .passo.atual .estado,
html[data-tema="escuro"] .passo.atual .nome { color: var(--marca-clara); }
html[data-tema="escuro"] .passo.concluido .numero,
html[data-tema="escuro"] .passo.atual .numero { color: #07222c; }

html[data-tema="claro"], html.tema-claro {
  color-scheme: light;
  --marca:        #0f6b8a;
  --marca-escura: #0b4f66;
  --marca-clara:  #3f97b6;
  --marca-fraca:  #e6f2f7;
  --marca-contorno:#bfdde8;
  --sucesso:      #12805c;
  --sucesso-fraca:#e4f4ee;
  --atencao:      #b3730b;
  --atencao-fraca:#fdf2df;
  --erro:         #c0392f;
  --erro-fraca:   #fdeceb;
  --info:         #0f6b8a;
  --info-fraca:   #e6f2f7;
  --fundo:        #f6f8fa;
  --fundo-2:      #eef2f5;
  --superficie:   #ffffff;
  --superficie-2: #f9fbfc;
  --borda:        #e3e9ee;
  --borda-forte:  #cfd9e1;
  --texto:        #14212b;
  --texto-2:      #536470;
  --texto-3:      #7d8d99;
  --sombra-1: 0 1px 2px rgba(16, 35, 47, .05), 0 1px 3px rgba(16, 35, 47, .04);
  --sombra-2: 0 2px 6px rgba(16, 35, 47, .06), 0 8px 20px rgba(16, 35, 47, .05);
  --sombra-3: 0 10px 30px rgba(16, 35, 47, .12), 0 30px 60px rgba(16, 35, 47, .10);
}
html[data-tema="claro"] .lateral-item.ativo, html.tema-claro .lateral-item.ativo { color: var(--marca-escura); }
html[data-tema="claro"] .avatar, html.tema-claro .avatar { color: var(--marca-escura); }
html[data-tema="claro"] .btn.primario,
html[data-tema="claro"] .btn.perigo,
html[data-tema="claro"] .btn.sucesso { color: #fff; }
html[data-tema="claro"] .passo.atual .estado,
html[data-tema="claro"] .passo.atual .nome { color: var(--marca-escura); }
html[data-tema="claro"] .passo.concluido .numero,
html[data-tema="claro"] .passo.atual .numero { color: #fff; }

/* KPIs clicáveis e blocos de ajuste na folha */
.stat.clicavel { cursor: pointer; }
.stat.clicavel:hover { border-color: var(--marca-contorno); }
.stat.clicavel:active { transform: translateY(0) scale(.99); }
.ajuste-bloco {
  border: 1px solid var(--borda); border-radius: var(--r);
  background: var(--superficie-2);
  padding: 13px 15px; margin: 0 16px 12px;
}
.ajuste-bloco:first-of-type { margin-top: 14px; }
.ajuste-titulo b { font-size: 14px; }
.ajuste-linha { display: flex; flex-direction: column; gap: 9px; margin-top: 9px; }
.ajuste-linha .btn { align-self: flex-start; }

/* ------------------------------------------------ painel do funcionário na folha */
.painel-func { overflow: hidden; }
.pf-hero {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 18px;
  background: linear-gradient(150deg, var(--marca-escura), var(--marca));
  color: #fff;
}
.pf-avatar {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .18);
  border: 2px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  font-weight: 800; font-size: 18px; letter-spacing: .5px;
}
.pf-ident { flex: 1; min-width: 180px; }
.pf-nome { font-size: 16.5px; font-weight: 800; }
.pf-sub { font-size: 12.5px; opacity: .85; }
.pf-liquido { text-align: right; }
.pf-liquido span { display: block; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; opacity: .8; }
.pf-liquido b { font-size: 19px; }
.pf-acoes { display: flex; gap: 7px; flex-basis: 100%; }
.pf-acoes .btn { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); color: #fff; }
.pf-acoes .btn:hover { background: rgba(255, 255, 255, .24); }
@media (min-width: 720px) { .pf-acoes { flex-basis: auto; } }

/* simulador do mês */
.simulador { padding: 16px; }
.sim-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .sim-kpis { grid-template-columns: 1fr; } }
.sim-kpi {
  border: 1px solid var(--borda); border-radius: var(--r);
  background: var(--superficie-2);
  padding: 12px 14px;
}
.sim-kpi span { display: block; font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--texto-3); font-weight: 700; }
.sim-kpi b { font-size: 20px; font-variant-numeric: tabular-nums; }
.sim-kpi small { display: block; color: var(--texto-3); margin-top: 2px; }
.sim-kpi.desc b { color: var(--erro); }
.sim-kpi.liq { border-color: var(--sucesso); background: var(--sucesso-fraca); }
.sim-kpi.liq b { color: var(--sucesso); }
.sim-aplicar { display: flex; gap: 7px; flex-wrap: wrap; margin: 4px 0 6px; }

/* botão de tema no topo */
.btn.icone-so { padding: 8px 10px; border-radius: 50%; line-height: 0; }

/* ------------------------------------------------ ergonomia no toque */
@media (max-width: 720px) {
  .btn { min-height: 42px; }
  .btn.p { min-height: 36px; }
  .abas-internas { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .abas-internas > * { scroll-snap-align: start; }
  .stat { padding: 14px 14px; }
  input, select, textarea { font-size: 16px; } /* evita o zoom automático do iPhone */
}

/* =====================================================================
   CORTINA DE CARREGAMENTO — logo animado na entrada e nas atualizações
   ===================================================================== */
.splash {
  position: fixed; inset: 0; z-index: 999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background:
    radial-gradient(700px 380px at 80% 0%, rgba(63, 151, 182, .25), transparent),
    radial-gradient(600px 420px at 10% 100%, rgba(18, 128, 92, .18), transparent),
    linear-gradient(160deg, #0b2530, #083a4c 55%, #0f6b8a);
  color: #eaf6fb;
  opacity: 1; transition: opacity .4s ease;
}
.splash.saindo { opacity: 0; pointer-events: none; }
.splash-logo { position: relative; width: 108px; height: 108px; display: grid; place-items: center; }
.splash-logo img {
  border-radius: 26px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  animation: splashPulsa 2.2s ease-in-out infinite;
}
.splash-orbita {
  position: absolute; inset: -8px;
  border-radius: 32px;
  border: 2px solid transparent;
  border-top-color: #9fe3f7; border-right-color: rgba(159, 227, 247, .25);
  animation: splashGira 1.6s linear infinite;
}
@keyframes splashGira { to { transform: rotate(360deg); } }
@keyframes splashPulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.splash-nome { font-size: 22px; font-weight: 800; letter-spacing: 4px; }
.splash-texto { font-size: 13.5px; opacity: .85; }
.splash-barra {
  width: min(240px, 60vw); height: 4px; border-radius: 99px; overflow: hidden;
  background: rgba(255, 255, 255, .15);
}
.splash-barra i {
  display: block; height: 100%; width: 40%;
  border-radius: 99px;
  background: linear-gradient(90deg, #9fe3f7, #ffd66b);
  animation: splashVaiVem 1.3s ease-in-out infinite alternate;
}
@keyframes splashVaiVem { from { transform: translateX(-30%); } to { transform: translateX(180%); } }
@media (prefers-reduced-motion: reduce) {
  .splash-logo img, .splash-orbita, .splash-barra i { animation: none; }
}

/* =====================================================================
   POLIMENTO VISUAL DO PAINEL — logo, login e refinamento geral
   ===================================================================== */
/* logo real na marca da lateral e do login */
.marca-sigla, .login-marca .sigla {
  background: transparent !important;
  padding: 0 !important;
}
.marca-sigla::before, .login-marca .sigla::before {
  content: '';
  display: block;
  width: 40px; height: 40px;
  background: url('/logo-marca.svg') center/contain no-repeat;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(15, 107, 138, .35);
}
.marca-sigla.com-logo::before, .login-marca .sigla.com-logo::before { display: none; }
.marca-sigla { font-size: 0 !important; }
.login-marca .sigla { font-size: 0 !important; }

/* login: aurora suave atrás da arte */
.login-arte { position: relative; overflow: hidden; }
.login-arte::before, .login-arte::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .5; pointer-events: none;
}
.login-arte::before { width: 420px; height: 420px; background: #12805c; left: -12%; top: -14%; animation: flutuaLogin 11s ease-in-out infinite alternate; }
.login-arte::after { width: 380px; height: 380px; background: #3f97b6; right: -10%; bottom: -16%; animation: flutuaLogin 13s ease-in-out infinite alternate-reverse; }
@keyframes flutuaLogin { from { transform: translateY(-18px); } to { transform: translateY(20px); } }
@media (prefers-reduced-motion: reduce) { .login-arte::before, .login-arte::after { animation: none; } }

/* cartões e cabeçalhos mais vivos */
.card { transition: box-shadow .2s ease, border-color .2s ease; }
.card:hover { box-shadow: var(--sombra-2); }
.card-cab h3 { letter-spacing: -.2px; }
.pagina-titulo h1 { letter-spacing: -.6px; }

/* barra superior com respiro de vidro */
.topo-barra, .topo { backdrop-filter: blur(8px); }

/* atalho para o site institucional na tela de login */
.login-rodape .link-site {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; font-weight: 700; color: var(--marca);
}
.login-rodape .link-site:hover { text-decoration: underline; }

/* funções liga/desliga nas configurações */
.fn-linha {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--r-p); cursor: pointer;
}
.fn-linha:hover { background: var(--fundo-2); }
.fn-linha input { width: 19px; height: 19px; accent-color: var(--marca); flex: none; margin-top: 2px; }

/* autodiagnóstico de cálculos */
.diag-linha { padding: 8px 12px; border-radius: var(--r-p); margin-bottom: 6px; font-size: 13.5px; }
.diag-linha.ok { background: var(--sucesso-fraca); }
.diag-linha.erro { background: var(--erro-fraca); }

/* =====================================================================
   TEXTO RICO — relatórios da IA e dicas com ícones, chamadas e barras
   ===================================================================== */
.texto-rico { display: grid; gap: 10px; font-size: 14.5px; line-height: 1.7; }
.texto-rico .tr-paragrafo { color: var(--texto); }
.texto-rico .tr-num { color: var(--marca-escura); font-variant-numeric: tabular-nums; }

.texto-rico .tr-secao {
  display: flex; align-items: center; gap: 9px;
  margin-top: 8px; padding-bottom: 7px;
  border-bottom: 2px solid var(--marca-fraca);
}
.texto-rico .tr-secao:first-child { margin-top: 0; }
.texto-rico .tr-secao-icone {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  background: var(--marca-fraca); color: var(--marca-escura);
  border: 1px solid var(--marca-contorno); border-radius: 9px;
}
.texto-rico .tr-secao b { font-size: 14px; letter-spacing: .3px; text-transform: uppercase; color: var(--marca-escura); }

.texto-rico .tr-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.texto-rico .tr-lista li { display: flex; gap: 9px; align-items: flex-start; }
.texto-rico .tr-lista li svg { flex: none; margin-top: 4px; color: var(--sucesso); }

.texto-rico .tr-chamada {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px; border-radius: var(--r-p);
  border-left: 3px solid;
}
.texto-rico .tr-chamada svg { flex: none; margin-top: 2px; }
.texto-rico .tr-chamada.erro    { background: var(--erro-fraca); border-color: var(--erro); }
.texto-rico .tr-chamada.erro svg { color: var(--erro); }
.texto-rico .tr-chamada.info    { background: var(--info-fraca); border-color: var(--info); }
.texto-rico .tr-chamada.info svg { color: var(--info); }
.texto-rico .tr-chamada.sucesso { background: var(--sucesso-fraca); border-color: var(--sucesso); }
.texto-rico .tr-chamada.sucesso svg { color: var(--sucesso); }

.texto-rico .tr-barras { display: grid; gap: 8px; padding: 4px 0; }
.texto-rico .tr-barra { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; }
.texto-rico .tr-barra-nome { color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.texto-rico .tr-barra-trilho { height: 10px; border-radius: 6px; background: var(--fundo-2); overflow: hidden; }
.texto-rico .tr-barra-trilho i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--marca), var(--clara, var(--marca-clara))); animation: trBarraCresce .7s cubic-bezier(.2,.8,.3,1) backwards; transform-origin: left; }
@keyframes trBarraCresce { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .texto-rico .tr-barra-trilho i { animation: none; } }

/* validade nas obrigações */
.obr-validade { display: grid; gap: 2px; margin-top: 8px; font-size: 13.5px; }
.obr-validade b { color: var(--marca-escura); }

/* =====================================================================
   CAMADA DE DESIGN — cinza + azul corporativo
   (fios de luz azul, entradas em cascata, títulos com presença)
   ===================================================================== */
:root { --aco: #6FA8DC; --aco-claro: #BFD4E8; }

.pagina-titulo h1 { letter-spacing: -.4px; }
.pagina-titulo h1::after {
  content: '';
  display: block; width: 46px; height: 3px; margin-top: 7px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--aco), transparent);
}

/* cartões e KPIs entram subindo, um após o outro */
@media (prefers-reduced-motion: no-preference) {
  .conteudo .card, .conteudo .stat {
    animation: sfxSobe .45s cubic-bezier(.2, .8, .3, 1) backwards;
  }
  .conteudo .card:nth-child(2), .conteudo .stat:nth-child(2) { animation-delay: .05s; }
  .conteudo .card:nth-child(3), .conteudo .stat:nth-child(3) { animation-delay: .1s; }
  .conteudo .card:nth-child(4), .conteudo .stat:nth-child(4) { animation-delay: .15s; }
  .conteudo .card:nth-child(5), .conteudo .stat:nth-child(5) { animation-delay: .2s; }
  .modal-caixa { animation: sfxSobe .35s cubic-bezier(.2, .8, .3, 1); }
}
@keyframes sfxSobe { from { opacity: 0; transform: translateY(14px); } }

/* KPIs com fio azul ao passar o dedo */
.stat { position: relative; overflow: hidden; }
.stat::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--aco), var(--marca));
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.stat:hover::after, .stat.clicavel:focus-visible::after { transform: scaleX(1); }

.btn.primario {
  background: linear-gradient(140deg, var(--marca), var(--marca-escura));
  border-color: transparent;
}
.btn.primario:hover { filter: brightness(1.1); }

.lateral-item.ativo { box-shadow: inset 3px 0 0 var(--aco); }
.avatar { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--aco); }
table.tabela thead th { letter-spacing: .7px; }

/* ------------------------------------------- conferência automática */
.lista-achados { display: grid; gap: 10px; }
.achado {
  border: 1px solid var(--borda); border-left-width: 4px;
  border-radius: var(--r-p); padding: 13px 15px;
  background: var(--superficie-2);
}
.achado.alta { border-left-color: var(--erro); }
.achado.media { border-left-color: var(--atencao); }
.achado.baixa { border-left-color: var(--info); }
.achado-cab { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.achado-cab b { font-size: 14.5px; }
.achado-onde { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--texto-3); }
.achado-detalhe { margin-top: 6px; font-size: 13.5px; color: var(--texto-2); }
.achado-ids { margin-top: 5px; font-size: 12px; color: var(--texto-3); font-family: var(--mono, monospace); }

/* ------------------------------------------------- biblioteca de documentos */
.doc-lista { display: grid; }
.doc-linha {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px; border-bottom: 1px solid var(--borda);
}
.doc-linha:last-child { border-bottom: 0; }
.doc-icone {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: var(--marca-fraca); color: var(--marca);
}
.doc-meio { flex: 1; min-width: 0; }
.doc-nome { font-size: 14.5px; word-break: break-word; }
.doc-badges { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.doc-hora { font-size: 12px; color: var(--texto-3); }
.doc-resumo { margin-top: 5px; font-size: 13px; color: var(--texto-2); }
.doc-acoes { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .doc-linha { flex-wrap: wrap; } .doc-acoes { width: 100%; } }

/* -------------------------------------------- número-farol da folha */
.farol-folha {
  border-radius: var(--r); padding: 22px 24px;
  background: linear-gradient(140deg, var(--marca), var(--marca-escura));
  color: #fff; box-shadow: var(--sombra-3);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
}
.farol-folha .farol-rotulo {
  width: 100%; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; opacity: .85;
}
.farol-folha .farol-valor {
  font-size: clamp(34px, 9vw, 52px); font-weight: 800; letter-spacing: -1px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.farol-folha .farol-sub { font-size: 13.5px; opacity: .92; }
.farol-folha .farol-selo {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; padding: 7px 13px; border-radius: 99px;
  font-size: 12.5px; font-weight: 700;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3);
}
.farol-folha .farol-selo.batido { background: rgba(47, 125, 106, .5); }

/* --------------------------------------------- composição da folha */
.comp-grade { display: grid; gap: 2px; }
.comp-linha { display: flex; align-items: center; gap: 11px; padding: 9px 4px; border-bottom: 1px dashed var(--borda); }
.comp-linha:last-child { border-bottom: 0; }
.comp-bola { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.comp-rotulo { flex: 1; display: grid; }
.comp-rotulo b { font-size: 14px; }
.comp-valor { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px; }
.comp-consig { margin-top: 14px; padding: 14px; border-radius: var(--r-p); background: var(--marca-fraca); display: grid; gap: 12px; }
.comp-final { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--borda); }
.comp-final-valor { font-size: 22px; font-weight: 800; color: var(--marca); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ rosca da folha */
.rosca-caixa { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.rosca-palco { position: relative; width: 180px; height: 180px; flex: none; margin: 0 auto; }
.rosca { width: 100%; height: 100%; }
.rosca circle { transition: stroke-dasharray .6s ease; }
.rosca-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.rosca-centro b { font-size: 16px; font-variant-numeric: tabular-nums; }
.rosca-legenda { flex: 1; min-width: 230px; display: grid; gap: 9px; }
.rosca-item { display: flex; gap: 9px; align-items: baseline; font-size: 14px; }
.rosca-valor { color: var(--texto-2); font-size: 13px; }
.rosca-consig { padding-top: 9px; border-top: 1px dashed var(--borda); }

/* --------------------------------------------- barras comparativas */
.barras-comp { display: grid; gap: 13px; }
.barra-comp-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.barra-comp-nome { font-size: 13.5px; font-weight: 600; }
.barra-comp-valor { font-variant-numeric: tabular-nums; font-size: 14px; }
.barra-comp-trilho {
  display: block; height: 10px; margin-top: 5px; border-radius: 99px;
  background: var(--superficie-2); overflow: hidden;
}
.barra-comp-preenche {
  display: block; height: 100%; border-radius: 99px;
  transition: width .7s cubic-bezier(.2, .8, .3, 1);
}
.rosca circle { transition: stroke-dasharray .8s cubic-bezier(.2, .8, .3, 1); }

/* ------------------------------------- painel: para onde foi o dinheiro */
.painel-folha { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 26px; align-items: start; }
@media (max-width: 780px) { .painel-folha { grid-template-columns: 1fr; gap: 20px; } }
.painel-folha-rosca { display: grid; gap: 14px; justify-items: center; }
.painel-folha-legenda { display: grid; gap: 9px; width: 100%; }
.pf-chip {
  display: grid; gap: 1px; padding: 11px 13px; border-radius: var(--r-p);
  background: var(--superficie-2); border-left: 4px solid var(--borda);
}
.pf-chip.sucesso { border-left-color: var(--sucesso); }
.pf-chip.atencao { border-left-color: var(--atencao); }
.pf-chip b { font-size: 18px; font-variant-numeric: tabular-nums; }
.pf-titulo { font-size: 14px; margin-bottom: 12px; color: var(--texto-2); }

/* ------------------------------------------- os três números do mês */
.tres-num-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.tres-num {
  display: grid; gap: 3px; padding: 14px 15px; border-radius: var(--r-p);
  background: var(--superficie-2); border-left: 5px solid var(--borda);
}
.tres-num.primario { border-left-color: var(--marca); }
.tres-num.sucesso { border-left-color: var(--sucesso); }
.tres-num-valor { font-size: 21px; font-variant-numeric: tabular-nums; letter-spacing: -.4px; }

/* -------------------------------------------------- processo da folha */
.passos { display: grid; gap: 0; }
.passo { display: flex; gap: 14px; padding: 13px 2px; position: relative; }
.passo + .passo { border-top: 1px dashed var(--borda); }
.passo-bola {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-content: center; font-weight: 800; font-size: 13.5px;
  background: var(--superficie-2); color: var(--texto-2); border: 2px solid var(--borda);
}
.passo.feito .passo-bola { background: var(--sucesso); border-color: var(--sucesso); color: #fff; }
.passo.atual .passo-bola { border-color: var(--marca); color: var(--marca); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 18%, transparent); }
.passo-corpo { flex: 1; min-width: 0; }
.passo-titulo { font-size: 14.5px; }
.passo.atual .passo-titulo { color: var(--marca); }
.passo-desc { font-size: 13px; color: var(--texto-2); margin-top: 2px; }
.mt-p { margin-top: 8px; }

/* ---------------------------------------------------------------------
   PASTA COMPACTADA (.zip) na tela de Importar.
   Cada arquivo de dentro ganha a sua própria ficha de conferência, uma
   embaixo da outra, com uma faixa na lateral para deixar claro que todas
   pertencem à mesma pasta.
   --------------------------------------------------------------------- */
.pacote-filhos { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.pacote-item {
  border-left: 3px solid var(--marca);
  padding-left: 12px;
}
@media (max-width: 640px) {
  .pacote-item { border-left-width: 2px; padding-left: 8px; }
}

/* Lista simples de recados (o que ficou de fora da pasta). */
.lista-avisos { margin: 0; padding-left: 20px; }
.lista-avisos li { margin-bottom: 6px; color: var(--texto-2); font-size: 14px; }


/* ---- Jurídico: pesquisa do processo na internet ---- */
.pesq-linha {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 4px;
  border-bottom: 1px solid var(--borda, #e6e6e6);
  cursor: pointer;
}
.pesq-linha:last-of-type { border-bottom: 0; }
.pesq-linha input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; }
.pesq-linha b { display: block; }