/* ==========================================================================
   Apostila / Nucleo Avalanche - PAINEL ADMIN
   Design system "papel recortado" da area de mentorados.

   Base compartilhada: styles.css (tokens, fundo texturizado, botoes solidos,
   selos, pills, blocos de papel, curva de movimento). Aqui mora SO o que e
   exclusivo do painel: panes, tabelas, drawer, graficos, faturamento, agenda.

   Uma familia tipografica (Bricolage Grotesque, via var(--font)).
   Zero degrade de cor. Zero emoji. Zero travessao. Botao sempre preenchido.
   ========================================================================== */

/* ==========================================================================
   1. SHELL E PANES
   ========================================================================== */
/* o conteudo do admin ocupa a largura toda que o .app (90vw) oferece */
.content-inner.admin-content{max-width:none;padding-top:0;gap:22px}

.admin-pane{display:none;min-width:0}
.admin-pane.is-active{
  display:flex;flex-direction:column;gap:22px;min-width:0;
  animation:rise .4s var(--ease) both;
}
.admin-pane[hidden]{display:none}

/* ---- menu lateral do admin: cada aba e um cartao de papel ---- */
.admin-nav{display:flex;flex-direction:column;gap:14px}
.admin-nav .nav-item{margin:0}
.admin-nav .nav-item .num svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
/* selo de cada aba: cores alternadas, a assinatura vem da variacao */
.admin-nav .nav-item:nth-child(6n+1) .num{background:var(--navy);color:var(--white-ink)}
.admin-nav .nav-item:nth-child(6n+2) .num{background:var(--teal);color:var(--white-ink)}
.admin-nav .nav-item:nth-child(6n+3) .num{background:var(--mustard);color:var(--navy)}
.admin-nav .nav-item:nth-child(6n+4) .num{background:var(--green);color:var(--white-ink)}
.admin-nav .nav-item:nth-child(6n+5) .num{background:var(--gold);color:var(--navy)}
.admin-nav .nav-item:nth-child(6n+6) .num{background:var(--coral);color:var(--white-ink)}
/* rodape: os dois atalhos empilhados, senao "Area de membros" quebra em duas linhas */
#adminSidebar .sidebar-foot .foot-actions{flex-direction:column;gap:10px}
#adminSidebar .sidebar-foot .foot-actions .btn-ghost{flex:0 0 auto;width:100%;justify-content:center}

/* aba ativa: coral solido, selo vira papel */
.admin-nav .nav-item.active{background:var(--coral);color:var(--white-ink);border-color:rgba(87,61,33,.5)}
.admin-nav .nav-item.active .num{background:var(--paper-light);color:var(--coral-2)}

/* ==========================================================================
   2. PAINEL (bloco de papel do admin)
   ========================================================================== */
.panel{min-width:0;overflow:hidden}
.panel-head{padding:22px 24px 16px;border-bottom:2px solid var(--linha-soft);min-width:0}
.panel-head h2{font-weight:800;font-size:21px;line-height:1.15;color:var(--ink)}
.panel-head p{font-weight:500;font-size:13.5px;color:var(--ink-2);margin-top:6px;line-height:1.5}
.panel-body{padding:22px 24px 24px;min-width:0}
.panel .panel{background:var(--paper-cream);box-shadow:var(--shadow-small);border-radius:12px}
.panel .panel .panel-head{border-bottom-color:var(--linha)}

/* ---- painel recolhivel (Novo aluno / Adicionar produto) ---- */
.panel-collapsible .panel-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  cursor:pointer;text-align:left;
  background:var(--paper-light);color:var(--ink);
  border:0;border-bottom:2px solid var(--linha-soft);border-radius:14px 14px 0 0;
  box-shadow:none;
  transition:background .2s var(--ease);
}
.panel-collapsible .panel-toggle:hover{background:var(--paper-cream);transform:none;box-shadow:none}
.panel-collapsible .panel-toggle:active{transform:none;box-shadow:none}
.panel-toggle-text{display:flex;flex-direction:column;gap:5px;min-width:0}
.panel-toggle-title{font-weight:800;font-size:21px;line-height:1.15;color:var(--ink)}
.panel-toggle-sub{font-weight:500;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.panel-toggle-chev{
  flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;
  border-radius:9px;background:var(--navy);color:var(--white-ink);
  box-shadow:var(--shadow-press);transform:rotate(-4deg);
  transition:transform .3s var(--ease);
}
.panel-toggle-chev svg{width:17px;height:17px;display:block;stroke:currentColor;fill:none}
.panel-collapsible.is-open .panel-toggle-chev{transform:rotate(-4deg) rotate(180deg)}
.panel-collapse-body[hidden]{display:none}

/* ==========================================================================
   3. FORMULARIOS
   ========================================================================== */
.create-form{display:flex;flex-direction:column;gap:4px}
.create-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.create-grid .field{margin-bottom:0}
.field-wide{grid-column:1 / -1}
.create-form .btn-primary{align-self:flex-start;margin-top:8px}

.pwd-row{display:flex;gap:9px;flex-wrap:wrap}
.pwd-row input{flex:1 1 160px}
.pwd-row .gen{flex:0 0 auto;background:var(--mustard);color:var(--navy);padding:0 18px;font-weight:800}

.pm-active-row{
  display:inline-flex;align-items:center;gap:10px;margin:16px 0 6px;
  font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);cursor:pointer;
}
.pm-active-row input{width:19px;height:19px;accent-color:var(--coral);cursor:pointer}
.pm-hint{font-weight:500;font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:4px 0 14px}
.pm-hint b{color:var(--ink);font-weight:800}

