/* Dashboard Vendas V2 — Glacial adaptado para aplicativo.
   Fundo quase preto, um acento azul-gelo, Geist + Geist Mono, bordas de 1px.
   Diferenca consciente do Glacial de pagina de venda: aqui existe estado de
   erro (falha de envio), entao ha um rosa apagado — usado so para falha, e
   sempre com texto junto, nunca cor sozinha. */

:root{
  color-scheme: dark;
  --bg:#090b0d;
  --side:#0b0e10;
  --card:#101416;
  --card-2:#13181b;
  --campo:#0c1013;
  --hover:#151c21;
  --borda:#22292c;
  --borda-2:#2c3437;
  --borda-azul:#2d485e;

  --txt:#f4f6f5;
  --txt-2:#c3cdcf;
  --txt-3:#9aa3a6;
  --mudo:#7f8a8c;

  --gelo:#c5eaff;
  --gelo-hover:#dcf3ff;
  --gelo-txt:#082239;
  --azul:#9bd8ff;
  --azul-2:#73b5de;
  --azul-3:#3f6f8f;
  --azul-fundo:rgba(115,181,222,.10);
  --anel:#7bc8f4;

  --ambar:#ffd391;
  --ambar-fundo:rgba(237,185,101,.10);
  --ambar-borda:rgba(237,185,101,.30);
  --rosa:#f2aaa2;
  --rosa-fundo:rgba(242,170,162,.08);
  --rosa-borda:rgba(242,170,162,.28);
  --verde:#a8e0c0;

  --sans:"Geist", ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r-sm:8px; --r:12px; --r-lg:16px; --pill:99px;
  --lado:248px;

  --topo-fundo:rgba(9,11,13,.86);
  --marca-grad:linear-gradient(135deg,#132a3b,#0b151e);
  --card-azul-grad:linear-gradient(135deg,#10222f,#0c1218 70%);
  --brilho:#97d7ff;
  --sombra-pri:0 0 0 1px #d0ecff20,0 8px 30px #5bbdfc1c;
  --ponto-vivo:#a6dfff; --ponto-brilho:#6fc5ff90;
  --rosa-hover:rgba(242,170,162,.14);
  --foco-sombra:rgba(123,200,244,.12);
  --trilho:#2a3236; --botao-alav:#cfd6d8; --trilho-fino:#1d2427;
  --passo-n:#192023; --opcao-hover-borda:#3a4a55; --ico-bg:#151d22;
  --sobre:#94bdd6;
  --barra-falta:#24425a; --barra-falta-hover:#2e5574;
  --dica-bg:#182025; --progresso-bg:#1a2226; --linha-hover:#12171a;
  --chip-paid-bg:rgba(115,181,222,.07);
  --roxo:#d7b8e8; --roxo-borda:rgba(215,184,232,.3);
  --toast-bg:#172026; --bola-borda:#3a4549; --borda-hover:#3a4448;
  --modal-fundo:rgba(4,6,8,.72);
  --sombra-forte:rgba(0,0,0,.6); --sombra-media:rgba(0,0,0,.5);
  --login-brilho:rgba(91,189,252,.08);
  --icone-data:invert(.7);
}

/* Modo dia. Mesma hierarquia do modo noite: o azul-gelo vira azul-petroleo
   escuro (botao primario e textos de destaque) porque gelo sobre branco nao
   tem contraste. Ambar e rosa escurecem pelo mesmo motivo. */
:root[data-tema="dia"]{
  color-scheme: light;
  --bg:#f3f5f6; --side:#fafbfb; --card:#ffffff; --card-2:#f7f9fa; --campo:#ffffff;
  --hover:#edf1f3; --borda:#e0e5e8; --borda-2:#d0d8dc; --borda-azul:#b5d0e1;
  --txt:#0d1316; --txt-2:#2b383e; --txt-3:#55636a; --mudo:#6c797f;
  --gelo:#0f3b57; --gelo-hover:#16496b; --gelo-txt:#ffffff;
  --azul:#1b6493; --azul-2:#3a8cc0; --azul-3:#9cc5df; --azul-fundo:rgba(58,140,192,.10); --anel:#3a8cc0;
  --ambar:#8f5c00; --ambar-fundo:rgba(237,185,101,.16); --ambar-borda:rgba(176,122,30,.38);
  --rosa:#b2443a; --rosa-fundo:rgba(200,80,70,.06); --rosa-borda:rgba(200,80,70,.30);
  --topo-fundo:rgba(250,251,251,.88);
  --marca-grad:linear-gradient(135deg,#e4f1f9,#d2e6f2);
  --card-azul-grad:linear-gradient(135deg,#eaf4fa,#ffffff 70%);
  --brilho:#8ec9ec;
  --sombra-pri:0 1px 2px rgba(15,59,87,.18),0 6px 18px rgba(15,59,87,.12);
  --ponto-vivo:#2f86bf; --ponto-brilho:rgba(47,134,191,.45);
  --rosa-hover:rgba(200,80,70,.11);
  --foco-sombra:rgba(58,140,192,.18);
  --trilho:#cdd6da; --botao-alav:#ffffff; --trilho-fino:#e2e8eb;
  --passo-n:#e6ecef; --opcao-hover-borda:#a7c3d4; --ico-bg:#edf4f8;
  --sobre:#3b7399;
  --barra-falta:#c3dbea; --barra-falta-hover:#a8cce2;
  --dica-bg:#ffffff; --progresso-bg:#e2e8eb; --linha-hover:#f4f7f8;
  --chip-paid-bg:rgba(58,140,192,.08);
  --roxo:#7a4597; --roxo-borda:rgba(122,69,151,.30);
  --toast-bg:#ffffff; --bola-borda:#b6c2c7; --borda-hover:#b5c1c6;
  --modal-fundo:rgba(18,28,34,.32);
  --sombra-forte:rgba(16,28,36,.16); --sombra-media:rgba(16,28,36,.12);
  --login-brilho:rgba(58,140,192,.10);
  --icone-data:none;
}
:root[data-tema="dia"] .alavanca i::after{ box-shadow:0 1px 2px rgba(0,0,0,.25); }
:root[data-tema="dia"] .card, :root[data-tema="dia"] .opcao{ box-shadow:0 1px 2px rgba(16,28,36,.04); }

/* Troca suave so quando o usuario clica — no carregamento seria um piscar. */
.trocando-tema, .trocando-tema *{ transition:background-color .25s, border-color .25s, color .25s !important; }


*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--txt); }
body{ font-family:var(--sans); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
button,input,select{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--anel); outline-offset:2px; border-radius:6px; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.num{ font-variant-numeric:tabular-nums; }
[hidden]{ display:none !important; }

/* ---------------- Estrutura ---------------- */
.app{ display:grid; grid-template-columns:var(--lado) 1fr; min-height:100vh; }
.lado{
  position:sticky; top:0; height:100vh; overflow-y:auto;
  background:var(--side); border-right:1px solid var(--borda);
  display:flex; flex-direction:column; padding:18px 12px;
}
.marca{ display:flex; align-items:center; gap:10px; padding:4px 10px 22px; }
.marca-ico{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--marca-grad); border:1px solid var(--borda-azul); }
.marca b{ font-size:15px; font-weight:600; letter-spacing:-.3px; }
.marca span{ display:block; font-family:var(--mono); font-size:10.5px; color:var(--mudo); letter-spacing:.4px; }

.grupo-nav{ margin-bottom:18px; }
.grupo-nav h6{ margin:0 0 6px; padding:0 10px; font-family:var(--mono); font-size:10.5px;
  font-weight:500; letter-spacing:1.2px; text-transform:uppercase; color:var(--mudo); }
.item-nav{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px;
  color:var(--txt-3); font-weight:450; transition:background .15s,color .15s; position:relative; }
.item-nav svg{ width:17px; height:17px; flex:none; opacity:.85; }
.item-nav:hover{ background:var(--hover); color:var(--txt); }
.item-nav.ativo{ background:var(--azul-fundo); color:var(--gelo); }
.item-nav.ativo::before{ content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:2px;
  border-radius:2px; background:var(--gelo); }
.item-nav .marcador{ margin-left:auto; width:7px; height:7px; border-radius:50%; background:var(--ambar); }
.item-nav .ok{ margin-left:auto; color:var(--azul-2); font-size:12px; }

.lado-rodape{ margin-top:auto; padding:12px 10px 4px; border-top:1px solid var(--borda);
  font-size:12px; color:var(--mudo); display:flex; flex-direction:column; gap:8px; }
.lado-rodape button{ background:none; border:0; padding:0; color:var(--txt-3); cursor:pointer; text-align:left; }
.lado-rodape button:hover{ color:var(--txt); }

.principal{ min-width:0; display:flex; flex-direction:column; }
.topo{
  position:sticky; top:0; z-index:20; height:62px; display:flex; align-items:center; gap:14px;
  padding:0 32px; background:var(--topo-fundo); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--borda);
}
.topo h1{ margin:0; font-size:16px; font-weight:550; letter-spacing:-.3px; }
.topo .espaco{ flex:1; }
.menu-btn{ display:none; background:none; border:1px solid var(--borda-2); border-radius:9px;
  width:36px; height:36px; place-items:center; cursor:pointer; }
.salvo{ font-family:var(--mono); font-size:11.5px; color:var(--mudo); display:flex; align-items:center; gap:6px; }
.salvo.salvando{ color:var(--txt-3); }
.salvo.erro{ color:var(--rosa); }
.relogio{ font-family:var(--mono); font-size:12px; color:var(--txt-3); }

.conteudo{ padding:28px 32px 80px; max-width:1320px; width:100%; margin:0 auto; }
.cabeca{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.cabeca h2{ margin:0; font-size:26px; font-weight:550; letter-spacing:-.9px; line-height:1.15; }
.cabeca p{ margin:6px 0 0; color:var(--txt-3); max-width:620px; text-wrap:pretty; }
.sobre{ font-family:var(--mono); font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--sobre); margin-bottom:8px; }

/* ---------------- Status (pilula do topo) ---------------- */
.pilula-status{ display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 10px; border-radius:var(--pill);
  border:1px solid var(--borda-2); background:var(--card); font-size:12.5px; color:var(--txt-2); white-space:nowrap; }
.ponto{ width:7px; height:7px; border-radius:50%; background:var(--mudo); flex:none; }
.ponto.vivo{ background:var(--ponto-vivo); box-shadow:0 0 10px var(--ponto-brilho); animation:pulsa 2.4s ease-in-out infinite; }
.ponto.alerta{ background:var(--ambar); }
.ponto.erro{ background:var(--rosa); }
@keyframes pulsa{ 50%{ box-shadow:0 0 2px transparent; } }

/* ---------------- Cartoes ---------------- */
.grade{ display:grid; gap:16px; }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.g-lado{ grid-template-columns:minmax(0,1fr) 340px; align-items:start; }
.card{ background:var(--card); border:1px solid var(--borda); border-radius:var(--r-lg); padding:22px; min-width:0; }
.pilha > * + *{ margin-top:16px; }
.card h3{ margin:0; font-size:15px; font-weight:550; letter-spacing:-.2px; }
.card .sub{ margin:4px 0 0; color:var(--txt-3); font-size:13px; text-wrap:pretty; }
.card-topo{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.card-azul{ background:var(--card-azul-grad); border-color:var(--borda-azul); position:relative; }
.card-azul::before{ content:""; position:absolute; top:-1px; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg,transparent,var(--brilho),transparent); }
.fixo{ position:sticky; top:86px; }

.kpi{ padding:18px 20px; }
.kpi .rot{ font-size:12.5px; color:var(--txt-3); display:flex; align-items:center; gap:6px; }
.kpi .val{ font-size:26px; font-weight:550; letter-spacing:-1px; margin-top:6px; font-variant-numeric:tabular-nums; }
.kpi .det{ font-size:12px; color:var(--mudo); margin-top:2px; }

.vazio{ text-align:center; padding:36px 20px; color:var(--txt-3); }
.vazio h3{ color:var(--txt); font-size:17px; margin-bottom:6px; }
.vazio p{ margin:0 auto 18px; max-width:420px; }

/* ---------------- Botoes ---------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:8px 16px;
  border-radius:var(--pill); border:1px solid var(--borda-2); background:var(--card-2); color:var(--txt);
  font-size:13.5px; font-weight:550; cursor:pointer; transition:background .15s,border-color .15s,transform .15s; white-space:nowrap; }
.btn:hover{ background:var(--hover); border-color:var(--borda-hover); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.btn svg{ width:16px; height:16px; }
.btn-pri{ background:var(--gelo); color:var(--gelo-txt); border-color:transparent; box-shadow:var(--sombra-pri); }
.btn-pri:hover{ background:var(--gelo-hover); border-color:transparent; }
.btn-perigo{ color:var(--rosa); border-color:var(--rosa-borda); background:var(--rosa-fundo); }
.btn-perigo:hover{ background:var(--rosa-hover); border-color:var(--rosa); }
.btn-fantasma{ background:transparent; border-color:transparent; color:var(--txt-3); }
.btn-fantasma:hover{ background:var(--hover); color:var(--txt); border-color:transparent; }
.btn-g{ min-height:46px; padding:12px 22px; font-size:14.5px; }
.btn-larga{ width:100%; }
.btn-ico{ width:34px; min-height:34px; padding:0; }
.acoes{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ---------------- Campos ---------------- */
.campo{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.campo > label, .rotulo{ font-size:12.5px; color:var(--txt-3); font-weight:450; }
.ajuda{ font-size:12px; color:var(--mudo); text-wrap:pretty; }
.entrada{ display:flex; align-items:center; background:var(--campo); border:1px solid var(--borda-2); border-radius:10px;
  transition:border-color .15s, box-shadow .15s; min-width:0; }
.entrada:focus-within{ border-color:var(--azul-3); box-shadow:0 0 0 3px var(--foco-sombra); }
.entrada input, .entrada select{ flex:1; min-width:0; background:transparent; border:0; outline:0; padding:9px 12px; font-size:14px; }
.entrada input[type=number]{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.entrada input::-webkit-outer-spin-button, .entrada input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.entrada input[type=number]{ -moz-appearance:textfield; }
.entrada .pre, .entrada .pos{ padding:0 10px; color:var(--mudo); font-size:13px; font-family:var(--mono); }
.entrada .pre{ padding-right:0; }
.entrada select{ appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa3a6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
.entrada select option{ background:var(--card); }
.entrada.grande input{ font-size:22px; padding:12px 14px; font-weight:500; }
.entrada.grande .pre{ font-size:16px; }
input[type=time]::-webkit-calendar-picker-indicator{ filter:var(--icone-data); }

.deslizante{ display:flex; align-items:center; gap:14px; }
.deslizante input[type=range]{ flex:1; accent-color:var(--gelo); height:4px; }
.deslizante .valor{ font-family:var(--mono); min-width:52px; text-align:right; color:var(--txt); font-size:13.5px; }

.chave{ display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; }
.chave .txt b{ display:block; font-weight:500; }
.chave .txt span{ font-size:12.5px; color:var(--txt-3); }
.alavanca{ position:relative; width:40px; height:23px; flex:none; }
.alavanca input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.alavanca i{ position:absolute; inset:0; border-radius:99px; background:var(--trilho); transition:background .2s; }
.alavanca i::after{ content:""; position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:var(--botao-alav); transition:transform .2s, background .2s; }
.alavanca input:checked + i{ background:var(--azul-3); }
.alavanca input:checked + i::after{ transform:translateX(17px); background:var(--gelo); }
.alavanca input:focus-visible + i{ outline:2px solid var(--anel); outline-offset:2px; }

.segmentos{ display:inline-flex; padding:3px; gap:2px; background:var(--campo); border:1px solid var(--borda-2); border-radius:var(--pill); flex-wrap:wrap; }
.segmentos button{ border:0; background:transparent; padding:6px 14px; border-radius:var(--pill); color:var(--txt-3); cursor:pointer; font-size:13px; font-weight:500; }
.segmentos button:hover{ color:var(--txt); }
.segmentos button.ativo{ background:var(--card-2); color:var(--gelo); box-shadow:0 0 0 1px var(--borda-azul); }

/* ---------------- Linhas editaveis (produtos, fontes) ---------------- */
.linhas{ display:flex; flex-direction:column; gap:8px; }
.linha-ed{ display:grid; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--borda); border-radius:12px; background:var(--card-2); }
.linha-ed .tag{ font-family:var(--mono); font-size:11px; color:var(--mudo); }
.prod-linha{ grid-template-columns:28px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 34px; }
.peso-linha{ grid-template-columns:minmax(0,1.3fr) 110px minmax(0,1.2fr) 34px; }
.cab-linhas{ display:grid; gap:10px; padding:0 13px 2px; font-size:11.5px; color:var(--mudo); }
.barra-fina{ height:6px; border-radius:6px; background:var(--trilho-fino); overflow:hidden; }
.barra-fina i{ display:block; height:100%; background:var(--azul-2); border-radius:6px; transition:width .3s; }
.pct{ font-family:var(--mono); font-size:12.5px; color:var(--txt-2); min-width:48px; text-align:right; }
.parte{ display:flex; align-items:center; gap:10px; }
.parte .barra-fina{ flex:1; }

/* ---------------- Passos (agendar) ---------------- */
.passos{ display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap; }
.passo{ display:flex; align-items:center; gap:10px; padding:7px 14px 7px 8px; border-radius:var(--pill); border:1px solid var(--borda); color:var(--mudo); font-size:13px; background:transparent; cursor:default; }
.passo .n{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-size:11px; background:var(--passo-n); color:var(--txt-3); }
.passo.feito{ color:var(--txt-2); cursor:pointer; }
.passo.feito .n{ background:var(--azul-3); color:var(--gelo); }
.passo.atual{ color:var(--txt); border-color:var(--borda-azul); background:var(--azul-fundo); }
.passo.atual .n{ background:var(--gelo); color:var(--gelo-txt); }

.opcoes{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.opcao{ text-align:left; padding:18px; border-radius:var(--r-lg); border:1px solid var(--borda); background:var(--card); cursor:pointer; transition:border-color .15s, background .15s, transform .15s; display:flex; flex-direction:column; gap:6px; min-height:150px; }
.opcao:hover{ border-color:var(--opcao-hover-borda); background:var(--card-2); transform:translateY(-1px); }
.opcao.ativo{ border-color:var(--azul-2); background:var(--card-azul-grad); box-shadow:0 0 0 1px var(--azul-3) inset; }
.opcao .ico{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--ico-bg); border:1px solid var(--borda-2); color:var(--azul); margin-bottom:6px; }
.opcao b{ font-size:16px; font-weight:550; letter-spacing:-.3px; }
.opcao span{ color:var(--txt-3); font-size:12.5px; }
.opcao .datas{ margin-top:auto; font-family:var(--mono); font-size:11.5px; color:var(--sobre); }

.semana-tab{ width:100%; border-collapse:collapse; table-layout:fixed; }
.semana-tab th:nth-child(1){ width:36%; } .semana-tab th:nth-child(3){ width:118px; }
.semana-tab .entrada{ max-width:none !important; }
.semana-tab th{ text-align:left; font-weight:450; font-size:12px; color:var(--mudo); padding:0 8px 8px; }
.semana-tab td{ padding:5px 8px; border-top:1px solid var(--borda); }
.semana-tab td:first-child{ font-weight:500; }
.semana-tab .vezes{ overflow:hidden; text-overflow:ellipsis; }
.semana-tab .vezes{ font-family:var(--mono); font-size:11px; color:var(--mudo); white-space:nowrap; font-weight:400; margin-top:1px; }
.semana-tab tr.folga td:first-child{ color:var(--mudo); }

.calendario{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.cal-cab{ font-family:var(--mono); font-size:11px; color:var(--mudo); text-transform:uppercase; letter-spacing:1px; padding:0 4px 2px; }
.dia{ border:1px solid var(--borda); background:var(--card-2); border-radius:12px; padding:10px 11px; min-height:92px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:3px; transition:border-color .15s, background .15s; }
.dia:hover{ border-color:var(--azul-3); background:var(--hover); }
.dia .d{ font-family:var(--mono); font-size:11.5px; color:var(--txt-3); display:flex; justify-content:space-between; }
.dia .m{ font-size:15px; font-weight:550; letter-spacing:-.4px; font-variant-numeric:tabular-nums; margin-top:auto; }
.dia .p{ font-size:11.5px; color:var(--mudo); }
.dia.folga{ background:transparent; border-style:dashed; }
.dia.folga .m{ color:var(--mudo); font-weight:400; font-size:13px; }
.dia.hoje{ border-color:var(--borda-azul); }
.dia.editado .d::after{ content:"editado"; color:var(--ambar); font-size:10px; }
.dia.vazio-cal{ visibility:hidden; }
.dia{ min-width:0; overflow:hidden; }
.so-curto{ display:none; }
.dia .barra-fina{ margin-top:4px; height:4px; }

/* ---------------- Graficos ---------------- */
.grafico{ position:relative; }
.barras{ display:flex; align-items:flex-end; gap:3px; height:150px; padding-top:6px; }
.barras .col{ flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; position:relative; cursor:default; min-width:0; }
.barras .col::after{ content:""; position:absolute; inset:-4px -1px 0; } /* alvo de hover maior que a barra */
.barras .seg{ border-radius:4px 4px 0 0; min-height:0; }
.barras .seg.feito{ background:var(--azul-2); }
.barras .seg.falta{ background:var(--barra-falta); }
.barras .seg.falta + .seg.feito{ border-radius:0; margin-top:2px; }
.barras .seg.sozinho{ border-radius:4px 4px 0 0; }
.barras .col.agora .seg{ box-shadow:0 0 0 1px var(--ambar); }
.barras .col.hover .seg.feito{ background:var(--azul); }
.barras .col.hover .seg.falta{ background:var(--barra-falta-hover); }
.barras .col .toco{ height:2px; background:var(--trilho-fino); border-radius:2px; }
.eixo{ display:flex; justify-content:space-between; border-top:1px solid var(--borda-2); margin-top:0; padding-top:6px; font-family:var(--mono); font-size:10.5px; color:var(--mudo); }
.eixo.cheio{ display:flex; gap:3px; }
.eixo.cheio span{ flex:1; text-align:center; min-width:0; overflow:hidden; }
.legenda{ display:flex; gap:16px; font-size:12px; color:var(--txt-3); flex-wrap:wrap; }
.legenda i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }

.dica{ position:fixed; z-index:100; pointer-events:none; background:var(--dica-bg); border:1px solid var(--borda-2); border-radius:10px; padding:8px 11px; font-size:12.5px; box-shadow:0 10px 30px var(--sombra-media); max-width:240px; }
.dica b{ font-weight:550; }
.dica .l{ display:flex; justify-content:space-between; gap:14px; color:var(--txt-3); }
.dica .l span:last-child{ color:var(--txt); font-family:var(--mono); }

.progresso{ height:8px; border-radius:8px; background:var(--progresso-bg); overflow:hidden; }
.progresso i{ display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,var(--azul-3),var(--azul-2)); transition:width .5s; }

/* ---------------- Tabelas ---------------- */
.tabela-env{ overflow-x:auto; border:1px solid var(--borda); border-radius:var(--r); }
table.tab{ width:100%; border-collapse:collapse; font-size:13px; }
.tab th{ text-align:left; font-weight:450; font-size:12px; color:var(--mudo); padding:10px 14px; border-bottom:1px solid var(--borda); white-space:nowrap; background:var(--card); position:sticky; top:0; }
.tab td{ padding:10px 14px; border-bottom:1px solid var(--borda); white-space:nowrap; }
.tab tr:last-child td{ border-bottom:0; }
.tab tbody tr:hover td{ background:var(--linha-hover); }
.tab .dir{ text-align:right; }
.tab .fraco{ color:var(--txt-3); }

.chip{ display:inline-flex; align-items:center; gap:6px; padding:2px 9px 2px 8px; border-radius:var(--pill); font-size:12px; border:1px solid var(--borda-2); color:var(--txt-2); white-space:nowrap; }
.chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9; }
.chip.paid{ color:var(--azul); border-color:var(--borda-azul); background:var(--chip-paid-bg); }
.chip.waiting_payment{ color:var(--ambar); border-color:var(--ambar-borda); }
.chip.refused{ color:var(--txt-3); }
.chip.refunded, .chip.chargedback{ color:var(--roxo); border-color:var(--roxo-borda); }
.chip.falha{ color:var(--rosa); border-color:var(--rosa-borda); background:var(--rosa-fundo); }
.chip.sem::before{ display:none; }

/* ---------------- Avisos ---------------- */
.aviso{ display:flex; gap:12px; padding:12px 14px; border-radius:12px; border:1px solid var(--borda-2); background:var(--card-2); font-size:13px; color:var(--txt-2); align-items:flex-start; }
.aviso svg{ width:17px; height:17px; flex:none; margin-top:1px; }
.aviso b{ color:var(--txt); font-weight:550; }
.aviso.info{ border-color:var(--borda-azul); background:var(--azul-fundo); }
.aviso.info svg{ color:var(--azul); }
.aviso.atencao{ border-color:var(--ambar-borda); background:var(--ambar-fundo); }
.aviso.atencao svg{ color:var(--ambar); }
.aviso.erro{ border-color:var(--rosa-borda); background:var(--rosa-fundo); }
.aviso.erro svg{ color:var(--rosa); }

.avisos{ position:fixed; right:20px; bottom:20px; z-index:200; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.toast{ background:var(--toast-bg); border:1px solid var(--borda-azul); border-radius:12px; padding:11px 16px; font-size:13.5px; box-shadow:0 12px 40px var(--sombra-media); animation:sobe .25s ease; max-width:360px; }
.toast.erro{ border-color:var(--rosa-borda); }
@keyframes sobe{ from{ opacity:0; transform:translateY(8px); } }

/* ---------------- Checklist de configuracao ---------------- */
.check{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:11px; transition:background .15s; }
.check:hover{ background:var(--hover); }
.check .bola{ width:22px; height:22px; border-radius:50%; border:1.5px dashed var(--bola-borda); display:grid; place-items:center; flex:none; }
.check.feito .bola{ border:0; background:var(--azul-3); color:var(--gelo); }
.check .bola svg{ width:13px; height:13px; }
.check .t{ flex:1; min-width:0; }
.check .t b{ font-weight:500; display:block; }
.check .t span{ font-size:12.5px; color:var(--txt-3); }
.check .ir{ color:var(--mudo); }

.lista-dados{ display:flex; flex-direction:column; }
.lista-dados .l{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--borda); font-size:13px; }
.lista-dados .l:last-child{ border-bottom:0; }
.lista-dados .l > span:first-child{ color:var(--txt-3); }
.lista-dados .l > span:last-child{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

.funil{ display:flex; flex-direction:column; gap:10px; }
.funil .degrau{ display:grid; grid-template-columns:52px 1fr 54px; gap:10px; align-items:center; font-size:12.5px; }
.funil .degrau .barra-fina{ height:8px; }

.separador{ height:1px; background:var(--borda); margin:18px 0; }
.sec-titulo{ font-family:var(--mono); font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--mudo); margin:0 0 12px; }

/* ---------------- Modal ---------------- */
.fundo-modal{ position:fixed; inset:0; z-index:150; background:var(--modal-fundo); backdrop-filter:blur(4px); display:grid; place-items:center; padding:20px; animation:aparece .15s ease; }
@keyframes aparece{ from{ opacity:0; } }
.caixa-modal{ width:min(460px,100%); background:var(--card); border:1px solid var(--borda-2); border-radius:18px; padding:24px; box-shadow:0 30px 80px var(--sombra-forte); }
.caixa-modal h3{ margin:0 0 6px; font-size:18px; font-weight:550; letter-spacing:-.4px; }
.caixa-modal p{ margin:0 0 16px; color:var(--txt-3); }
.caixa-modal .acoes{ justify-content:flex-end; margin-top:20px; }

/* ---------------- Login ---------------- */
.login{ min-height:100vh; display:grid; place-items:center; padding:24px;
  background:radial-gradient(800px 400px at 50% -10%, var(--login-brilho), transparent 70%), var(--bg); }
.login form{ width:min(380px,100%); background:var(--card); border:1px solid var(--borda); border-radius:20px; padding:30px; display:flex; flex-direction:column; gap:16px; }
.login h1{ margin:0; font-size:22px; font-weight:550; letter-spacing:-.6px; }
.login p{ margin:-8px 0 4px; color:var(--txt-3); }

.carregando{ padding:60px; text-align:center; color:var(--mudo); }
.girando{ width:16px; height:16px; border:2px solid var(--bola-borda); border-top-color:var(--gelo); border-radius:50%; animation:gira .8s linear infinite; display:inline-block; }
@keyframes gira{ to{ transform:rotate(360deg); } }

.recentes .r{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--borda); font-size:13px; }
.recentes .r:last-child{ border-bottom:0; }
.recentes .r .q{ font-family:var(--mono); font-size:11.5px; color:var(--mudo); }
.recentes .r .v{ font-family:var(--mono); }

