/* =====================================================================
   STOP FREIOS | Faturamento de Empresas
   Cores tiradas da propria logo: verde #01923F e azul #01458E
   ===================================================================== */

:root {
  --verde:        #01923F;
  --verde-escuro: #017432;
  --verde-claro:  #E6F5EC;
  --verde-vivo:   #37B866;

  --azul:         #01458E;
  --azul-escuro:  #012C5C;
  --azul-noite:   #041F3C;
  --azul-claro:   #E6EFF9;

  --fundo:        #F3F5F8;
  --superficie:   #FFFFFF;
  --superficie-2: #F9FAFC;
  --borda:        #E2E6EC;
  --borda-forte:  #CBD2DC;

  --texto:      #14202E;
  --texto-2:    #56616F;
  --texto-3:    #858E9B;

  --vermelho:   #C6362F;
  --vermelho-bg:#FDECEA;
  --verde-ok:   #1F7A4D;
  --verde-bg:   #E7F5EE;
  --azul-tag:   #1E5AA8;
  --azul-bg:    #E9F0FB;
  --roxo:       #6B4BA8;
  --roxo-bg:    #F1ECFA;
  --ambar:      #97600A;
  --ambar-bg:   #FBF0DC;

  --raio:   10px;
  --raio-g: 14px;
  --sombra:   0 1px 2px rgba(4,31,60,.06), 0 4px 14px rgba(4,31,60,.06);
  --sombra-g: 0 10px 40px rgba(4,31,60,.20);
  --topo-h: 66px;
}

html[data-tema="escuro"] {
  --fundo:        #0C1219;
  --superficie:   #141C25;
  --superficie-2: #1A242F;
  --borda:        #26313D;
  --borda-forte:  #37444F;

  --texto:   #E9EEF3;
  --texto-2: #9FAAB7;
  --texto-3: #74808D;

  --verde-claro: #10261A;
  --azul-claro:  #101F33;
  --vermelho-bg: #33201E;
  --verde-bg:    #16291F;
  --azul-bg:     #16223A;
  --roxo-bg:     #241E33;
  --ambar-bg:    #2C2312;
  --sombra:   0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  --sombra-g: 0 10px 40px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }

/* elementos com [hidden] ficam escondidos mesmo tendo display flex/grid abaixo */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* estados de tela ------------------------------------------------------ */
#tela-login, #tela-app { display: none; }
body[data-tela="login"] #tela-login { display: grid; }
body[data-tela="app"]   #tela-app   { display: block; }
body[data-tela="carregando"] #carregando { display: grid; }

.carregando {
  display: none;
  position: fixed; inset: 0;
  place-items: center;
  background: var(--fundo);
  z-index: 200;
}
.spinner {
  width: 34px; height: 34px;
  border: 3px solid var(--borda-forte);
  border-top-color: var(--verde);
  border-radius: 50%;
  animation: gira .7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* =====================  BOTOES  ===================================== */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  color: var(--texto);
  border-radius: var(--raio);
  font: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, transform .05s, color .15s;
}
.btn:hover  { background: var(--superficie-2); border-color: var(--texto-3); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

.btn-primario {
  background: var(--verde);
  border-color: var(--verde);
  color: #fff;
}
.btn-primario:hover { background: var(--verde-escuro); border-color: var(--verde-escuro); color: #fff; }

.btn-perigo { color: var(--vermelho); border-color: var(--borda-forte); }
.btn-perigo:hover { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }

.btn-icone { padding: 9px; }
.btn-fantasma { border-color: transparent; background: transparent; color: var(--texto-2); }
.btn-fantasma:hover { background: var(--superficie-2); color: var(--texto); }
.btn-bloco { width: 100%; justify-content: center; padding: 12px; font-size: 14px; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* =====================  LOGIN  ====================================== */
.login {
  min-height: 100%;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(820px 460px at 50% -8%, rgba(1,146,63,.20), transparent 70%),
    radial-gradient(700px 420px at 85% 100%, rgba(1,69,142,.14), transparent 70%),
    var(--fundo);
}
.login-card {
  width: 100%; max-width: 400px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-top: 4px solid var(--verde);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-g);
  padding: 30px 30px 24px;
  text-align: center;
}
.login-logo { width: 168px; max-width: 70%; margin-bottom: 20px; }

/* no tema escuro a logo ganha um cartao branco para o azul do texto aparecer */
html[data-tema="escuro"] .login-logo {
  background: #fff;
  border-radius: var(--raio);
  padding: 12px 16px;
}

.login-card h1 { margin: 0; font-size: 19px; letter-spacing: -.2px; }
.login-sub { margin: 4px 0 22px; color: var(--texto-2); font-size: 13px; }
.login-erro {
  margin: 0 0 14px; padding: 9px 12px;
  background: var(--vermelho-bg); color: var(--vermelho);
  border-radius: var(--raio); font-size: 13px; text-align: left;
}
.login-rodape {
  margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid var(--borda);
  font-size: 11.5px; color: var(--texto-3);
}
.login-rodape a { color: var(--verde); font-weight: 700; text-decoration: none; }
.login-rodape a:hover { text-decoration: underline; }

/* =====================  CAMPOS  ===================================== */
.campo { display: block; text-align: left; margin-bottom: 14px; }
.campo > span {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 600; color: var(--texto-2);
  text-transform: uppercase; letter-spacing: .04em;
}
.campo > span b { color: var(--verde-escuro); }
.campo > span small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--texto-3); }

