/* === vg.css === */
/* =============================================================================
   VERO GESTÃO — folha única.

   O que vem das referências enviadas:
     • neumorfismo — cartão "extrudado" com luz em cima à esquerda e sombra em
       baixo à direita; campos afundados (inset);
     • cantos generosos (18–26px), respiro entre blocos;
     • número grande como herói do cartão;
     • anel de progresso e medidor semicircular;
     • linhas de lançamento com ícone circular à esquerda e valor à direita;
     • filtro de período em segmento (1D/1S/1M…);
     • barra inferior no celular com o botão central elevado.

   O que MUDA das referências: a cor. O roxo/lavanda vira a paleta VERO —
   teal #005059 sobre off-white levemente frio. O gradiente que nas referências
   é roxo aqui é teal→teal-claro, usado só nos cartões-herói.

   Um sistema, dois formatos:
     ≥1024px  painel com barra lateral e grade de 12 colunas (uso no PC)
     <1024px  coluna única com barra inferior (uso no celular)
   Mesma URL, mesmos dados, layout que se adapta.
   ============================================================================= */

/* ------------------------------------------------------------------ tokens -- */
:root{
  /* marca */
  --teal:#005059; --teal-esc:#00363D; --teal-med:#2A767C; --teal-cla:#4E9CA1;
  --teal-neon:#5FD3C4; --chrome:#08262A;

  /* superfícies — base fria e clara, que é o que faz o neumorfismo funcionar */
  --fundo:#EEF1F3; --fundo-2:#E7ECEF; --card:#F4F7F8; --card-alto:#FBFDFD;
  --campo:#E9EEF0;

  /* tinta */
  --ink:#17232B; --ink-2:#243542; --mut:#5A6B74; --mut-2:#7C8B93; --fraco:#A9B6BC;

  /* estado */
  --pos:#0E7E72; --pos-bg:#DCEFEB; --pos-esc:#0A5C53;
  --amb:#B57C1A; --amb-bg:#F7EEDA; --amb-esc:#7A5410;
  --neg:#C0392B; --neg-bg:#FAE6E3; --neg-esc:#8F2A20;
  --inf:#1D4ED8; --inf-bg:#E4EBFB;

  /* neumorfismo — a alma do visual das referências */
  --luz:rgba(255,255,255,.92);
  --sombra:rgba(23,35,43,.13);
  --relevo:-6px -6px 14px var(--luz), 6px 6px 16px var(--sombra);
  --relevo-sm:-3px -3px 8px var(--luz), 3px 3px 9px var(--sombra);
  --relevo-lg:-10px -10px 24px var(--luz), 12px 12px 28px var(--sombra);
  --afundado:inset 3px 3px 7px var(--sombra), inset -3px -3px 7px var(--luz);
  --afundado-sm:inset 2px 2px 5px var(--sombra), inset -2px -2px 5px var(--luz);

  /* forma e tipo */
  --r:18px; --r-sm:12px; --r-lg:26px; --r-pill:999px;
  --sans:'Inter','IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --disp:'Poppins',var(--sans);
  --num:'IBM Plex Mono',ui-monospace,monospace;

  /* ergonomia */
  --tap:46px; --tap-lg:54px;
  --lateral:260px;
  --topo:64px;
  --rodape:calc(env(safe-area-inset-bottom,0px) + 66px);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--ink);
  background:var(--fundo);-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button,input,select,textarea{font-family:inherit;font-size:15px;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:var(--teal);text-decoration:none}