/* ---------------- Celular ---------------- */
.cobre{ display:none; }
@media (max-width: 1100px){
  .g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g-lado{ grid-template-columns:1fr; }
  .fixo{ position:static; }
  .opcoes{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 860px){
  .app{ grid-template-columns:1fr; }
  .lado{ position:fixed; left:0; top:0; z-index:60; width:min(280px,86vw); transform:translateX(-100%); transition:transform .25s ease; }
  .app.menu-aberto .lado{ transform:none; box-shadow:20px 0 60px var(--sombra-forte); }
  .app.menu-aberto .cobre{ display:block; position:fixed; inset:0; z-index:55; background:var(--sombra-media); }
  .menu-btn{ display:grid; }
  .topo{ padding:0 16px; }
  .conteudo{ padding:20px 16px 90px; }
  .g-2, .g-3{ grid-template-columns:1fr; }
  .relogio{ display:none; }
  .cabeca h2{ font-size:22px; }
  .calendario{ gap:5px; }
  .dia{ padding:7px; min-height:74px; }
  .dia .m{ font-size:12.5px; }
  .dia .p{ display:none; }
  .prod-linha{ grid-template-columns:24px 1fr 1fr 34px; }
  .prod-linha .so-largo{ grid-column:2 / 4; grid-row:2; }
  .card-topo{ flex-direction:column; }
  .card-topo .acoes{ width:100%; }
  .peso-linha{ grid-template-columns:1fr 92px 34px; }
  .peso-linha .parte{ grid-column:1 / -1; order:5; }
  .cab-linhas{ display:none; }
}
@media (max-width: 520px){
  .dia .so-largo{ display:none; }
  .dia .so-curto{ display:inline; }
  .dia{ min-height:62px; padding:6px 5px; }
  .dia .d{ font-size:10px; }
  .calendario{ gap:4px; }
  .g-4{ grid-template-columns:1fr 1fr; gap:10px; }
  .kpi{ padding:14px; }
  .kpi .val{ font-size:20px; }
  .opcoes{ grid-template-columns:1fr 1fr; gap:8px; }
  .opcao{ min-height:128px; padding:14px; }
  .pilula-status .txt-longo{ display:none; }
  .salvo span{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}
.lista-dados .l .chip{ font-family:var(--sans); }