/* credenciais recem-criadas */
.cred-note{
  display:none;margin-top:20px;
  background:var(--paper-cream);border:2px solid var(--teal);border-radius:12px;
  padding:18px 20px;box-shadow:var(--shadow-small);
}
.cred-note.show{display:block;animation:rise .3s var(--ease) both}
.cred-note h3{font-weight:800;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:12px}
.cred-line{display:flex;align-items:center;gap:11px;margin-top:9px;flex-wrap:wrap}
.cred-line .k{font-weight:800;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);flex:0 0 62px}
.cred-line .v{font-weight:700;font-size:14px;color:var(--ink);word-break:break-all;flex:1 1 140px}
.cred-line button{background:var(--teal);color:var(--white-ink);font-size:12.5px;padding:7px 14px;border-radius:9px}

/* ==========================================================================
   4. TABELAS (papel, cabecalho 800 uppercase, linhas em linha-soft)
   ========================================================================== */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}
/* a tabela nao se espreme: abaixo do minimo ela rola DENTRO do .table-wrap */
.table-wrap>table.users{min-width:700px}
.table-wrap#tableWrap>table.users{min-width:1060px}
.table-wrap#pmWrap>table.users{min-width:1080px}
.table-wrap#evWrap>table.users{min-width:1000px}
/* "Por produto": quantidade e receita encostadas a direita, o valor nunca quebra */
.table-wrap#fatProdWrap>table.tbl th:nth-child(2),
.table-wrap#fatProdWrap>table.tbl td:nth-child(2){width:90px;text-align:right}
.table-wrap#fatProdWrap>table.tbl th:nth-child(3),
.table-wrap#fatProdWrap>table.tbl td:nth-child(3){
  width:150px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.table-wrap#fatProdWrap>table.tbl td:nth-child(3){font-weight:800}

table.users,table.tbl{
  width:100%;border-collapse:collapse;
  font-family:var(--font);font-weight:500;font-size:14px;color:var(--ink);
}
table.users th,table.tbl th{
  text-align:left;font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);padding:0 14px 12px;border-bottom:2px solid var(--linha);white-space:nowrap;
}
table.users td,table.tbl td{padding:14px;border-bottom:2px solid var(--linha-soft);vertical-align:middle}
table.users tr:last-child td,table.tbl tr:last-child td{border-bottom:0}
table.users .u-name{font-weight:800;color:var(--ink)}
table.users .u-email{font-weight:500;color:var(--ink-2);font-size:13px}
table.users .u-date{font-weight:500;color:var(--ink-3);font-size:13px;white-space:nowrap}
table.users td.col-clickable{cursor:pointer}
table.users tr.urow{transition:background .2s var(--ease)}
table.users tr.urow:hover{background:var(--paper-cream)}
.u-lessons{font-weight:700;font-size:13px;color:var(--ink-2);white-space:nowrap}

/* ==========================================================================
   5. SELOS, PILLS E CHIPS DO ADMIN
   ========================================================================== */
.plan-badge,.we-badge,.ev-granted,.fat-pill{
  display:inline-block;white-space:nowrap;
  font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;
  border:2px solid rgba(87,61,33,.35);
  background:var(--paper-cream);color:var(--navy);
}
.plan-badge.starter{background:var(--mustard);color:var(--navy)}
.plan-badge.complete{background:var(--teal);color:var(--white-ink)}
.we-badge.hubla{background:var(--coral);color:var(--white-ink)}
.we-badge.hotmart{background:var(--mustard);color:var(--navy)}
.we-badge.outro{background:var(--navy);color:var(--white-ink)}
.ev-granted{display:inline-flex;align-items:center;gap:7px}
.ev-granted.yes{background:var(--teal);color:var(--white-ink)}
.ev-granted.no{background:var(--paper-aged);color:var(--navy)}
.fat-pill.paid{background:var(--teal);color:var(--white-ink)}
.fat-pill.refund{background:var(--brick);color:var(--white-ink)}

.pm-value{font-weight:700;font-size:13px;color:var(--ink-2);white-space:nowrap}
.pm-grants{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pm-chip{
  display:inline-block;white-space:nowrap;
  font-weight:800;font-size:11px;letter-spacing:.04em;
  padding:4px 10px;border-radius:999px;
  background:var(--paper-aged);color:var(--navy);
  border:2px solid rgba(87,61,33,.3);
}
.pm-chip.plan{background:var(--teal);color:var(--white-ink)}

.pm-platform{font-weight:800;font-size:13px;text-transform:capitalize;color:var(--ink)}
.pm-mtype{
  display:inline-block;font-weight:800;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);
}
.ev-type{display:inline-block;white-space:nowrap;font-weight:700;font-size:12.5px;color:var(--ink-2)}
.ev-pid{
  display:inline-block;margin-top:5px;
  font-family:var(--font);font-weight:700;font-size:11.5px;color:var(--navy);
  background:var(--paper-cream);border:2px solid var(--linha-soft);
  padding:2px 9px;border-radius:7px;
}

.support-dot{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:12.5px;color:var(--ink-3)}
.support-dot i{width:9px;height:9px;border-radius:2px;background:var(--paper-aged);transform:rotate(-4deg);flex:0 0 9px}
.support-dot.filled{color:var(--teal-dark)}
.support-dot.filled i{background:var(--teal)}

/* acoes de linha: botoes sempre preenchidos */
.row-actions{display:flex;gap:8px;flex-wrap:nowrap;justify-content:flex-end}
.row-actions button{
  background:var(--paper-cream);color:var(--navy);
  padding:8px 14px;font-size:12.5px;font-weight:800;white-space:nowrap;border-radius:9px;
}
.row-actions button.danger,.we-card-acts button{background:var(--brick);color:var(--white-ink)}
.row-actions .primary-soft{background:var(--teal);color:var(--white-ink);border-color:rgba(87,61,33,.4)}