svg{flex:none}
:focus-visible{outline:2.5px solid var(--teal-med);outline-offset:2px;border-radius:8px}
.num{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
[hidden]{display:none!important}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#CBD5DA;border-radius:6px;border:2px solid var(--fundo)}

/* ================================================================ estrutura = */
#app{min-height:100dvh;display:flex;flex-direction:column}

.shell{display:flex;min-height:100dvh}

/* ------------------------------------------------------- barra lateral (PC) */
.lateral{
  width:var(--lateral);flex:none;background:var(--chrome);color:#CFE0DC;
  display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;
}
.lateral__marca{
  display:flex;align-items:center;gap:11px;padding:20px 18px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.lateral__marca .ic{
  width:38px;height:38px;border-radius:12px;background:var(--teal);flex:none;
  display:grid;place-items:center;box-shadow:0 3px 12px rgba(0,0,0,.35);
}
.lateral__marca .ic svg{width:22px;height:auto;color:#fff}
.lateral__marca b{display:block;font:600 15px/1.15 var(--disp);color:#fff;letter-spacing:.3px}
.lateral__marca span{display:block;font-size:10.5px;color:#7E979A;letter-spacing:.11em;text-transform:uppercase;margin-top:2px}

.lateral__nav{flex:1;overflow-y:auto;padding:12px 10px}
.lateral__grupo{
  font:700 9.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:#5F7A7E;margin:16px 10px 7px;
}
.nav-item{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:10px 12px;border-radius:11px;color:#B9CDC9;font:500 14px/1.2 var(--sans);
  margin-bottom:2px;transition:background .15s,color .15s;position:relative;
}
.nav-item svg{width:19px;height:19px;flex:none}
.nav-item:hover{background:rgba(255,255,255,.05);color:#E2EEEB}
.nav-item--on{background:var(--teal);color:#fff;font-weight:600;box-shadow:0 3px 12px rgba(0,0,0,.3)}
.nav-item--on svg{color:var(--teal-neon)}
.nav-item .bolha{
  margin-left:auto;background:var(--neg);color:#fff;font:700 10px/1 var(--num);
  min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px;
}
.lateral__pe{
  padding:12px;border-top:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;gap:10px;
}
.lateral__pe .nm{flex:1;min-width:0}
.lateral__pe .nm b{display:block;font:600 13px/1.2 var(--sans);color:#EAF3F1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lateral__pe .nm span{font-size:11px;color:#7E979A}

/* -------------------------------------------------------------- conteúdo --- */
.conteudo{flex:1;min-width:0;display:flex;flex-direction:column}

.topo{
  position:sticky;top:0;z-index:30;background:rgba(238,241,243,.88);
  backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid rgba(23,35,43,.07);
  display:flex;align-items:center;gap:12px;padding:0 22px;min-height:var(--topo);
}
.topo__tit{flex:1;min-width:0}
.topo__tit h1{font:600 19px/1.2 var(--disp);color:var(--ink);letter-spacing:-.2px}
.topo__tit span{display:block;font-size:12.5px;color:var(--mut-2);margin-top:2px}

.corpo{
  flex:1;padding:20px 22px 40px;display:flex;flex-direction:column;gap:16px;
  max-width:1560px;width:100%;margin:0 auto;
}

/* ------------------------------------------------- barra inferior (celular) */
.rodape{display:none}

@media(max-width:1023px){
  .lateral{display:none}
  .topo{padding:0 14px;min-height:calc(env(safe-area-inset-top,0px) + 58px);
        padding-top:env(safe-area-inset-top,0px)}
  .corpo{padding:14px 14px calc(var(--rodape) + 26px)}
  .rodape{
    display:grid;position:fixed;bottom:0;left:0;right:0;z-index:45;
    grid-template-columns:repeat(5,1fr);align-items:end;
    background:var(--chrome);padding:8px 6px calc(env(safe-area-inset-bottom,0px) + 8px);
    border-top:1px solid rgba(255,255,255,.08);
  }
  .aba{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:6px 2px;border-radius:12px;color:#8AA5A4;
    font:600 10px/1.1 var(--sans);min-height:48px;justify-content:center;
    /* Item de grid nasce com min-width:auto e nao encolhe abaixo do texto.
       Sem este zero, "Financeiro" empurra a barra alem da tela num 320px
       e a pagina inteira passa a rolar na horizontal. */
    min-width:0;
  }
  .aba svg{width:21px;height:21px;flex:none}
  /* Ultimo recurso: se ainda assim nao couber, corta o rotulo em vez de
     empurrar a barra. O icone continua identificando a aba. */
  .aba span{
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .aba--on{color:#fff}
  .aba--on svg{color:var(--teal-neon)}
  /* Botão central elevado, como nas referências. */
  .aba--centro{
    background:var(--teal);color:#fff;border-radius:20px;
    margin:-20px 6px 0;min-height:58px;box-shadow:0 6px 20px rgba(0,80,89,.45);
  }
  .aba--centro svg{width:25px;height:25px;color:#fff}
  .aba--centro span{font-size:9.5px}
}

/* Telas estreitas (iPhone SE e afins): o rotulo encolhe antes de ser cortado. */
@media(max-width:360px){
  .rodape{padding-left:3px;padding-right:3px}
  .aba{font-size:9px;padding-left:1px;padding-right:1px;gap:3px}
  .aba svg{width:20px;height:20px}
  .aba--centro{margin-left:3px;margin-right:3px}
  .aba--centro span{font-size:9px}
}

/* ==================================================================== card == */
.card{
  background:var(--card);border-radius:var(--r);padding:18px;
  box-shadow:var(--relevo);
}
.card--plano{box-shadow:var(--relevo-sm)}
.card--fundo{background:var(--fundo);box-shadow:var(--afundado)}
.card__h{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.card__h .t{font:600 15px/1.2 var(--sans);color:var(--ink);flex:1;min-width:0}
.card__h .ic{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:var(--card-alto);color:var(--teal);box-shadow:var(--relevo-sm);
}
.card__h .ic svg{width:18px;height:18px}
/* O botão de ação do cabeçalho é texto, mas continua sendo alvo de dedo:
   o padding cresce a área clicável até 40px e a margem negativa devolve o
   espaço, para nada se mexer no layout. Sem isso o alvo tinha 15px. */
/* Botão de texto, mas continua sendo alvo de dedo: o padding vertical leva
   a caixa a ~41px e a margem negativa (SÓ vertical) devolve o espaço, então
   a linha não cresce. Nada de margem horizontal aqui: era ela que alargava
   o cabeçalho do card e fazia a tela de 360px transbordar. */
.acao{
  font:600 12.5px/1 var(--sans);color:var(--teal);flex:none;
  display:inline-flex;align-items:center;padding:14px 0;margin:-14px 0;
}
.acao:active{color:var(--teal-esc)}
.acao:active{color:var(--teal-esc)}

/* Cartão-herói: o gradiente que nas referências é roxo, aqui é teal. */
.heroi{
  border-radius:var(--r-lg);padding:22px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#0A6E75 0%,#005059 55%,#00363D 100%);
  box-shadow:0 12px 30px rgba(0,54,61,.30);
}
.heroi::after{
  content:'';position:absolute;right:-40px;top:-60px;width:220px;height:220px;
  border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none;
}
.heroi__r{font:700 10.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:#9FC9CB}
.heroi__v{font-family:var(--num);font-size:36px;font-weight:600;letter-spacing:-.035em;margin:8px 0 4px}
.heroi__s{font-size:13px;color:#B9D6D6}
.heroi__linha{display:flex;gap:26px;margin-top:18px;position:relative}
.heroi__linha > div{min-width:0}
.heroi__linha .r{font-size:11px;color:#9FC9CB;letter-spacing:.02em}
/* Quatro métricas lado a lado não cabem num telefone estreito: os
   rótulos ficavam cortados em 360px. Viram 2×2, que é legível. */
@media(max-width:430px){
  .heroi__linha{gap:12px 14px;flex-wrap:wrap}
  .heroi__linha > div{flex:1 1 calc(50% - 7px)}
}
.heroi__linha .v{font-family:var(--num);font-size:17px;font-weight:600;margin-top:3px}

/* ==================================================================== KPI === */
/* min(...) no minimo do grid: sem ele, uma tela de 320px recebe colunas de
   210px+ que nao cabem e a pagina inteira passa a rolar na horizontal. */
.kpis{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.kpi{
  background:var(--card);border-radius:var(--r);padding:16px 17px;
  box-shadow:var(--relevo);display:flex;flex-direction:column;gap:6px;
  min-width:0;text-align:left;width:100%;transition:transform .14s,box-shadow .14s;
}
button.kpi:hover{transform:translateY(-2px);box-shadow:var(--relevo-lg)}
button.kpi:active{transform:translateY(0);box-shadow:var(--afundado-sm)}
.kpi__topo{display:flex;align-items:center;gap:8px}
.kpi__ic{
  width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--pos-bg);color:var(--teal);
}
.kpi__ic svg{width:16px;height:16px}
.kpi__r{
  font:700 10px/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut-2);flex:1;min-width:0;
}
.kpi__v{
  font-family:var(--num);font-size:25px;font-weight:600;color:var(--ink);
  line-height:1.1;letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kpi__v small{font-size:12px;font-weight:500;color:var(--mut);margin-left:3px;letter-spacing:0}
.kpi__s{font-size:12px;color:var(--mut-2);line-height:1.35}
.kpi--alerta .kpi__ic{background:var(--neg-bg);color:var(--neg)}
.kpi--alerta .kpi__v{color:var(--neg-esc)}
.kpi--pos .kpi__ic{background:var(--pos-bg);color:var(--pos)}
.kpi--pos .kpi__v{color:var(--pos-esc)}
.kpi__com-anel{display:flex;align-items:center;gap:14px}
.kpi__com-anel > div:first-child{flex:1;min-width:0}

/* ============================================================ anel/medidor == */
/* Anel de progresso das referências, em SVG (nítido em qualquer densidade). */
.anel{position:relative;flex:none;display:grid;place-items:center}
.anel svg{transform:rotate(-90deg)}
.anel__trilha{stroke:var(--campo)}
.anel__valor{stroke:var(--teal);stroke-linecap:round;transition:stroke-dashoffset .7s cubic-bezier(.23,1,.32,1)}
.anel--alerta .anel__valor{stroke:var(--amb)}
.anel--neg .anel__valor{stroke:var(--neg)}
.anel--pos .anel__valor{stroke:var(--pos)}
.anel__txt{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--num);font-weight:600;font-size:13px;color:var(--ink);
}

/* Medidor semicircular (a "velocímetro" da 1ª referência). */
.medidor{position:relative;width:100%;max-width:280px;margin:0 auto}
.medidor svg{width:100%;height:auto;display:block}
.medidor__trilha{stroke:var(--campo)}
.medidor__valor{stroke:var(--teal);stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.23,1,.32,1)}
.medidor__c{position:absolute;left:0;right:0;bottom:6%;text-align:center}
.medidor__r{font:700 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mut-2)}
.medidor__v{font-family:var(--num);font-size:31px;font-weight:600;letter-spacing:-.035em;color:var(--ink);margin-top:5px}
.medidor__s{font-size:12px;color:var(--mut-2);margin-top:2px}

/* ================================================================= segmento = */
/* Filtro de período: 1D 1S 1M 3M 6M Ano — o controle da 2ª referência. */
.segm{
  display:flex;gap:3px;background:var(--fundo);border-radius:var(--r-pill);
  padding:4px;box-shadow:var(--afundado-sm);
  /* Quatro abas passam de 480px e nao cabem num celular estreito. Rola por
     dentro, como as chips -- empurrar a pagina inteira seria pior. */
  max-width:100%;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.segm::-webkit-scrollbar{display:none}
.segm button{
  min-height:34px;padding:0 15px;border-radius:var(--r-pill);flex:none;
  font:600 12.5px/1 var(--sans);color:var(--mut);transition:all .16s;white-space:nowrap;
}
@media(max-width:400px){
  .segm button{padding:0 11px;font-size:12px}
}
.segm button.on{background:var(--teal);color:#fff;box-shadow:0 2px 8px rgba(0,80,89,.3)}
.segm--sutil button.on{background:var(--card-alto);color:var(--teal);box-shadow:var(--relevo-sm)}

/* ================================================================== chips === */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 5px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;min-height:36px;padding:0 14px;border-radius:var(--r-pill);
  background:var(--card);box-shadow:var(--relevo-sm);
  font:600 13px/1 var(--sans);color:var(--mut);display:inline-flex;align-items:center;gap:6px;
}
.chip--on{background:var(--teal);color:#fff;box-shadow:0 3px 10px rgba(0,80,89,.28)}

/* ============================================================ lista/linhas == */
/* Linha de lançamento: ícone circular, texto, valor à direita (referências). */
.linhas{display:flex;flex-direction:column;gap:9px}
.linha{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--card);border-radius:14px;padding:12px 14px;
  box-shadow:var(--relevo-sm);min-height:var(--tap);transition:transform .12s,box-shadow .14s;
}
button.linha:hover{transform:translateY(-1px);box-shadow:var(--relevo)}
button.linha:active{box-shadow:var(--afundado-sm);transform:none}
.linha__ic{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--campo);color:var(--teal);box-shadow:var(--relevo-sm);
}
.linha__ic svg{width:18px;height:18px}
.linha__c{flex:1;min-width:0}
.linha__t{
  font:600 14px/1.3 var(--sans);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.linha__s{font-size:12px;color:var(--mut-2);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linha__d{text-align:right;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.linha__v{font-family:var(--num);font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.linha__v--neg{color:var(--neg)}
.linha__v--pos{color:var(--pos-esc)}
.linha__seta{color:var(--fraco);flex:none}
.linha__seta svg{width:17px;height:17px}

/* ================================================================= tabela === */
.tab-wrap{overflow-x:auto;border-radius:var(--r);box-shadow:var(--relevo);background:var(--card)}
table.tab{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
table.tab th{
  font:700 10px/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut-2);text-align:left;padding:13px 14px;white-space:nowrap;
  border-bottom:1px solid rgba(23,35,43,.08);
}
table.tab td{padding:12px 14px;border-bottom:1px solid rgba(23,35,43,.05);vertical-align:middle}
table.tab tbody tr:last-child td{border-bottom:0}
table.tab tbody tr:hover{background:rgba(255,255,255,.6)}
table.tab .n{text-align:right;font-family:var(--num);font-variant-numeric:tabular-nums;white-space:nowrap}
table.tab .c{text-align:center}
table.tab tr.clicavel{cursor:pointer}

/* =================================================================== tags === */
.tag{
  display:inline-flex;align-items:center;gap:4px;font:700 10px/1 var(--sans);
  letter-spacing:.05em;text-transform:uppercase;padding:5px 9px;border-radius:7px;
  background:var(--campo);color:var(--mut);white-space:nowrap;
}
.tag svg{width:11px;height:11px}
.tag--ok{background:var(--pos-bg);color:var(--pos-esc)}
.tag--alerta{background:var(--amb-bg);color:var(--amb-esc)}
.tag--neg{background:var(--neg-bg);color:var(--neg-esc)}
.tag--inf{background:var(--inf-bg);color:var(--inf)}
.tag--teal{background:#DEEDED;color:var(--teal-esc)}

/* ================================================================= alertas == */
.alerta{
  display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;
  border-radius:var(--r);padding:14px 16px;min-height:var(--tap);
  box-shadow:var(--relevo-sm);transition:transform .12s;
}
button.alerta:active{transform:scale(.995)}
.alerta__ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;color:#fff}
.alerta__ic svg{width:17px;height:17px}
.alerta__t{font:600 14px/1.3 var(--sans)}
.alerta__s{font-size:12.5px;margin-top:3px;line-height:1.4}
.alerta--critico{background:var(--neg-bg)}
.alerta--critico .alerta__ic{background:var(--neg)}
.alerta--critico .alerta__t{color:var(--neg-esc)}
.alerta--critico .alerta__s{color:#7E362C}
.alerta--atencao{background:var(--amb-bg)}
.alerta--atencao .alerta__ic{background:var(--amb)}
.alerta--atencao .alerta__t{color:var(--amb-esc)}
.alerta--atencao .alerta__s{color:#6E4C13}
.alerta--info{background:var(--inf-bg)}
.alerta--info .alerta__ic{background:var(--inf)}
.alerta--info .alerta__t{color:#1A3F9E}
.alerta--info .alerta__s{color:#2B4477}
.alerta--ok{background:var(--pos-bg)}
.alerta--ok .alerta__ic{background:var(--pos)}
.alerta--ok .alerta__t{color:var(--pos-esc)}
.alerta--ok .alerta__s{color:#1B5A53}

/* ================================================================= botões === */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding:0 20px;border-radius:14px;
  font:600 14.5px/1 var(--sans);background:var(--teal);color:#fff;
  box-shadow:0 4px 14px rgba(0,80,89,.26);transition:transform .12s,box-shadow .14s;
}
.btn svg{width:18px;height:18px}
.btn:hover{box-shadow:0 6px 18px rgba(0,80,89,.34)}
.btn:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(0,80,89,.3)}
.btn[disabled]{opacity:.45;box-shadow:none;pointer-events:none}
.btn--2{background:var(--card);color:var(--teal);box-shadow:var(--relevo-sm)}
.btn--2:hover{box-shadow:var(--relevo)}
.btn--2:active{box-shadow:var(--afundado-sm)}
.btn--fant{background:transparent;color:var(--mut);box-shadow:none}
.btn--fant:hover{background:rgba(23,35,43,.05);box-shadow:none}
.btn--neg{background:var(--neg);box-shadow:0 4px 14px rgba(192,57,43,.26)}
.btn--pq{min-height:38px;font-size:13px;padding:0 14px;border-radius:11px}
.btn--bloco{width:100%}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btns--bloco .btn{flex:1}

.ic-btn{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:var(--card);color:var(--mut);box-shadow:var(--relevo-sm);position:relative;
}
.ic-btn svg{width:19px;height:19px}
.ic-btn:hover{color:var(--teal);box-shadow:var(--relevo)}
.ic-btn:active{box-shadow:var(--afundado-sm)}
.ic-btn .bolha{
  position:absolute;top:-3px;right:-3px;background:var(--neg);color:#fff;
  font:700 9.5px/1 var(--num);min-width:17px;height:17px;border-radius:9px;
  display:grid;place-items:center;padding:0 4px;border:2px solid var(--fundo);
}

/* ================================================================== campos == */
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.campo > label{font:600 12.5px/1.2 var(--sans);color:var(--ink-2);display:flex;align-items:center;gap:5px}
.campo > label .req{color:var(--neg);font-weight:700}
.campo .ajuda{font-size:12px;color:var(--mut-2);line-height:1.4}
/* Campo AFUNDADO — é o que dá o look neumórfico das referências. */
.ctrl{
  width:100%;min-height:var(--tap);padding:12px 14px;
  background:var(--campo);border:0;border-radius:13px;color:var(--ink);
  font-size:15px;box-shadow:var(--afundado);transition:box-shadow .16s;
}
.ctrl:focus{outline:none;box-shadow:var(--afundado), 0 0 0 2.5px rgba(0,80,89,.28)}
.ctrl::placeholder{color:var(--mut-2)}
textarea.ctrl{min-height:96px;resize:vertical;line-height:1.5}
select.ctrl{
  appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6B74' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px;
}
.ctrl--num{font-family:var(--num);font-size:16px;font-weight:600;letter-spacing:-.02em}
.campo--erro .ctrl{box-shadow:var(--afundado), 0 0 0 2.5px rgba(192,57,43,.4)}
.campo__erro{font-size:12px;color:var(--neg-esc);font-weight:600}

.comun{position:relative}
.comun .ctrl{padding-right:60px}
.comun span{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font:600 12.5px var(--sans);color:var(--mut-2);pointer-events:none;
}
.grade2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.grade2{grid-template-columns:1fr}}
.grade3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:560px){.grade3{grid-template-columns:1fr 1fr}}

/* interruptor neumórfico */
.switch{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:var(--tap);padding:10px 14px;background:var(--card);
  border-radius:13px;box-shadow:var(--relevo-sm);cursor:pointer;
}
.switch > span:first-child{font:600 14px/1.35 var(--sans);flex:1}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch .cx{
  width:48px;height:28px;border-radius:15px;background:var(--campo);flex:none;
  position:relative;box-shadow:var(--afundado-sm);transition:background .2s;
}
.switch .cx::after{
  content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:var(--card-alto);box-shadow:var(--relevo-sm);transition:transform .22s cubic-bezier(.32,.72,0,1);
}
.switch input:checked + .cx{background:var(--teal)}
.switch input:checked + .cx::after{transform:translateX(20px)}

.busca{position:relative;flex:1;min-width:0}
.busca svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--mut-2)}
.busca .ctrl{padding-left:42px}

/* escolhas em cartão (fluxos) */
.escolhas{display:flex;flex-direction:column;gap:10px}
.escolha{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  min-height:var(--tap-lg);padding:13px 15px;background:var(--card);
  border-radius:15px;box-shadow:var(--relevo-sm);transition:all .15s;
}
.escolha:hover{box-shadow:var(--relevo)}
.escolha__ic{
  width:40px;height:40px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:var(--campo);color:var(--teal);
}
.escolha__ic svg{width:19px;height:19px}
.escolha__c{flex:1;min-width:0}
.escolha__t{font:600 14.5px/1.25 var(--sans);color:var(--ink)}
.escolha__s{font-size:12px;color:var(--mut-2);margin-top:2px}
.escolha--on{background:var(--pos-bg);box-shadow:var(--afundado-sm)}
.escolha--on .escolha__ic{background:var(--teal);color:#fff}
.escolha__check{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--campo);box-shadow:var(--afundado-sm);color:transparent}
.escolha--on .escolha__check{background:var(--teal);color:#fff;box-shadow:none}
.escolha--on .escolha__check svg{width:14px;height:14px}

/* =================================================================== texto == */
.h1{font:600 22px/1.2 var(--disp);color:var(--ink);letter-spacing:-.25px}
.h2{font:600 17px/1.25 var(--disp);color:var(--ink)}
.sec{
  font:700 10.5px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--mut-2);display:flex;align-items:center;gap:10px;margin:6px 0 -2px;
}
.sec::after{content:'';flex:1;height:1px;background:rgba(23,35,43,.09)}
.sub{font-size:13.5px;color:var(--mut);line-height:1.5;overflow-wrap:anywhere}
.mini{font-size:12px;color:var(--mut-2);overflow-wrap:anywhere}
.saudacao{font:600 21px/1.25 var(--disp);color:var(--ink)}
.saudacao span{display:block;font:400 13.5px/1.4 var(--sans);color:var(--mut);margin-top:4px}

.avatar{
  width:36px;height:36px;border-radius:12px;flex:none;display:grid;place-items:center;
  color:#fff;font:600 13px var(--sans);box-shadow:var(--relevo-sm);
}
.avatar--g{width:52px;height:52px;border-radius:17px;font-size:18px}
.avatar--p{width:28px;height:28px;border-radius:9px;font-size:11px}

/* ================================================================== barras == */
.barra{height:8px;border-radius:5px;background:var(--campo);overflow:hidden;box-shadow:var(--afundado-sm)}
.barra i{display:block;height:100%;border-radius:5px;background:var(--teal);
  transition:width .55s cubic-bezier(.23,1,.32,1)}
.barra--alerta i{background:var(--amb)}
.barra--neg i{background:var(--neg)}
.barra--ok i{background:var(--pos)}

/* ================================================================= gráfico == */
.grafico{display:flex;align-items:flex-end;gap:8px;height:150px;padding-top:10px}
.gcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.gcol__b{width:100%;display:flex;gap:3px;align-items:flex-end;flex:1}
.gcol__b i{flex:1;border-radius:5px 5px 0 0;min-height:3px;transition:height .6s cubic-bezier(.23,1,.32,1)}
.gcol__b i.a{background:linear-gradient(180deg,#0A6E75,#005059)}
.gcol__b i.b{background:linear-gradient(180deg,#7FC3BE,#4E9CA1)}
.gcol__r{font:600 10px var(--sans);color:var(--mut-2);white-space:nowrap}
.legenda{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap}
.legenda span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut)}
.legenda i{width:10px;height:10px;border-radius:3px;flex:none}

/* Linha (sparkline) — desenhada em SVG, como na 3ª referência. */
.spark{width:100%;height:auto;display:block;overflow:visible}
.spark__area{fill:url(#vgGrad)}
.spark__linha{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.spark__ponto{fill:#fff;stroke:var(--teal);stroke-width:3}

/* ================================================================ métricas == */
.metricas{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr))}
.metrica{background:var(--fundo);border-radius:13px;padding:12px 13px;box-shadow:var(--afundado-sm);min-width:0}
.metrica__r{font:700 9.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--mut-2)}
.metrica__v{
  font-family:var(--num);font-size:18px;font-weight:600;color:var(--ink);
  margin-top:6px;letter-spacing:-.03em;
  /* Nome de arquivo, e-mail, token e URL nao tem espaco onde quebrar, e
     empurravam a pagina inteira. Quebra dentro da palavra e feio; rolagem
     horizontal no painel e pior. */
  overflow-wrap:anywhere;
}
.metrica__v small{font-size:11px;font-weight:500;color:var(--mut);letter-spacing:0}

/* ================================================================== grades == */
.g-painel{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.g-4{grid-column:span 4}.g-6{grid-column:span 6}.g-8{grid-column:span 8}.g-12{grid-column:span 12}
@media(max-width:1280px){.g-4{grid-column:span 6}}
@media(max-width:900px){.g-4,.g-6,.g-8{grid-column:span 12}}

.blocos{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}

/* ================================================================== sheet === */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(12,22,28,.5);opacity:0;transition:opacity .22s}
.scrim.on{opacity:1}
.sheet{
  position:fixed;z-index:61;background:var(--fundo);display:flex;flex-direction:column;
  box-shadow:0 -10px 50px rgba(12,22,28,.28);transition:transform .3s cubic-bezier(.32,.72,0,1);
}
/* Celular: sobe de baixo. PC: painel lateral à direita. */
@media(max-width:1023px){
  .sheet{left:0;right:0;bottom:0;border-radius:24px 24px 0 0;max-height:93dvh;transform:translateY(100%)}
  .sheet.on{transform:translateY(0)}
}
@media(min-width:1024px){
  .sheet{top:0;right:0;bottom:0;width:min(560px,92vw);transform:translateX(100%)}
  .sheet.on{transform:translateX(0)}
}
.sheet__pega{width:40px;height:5px;border-radius:3px;background:var(--fraco);margin:9px auto 2px;flex:none}
@media(min-width:1024px){.sheet__pega{display:none}}
.sheet__h{display:flex;align-items:center;gap:12px;padding:16px 18px;flex:none;
  border-bottom:1px solid rgba(23,35,43,.08)}
.sheet__h .t{font:600 16.5px/1.2 var(--disp);flex:1;min-width:0}
.sheet__c{flex:1;overflow-y:auto;padding:18px}
.sheet__f{flex:none;padding:14px 18px calc(env(safe-area-inset-bottom,0px) + 16px);
  border-top:1px solid rgba(23,35,43,.08);background:var(--card)}

/* ================================================================== toast === */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(18px);
  z-index:80;max-width:460px;width:calc(100% - 32px);
  background:var(--chrome);color:#fff;border-radius:14px;padding:14px 16px;
  font:500 14px/1.4 var(--sans);box-shadow:0 12px 34px rgba(12,22,28,.35);
  opacity:0;transition:opacity .2s,transform .2s;display:flex;align-items:center;gap:10px;
}
@media(max-width:1023px){.toast{bottom:calc(var(--rodape) + 18px)}}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{width:19px;height:19px;flex:none}
.toast--erro{background:var(--neg-esc)}
.toast--ok{background:var(--pos-esc)}

/* ================================================================== vazio === */
.vazio{text-align:center;padding:46px 24px;display:flex;flex-direction:column;align-items:center;gap:12px}
.vazio__ic{width:72px;height:72px;border-radius:24px;background:var(--fundo);
  display:grid;place-items:center;color:var(--fraco);box-shadow:var(--afundado)}
.vazio__ic svg{width:32px;height:32px}
.vazio__t{font:600 16.5px/1.3 var(--disp);color:var(--ink-2)}
.vazio__s{font-size:13.5px;color:var(--mut);max-width:320px;line-height:1.55}

@keyframes vgPulso{0%,100%{opacity:.5}50%{opacity:.85}}
.esq{background:var(--campo);border-radius:var(--r);animation:vgPulso 1.3s ease-in-out infinite;
  box-shadow:var(--afundado-sm)}
.esq--kpi{height:104px}
.esq--linha{height:62px;border-radius:14px}
.esq--card{height:220px}

/* =============================================================== animação === */
@keyframes vgEntra{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.corpo > *{animation:vgEntra .24s cubic-bezier(.23,1,.32,1) both}
@media(prefers-reduced-motion:reduce){
  .corpo > *{animation:none}
  *{transition:none!important}
}

/* ================================================================== login === */
.login{
  min-height:100dvh;display:grid;place-items:center;padding:26px 20px;
  background:radial-gradient(1100px 620px at 18% 8%, #0C5A62 0%, #08343A 46%, #061F24 100%);
}
.login__cx{width:100%;max-width:412px}
.login__marca{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:26px}
.login__marca img{width:min(206px,58vw);height:auto;display:block}
.login__produto{
  font:600 13px/1 var(--disp);letter-spacing:.4em;text-indent:.4em;
  color:var(--teal-neon);text-transform:uppercase;
}
.login__card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);
  border-radius:24px;padding:26px 22px;backdrop-filter:blur(14px);
  box-shadow:0 24px 60px rgba(0,0,0,.34);
}
.login .campo > label{color:#CFE0DC}
.login .ctrl{background:rgba(255,255,255,.08);color:#fff;
  box-shadow:inset 2px 2px 6px rgba(0,0,0,.28), inset -1px -1px 3px rgba(255,255,255,.07)}
.login .ctrl::placeholder{color:#7B9698}
.login .ctrl:focus{box-shadow:inset 2px 2px 6px rgba(0,0,0,.28), 0 0 0 2.5px rgba(95,211,196,.42)}
.login select.ctrl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239DB0AC' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.login .ajuda{color:#8FA5A1}
.login .btn{background:#0E8C7E;box-shadow:0 6px 22px rgba(14,140,126,.4)}
.login .btn--2{background:rgba(255,255,255,.09);color:#CFE0DC;box-shadow:none}
.login__alt{text-align:center;margin-top:18px;font-size:13.5px;color:#9DB0AC}
.login__alt button{color:var(--teal-neon);font-weight:600;font-size:13.5px;padding:8px;min-height:40px}
.login__pe{text-align:center;font-size:11.5px;color:#6D8688;margin-top:22px;line-height:1.65}
.login .segm{background:rgba(255,255,255,.07);box-shadow:none;width:100%;margin-bottom:20px}
.login .segm button{flex:1;min-height:42px;color:#9DB0AC}
.login .segm button.on{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}

/* --- etapa do segundo fator ------------------------------------------- */
.login__t{font:600 19px/1.25 var(--disp);color:#fff;margin-bottom:8px}
.login__s{font-size:13.5px;color:#9DB0AC;line-height:1.55;margin-bottom:20px}
.login__link{
  display:block;width:100%;margin-top:12px;background:none;border:0;cursor:pointer;
  font:600 12.5px/1.4 var(--sans);color:#9DB0AC;text-align:center;padding:6px;
}
.login__link:hover{color:var(--teal-neon)}

.codigo{
  font-family:var(--num);font-size:19px;font-weight:600;letter-spacing:.1em;
  text-align:center;text-transform:uppercase;min-height:56px;
}
.codigo--ok{box-shadow:inset 2px 2px 6px rgba(0,0,0,.25), 0 0 0 2.5px rgba(63,191,174,.6)!important}
.aviso-ok{
  display:flex;gap:11px;align-items:flex-start;background:rgba(63,191,174,.13);
  border:1px solid rgba(63,191,174,.3);border-radius:14px;padding:13px;margin-bottom:16px;
}
.aviso-ok svg{width:19px;height:19px;color:var(--teal-neon);flex:none;margin-top:1px}
.aviso-ok b{display:block;font-size:13.5px;color:#DCF3EF}
.aviso-ok span{font-size:12.5px;color:#9DB0AC;line-height:1.45}

.passos{display:flex;gap:6px;margin-bottom:18px}
.passos i{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.14);transition:background .25s}
.passos i.on{background:var(--teal-neon)}


/* =============================================================================
   PARTE 2 — componentes dos módulos de equipe, reporte e administração.

   Mesma gramática das referências: superfície clara, relevo suave, nada de
   borda dura. O que muda de estado muda de PROFUNDIDADE (relevo → afundado),
   não só de cor — é o que dá a sensação de toque físico no celular.
   ============================================================================= */

/* ------------------------------------------------------ variantes de botão -- */
/* .btn--2 (secundário) e .btn--neg já existem acima. Aqui os que faltavam. */
.btn--3{
  background:transparent;color:var(--mut);box-shadow:none;
  border:1.5px solid rgba(23,35,43,.12);
}
.btn--3:hover{background:var(--card);color:var(--ink);box-shadow:var(--relevo-sm);border-color:transparent}
.btn--3:active{box-shadow:var(--afundado-sm)}
.btn--p{min-height:38px;font-size:13px;padding:0 14px;border-radius:11px}
.btn--p svg{width:15px;height:15px}
.btn--g{min-height:var(--tap-lg);font-size:15.5px;border-radius:16px;font-weight:600}
.btn--perigo{background:var(--neg);color:#fff;box-shadow:0 4px 14px rgba(192,57,43,.26)}
.btn--perigo:hover{box-shadow:0 6px 18px rgba(192,57,43,.34)}

/* -------------------------------------------------------------------avisos -- */
/* Faixa de contexto. Sempre com ícone: cor sozinha não comunica para quem
   não enxerga cor, e este sistema tem gente usando no sol do celular. */
.aviso{
  display:flex;gap:12px;align-items:flex-start;border-radius:15px;
  padding:14px 16px;margin-bottom:14px;font-size:13.5px;line-height:1.5;
  background:var(--card);box-shadow:var(--relevo-sm);
}
.aviso svg{width:20px;height:20px;flex:none;margin-top:1px}
.aviso b{display:block;font-size:14px;margin-bottom:3px}
.aviso > div{flex:1;min-width:0}
.aviso .btn{flex:none;align-self:center}
.aviso--ok{background:var(--pos-bg);color:var(--pos-esc);box-shadow:none}
.aviso--ok svg{color:var(--pos)}
.aviso--amb{background:var(--amb-bg);color:var(--amb-esc);box-shadow:none}
.aviso--amb svg{color:var(--amb)}
.aviso--neg{background:var(--neg-bg);color:var(--neg-esc);box-shadow:none}
.aviso--neg svg{color:var(--neg)}
.aviso--inf{background:var(--inf-bg);color:var(--inf);box-shadow:none}
.aviso--inf svg{color:var(--inf)}

/* --------------------------------------------------- barra do dia (reporte) -- */
.barradia{
  display:flex;align-items:center;gap:10px;background:var(--card);
  border-radius:var(--r);padding:8px 10px;box-shadow:var(--relevo);margin-bottom:16px;
}
.barradia__c{flex:1;min-width:0;text-align:center}
.barradia__d{font:600 16px/1.2 var(--disp);color:var(--ink)}
.barradia__c .mini{margin-top:2px}

/* --------------------------------------------------- etapas do reporte ------ */
/* Cada bloco do reporte é uma etapa numerada que vira "✓" quando preenchida.
   O estagiário vê o progresso sem precisar de um wizard que trava a página. */
.passo{
  background:var(--card);border-radius:var(--r);padding:16px 17px;
  box-shadow:var(--relevo);margin-bottom:14px;transition:box-shadow .25s;
}
.passo__h{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px}
.passo__n{
  width:28px;height:28px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--fundo);color:var(--mut-2);box-shadow:var(--afundado-sm);
  font:700 13px/1 var(--num);transition:background .3s,color .3s,box-shadow .3s;
}
.passo__n svg{width:15px;height:15px}
.passo__t{font:600 15px/1.3 var(--sans);color:var(--ink)}
.passo__h .mini{margin-top:3px}
.passo--ok .passo__n{background:var(--pos);color:#fff;box-shadow:0 3px 9px rgba(14,126,114,.32)}
.passo__c{display:flex;flex-direction:column;gap:2px}

/* ------------------------------------------------------- área de upload ----- */
.solta{
  border:2px dashed rgba(23,35,43,.18);border-radius:var(--r);
  padding:26px 18px;text-align:center;cursor:pointer;background:var(--fundo);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--mut);font-size:13.5px;transition:border-color .2s,background .2s,transform .12s;
}
.solta svg{color:var(--teal-med)}
.solta:hover,.solta--on{border-color:var(--teal-med);background:var(--card-alto)}
.solta--on{transform:scale(1.01)}

/* fila de envio: uma linha por arquivo, com a barra andando */
.fila__i{
  display:flex;gap:11px;align-items:center;background:var(--card);
  border-radius:13px;padding:11px 13px;margin-bottom:8px;box-shadow:var(--relevo-sm);
}
.fila__i svg{width:18px;height:18px;color:var(--teal);flex:none}
.fila__n{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila__b{height:4px;border-radius:3px;background:var(--campo);margin-top:6px;overflow:hidden}
.fila__b i{display:block;height:100%;background:var(--teal);width:0;transition:width .4s ease}
.fila__i--erro{background:var(--neg-bg)}
.fila__i--erro svg{color:var(--neg)}
.fila__i--erro .fila__b i{background:var(--neg)}

/* --------------------------------------------------------- galeria de anexos */
.galeria{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr))}
.anexo{
  background:var(--card);border-radius:15px;overflow:hidden;
  box-shadow:var(--relevo-sm);position:relative;transition:box-shadow .2s,transform .12s;
}
.anexo:hover{box-shadow:var(--relevo);transform:translateY(-2px)}
.anexo__v{display:block;aspect-ratio:4/3;background:var(--fundo);overflow:hidden}
.anexo__v img{width:100%;height:100%;object-fit:cover;display:block}
.anexo__ic{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;color:var(--teal-med);
}
.anexo__ic span{font:700 10px/1 var(--num);letter-spacing:.1em;color:var(--mut-2)}
.anexo figcaption{padding:9px 11px 11px;position:relative}
.anexo__n{
  font-size:12.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;
}
.anexo__x{
  position:absolute;top:-30px;right:7px;width:26px;height:26px;border-radius:9px;
  background:rgba(23,35,43,.72);color:#fff;display:grid;place-items:center;
  border:0;cursor:pointer;backdrop-filter:blur(4px);opacity:0;transition:opacity .18s;
}
.anexo:hover .anexo__x,.anexo__x:focus-visible{opacity:1}
@media (hover:none){.anexo__x{opacity:1}}

/* ------------------------------------------------------------ autoavaliação -- */
.estrelas{display:flex;gap:6px;margin:2px 0 6px}
.estrela{
  width:var(--tap);height:var(--tap);border:0;border-radius:14px;cursor:pointer;
  background:var(--fundo);color:var(--fraco);font-size:22px;line-height:1;
  box-shadow:var(--relevo-sm);transition:color .18s,box-shadow .18s,transform .12s;
}
.estrela:active{transform:scale(.94)}
.estrela--on{color:#E8A317;box-shadow:var(--afundado-sm)}

/* --------------------------------------------------------- barra no herói --- */
.heroi__barra{
  height:6px;border-radius:4px;background:rgba(255,255,255,.16);
  margin-top:14px;overflow:hidden;position:relative;
}
.heroi__barra i{
  display:block;height:100%;border-radius:4px;background:var(--teal-neon);
  width:0;transition:width .8s cubic-bezier(.23,1,.32,1);
}

/* ------------------------------------------------------------- listas texto -- */
.lista-min{list-style:none;display:flex;flex-direction:column;gap:7px}
.lista-min li{
  position:relative;padding-left:16px;font-size:13.5px;line-height:1.5;color:var(--ink-2);
}
.lista-min li::before{
  content:'';position:absolute;left:2px;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--teal-cla);
}
.passos-txt{list-style:none;counter-reset:p;display:flex;flex-direction:column;gap:11px}
.passos-txt li{
  counter-increment:p;position:relative;padding-left:34px;
  font-size:13.5px;line-height:1.5;color:var(--ink-2);min-height:24px;
}
.passos-txt li::before{
  content:counter(p);position:absolute;left:0;top:0;width:24px;height:24px;
  border-radius:9px;background:var(--fundo);box-shadow:var(--afundado-sm);
  display:grid;place-items:center;font:700 12px/1 var(--num);color:var(--teal);
}

/* ------------------------------------------------------------ pré-visualização */
.previa{
  background:var(--chrome);color:#B9E7DF;border-radius:14px;padding:14px 16px;
  font:500 12.5px/1.65 var(--num);white-space:pre-wrap;word-break:break-word;
  overflow-x:auto;margin-top:8px;
}

/* --------------------------------------------------------------- segredos --- */
/* Onde código de convite, senha provisória e token aparecem — uma vez só. */
.segredo{
  background:var(--fundo);border-radius:16px;padding:18px;text-align:center;
  box-shadow:var(--afundado);
}
.segredo__v{
  font-family:var(--num);font-size:26px;font-weight:600;letter-spacing:.09em;
  color:var(--teal-esc);word-break:break-all;line-height:1.35;
}
.segredo .mini{margin-top:8px}
.segredo--p{padding:12px 14px;text-align:left}
.segredo--p code{
  font-family:var(--num);font-size:12px;color:var(--teal-esc);
  word-break:break-all;line-height:1.55;
}

/* ------------------------------------------------------------- atalhos ------ */
/* A grade de cadastros. Alvo grande, dois por linha no celular. */
.atalhos{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));margin-bottom:20px}
/* O título de seção (.sec) tem margem negativa embaixo e conta com o gap do
   .corpo para respirar. Dentro de um bloco não há gap, e os cartões (com
   sombra que sobe 6px) invadiam o nome da categoria. */
:not(.corpo)>.sec+*{margin-top:16px}
.atalho{
  background:var(--card);border:0;border-radius:var(--r);padding:18px 14px;cursor:pointer;
  box-shadow:var(--relevo);display:flex;flex-direction:column;align-items:center;gap:10px;
  min-height:104px;justify-content:center;transition:transform .14s,box-shadow .2s;
  font:inherit;color:var(--ink);
}
.atalho:hover{transform:translateY(-2px);box-shadow:var(--relevo-lg)}
.atalho:active{transform:translateY(0);box-shadow:var(--afundado-sm)}
.atalho__ic{
  width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  background:var(--pos-bg);color:var(--teal);
}
.atalho__t{font-size:13px;font-weight:600;text-align:center;line-height:1.3}

/* ------------------------------------------------------------ linha do tempo */
.tempo{list-style:none;position:relative;padding-left:20px}
.tempo::before{
  content:'';position:absolute;left:5px;top:6px;bottom:6px;width:2px;
  background:rgba(23,35,43,.1);border-radius:2px;
}
.tempo li{
  position:relative;padding:9px 0 9px 2px;display:flex;flex-wrap:wrap;
  gap:3px 12px;font-size:13.5px;line-height:1.45;color:var(--ink-2);
}
.tempo li::before{
  content:'';position:absolute;left:-19px;top:15px;width:8px;height:8px;
  border-radius:50%;background:var(--teal-cla);box-shadow:0 0 0 3px var(--fundo);
}
.tempo__q{
  font:600 11.5px/1.5 var(--num);color:var(--mut-2);flex:none;
  min-width:104px;letter-spacing:-.01em;
}
.tempo li .mini{flex-basis:100%}

/* -------------------------------------------------- regras de notificação --- */
.regras{display:flex;flex-direction:column;gap:4px}
.regra{
  display:flex;gap:12px;align-items:center;padding:12px 2px;
  border-bottom:1px solid rgba(23,35,43,.07);
}
.regra:last-child{border-bottom:0}
.regra__t{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.regra__t span{font-size:13.5px;font-weight:600;color:var(--ink)}
.regra__c{display:flex;gap:8px;flex-wrap:wrap}

/* interruptor miúdo — três por regra, precisa caber no celular */
.mini-sw{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:11.5px;color:var(--mut);background:var(--fundo);
  border-radius:var(--r-pill);padding:5px 11px 5px 7px;
  box-shadow:var(--afundado-sm);transition:color .18s,box-shadow .18s;
  min-height:32px;
}
.mini-sw input{position:absolute;opacity:0;pointer-events:none}
.mini-sw .cx{
  width:30px;height:17px;border-radius:9px;background:var(--fraco);
  position:relative;flex:none;transition:background .22s;
}
.mini-sw .cx::after{
  content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;
  border-radius:50%;background:#fff;transition:transform .22s;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.mini-sw input:checked + .cx{background:var(--teal)}
.mini-sw input:checked + .cx::after{transform:translateX(13px)}
.mini-sw input:checked ~ span:last-child{color:var(--teal-esc);font-weight:600}
.mini-sw input:disabled + .cx{opacity:.4}
.mini-sw:has(input:disabled){opacity:.55;cursor:not-allowed}
.mini-sw input:focus-visible + .cx{box-shadow:0 0 0 2.5px rgba(0,80,89,.4)}

/* ------------------------------------------------------------- celular ------ */
@media (max-width:640px){
  .grade2,.grade3{grid-template-columns:1fr}
  .galeria{grid-template-columns:repeat(auto-fill,minmax(min(124px,100%),1fr));gap:10px}
  .atalhos{grid-template-columns:1fr 1fr;gap:10px}
  .segredo__v{font-size:21px;letter-spacing:.06em}
  .tempo__q{min-width:100%}
  .passo{padding:14px 15px}
  .estrela{width:52px;height:48px;font-size:24px}
  .barradia__d{font-size:15px}
}

/* Telas muito estreitas (iPhone SE): a etapa não pode empurrar o conteúdo. */
@media (max-width:360px){
  .atalhos{grid-template-columns:1fr}
  .estrelas{gap:4px}
  .estrela{width:100%;height:46px}
}

/* --------------------------------------------------------- acessibilidade --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* =============================================================== impressão == */
@media print{
  .lateral,.rodape,.topo,.btn,.ic-btn,.segm,.chips{display:none!important}
  body{background:#fff}
  .corpo{padding:0;gap:12px}
  .card,.kpi,.linha{box-shadow:none;border:1px solid #d7dee1;break-inside:avoid}
  .heroi{background:#fff!important;color:#000!important;border:1px solid #d7dee1}
  .heroi__r,.heroi__s,.heroi__linha .r{color:#555!important}
}

/* ============================================================== prospecção == */
/* Funil: barra por etapa, largura proporcional ao que chegou até ali. Barra
   horizontal e não pirâmide de propósito — pirâmide não cabe em 320 px sem
   virar um desenho ilegível, e a barra continua comparável de cima a baixo. */
.funil{display:flex;flex-direction:column;gap:7px}
.funil__e{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;
  background:var(--card);border-radius:var(--r-sm);padding:9px 12px;
  box-shadow:var(--relevo-sm);position:relative;overflow:hidden;
  min-height:var(--tap);text-align:left;width:100%;
}
button.funil__e{transition:transform .12s,box-shadow .14s}
button.funil__e:hover{transform:translateY(-1px);box-shadow:var(--relevo)}
button.funil__e:active{box-shadow:var(--afundado-sm);transform:none}
/* O preenchimento fica ATRÁS do texto: pintar a barra por cima derrubaria o
   contraste do rótulo justamente nas etapas mais cheias. */
.funil__e::before{
  content:'';position:absolute;inset:0;width:var(--w,0%);
  background:linear-gradient(90deg,rgba(0,80,89,.16),rgba(95,211,196,.20));
  border-radius:inherit;transition:width .5s cubic-bezier(.32,.72,0,1);
}
.funil__e>*{position:relative}
.funil__r{font:600 13.5px/1.25 var(--sans);color:var(--ink);min-width:0;overflow-wrap:anywhere}
.funil__n{font:700 15px/1 var(--num);color:var(--teal);white-space:nowrap}
.funil__s{font:500 11.5px/1 var(--sans);color:var(--mut-2);grid-column:1}
.funil__v{font:600 11.5px/1 var(--num);color:var(--mut);white-space:nowrap;grid-column:2}
.funil__e--fim::before{background:linear-gradient(90deg,rgba(14,126,114,.20),rgba(95,211,196,.24))}
.funil__e--fim .funil__n{color:var(--pos)}

/* Linha do tempo do lead. A guia vertical mora no ::before do container para
   não repetir borda em cada item — e some no último por causa do padding. */
.tl{display:flex;flex-direction:column;gap:2px;position:relative;padding-left:30px}
.tl::before{content:'';position:absolute;left:11px;top:8px;bottom:14px;width:2px;
  background:linear-gradient(180deg,var(--teal-cla),transparent)}
.tl__i{position:relative;padding:10px 0 14px}
.tl__p{
  position:absolute;left:-30px;top:10px;width:24px;height:24px;border-radius:50%;
  background:var(--card);box-shadow:var(--relevo-sm);display:grid;place-items:center;
  color:var(--teal);
}
.tl__p svg{width:13px;height:13px}
.tl__p--etapa{background:var(--teal);color:#fff;box-shadow:0 3px 9px rgba(0,80,89,.3)}
.tl__d{font:600 11.5px/1 var(--num);color:var(--mut-2);margin-bottom:4px}
.tl__t{font:600 14px/1.35 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.tl__s{font:400 13px/1.45 var(--sans);color:var(--mut);margin-top:3px;overflow-wrap:anywhere}

/* Ficha do lead: dados de contato em duas colunas que viram uma no celular. */
.ficha{display:grid;gap:11px 18px;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.ficha__i{min-width:0}
.ficha__r{font:600 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mut-2)}
.ficha__v{font:500 14px/1.4 var(--sans);color:var(--ink);margin-top:4px;overflow-wrap:anywhere}
/* Telefone e e-mail são para tocar, e no celular é assim que se liga para
   o lead — então o alvo precisa ter tamanho de dedo, não de texto. */
.ficha__v a{color:var(--teal);text-decoration:none;font-weight:600;
  display:inline-flex;align-items:center;min-height:38px;
  padding:0 6px;margin:-9px -6px}
.ficha__v a:hover{text-decoration:underline}

/* Ações rápidas do lead — alvo de 46 px, como manda o resto do app. */
.acoes-lead{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.acoes-lead::-webkit-scrollbar{display:none}
.acoes-lead .btn{flex:none}

/* ================================================================ cotação == */
/* Documento para o cliente: papel branco, tipografia sóbria, e uma folha de
   impressão que esconde o resto do app. */
.cot{
  background:#fff;color:#17232B;border-radius:var(--r);padding:34px 36px;
  box-shadow:var(--relevo);max-width:860px;margin:0 auto;font:400 13.5px/1.5 var(--sans);
}
.cot__cab{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-bottom:3px solid var(--teal);padding-bottom:16px;margin-bottom:22px}
.cot__marca{font:800 30px/1 var(--disp);color:var(--teal);letter-spacing:.04em}
.cot__emp{font-size:11.5px;color:var(--mut);margin-top:8px;max-width:420px;overflow-wrap:anywhere}
.cot__num{text-align:right}
.cot__tit{font:700 11px/1 var(--sans);letter-spacing:.16em;color:var(--mut-2)}
.cot__n{font:700 22px/1.2 var(--num);color:var(--ink);margin-top:4px}
.cot__d{font-size:11.5px;color:var(--mut);margin-top:4px}
.cot__sec{font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);
  margin:22px 0 10px;padding-bottom:6px;border-bottom:1px solid #DCE4E7}
.cot__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.cot__l{display:flex;justify-content:space-between;gap:14px;padding:4px 0;border-bottom:1px dotted #DCE4E7}
.cot__r{color:var(--mut);flex:none}
.cot__v{font-weight:600;text-align:right;overflow-wrap:anywhere}
.cot__chks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:8px}
.cot__chk{display:flex;align-items:center;gap:9px;font-weight:500}
.cot__box{width:16px;height:16px;border:2px solid var(--teal);border-radius:4px;flex:none;position:relative}
.cot__box--on{background:var(--teal)}
.cot__box--on::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.cot__tab{width:100%;border-collapse:collapse;font-size:13px}
.cot__tab th{font:700 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mut-2);text-align:left;padding:8px 6px;border-bottom:2px solid #DCE4E7}
.cot__tab td{padding:9px 6px;border-bottom:1px solid #EEF1F3}
.cot__tab .n{text-align:right;font-family:var(--num)}
.cot__tot{max-width:380px;margin:14px 0 0 auto}
.cot__l--total{border-bottom:0;border-top:2px solid var(--teal);margin-top:6px;padding-top:10px;font-size:16px}
.cot__l--total .cot__r,.cot__l--total .cot__v{color:var(--teal);font-weight:800}
.cot__p{margin:0;font-size:14px}
.cot__ass{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:46px}
.cot__linha{border-top:1px solid var(--ink);margin-bottom:6px}
.cot__ass__r{font-size:11.5px;color:var(--mut);text-align:center}
.cot__pe{margin-top:30px;font-size:10.5px;color:var(--mut-2);text-align:center}
@media(max-width:600px){
  .cot{padding:22px 18px}
  .cot__grid,.cot__ass{grid-template-columns:1fr}
  .cot__num{text-align:left}
  .cot__tab{font-size:12px}
}
@media print{
  body{background:#fff}
  .lateral,.topo,.rodape,.cot__acoes,.toast,.scrim,.sheet{display:none!important}
  .shell,.conteudo,.corpo{display:block;padding:0;margin:0;max-width:none}
  .cot{box-shadow:none;border-radius:0;max-width:none;padding:0}
  .corpo>*{animation:none}
}