.campo input, .campo textarea, .campo select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  resize: vertical;
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(1,146,63,.20);
}
.campo textarea { line-height: 1.45; }

/* =====================  TOPO  ======================================= */
.topo {
  position: sticky; top: 0; z-index: 30;
  height: var(--topo-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 20px;
  background: var(--azul-noite);
  border-bottom: 3px solid var(--verde);
}
.topo-marca { display: flex; align-items: center; gap: 11px; flex: none; }
.topo-marca img { height: 34px; }
.topo-titulo { display: flex; flex-direction: column; line-height: 1.2; }
.topo-titulo strong { color: #fff; font-size: 14px; letter-spacing: -.1px; }
.topo-titulo span { color: #8FA0B4; font-size: 11px; }

.busca {
  flex: 1; max-width: 620px;
  position: relative; display: flex; align-items: center;
}
.busca svg { position: absolute; left: 12px; color: #7C8CA0; }
.busca input {
  width: 100%;
  padding: 10px 44px 10px 38px;
  border-radius: var(--raio);
  border: 1px solid #1D3350;
  background: #0B2542;
  color: #fff;
  font: inherit;
}
.busca input::placeholder { color: #718398; }
.busca input:focus {
  outline: none;
  border-color: var(--verde);
  background: #0E2C4E;
  box-shadow: 0 0 0 3px rgba(1,146,63,.20);
}
.busca kbd {
  position: absolute; right: 10px;
  padding: 1px 7px;
  border: 1px solid #26405E; border-radius: 5px;
  background: #12314F; color: #7C8CA0;
  font: 600 11px/1.6 inherit;
}
.busca input:focus ~ kbd { opacity: 0; }

.topo-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topo-acoes .btn { background: #0C2846; border-color: #1D3350; color: #E4EAF1; }
.topo-acoes .btn:hover { background: #123457; border-color: #2A4568; }
.topo-acoes .btn-primario { background: var(--verde); border-color: var(--verde); color: #fff; }
.topo-acoes .btn-primario:hover { background: var(--verde-vivo); border-color: var(--verde-vivo); color: #04240F; }

/* =====================  ABAS  ======================================= */
.abas {
  display: flex; gap: 4px;
  padding: 0 20px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  position: sticky; top: var(--topo-h); z-index: 25;
  overflow-x: auto;
}
.aba {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 16px;
  border: 0; border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--texto-2);
  font: 600 13px/1.4 inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.aba svg { width: 17px; height: 17px; }
.aba:hover { color: var(--texto); }
.aba.ativa { color: var(--verde-escuro); border-bottom-color: var(--verde); }
html[data-tema="escuro"] .aba.ativa { color: var(--verde-vivo); }

/* =====================  AVISO DEMO  ================================= */
.aviso {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 20px -4px;
  padding: 11px 14px;
  background: var(--ambar-bg);
  border: 1px solid rgba(151,96,10,.35);
  border-radius: var(--raio);
  font-size: 13px;
}
.aviso strong { color: var(--ambar); }
.aviso code {
  background: rgba(0,0,0,.07); padding: 1px 5px; border-radius: 4px;
  font-size: 12px;
}
html[data-tema="escuro"] .aviso code { background: rgba(255,255,255,.1); }
.aviso-fechar {
  margin-left: auto; border: 0; background: transparent;
  font-size: 20px; line-height: 1; color: var(--texto-2); cursor: pointer;
}

/* =====================  RESUMO  ===================================== */
.painel-resumo {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  padding: 18px 20px 0;
}
.cartao {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  transition: transform .12s, border-color .12s;
}
.cartao:hover { transform: translateY(-2px); border-left-color: var(--verde); }
.cartao.selecionado { border-left-color: var(--verde); background: var(--verde-claro); }
.cartao-num { font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
.cartao-rot { font-size: 11.5px; color: var(--texto-2); font-weight: 500; }
.cartao.destaque .cartao-num { color: var(--verde-escuro); }
html[data-tema="escuro"] .cartao.destaque .cartao-num { color: var(--verde-vivo); }

/* =====================  FILTROS  ==================================== */
.barra-filtros {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px 12px;
  flex-wrap: wrap;
}
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  padding: 6px 13px;
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  color: var(--texto-2);
  border-radius: 999px;
  font: 600 12.5px/1.4 inherit;
  cursor: pointer;
  transition: .15s;
}
.chip:hover { border-color: var(--texto-3); color: var(--texto); }
.chip.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
html[data-tema="escuro"] .chip.ativo { background: var(--verde); border-color: var(--verde); color: #fff; }

.barra-dir { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.contador { font-size: 12.5px; color: var(--texto-2); font-variant-numeric: tabular-nums; }

/* =====================  TABELA  ===================================== */
.tabela-area {
  margin: 0 20px 20px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  overflow: auto;
  max-height: calc(100vh - 340px);
}
.tabela { width: 100%; border-collapse: collapse; }

.tabela thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--superficie-2);
  padding: 11px 14px;
  text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-2);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
.tabela thead th[data-ord] { cursor: pointer; user-select: none; }
.tabela thead th[data-ord]:hover { color: var(--texto); }
.tabela thead th.ord-asc::after  { content: " ▲"; color: var(--verde); }
.tabela thead th.ord-desc::after { content: " ▼"; color: var(--verde); }

.col-nome    { width: 22%; }
.col-forma   { width: 36%; }
.col-contato { width: 22%; }
.col-tags    { width: 15%; }
.col-acoes   { width: 5%; }

.tabela tbody tr {
  border-bottom: 1px solid var(--borda);
  cursor: pointer;
  transition: background .12s;
}
.tabela tbody tr:hover { background: var(--verde-claro); }
.tabela tbody tr:last-child { border-bottom: 0; }
.tabela tbody tr.inativa { opacity: .55; }
.tabela td { padding: 12px 14px; vertical-align: top; }

.cel-nome { font-weight: 650; letter-spacing: -.1px; }
.cel-nome .cnpj { display: block; font-weight: 500; font-size: 11.5px; color: var(--texto-3); margin-top: 2px; }
.cel-nome .selo-inativo {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 4px; background: var(--borda); color: var(--texto-2);
  font-size: 10px; font-weight: 700; text-transform: uppercase; vertical-align: middle;
}

.cel-forma {
  color: var(--texto-2);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
  white-space: pre-line;
}
.cel-contato { font-size: 12.5px; color: var(--texto-2); }
.cel-contato .linha { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.cel-contato .pessoa { color: var(--texto); font-weight: 600; }
.cel-contato .mais { color: var(--texto-3); font-size: 11.5px; }

.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag {
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;
}
.tag-email     { background: var(--azul-bg);     color: var(--azul-tag); }
.tag-wpp       { background: var(--verde-bg);    color: var(--verde-ok); }
.tag-motorista { background: var(--ambar-bg);    color: var(--ambar); }
.tag-assina    { background: var(--verde-claro); color: var(--verde-escuro); }
.tag-aprov     { background: var(--roxo-bg);     color: var(--roxo); }
.tag-iss       { background: var(--vermelho-bg); color: var(--vermelho); }
.tag-excecao   { background: var(--vermelho-bg); color: var(--vermelho); }
.tag-venc      { background: var(--borda);       color: var(--texto-2); }
.tag-neutra    { background: var(--borda);       color: var(--texto-2); }
html[data-tema="escuro"] .tag-assina { color: var(--verde-vivo); }

.cel-acoes { text-align: right; white-space: nowrap; }
.acao {
  border: 0; background: transparent; color: var(--texto-3);
  padding: 5px; border-radius: 6px; cursor: pointer;
}
.acao:hover { background: var(--borda); color: var(--texto); }

mark { background: rgba(1,146,63,.28); color: inherit; border-radius: 3px; padding: 0 1px; }

.vazio { padding: 60px 20px; text-align: center; color: var(--texto-2); }
.vazio svg { width: 40px; height: 40px; color: var(--borda-forte); }
.vazio p { margin: 10px 0 18px; }

/* =====================  DASHBOARD  ================================== */
.dash-topo {
  display: flex; align-items: flex-end; gap: 16px;
  padding: 22px 20px 0;
  flex-wrap: wrap;
}
.dash-topo h2 { margin: 0; font-size: 19px; letter-spacing: -.3px; }
.dash-topo p  { margin: 4px 0 0; color: var(--texto-2); font-size: 13px; }
.dash-topo > .btn, .dash-topo .log-acoes { margin-left: auto; }
.log-acoes { display: flex; gap: 8px; }

.dash-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  padding: 18px 20px 0;
}
.kpi {
  padding: 16px 18px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  position: relative; overflow: hidden;
}
.kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--verde);
}
.kpi.azul::before   { background: var(--azul); }
.kpi.ambar::before  { background: var(--ambar); }
.kpi.vermelho::before { background: var(--vermelho); }
.kpi-num { font-size: 28px; font-weight: 750; letter-spacing: -.8px; line-height: 1.1; }
.kpi-rot { font-size: 12px; color: var(--texto-2); font-weight: 600; margin-top: 2px; }
.kpi-sub { font-size: 11.5px; color: var(--texto-3); margin-top: 5px; }

.dash-grade {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  padding: 18px 20px 20px;
}
.quadro {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: 18px 20px 20px;
}
.quadro.col-2 { grid-column: 1 / -1; }
.quadro-topo h3 { margin: 0; font-size: 14.5px; letter-spacing: -.1px; }
.quadro-topo p  { margin: 3px 0 16px; font-size: 12px; color: var(--texto-3); }

/* barras horizontais -------------------------------------------------- */
.barras { display: flex; flex-direction: column; gap: 11px; }
.barra-item {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr auto;
  align-items: center; gap: 12px;
  border: 0; background: transparent; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  width: 100%;
}
.barra-item:hover .barra-rot { color: var(--texto); }
.barra-item:hover .barra-preenche { filter: brightness(1.08); }
.barra-rot { font-size: 12.5px; color: var(--texto-2); font-weight: 600; transition: color .15s; }
.barra-trilho {
  display: block;
  height: 22px; border-radius: 6px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  overflow: hidden;
}
.barra-preenche {
  display: block;
  height: 100%;
  background: var(--verde);
  border-radius: 5px 0 0 5px;
  transition: width .5s cubic-bezier(.22,.8,.3,1), filter .15s;
}
.barra-preenche.c-azul     { background: var(--azul); }
.barra-preenche.c-verde    { background: var(--verde); }
.barra-preenche.c-ambar    { background: #C98A1E; }
.barra-preenche.c-roxo     { background: var(--roxo); }
.barra-preenche.c-vermelho { background: var(--vermelho); }
.barra-preenche.c-ciano    { background: #0E7C86; }
.barra-preenche.c-cinza    { background: var(--borda-forte); }
.barra-val {
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  min-width: 74px; text-align: right; color: var(--texto);
}
.barra-val small { font-weight: 600; color: var(--texto-3); margin-left: 4px; }

/* rosca --------------------------------------------------------------- */
.rosca-area { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.rosca { width: 168px; height: 168px; flex: none; }
.rosca circle { transition: stroke-dasharray .6s cubic-bezier(.22,.8,.3,1); }
.rosca-centro-num { font: 700 26px/1 inherit; fill: var(--texto); }
.rosca-centro-rot { font: 600 9px/1 inherit; fill: var(--texto-3); letter-spacing: .08em; }
.rosca-legenda { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 190px; }
.legenda-item {
  display: flex; align-items: center; gap: 9px;
  border: 0; background: transparent; padding: 2px 0;
  font: inherit; text-align: left; cursor: pointer; color: inherit;
}
.legenda-item:hover .legenda-rot { color: var(--texto); text-decoration: underline; }
.legenda-cor { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.legenda-rot { font-size: 12.5px; color: var(--texto-2); flex: 1; }
.legenda-val { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* mini lista ---------------------------------------------------------- */
.mini-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.mini-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--verde);
  border-radius: var(--raio);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.mini-item:hover { border-color: var(--verde); background: var(--verde-claro); }
.mini-nome { font-size: 12.5px; font-weight: 650; flex: 1; }
.mini-val {
  font-size: 11.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: var(--verde-claro); color: var(--verde-escuro);
  white-space: nowrap;
}
html[data-tema="escuro"] .mini-val { color: var(--verde-vivo); }
.mini-vazio { color: var(--texto-3); font-size: 13px; }

/* =====================  LOG DE OPERACOES  =========================== */
.log-filtros {
  display: flex; align-items: flex-end; gap: 12px;
  padding: 18px 20px 14px;
  flex-wrap: wrap;
}
.campo-linha { margin-bottom: 0; min-width: 160px; }
.campo-cresce { flex: 1; min-width: 220px; }
.log-filtros .contador { padding-bottom: 11px; margin-left: auto; }

.tabela-log .col-quando  { width: 15%; }
.tabela-log .col-quem    { width: 15%; }
.tabela-log .col-oque    { width: 18%; }
.tabela-log .col-alvo    { width: 22%; }
.tabela-log .col-detalhe { width: 30%; }
.tabela-log tbody tr { cursor: default; }
.tabela-log tbody tr:hover { background: var(--superficie-2); }

.log-quando { font-size: 12.5px; color: var(--texto-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.log-quando small { display: block; color: var(--texto-3); font-size: 11px; }
.log-quem { font-weight: 650; font-size: 13px; }
.log-quem small { display: block; font-weight: 500; font-size: 11px; color: var(--texto-3); }
.log-alvo { font-size: 12.5px; }
.log-detalhe { font-size: 12px; color: var(--texto-2); white-space: pre-line; }
.log-detalhe .mudanca { display: block; }
.log-detalhe b { color: var(--texto); font-weight: 650; }

.selo-acao {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.selo-acao svg { width: 12px; height: 12px; }
.a-entrou   { background: var(--verde-bg);    color: var(--verde-ok); }
.a-saiu     { background: var(--borda);       color: var(--texto-2); }
.a-criou    { background: var(--azul-bg);     color: var(--azul-tag); }
.a-editou   { background: var(--ambar-bg);    color: var(--ambar); }
.a-excluiu  { background: var(--vermelho-bg); color: var(--vermelho); }
.a-usuario  { background: var(--roxo-bg);     color: var(--roxo); }
.a-exportou { background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borda); }

/* =====================  RODAPE  ===================================== */
.rodape {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  padding: 4px 20px 28px;
  color: var(--texto-3); font-size: 12px;
  text-align: center;
}
.rodape img { height: 20px; opacity: .75; }
.rodape a { color: var(--verde); font-weight: 700; text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
html[data-tema="escuro"] .rodape a { color: var(--verde-vivo); }

/* =====================  DRAWER  ===================================== */
.drawer-fundo, .modal-fundo {
  position: fixed; inset: 0;
  background: rgba(4,31,60,.45);
  backdrop-filter: blur(2px);
  z-index: 60;
  animation: surge .15s ease;
}
@keyframes surge { from { opacity: 0; } }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(480px, 100%);
  z-index: 70;
  background: var(--superficie);
  border-left: 1px solid var(--borda);
  box-shadow: var(--sombra-g);
  display: flex; flex-direction: column;
  animation: entra .22s cubic-bezier(.22,.8,.3,1);
}
@keyframes entra { from { transform: translateX(30px); opacity: 0; } }

.drawer-topo {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--borda);
  border-top: 4px solid var(--verde);
}
.drawer-topo h2 { margin: 0; font-size: 17px; line-height: 1.3; letter-spacing: -.2px; }
.drawer-cnpj { margin: 4px 0 0; font-size: 12.5px; color: var(--texto-3); }
.drawer-topo .btn-icone { margin-left: auto; }

.drawer-corpo { flex: 1; overflow-y: auto; padding: 18px 20px 24px; }

.bloco { margin-bottom: 20px; }
.bloco-tit {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-3);
  margin-bottom: 7px;
}
.bloco-texto {
  white-space: pre-line;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--verde);
  border-radius: var(--raio);
  padding: 12px 14px;
  line-height: 1.55;
}
.bloco-texto.obs { border-left-color: var(--borda-forte); }
.bloco-texto.alerta { border-left-color: var(--vermelho); background: var(--vermelho-bg); }

.lista-contato { display: flex; flex-direction: column; gap: 6px; }
.item-contato {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-size: 13px;
}
.item-contato a { color: var(--texto); text-decoration: none; word-break: break-all; }
.item-contato a:hover { color: var(--verde-escuro); text-decoration: underline; }
.item-contato .icones { margin-left: auto; display: flex; gap: 2px; }
.item-contato .icones .acao:hover { background: var(--borda-forte); }

.meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--texto-3); }

.drawer-rodape {
  display: flex; gap: 8px; justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--borda);
  background: var(--superficie-2);
}

/* =====================  MODAL  ====================================== */
.modal {
  position: fixed; z-index: 70;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(760px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--superficie);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-g);
  overflow: hidden;
  animation: sobe .2s cubic-bezier(.22,.8,.3,1);
}
@keyframes sobe { from { transform: translate(-50%, -46%); opacity: 0; } }
.modal form { display: contents; }
.modal-pequeno { width: min(420px, calc(100% - 32px)); }

.modal-topo {
  display: flex; align-items: center;
  padding: 18px 20px;
  border-top: 4px solid var(--verde);
  border-bottom: 1px solid var(--borda);
}
.modal-topo h2 { margin: 0; font-size: 17px; letter-spacing: -.2px; }
.modal-topo .btn-icone { margin-left: auto; }
.modal-corpo { padding: 20px; overflow-y: auto; }
.modal-rodape {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--borda);
  background: var(--superficie-2);
}

.grade { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grade .col-2 { grid-column: 1 / -1; }

.marcadores {
  margin: 6px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie-2);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px;
}
.marcadores legend {
  padding: 0 6px;
  font-size: 12px; font-weight: 600; color: var(--texto-2);
}
.marcadores legend small { font-weight: 500; color: var(--texto-3); }
.marca { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.marca input { width: 16px; height: 16px; accent-color: var(--verde); cursor: pointer; }

.form-erro {
  margin: 14px 0 0; padding: 10px 12px;
  background: var(--vermelho-bg); color: var(--vermelho);
  border-radius: var(--raio); font-size: 13px;
}

/* =====================  USUARIOS  =================================== */
.quem-sou {
  display: flex; flex-direction: column; line-height: 1.2;
  padding: 0 4px 0 8px; margin-left: 4px;
  border-left: 1px solid #1D3350;
  text-align: right;
}
.quem-sou strong { color: #fff; font-size: 12.5px; }
.quem-sou span {
  color: var(--verde-vivo); font-size: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}

.ajuda {
  margin: 0 0 14px; padding: 10px 13px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--verde);
  border-radius: var(--raio);
  font-size: 13px; color: var(--texto-2);
}

.lista-usuarios { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.usuario-linha {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.usuario-nome { display: block; font-weight: 650; font-size: 13.5px; }
.usuario-sub  { display: block; font-size: 12px; color: var(--texto-3); }
.selo-eu {
  display: inline-block; margin-left: 7px; padding: 1px 6px;
  border-radius: 4px; background: var(--verde-claro); color: var(--verde-escuro);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
}
html[data-tema="escuro"] .selo-eu { color: var(--verde-vivo); }
.usuario-linha .tag { margin-left: auto; }
.usuario-acoes { display: flex; gap: 2px; }

.novo-usuario { padding-top: 18px; border-top: 1px solid var(--borda); }
.novo-usuario .bloco-tit { margin-bottom: 12px; }
.novo-usuario .grade { gap: 0 16px; }

/* =====================  TOASTS  ===================================== */
.avisos {
  position: fixed; right: 18px; bottom: 18px; z-index: 120;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 15px;
  background: var(--azul-noite); color: #fff;
  border-radius: var(--raio);
  box-shadow: var(--sombra-g);
  font-size: 13px; font-weight: 500;
  animation: entra .2s ease;
  max-width: 360px;
}
.toast.erro  { background: var(--vermelho); }
.toast.ok::before { content: "✓"; color: var(--verde-vivo); font-weight: 700; }

/* =====================  RESPONSIVO  ================================= */
@media (max-width: 1180px) {
  .painel-resumo { grid-template-columns: repeat(3, 1fr); }
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .col-tags { display: none; }
  .tabela:not(.tabela-log) td:nth-child(4),
  .tabela:not(.tabela-log) th:nth-child(4) { display: none; }
}
@media (max-width: 980px) {
  .dash-grade { grid-template-columns: 1fr; }
  .tabela-log .col-detalhe, .tabela-log td:nth-child(5) { display: none; }
}
@media (max-width: 860px) {
  .topo { height: auto; flex-wrap: wrap; padding: 12px 14px; gap: 10px; }
  .abas { top: 0; position: static; padding: 0 8px; }
  .busca { order: 3; max-width: none; flex-basis: 100%; }
  .busca kbd { display: none; }
  .topo-acoes .btn span { display: none; }
  .topo-acoes .btn { padding: 9px; }
  .painel-resumo { grid-template-columns: repeat(2, 1fr); padding: 14px 14px 0; }
  .dash-kpis { grid-template-columns: repeat(2, 1fr); padding: 14px 14px 0; }
  .dash-topo, .dash-grade, .log-filtros { padding-inline: 14px; }
  .barra-filtros, .tabela-area, .aviso { margin-inline: 14px; }
  .barra-filtros { padding: 14px 0 10px; margin-inline: 14px; }
  .tabela-area { max-height: none; }
  .col-contato { display: none; }
  .tabela:not(.tabela-log) td:nth-child(3),
  .tabela:not(.tabela-log) th:nth-child(3) { display: none; }
  .grade, .marcadores { grid-template-columns: 1fr; }
  .cartao-num { font-size: 20px; }
  .barra-item { grid-template-columns: minmax(96px, 40%) 1fr auto; gap: 8px; }
  .barra-val { min-width: 60px; }
  .tabela-log .col-alvo, .tabela-log td:nth-child(4) { display: none; }
}

/* =====================  IMPRESSAO  ================================== */
@media print {
  .topo, .abas, .barra-filtros, .painel-resumo, .rodape, .aviso, .avisos,
  .drawer, .drawer-fundo, .modal, .modal-fundo, .col-acoes,
  .dash-topo .btn, .log-filtros { display: none !important; }
  .tabela-area { margin: 0; border: 0; box-shadow: none; max-height: none; overflow: visible; }
  .cel-forma { -webkit-line-clamp: unset; display: block; }
  .quadro { break-inside: avoid; box-shadow: none; }
  body { background: #fff; }
}