/* ==========================================================================
   6. BARRA DE PROGRESSO (% assistido)
   ========================================================================== */
.minibar{display:flex;align-items:center;gap:10px;min-width:120px}
.minibar-track{
  flex:1;height:10px;border-radius:999px;overflow:hidden;
  background:var(--paper-aged);border:2px solid var(--linha-soft);
}
.minibar-fill{height:100%;background:var(--coral);transition:width .4s var(--ease)}
.minibar-pct{font-weight:800;font-size:11.5px;color:var(--ink-2);flex:0 0 auto;min-width:36px;text-align:right}

/* ==========================================================================
   7. VISAO GERAL: cartoes de metrica + graficos
   ========================================================================== */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;min-width:0}
.stat-card{
  background:var(--paper-light);border:2px solid var(--linha);border-radius:14px;
  padding:22px 24px;box-shadow:var(--shadow-card);min-width:0;
}
.stat-card .sc-label{
  font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px;
}
.stat-card .sc-value{font-weight:800;font-size:40px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.stat-card .sc-sub{margin-top:9px;font-weight:500;font-size:13px;color:var(--ink-2)}
.stat-card .sc-sub b{color:var(--coral-2);font-weight:800}

.charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;min-width:0}
.chart-card{
  display:flex;flex-direction:column;min-width:0;
  background:var(--paper-light);border:2px solid var(--linha);border-radius:14px;
  padding:22px 24px 24px;box-shadow:var(--shadow-card);
}
.chart-card h3{font-weight:800;font-size:17px;color:var(--ink);margin-bottom:5px}
.chart-card .ch-sub{font-weight:500;font-size:12.5px;color:var(--ink-3);margin-bottom:16px}
.chart-canvas-wrap{position:relative;height:260px;min-width:0}
.chart-empty{
  display:flex;align-items:center;justify-content:center;height:260px;text-align:center;
  font-weight:700;font-size:13.5px;color:var(--ink-3);
  background:var(--paper-cream);border:2px dashed var(--linha);border-radius:12px;
}

/* ==========================================================================
   8. WEBHOOKS: URLs geradas
   ========================================================================== */
.we-fresh{
  margin-top:20px;padding:18px 20px;border-radius:12px;
  background:var(--paper-cream);border:2px solid var(--teal);box-shadow:var(--shadow-small);
}
.we-fresh[hidden]{display:none}
.we-fresh-title{font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dark);margin-bottom:12px}

.we-list{margin-top:24px}
.we-cards{display:flex;flex-direction:column;gap:14px}
.we-card{
  background:var(--paper-cream);border:2px solid var(--linha);border-radius:12px;
  padding:18px 20px;box-shadow:var(--shadow-small);min-width:0;
}
.we-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.we-ident{display:flex;align-items:center;gap:11px;min-width:0;flex-wrap:wrap}
.we-label-txt{font-weight:800;font-size:15px;color:var(--ink);word-break:break-word}
.we-card-acts{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.we-toggle{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);cursor:pointer}
.we-card-acts button{padding:8px 14px;font-size:12.5px;font-weight:800;border-radius:9px;white-space:nowrap}

.we-url-row{display:flex;align-items:stretch;gap:9px}
.we-url-input{
  flex:1;min-width:0;
  font-family:var(--font);font-weight:500;font-size:13.5px;color:var(--ink);
  background:var(--paper-light);border:2px solid var(--linha);border-radius:9px;padding:11px 14px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.we-url-input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 2px var(--teal)}
.we-copy{
  flex:0 0 auto;cursor:pointer;
  font-family:var(--font);font-weight:800;font-size:13px;
  color:var(--white-ink);background:var(--teal);
  border:2px solid rgba(87,61,33,.4);border-radius:9px;padding:0 20px;
  box-shadow:var(--shadow-press);
}
.we-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:14px}
.we-meta-item{font-weight:700;font-size:11.5px;color:var(--ink-3)}

/* ==========================================================================
   9. SWITCH (ativo / inativo)
   ========================================================================== */
.switch{position:relative;display:inline-block;width:46px;height:26px;cursor:pointer;flex:0 0 auto}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{
  position:absolute;inset:0;border-radius:999px;
  background:var(--paper-aged);border:2px solid var(--linha);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.switch .knob{
  position:absolute;top:6px;left:6px;width:14px;height:14px;border-radius:4px;
  background:var(--ink-3);transform:rotate(-4deg);
  transition:transform .22s var(--ease), background .2s var(--ease);
}
.switch input:checked + .track{background:var(--teal-soft);border-color:var(--teal)}
.switch input:checked ~ .knob{transform:translateX(20px) rotate(-4deg);background:var(--teal)}
.switch input:focus-visible + .track{box-shadow:0 0 0 2px var(--teal)}

/* ==========================================================================
   10. DRAWER LATERAL (detalhe do aluno)
   ========================================================================== */
.drawer-scrim{position:fixed;inset:0;background:rgba(11,11,14,.82);z-index:55}
.drawer-scrim[hidden]{display:none}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:60;
  width:560px;max-width:94vw;
  background:var(--paper-light);
  border-left:2px solid var(--linha);
  box-shadow:-9px 0 0 rgba(78,48,23,.20);
  display:flex;flex-direction:column;
  animation:drawerIn .34s var(--ease) both;
}
.drawer[hidden]{display:none}
@keyframes drawerIn{from{transform:translateX(102%)}to{transform:translateX(0)}}
.drawer-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:24px 26px 18px;border-bottom:2px solid var(--linha);flex:0 0 auto;
}
.drawer-kicker{
  display:inline-block;font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--white-ink);background:var(--navy);border:2px solid rgba(87,61,33,.4);
  border-radius:999px;padding:4px 12px;margin-bottom:12px;
}
.drawer-title{font-weight:800;font-size:25px;letter-spacing:-.01em;color:var(--ink);line-height:1.12}
.drawer-close{
  flex:0 0 auto;width:42px;height:42px;padding:0;display:grid;place-items:center;
  background:var(--paper-cream);color:var(--navy);
  border:2px solid var(--linha);border-radius:9px;box-shadow:var(--shadow-press);
}
.drawer-close svg{width:17px;height:17px;stroke:currentColor;fill:none}
.drawer-body{flex:1;overflow-y:auto;padding:22px 26px 40px;scrollbar-width:thin}
.drawer-body::-webkit-scrollbar{width:9px}
.drawer-body::-webkit-scrollbar-thumb{background:var(--paper-aged);border-radius:9px}

.dr-block{margin-bottom:26px}
.dr-block:last-child{margin-bottom:0}
.dr-block-title{
  display:inline-block;font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--white-ink);background:var(--teal);border:2px solid rgba(87,61,33,.4);
  border-radius:999px;padding:4px 12px;margin-bottom:16px;
}
.dr-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.dr-field{min-width:0}
.dr-field.full{grid-column:1 / -1}
.dr-field .dl{font-weight:800;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.dr-field .dv{font-weight:500;font-size:14.5px;color:var(--ink);word-break:break-word;line-height:1.45}
.dr-progress-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.dr-progress-head .minibar{flex:1 1 160px}
.dr-lessons{list-style:none;display:flex;flex-direction:column;gap:10px;padding:0;margin:0}
.dr-lessons li{
  display:flex;align-items:center;gap:12px;font-weight:500;font-size:14px;color:var(--ink);
  background:var(--paper-cream);border:2px solid var(--linha);border-radius:12px;
  padding:11px 14px;box-shadow:var(--shadow-press);
}
.dr-lessons li .dl-check{
  flex:0 0 24px;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  background:var(--teal);color:var(--white-ink);transform:rotate(-4deg);
}
.dr-lessons li .dl-check svg{width:14px;height:14px;stroke:currentColor;fill:none}
.dr-lessons li .dl-name{flex:1 1 auto;min-width:0;font-weight:700}
.dr-lessons li .dl-stars{margin-left:auto;flex:0 0 auto;display:inline-flex;gap:3px;color:var(--mustard)}
.dr-lessons li .dl-stars svg{width:15px;height:15px;stroke:currentColor;fill:none}
.dr-empty{
  padding:30px 20px;text-align:center;font-weight:500;font-size:13.5px;color:var(--ink-2);
  background:var(--paper-cream);border:2px dashed var(--linha);border-radius:12px;
}
.dr-empty b{display:block;color:var(--ink);font-weight:800;margin-bottom:6px;font-size:15px}

/* ==========================================================================
   11. MODAL DO PAYLOAD (JSON cru do evento)
   ========================================================================== */
.json-scrim{
  position:fixed;inset:0;z-index:120;background:rgba(11,11,14,.82);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:rise .2s var(--ease) both;
}
.json-box{
  background:var(--paper-light);border:2px solid var(--linha);border-radius:14px;
  box-shadow:var(--shadow-card);max-width:760px;width:100%;max-height:86vh;
  display:flex;flex-direction:column;overflow:hidden;
}
.json-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;border-bottom:2px solid var(--linha)}
.json-head h3{margin:0;font-weight:800;font-size:18px;color:var(--ink)}
.json-close{
  flex:0 0 auto;width:38px;height:38px;padding:0;display:grid;place-items:center;
  background:var(--paper-cream);color:var(--navy);
  border:2px solid var(--linha);border-radius:9px;box-shadow:var(--shadow-press);
}
.json-close svg{width:16px;height:16px;stroke:currentColor;fill:none}
.json-meta{
  display:flex;flex-wrap:wrap;gap:8px 18px;padding:14px 22px;
  border-bottom:2px solid var(--linha-soft);
  font-weight:700;font-size:12.5px;color:var(--ink-2);
}
.json-pre{
  margin:0;padding:20px 22px;overflow:auto;
  font-family:var(--font);font-weight:500;font-size:12.5px;line-height:1.6;color:var(--ink);
  white-space:pre-wrap;word-break:break-word;background:var(--paper-cream);
}

/* ==========================================================================
   12. AGENDA: Google Calendar + regras dos horarios
   ========================================================================== */
.gcal-card{margin-bottom:20px}
.gcal-status{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 22px;
  background:var(--paper-cream);border:2px solid var(--linha);border-radius:12px;
  box-shadow:var(--shadow-small);
}
.gcal-status.connected{border-color:var(--teal)}
.gcal-dot{width:11px;height:11px;border-radius:3px;background:var(--teal);transform:rotate(-4deg);flex:0 0 auto}
.gcal-st-t{font-weight:800;font-size:16px;color:var(--ink)}
.gcal-st-sub{font-weight:500;font-size:13.5px;color:var(--ink-2);margin-top:3px}
.gcal-status .btn-primary,.gcal-status .btn-ghost{margin-left:auto}
.gcal-flash{
  padding:12px 16px;border-radius:12px;font-weight:700;font-size:13.5px;margin-bottom:14px;
  border:2px solid var(--linha);
}
.gcal-flash.ok{background:var(--paper-cream);border-color:var(--teal);border-left:6px solid var(--teal);color:var(--teal-dark)}
.gcal-flash.err{background:var(--erro-bg);border-color:var(--coral);border-left:6px solid var(--coral);color:var(--coral-2)}
.gcal-rules{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-weight:500;font-size:13.5px;color:var(--ink-2);padding:6px 2px}
.gcal-rules ul{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.gcal-rules li{
  font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--paper-cream);color:var(--navy);
  border:2px solid rgba(87,61,33,.35);border-radius:999px;padding:4px 11px;
}

.bk-rules{
  margin-top:20px;padding:22px 24px;
  background:var(--paper-cream);border:2px solid var(--linha);border-radius:12px;
  box-shadow:var(--shadow-small);
}
.bk-rules-head{display:flex;flex-direction:column;gap:4px;margin-bottom:18px}
.bk-rules-head b{font-weight:800;font-size:16px;color:var(--ink)}
.bk-rules-head span{font-weight:500;font-size:13px;color:var(--ink-2)}
.bk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.bk-f{display:flex;flex-direction:column;gap:7px;min-width:0}
.bk-f span{font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.bk-f input{
  width:100%;font-family:var(--font);font-weight:500;font-size:15px;color:var(--ink);
  background:var(--paper-light);border:2px solid var(--linha);border-radius:9px;padding:12px 14px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.bk-f input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 2px var(--teal)}
.bk-rules .btn-primary{margin-top:18px}

.inline-msg.ok{
  background:var(--paper-cream);border:2px solid var(--teal);border-left:6px solid var(--teal);
  color:var(--teal-dark);padding:12px 16px;border-radius:12px;font-weight:700;font-size:13.5px;margin-top:12px;
}

/* ==========================================================================
   13. FATURAMENTO
   ========================================================================== */
.fat-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--paper-light);border:2px solid var(--linha);border-radius:14px;
  box-shadow:var(--shadow-card);padding:22px 24px;min-width:0;
}
.fat-title{font-weight:800;font-size:25px;color:var(--ink);margin:0;line-height:1.12}
.fat-sub{font-weight:500;font-size:13.5px;color:var(--ink-2);margin-top:5px}

.fat-range-wrap,.camp-range-wrap{display:flex;flex-direction:column;gap:11px;align-items:flex-start;min-width:0}
.fat-range,.camp-range{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start}
.fat-range button,.camp-range button{
  font-family:var(--font);font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--navy);background:var(--paper-cream);
  border:2px solid rgba(87,61,33,.35);border-radius:999px;padding:8px 15px;cursor:pointer;
  box-shadow:var(--shadow-press);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.fat-range button:hover,.camp-range button:hover{transform:translate(-1px,-2px);box-shadow:var(--shadow-small)}
.fat-range button:active,.camp-range button:active{transform:translate(2px,2px);box-shadow:var(--shadow-press)}
.fat-range button.is-active,.camp-range button.is-active{background:var(--coral);color:var(--white-ink);border-color:rgba(87,61,33,.5)}
.fat-range button:focus-visible,.camp-range button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

.fat-custom,.camp-custom{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-start}
.camp-custom[hidden]{display:none}   /* o display:flex acima vence o [hidden] do user-agent */
.fat-custom label,.camp-custom label{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
}
.fat-custom input[type=date],.camp-custom input[type=date]{
  font-family:var(--font);font-weight:500;font-size:13.5px;color:var(--ink);
  background:var(--paper-cream);border:2px solid var(--linha);border-radius:9px;padding:8px 11px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.fat-custom input[type=date]:focus,.camp-custom input[type=date]:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 2px var(--teal)}
.fat-custom #fatApply,.camp-custom #campApply{
  font-family:var(--font);font-weight:800;font-size:12.5px;
  color:var(--navy);background:var(--mustard);
  border:2px solid rgba(87,61,33,.4);border-radius:9px;padding:9px 18px;cursor:pointer;
  box-shadow:var(--shadow-press);
}

.fat-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;min-width:0}
.fat-card{
  background:var(--paper-light);border:2px solid var(--linha);border-radius:14px;
  padding:20px 22px;box-shadow:var(--shadow-card);min-width:0;
}
.fat-card-label{font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.fat-card-value{font-weight:800;font-size:30px;line-height:1.06;letter-spacing:-.02em;color:var(--ink);margin:10px 0 5px;overflow-wrap:anywhere}
.fat-card-sub{font-weight:500;font-size:12.5px;color:var(--ink-2);line-height:1.45}

.fat-chart-wrap{position:relative;height:240px;min-width:0}
.fat-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;min-width:0}
.fat-cols>*{min-width:0}

.fat-bd-group{margin-bottom:20px}
.fat-bd-group:last-child{margin-bottom:0}
.fat-bd-title{
  display:inline-block;font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--white-ink);background:var(--navy);border:2px solid rgba(87,61,33,.4);
  border-radius:999px;padding:4px 12px;margin-bottom:10px;
}
.fat-bd-row{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:10px 0;border-bottom:2px solid var(--linha-soft);
  font-weight:500;font-size:14px;color:var(--ink);
}
.fat-bd-row:last-child{border-bottom:0}
.fat-bd-row b{font-weight:800}
.fat-bd-row i{color:var(--ink-3);font-style:normal;font-weight:700;font-size:12px}

/* ---- tabela de vendas recentes ---- */
.fat-sales{
  width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;
  font-family:var(--font);font-weight:500;font-size:14px;color:var(--ink);
}
.fat-sales th{
  text-align:left;font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);padding:0 14px 12px;border-bottom:2px solid var(--linha);white-space:nowrap;
}
.fat-sales th.ta-r{text-align:right}
.fat-sales td{padding:14px;border-bottom:2px solid var(--linha-soft);vertical-align:middle}
.fat-sales tr:last-child td{border-bottom:0}
.fat-sales tbody tr:hover td{background:var(--paper-cream)}
.fat-sales .fs-date{width:70px;color:var(--ink-3);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.fat-sales .fs-prod{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
.fat-sales .fs-client{max-width:220px}
.fat-sales .fs-name{display:block;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fat-sales .fs-email{display:block;font-weight:500;font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.fat-sales .fs-pay{width:96px;color:var(--ink-2);font-weight:700;white-space:nowrap}
.fat-sales .fs-val{width:118px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.fat-sales .fs-val.is-refund{color:var(--brick)}
.fat-sales .fs-st{width:112px;text-align:right;white-space:nowrap}

/* ==========================================================================
   14. FATURAMENTO: bloco da campanha (trafego contra venda)
   ========================================================================== */
.camp-panel{margin:0}
.camp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.camp-head-txt{min-width:0}
.camp-note{
  display:flex;align-items:flex-start;gap:11px;
  background:var(--paper-cream);border:2px solid var(--linha);border-radius:12px;
  padding:13px 16px;margin-bottom:14px;
  font-weight:500;font-size:13.5px;line-height:1.55;color:var(--ink-2);
}
.camp-note svg{flex:0 0 auto;width:17px;height:17px;margin-top:2px;color:var(--teal);stroke:currentColor;fill:none}
.camp-note.is-warn{border-color:var(--coral);border-left:6px solid var(--coral);background:var(--erro-bg);color:var(--ink)}
.camp-note.is-warn svg{color:var(--coral-2)}

.camp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;min-width:0}
.camp-card{
  background:var(--paper-cream);border:2px solid var(--linha);border-radius:12px;
  padding:18px 20px;box-shadow:var(--shadow-small);min-width:0;
}
.camp-card-label{font-weight:800;font-size:11px;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.camp-card-value{font-weight:800;font-size:30px;line-height:1.06;letter-spacing:-.02em;color:var(--ink);margin:10px 0 5px;overflow-wrap:anywhere}
.camp-card-value.is-empty{font-size:17px;font-weight:700;color:var(--ink-3)}
.camp-card-sub{font-weight:500;font-size:12.5px;line-height:1.45;color:var(--ink-2)}

.camp-origem{margin-top:22px}
.camp-origem>.camp-note{margin:14px 0 0}
.camp-origem>.camp-note:first-child{margin:0}
.camp-origem-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.camp-origem-title{
  display:inline-block;font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--white-ink);background:var(--navy);border:2px solid rgba(87,61,33,.4);
  border-radius:999px;padding:4px 12px;
}
.camp-origem-hint{font-weight:700;font-size:11px;color:var(--ink-3)}
.camp-origem-group+.camp-origem-group{margin-top:16px}
/* nowrap de proposito: o par "N vendas / R$" fica SEMPRE na mesma linha do nome */
.camp-origem-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:nowrap;
  padding:10px 0;border-bottom:2px solid var(--linha-soft);
  font-weight:500;font-size:14px;line-height:1.45;color:var(--ink);
}
.camp-origem-row:last-child{border-bottom:0}
.camp-origem-row.is-group{font-weight:800;border-bottom-color:var(--linha)}
.camp-origem-row.is-item{padding-left:16px}
.camp-origem-name{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.camp-origem-name.is-unknown{color:var(--ink-3)}
.camp-origem-name em{display:block;font-style:normal;font-weight:500;font-size:12px;color:var(--ink-3);margin-top:3px}
.camp-origem-nums{display:flex;align-items:baseline;gap:16px;flex:0 0 auto;margin-left:auto}
.camp-origem-nums i{font-style:normal;font-weight:700;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.camp-origem-nums b{font-weight:800;white-space:nowrap}

/* ==========================================================================
   15. MENU DO CELULAR (tres barras)
   --------------------------------------------------------------------------
   No desktop nada daqui existe: .admin-menubar e .admin-menu-scrim ficam em
   display:none e .admin-menu-panel em display:contents, ou seja, o wrapper
   some da arvore de layout e a sidebar segue sendo
   .sidebar > (.sidebar-top + .nav.admin-nav + .sidebar-foot).

   Abaixo de 1024px o styles.css joga a .sidebar pra fora da tela (gaveta do
   aluno). O admin nao tem gaveta: a sidebar vira uma barra de papel no topo,
   com as tres barras a esquerda e o nome da aba atual do lado. O breakpoint
   e o MESMO do styles.css de proposito, senao sobra uma faixa entre 901 e
   1023px em que a sidebar fica fora da tela e sem botao pra trazer de volta.
   ========================================================================== */
.admin-menubar{display:none}
.admin-menu-scrim{display:none}
.admin-menu-panel{display:contents}

@media (max-width:1023px){
  #app.app .sidebar{
    position:relative;z-index:40;
    width:100%;max-width:none;flex:0 0 auto;height:auto;
    transform:none;transition:none;overflow:visible;
    padding:0;background:var(--paper-light);
    border:2px solid var(--linha);border-radius:14px;
    box-shadow:var(--shadow-card);
    margin-bottom:20px;
  }

  /* ---- a barra, estado fechado ---- */
  .admin-menubar{display:flex;align-items:center;gap:12px;min-height:60px;padding:9px 14px}
  .admin-menu-btn{
    flex:0 0 44px;width:44px;height:44px;padding:0;cursor:pointer;
    display:grid;place-items:center;
    background:var(--navy);color:var(--white-ink);
    border:2px solid rgba(87,61,33,.45);border-radius:12px;
    box-shadow:var(--shadow-press);
  }
  .admin-menu-btn svg{width:20px;height:20px;display:block;stroke:currentColor;fill:none}
  .admin-menu-btn[aria-expanded="true"]{background:var(--coral)}
  .admin-menu-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
  .admin-menu-current{
    flex:1 1 auto;min-width:0;
    font-weight:800;font-size:17px;letter-spacing:-.01em;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  /* ---- o painel, estado aberto ---- */
  .admin-menu-panel{
    display:none;
    position:absolute;top:100%;left:0;right:0;z-index:41;margin-top:8px;
    background:var(--paper-light);
    border:2px solid var(--linha);border-radius:14px;
    box-shadow:var(--shadow-card);
    max-height:calc(100vh - 90px);overflow-y:auto;overscroll-behavior:contain;
    padding:12px;
  }
  #adminSidebar.menu-open .admin-menu-panel{display:block;animation:rise .18s var(--ease) both}
  .admin-menu-scrim{position:fixed;inset:0;z-index:39;background:rgba(11,11,14,.82)}
  .admin-menu-scrim:not([hidden]){display:block}

  /* ---- dentro do painel: marca, as abas e os dois atalhos ---- */
  #app.app .sidebar .admin-menu-panel .sidebar-top{padding:16px 18px 14px;margin-bottom:12px}
  #app.app .sidebar .nav.admin-nav{display:flex;flex-direction:column;gap:10px;flex:0 0 auto;overflow:visible}
  #app.app .sidebar .admin-nav .nav-item{width:100%;margin:0;min-height:48px;padding:12px 14px;font-size:15px}
  #app.app .sidebar .admin-menu-panel .sidebar-foot{padding:14px 16px;margin-top:12px}
  #app.app .sidebar .admin-menu-panel .foot-actions{flex-direction:column;gap:10px}
  #app.app .sidebar .admin-menu-panel .foot-actions .btn-ghost{
    flex:0 0 auto;width:100%;justify-content:center;min-height:48px;font-size:14px;
  }
}

/* ==========================================================================
   16. RESPONSIVO
   ========================================================================== */
@media (max-width:1023px){
  .fat-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fat-cols{grid-template-columns:1fr}
  .camp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* sao 3 cartoes: em 2 colunas o terceiro ocupa a linha inteira */
  #campEntryPanel .camp-cards>.camp-card:nth-child(3):last-child{grid-column:1/-1}
}

@media (max-width:860px){
  /* nada pode esticar alem da viewport: a rolagem lateral e do .table-wrap */
  .admin-pane,.admin-pane>.panel,.panel-head,.panel-body{min-width:0}
  .fat-cols,.fat-cols>*,.fat-cards,.camp-cards,.stat-cards,.charts-grid{min-width:0}
  .fat-cols>*>*,.table-wrap{min-width:0;max-width:100%}

  .table-wrap{border:2px solid var(--linha);border-radius:12px}
  .table-wrap>table.users{min-width:820px}
  .table-wrap#tableWrap>table.users{min-width:1120px}
  .table-wrap#pmWrap>table.users{min-width:1000px}
  .table-wrap#evWrap>table.users{min-width:940px}
  .table-wrap>table.tbl{min-width:560px}
  .table-wrap>table.tbl th,.table-wrap>table.tbl td{white-space:nowrap}
  table.users,table.tbl{font-size:14px}
  table.users th,table.tbl th{padding:12px 10px}
  table.users td,table.tbl td{padding:12px 10px}
  table.users .u-name,table.users .u-email,table.users .u-date,.u-lessons{font-size:14px}
  table.users td.u-email,table.users td.u-date,table.users .u-lessons{white-space:nowrap;word-break:normal;overflow-wrap:normal}
  table.users .u-name{word-break:normal;overflow-wrap:break-word}
  .badge,.plan-badge,.we-badge,.ev-granted,.fat-pill{font-size:11px;padding:5px 12px;white-space:nowrap}
  .minibar{min-width:104px}
  .minibar-pct{font-size:13px;min-width:40px}
  .row-actions{flex-wrap:nowrap}
  .row-actions button,.we-card-acts button{font-size:13px;min-height:44px;padding:0 14px}

  .panel-head p,.panel-toggle-sub,#usersCount,.pm-hint,.inline-msg{font-size:14px}
  .field label,.bk-f span{font-size:12px}
  .pwd-row .gen{font-size:14px;min-height:44px}
  .cred-line button{font-size:13px;min-height:44px}
  .pm-active-row input{width:22px;height:22px}

  .we-toggle,.we-meta-item,.we-copy{font-size:13px}
  .switch{height:44px;width:48px;display:inline-block}
  .switch .track{inset:auto;top:9px;left:1px;width:46px;height:26px}
  .switch .knob{top:15px;left:7px}
  .json-meta,.json-pre{font-size:13.5px}
  .json-close{width:44px;height:44px}

  .drawer{width:100%;max-width:100%;left:0;right:0;border-left:0;border-top:2px solid var(--linha)}
  .drawer-head{padding:18px 18px 14px}
  .drawer-body{padding:18px 18px 36px}
  .drawer-title{font-size:clamp(20px,5.5vw,25px)}
  .drawer-close{width:44px;height:44px}
  .dr-grid{grid-template-columns:1fr}

  .camp-range button,.fat-range button{min-height:44px}
  .camp-custom input[type=date],.fat-custom input[type=date]{font-size:16px;min-height:44px}
  .camp-custom #campApply,.fat-custom #fatApply{min-height:44px;font-size:13.5px}
  .fat-sales .fs-email{font-size:12.5px}
}

@media (max-width:700px){
  .camp-head,.fat-head{flex-direction:column;align-items:stretch;gap:16px}
  .camp-range-wrap,.fat-range-wrap{align-items:stretch}
  .camp-range,.fat-range{justify-content:flex-start}
  .camp-range button,.fat-range button{flex:1 1 auto;min-width:calc(50% - 4px);text-align:center}
  .camp-custom,.fat-custom{justify-content:space-between}
  .camp-custom label,.fat-custom label{
    display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:9px;flex:1 1 100%;
  }
  .camp-custom input[type=date],.fat-custom input[type=date]{width:100%}
  .camp-custom #campApply,.fat-custom #fatApply{flex:1 1 100%}
  .camp-card-value,.fat-card-value{font-size:25px}
  .camp-card-value.is-empty{font-size:16px}
  .camp-origem-row{font-size:13.5px;padding:11px 0;gap:10px}
  .camp-origem-row.is-item{padding-left:12px}
  .camp-origem-nums{gap:10px}
}

@media (max-width:600px){
  .create-grid,.bk-grid,.dr-grid{grid-template-columns:1fr}
  .field input,.field select,.bk-f input,.we-url-input{font-size:16px;min-height:46px}
  .pm-active-row{min-height:44px}
  .create-form .btn-primary,.bk-rules .btn-primary,#bkSave{width:100%;min-height:48px}

  .we-url-row{flex-direction:column}
  .we-url-input{width:100%}
  .we-copy{width:100%;min-height:46px;padding:0 18px}
  .we-card{padding:16px}
  .we-meta{gap:10px 14px}
  .pm-value,.pm-chip,.ev-type,.ev-pid,.we-label-txt{max-width:100%;overflow-wrap:anywhere;word-break:break-word}

  .gcal-status{flex-direction:column;align-items:stretch}
  .gcal-status .btn-primary,.gcal-status .btn-ghost{margin-left:0;width:100%;min-height:46px}

  .panel-head,.panel-collapsible .panel-toggle{padding:18px 16px 14px}
  .panel-body{padding:16px 16px 18px}
  .fat-head{padding:18px 16px}
  .stat-cards{grid-template-columns:1fr 1fr;gap:12px}
  .stat-card{padding:18px 16px}
  .stat-card .sc-value{font-size:32px}
  .charts-grid{grid-template-columns:1fr}
  .chart-canvas-wrap,.chart-empty{height:220px}
  .fat-cards{grid-template-columns:1fr}
  .camp-cards{grid-template-columns:1fr}
  .fat-chart-wrap{height:220px}

  /* "Por produto": tabela fluida, sem rolagem lateral. O nome quebra em linha
     e os dois numeros ficam a direita, alinhados. So aqui: as outras .tbl tem
     coluna demais e continuam rolando dentro do proprio .table-wrap. */
  .table-wrap#fatProdWrap>table.tbl{min-width:0;width:100%;table-layout:fixed;font-size:14px}
  .table-wrap#fatProdWrap>table.tbl td{white-space:normal;padding:11px 8px;vertical-align:top}
  .table-wrap#fatProdWrap>table.tbl th{white-space:nowrap;padding:0 8px 11px}
  .table-wrap#fatProdWrap>table.tbl th:first-child,
  .table-wrap#fatProdWrap>table.tbl td:first-child{overflow-wrap:anywhere;text-align:left}
  .table-wrap#fatProdWrap>table.tbl th:nth-child(2),
  .table-wrap#fatProdWrap>table.tbl td:nth-child(2){width:74px;text-align:right}
  .table-wrap#fatProdWrap>table.tbl th:nth-child(3),
  .table-wrap#fatProdWrap>table.tbl td:nth-child(3){width:104px;text-align:right;font-variant-numeric:tabular-nums}
  .table-wrap#fatProdWrap>table.tbl td:nth-child(3){font-weight:800}
  .center-state{font-size:14px}
}

/* vendas recentes no celular: cada linha vira um cartao de papel */
@media (max-width:680px){
  .fat-sales,.fat-sales tbody,.fat-sales tr,.fat-sales td{display:block;width:auto}
  .fat-sales thead{display:none}
  .fat-sales tr{
    background:var(--paper-cream);border:2px solid var(--linha);border-radius:12px;
    box-shadow:var(--shadow-press);padding:14px 16px;margin-bottom:12px;
  }
  .fat-sales td{border:0;padding:3px 0;max-width:none}
  .fat-sales tbody tr:hover td{background:none}
  .fat-sales .fs-prod{white-space:normal;max-width:none;font-size:15px}
  .fat-sales .fs-client{max-width:none}
  .fat-sales .fs-date{display:inline-block;width:auto}
  .fat-sales .fs-val,.fat-sales .fs-st{text-align:left;width:auto;display:inline-block;margin-right:14px}
  .fat-sales .fs-val{font-size:19px;margin-top:7px}
}

@media (max-width:400px){
  .stat-cards{grid-template-columns:1fr}
  .stat-card .sc-value{font-size:30px}
  .camp-card{padding:14px}
  .camp-card-value,.fat-card-value{font-size:24px}
  table.users td,.table-wrap>table.tbl td{padding:11px 8px}
  .table-wrap#fatProdWrap>table.tbl td{padding:11px 6px}
  .drawer-title{font-size:clamp(19px,6vw,23px)}
}

/* ==========================================================================
   17. MOVIMENTO
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}