/* ═══════════════════════════════════════════════════════════════════════
   MYDESK — GESTÃO DE ESTOQUE
   ═══════════════════════════════════════════════════════════════════════
   Nada de aparência de ERP. As cores, os raios, as fontes e o espaçamento
   saem dos mesmos tokens que o resto do app usa — Syne nos títulos, Inter no
   corpo, indigo como cor de ação. Onde o valor não existir como variável, o
   literal é o mesmo que main.css já usa, para o painel não destoar se alguém
   trocar um token amanhã.

   `#est-view` é irmão de `#crm-dashboard`, e não filho: quando o modelo de
   estoque está no ar, os blocos do painel financeiro somem inteiros. Esconder
   por `style.display` no JS não funcionaria — as regras que mostram aqueles
   blocos são `.visible{display:block !important}`, e `!important` de folha
   ganha de estilo em linha.
   ═══════════════════════════════════════════════════════════════════════ */

#est-view { display: none; }
#crm-view.est-modelo #est-view { display: block; }

/* Some o painel do financeiro/RH quando o estoque está no ar — mesma
   estratégia da classe `cli-modelo`. */
#crm-view.est-modelo #crm-dashboard,
#crm-view.est-modelo #crm-board,
#crm-view.est-modelo #crm-charts-row,
#crm-view.est-modelo #cli-view { display: none !important; }

/* SEM TETO DE LARGURA, igual ao painel de clientes.
   Havia um `max-width:1520px; margin:0 auto` aqui. Num monitor de 24" isso
   parava o conteúdo antes da borda e transformava o resto em margem vazia dos
   dois lados — o painel parecia encolhido dentro da própria tela, e o de
   clientes, que nunca teve teto, parecia o normal. Eram dois painéis irmãos
   com regras diferentes, e o mais estreito é que estava errado.

   As mesmas medidas do `#cli-view`: 26px de folga lateral, 14px no celular.
   Um teto faz sentido para TEXTO CORRIDO, onde a linha longa cansa de ler.
   Aqui não há texto corrido: há grade de indicadores, gráfico e tabela — e
   esses três só melhoram com espaço. */
#est-view {
  padding: 22px 26px 60px;
  font-family: 'Inter', sans-serif;
  color: var(--clr-text, #f0f0f0);
}

/* ── Topo ────────────────────────────────────────────────────────────── */
.est-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 18px;
}
.est-titulo {
  font-family: 'Syne', sans-serif; font-size: 1.55rem; font-weight: 800;
  letter-spacing: -.6px; margin: 0; color: var(--clr-text, #f0f0f0);
}
.est-sub { margin: 4px 0 0; font-size: .78rem; color: rgba(240,240,240,.42); }
.est-acoes-topo { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Botões ──────────────────────────────────────────────────────────── */
.est-btn {
  border: 1px solid rgba(255,255,255,.09); border-radius: 9px;
  padding: 9px 14px; background: rgba(255,255,255,.04);
  font-family: 'Inter', sans-serif; font-size: .755rem; font-weight: 600;
  color: rgba(240,240,240,.68); cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.est-btn:hover { background: rgba(255,255,255,.08); color: #f0f0f0; }
.est-btn.primario {
  background: var(--clr-indigo, #6366f1); border-color: transparent; color: #fff;
}
.est-btn.primario:hover { background: #4f46e5; }
.est-btn.pequeno { padding: 5px 10px; font-size: .69rem; }
.est-btn:disabled { opacity: .55; cursor: default; }
.est-btn-perigo {
  margin-top: 14px; color: #f87171; border-color: rgba(248,113,113,.28);
  background: rgba(248,113,113,.08);
}
.est-btn-perigo:hover { background: rgba(248,113,113,.16); color: #fca5a5; }

/* A IA tem cor própria e discreta. Ela não é a ação principal do painel: é
   uma leitura a mais sobre o que já está na tela. */
.est-btn-ia {
  border-color: rgba(168,85,247,.3); background: rgba(168,85,247,.1);
  color: #d8b4fe; display: inline-flex; align-items: center; gap: 6px;
}
.est-btn-ia:hover { background: rgba(168,85,247,.18); color: #e9d5ff; }
.est-ia-ico { font-size: .85rem; line-height: 1; }
.est-ia-ico.girando { animation: estGira 1.1s linear infinite; display: inline-block; }
@keyframes estGira { to { transform: rotate(360deg); } }

/* ── Navegação entre as oito seções ──────────────────────────────────── */
.est-nav {
  display: flex; gap: 2px; margin-bottom: 20px; padding: 3px;
  background: rgba(255,255,255,.03); border-radius: 11px;
  overflow-x: auto; scrollbar-width: none;
}
.est-nav::-webkit-scrollbar { display: none; }
.est-nav-item {
  border: 0; background: none; border-radius: 8px; padding: 8px 14px;
  font-family: 'Inter', sans-serif; font-size: .75rem; font-weight: 600;
  color: rgba(240,240,240,.42); cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s; position: relative;
}
.est-nav-item:hover { color: rgba(240,240,240,.75); }
.est-nav-item.ativo { background: rgba(99,102,241,.16); color: #a5b4fc; }
.est-nav-badge {
  margin-left: 6px; background: #ef4444; color: #fff; border-radius: 8px;
  padding: 1px 6px; font-size: .6rem; font-weight: 700;
}

/* ── Indicadores ─────────────────────────────────────────────────────── */
.est-kpis {
  display: grid; gap: 12px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.est-kpi {
  --kpi: rgba(99,102,241,.9);
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px; padding: 15px 16px; position: relative; overflow: hidden;
}
/* Uma barra fina no topo em vez de fundo colorido: o número continua sendo o
   que se lê primeiro, e a cor diz a urgência sem competir com ele. */
.est-kpi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--kpi);
}
.est-kpi-num {
  font-family: 'Syne', sans-serif; font-size: 1.42rem; font-weight: 800;
  letter-spacing: -.7px; color: #f0f0f0; line-height: 1.15;
}
.est-kpi-lbl { margin-top: 3px; font-size: .705rem; color: rgba(240,240,240,.42); }
.est-kpi-dica { margin-top: 5px; font-size: .655rem; color: rgba(240,240,240,.28); }

/* ── Blocos ──────────────────────────────────────────────────────────── */
.est-grade2 {
  display: grid; gap: 14px; margin-bottom: 14px;
  grid-template-columns: 1.35fr 1fr;
}
.est-bloco {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  border-radius: 15px; padding: 16px 18px; margin-bottom: 14px;
}
.est-bloco-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.est-bloco-topo h3 {
  margin: 0; font-family: 'Syne', sans-serif; font-size: .95rem; font-weight: 700;
  color: #f0f0f0; display: flex; align-items: center; gap: 7px;
}
.est-ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.est-cont {
  background: rgba(255,255,255,.07); border-radius: 20px; padding: 1px 8px;
  font-size: .65rem; font-weight: 700; color: rgba(240,240,240,.5);
}

/* ── Períodos ────────────────────────────────────────────────────────── */
.est-periodos { display: flex; gap: 2px; background: rgba(255,255,255,.04); padding: 2px; border-radius: 8px; }
.est-per {
  border: 0; background: none; border-radius: 6px; padding: 4px 10px;
  font-family: 'Inter', sans-serif; font-size: .68rem; font-weight: 600;
  color: rgba(240,240,240,.4); cursor: pointer; transition: all .14s;
}
.est-per.ativo { background: rgba(99,102,241,.2); color: #a5b4fc; }

/* ── Gráfico ─────────────────────────────────────────────────────────── */
.est-gr-wrap { width: 100%; }
.est-gr-legenda {
  display: flex; gap: 16px; margin-top: 8px;
  font-size: .68rem; color: rgba(240,240,240,.4);
}
.est-gr-legenda span { display: flex; align-items: center; gap: 6px; }
.est-gr-legenda i { width: 9px; height: 3px; border-radius: 2px; display: inline-block; }

/* ── Alertas ─────────────────────────────────────────────────────────── */
.est-alertas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.est-alerta {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 9px;
  border-radius: 9px; cursor: pointer; transition: background .14s;
}
.est-alerta:hover { background: rgba(255,255,255,.05); }
.est-alerta > i {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
}
.est-alerta-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.est-alerta-txt b { font-size: .755rem; font-weight: 600; color: #f0f0f0; }
.est-alerta-txt em {
  font-style: normal; font-size: .69rem; color: rgba(240,240,240,.4);
}

/* ── Barras de "mais movimentados" ───────────────────────────────────── */
.est-barras { display: flex; flex-direction: column; gap: 7px; }
.est-barra-l {
  display: grid; grid-template-columns: minmax(90px, 1.1fr) 3fr auto;
  align-items: center; gap: 12px; cursor: pointer; padding: 3px 4px;
  border-radius: 7px; transition: background .14s;
}
.est-barra-l:hover { background: rgba(255,255,255,.04); }
.est-barra-nome {
  font-size: .73rem; color: rgba(240,240,240,.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.est-barra-tr { height: 7px; background: rgba(255,255,255,.05); border-radius: 4px; overflow: hidden; }
.est-barra-tr i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--clr-indigo, #6366f1), #818cf8);
}
.est-barra-n {
  font-size: .71rem; font-weight: 700; color: rgba(240,240,240,.55);
  font-variant-numeric: tabular-nums;
}

/* ── Filtros ─────────────────────────────────────────────────────────── */
.est-filtros { display: flex; gap: 9px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.est-busca {
  flex: 1 1 240px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; transition: border-color .16s;
}
.est-busca:focus-within { border-color: rgba(99,102,241,.5); }
.est-busca span { color: rgba(240,240,240,.28); font-size: .9rem; }
.est-busca input {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0; padding: 9px 0;
  font-family: 'Inter', sans-serif; font-size: .78rem; color: #f0f0f0;
}
.est-busca input::placeholder { color: rgba(240,240,240,.2); }
.est-sel {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: 9px 11px; font-family: 'Inter', sans-serif;
  font-size: .74rem; color: rgba(240,240,240,.7); outline: 0; cursor: pointer;
}

/* ── Tabela ──────────────────────────────────────────────────────────── */
/* Rolagem no CONTÊINER, e não na página: a tabela larga não pode empurrar a
   navegação e os indicadores para fora da tela junto com ela. */
.est-tabela-wrap {
  overflow-x: auto; border: 1px solid rgba(255,255,255,.06); border-radius: 14px;
  background: rgba(255,255,255,.02); -webkit-overflow-scrolling: touch;
}
.est-tabela { width: 100%; border-collapse: collapse; font-size: .755rem; min-width: 640px; }
.est-tabela thead th {
  text-align: left; padding: 11px 14px; font-size: .655rem; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; color: rgba(240,240,240,.32);
  border-bottom: 1px solid rgba(255,255,255,.06); white-space: nowrap;
  position: sticky; top: 0; background: #101014; z-index: 1;
}
.est-tabela td { padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.035); color: rgba(240,240,240,.6); }
.est-tabela tbody tr { cursor: pointer; transition: background .13s; }
.est-tabela tbody tr:hover { background: rgba(255,255,255,.035); }
.est-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.est-tabela .num em { font-style: normal; font-size: .66rem; color: rgba(240,240,240,.3); }
.est-nome { color: #f0f0f0; font-weight: 600; }
.est-marca { display: block; font-size: .66rem; color: rgba(240,240,240,.3); }
.est-mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .7rem; }
.est-td-vazio { text-align: center; padding: 34px 14px !important; color: rgba(240,240,240,.28); }
.pos { color: #34d399; }
.neg { color: #f87171; }

.est-selo {
  --c: #10b981;
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: .645rem; font-weight: 700; white-space: nowrap;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}

/* ── Cartões (fornecedores, inventários) ─────────────────────────────── */
.est-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.est-card {
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px; padding: 15px 16px; cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.est-card:hover {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.11);
  transform: translateY(-2px);
}
.est-card h4 { margin: 0; font-size: .85rem; font-weight: 700; color: #f0f0f0; }
.est-card-sub { margin: 3px 0 10px; font-size: .69rem; color: rgba(240,240,240,.35); }

/* ── Lista de definições ─────────────────────────────────────────────── */
.est-dl { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.est-dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.est-dl dt { font-size: .705rem; color: rgba(240,240,240,.35); }
.est-dl dd { margin: 0; font-size: .745rem; color: rgba(240,240,240,.8); text-align: right; font-weight: 500; }
.est-dl.compacta > div { gap: 8px; }
.est-dl.compacta dt, .est-dl.compacta dd { font-size: .68rem; }

/* ── Página do produto ───────────────────────────────────────────────── */
.est-voltar {
  border: 0; background: none; padding: 0; margin-bottom: 14px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: .74rem; font-weight: 600;
  color: rgba(240,240,240,.4); transition: color .14s;
}
.est-voltar:hover { color: #a5b4fc; }
.est-prod-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 18px;
}
.est-prod-nome {
  margin: 0; font-family: 'Syne', sans-serif; font-size: 1.4rem; font-weight: 800;
  letter-spacing: -.5px; color: #f0f0f0;
}
.est-prod-meta {
  margin: 6px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .72rem; color: rgba(240,240,240,.38);
}
.est-desc {
  margin: 12px 0 0; font-size: .73rem; line-height: 1.6;
  color: rgba(240,240,240,.45); white-space: pre-wrap;
}

/* ── Histórico ───────────────────────────────────────────────────────── */
.est-hist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
/* A linha virou coluna para caber a observação embaixo. Os campos do
   movimento continuam numa faixa horizontal só — quem lê o histórico varre a
   coluna da quantidade, e quebrar isso custaria mais do que a observação
   ganha. */
.est-hist li {
  display: flex; flex-direction: column; gap: 2px; padding: 7px 8px;
  border-radius: 8px; font-size: .715rem; color: rgba(240,240,240,.5);
  cursor: pointer; transition: background .13s;
}
.est-hist-linha { display: flex; align-items: center; gap: 10px; }
.est-hist-obs {
  font-size: .655rem; color: rgba(240,240,240,.3); line-height: 1.45;
  padding-left: 2px; overflow-wrap: anywhere;
}
.est-hist li:hover { background: rgba(255,255,255,.04); }
.est-hist-data { font-variant-numeric: tabular-nums; color: rgba(240,240,240,.3); flex-shrink: 0; }
.est-hist-tipo { flex: 1; min-width: 0; color: rgba(240,240,240,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.est-hist-qtd { font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.est-hist-fim { color: rgba(240,240,240,.28); flex-shrink: 0; }
.est-hist-mot { color: rgba(240,240,240,.28); flex-shrink: 0; }

/* ── Vazios ──────────────────────────────────────────────────────────── */
.est-vazio { text-align: center; padding: 60px 20px; }
.est-vazio-ico { font-size: 2.4rem; margin-bottom: 10px; opacity: .5; }
.est-vazio h3 { margin: 0 0 6px; font-family: 'Syne', sans-serif; font-size: 1.1rem; color: #f0f0f0; }
.est-vazio p { margin: 0 auto 18px; max-width: 380px; font-size: .77rem; line-height: 1.6; color: rgba(240,240,240,.35); }
.est-vazio-min { padding: 26px 6px; text-align: center; font-size: .74rem; color: rgba(240,240,240,.28); }

/* ── Modal ───────────────────────────────────────────────────────────── */
.est-modal { width: min(620px, 94vw); padding: 0 !important; }
.est-modal-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 20px 12px;
}
.est-modal-topo h3 {
  margin: 0; font-family: 'Syne', sans-serif; font-size: 1.02rem; font-weight: 800; color: #f0f0f0;
}
.est-modal-x {
  width: 28px; height: 28px; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.05); color: rgba(240,240,240,.4); font-size: .78rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.est-modal-x:hover { background: rgba(255,255,255,.1); color: #f0f0f0; }
.est-modal-corpo { padding: 0 20px 4px; max-height: 62dvh; overflow-y: auto; }
.est-modal-pe {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px 18px; border-top: 1px solid rgba(255,255,255,.05); margin-top: 12px;
}

.est-form-secao {
  font-size: .645rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: rgba(240,240,240,.3); margin: 16px 0 9px;
}
.est-form-secao:first-child { margin-top: 4px; }
.est-form-grade { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.est-campo { display: block; margin-bottom: 10px; }
.est-campo > span {
  display: block; margin-bottom: 5px; font-size: .68rem; color: rgba(240,240,240,.42);
}
.est-campo input, .est-campo select, .est-campo textarea {
  width: 100%; box-sizing: border-box; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08); border-radius: 9px; padding: 9px 11px;
  font-family: 'Inter', sans-serif; font-size: .78rem; color: #f0f0f0; outline: 0;
  transition: border-color .16s;
}
.est-campo input:focus, .est-campo select:focus, .est-campo textarea:focus {
  border-color: rgba(99,102,241,.55);
}
.est-campo textarea { resize: vertical; line-height: 1.5; }

.est-nota { margin: 10px 0 0; font-size: .705rem; line-height: 1.55; color: rgba(240,240,240,.35); }
.est-nota.est-ok { color: #34d399; }
.est-nota.est-erro { color: #f87171; }

/* Itens de uma compra */
.est-item-linha {
  display: grid; grid-template-columns: 2fr 70px 100px 30px; gap: 7px;
  align-items: center; margin-bottom: 7px;
}
.est-item-linha select, .est-item-linha input {
  width: 100%; box-sizing: border-box; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 7px 9px;
  font-family: 'Inter', sans-serif; font-size: .73rem; color: #f0f0f0; outline: 0;
}
.est-item-x {
  border: 0; border-radius: 7px; background: rgba(255,255,255,.05);
  color: rgba(240,240,240,.35); cursor: pointer; height: 32px; font-size: .7rem;
}
.est-item-x:hover { background: rgba(248,113,113,.16); color: #fca5a5; }

.est-inv-inp {
  width: 78px; box-sizing: border-box; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: 7px; padding: 5px 7px;
  font-family: 'Inter', sans-serif; font-size: .73rem; color: #f0f0f0; outline: 0;
  text-align: right;
}
.est-inv-inp:focus { border-color: rgba(99,102,241,.55); }
.est-tab-inv { min-width: 460px; }
.est-tab-inv tbody tr { cursor: default; }

/* Saída da IA: parágrafos com respiro, e a primeira linha destacada porque é
   o resumo de tudo o que vem depois. */
.est-ia-saida p {
  margin: 0 0 9px; font-size: .78rem; line-height: 1.62; color: rgba(240,240,240,.72);
}
.est-ia-saida p:first-child { color: #f0f0f0; font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════
   PERGUNTAR AO ESTOQUE
   ═══════════════════════════════════════════════════════════════════════
   Um pouco mais largo que o modal comum (620px): aqui cabem a pergunta, as
   sugestões e a resposta ao mesmo tempo, e ler doze linhas de resposta numa
   coluna estreita cansa. */
.est-perg-modal { width: min(680px, 94vw); }
.est-perg { padding-top: 6px; }

.est-perg-campo {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 62px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(168,85,247,.25);
  border-radius: 11px; padding: 12px 13px;
  font-family: 'Inter', sans-serif; font-size: .82rem; line-height: 1.55;
  color: #f0f0f0; outline: 0; transition: border-color .16s;
}
.est-perg-campo:focus { border-color: rgba(168,85,247,.6); }
.est-perg-campo::placeholder { color: rgba(240,240,240,.26); }

/* As sugestões. Elas não são enfeite: o plano de cada uma já vem pronto no
   cliente, então clicar numa custa metade de uma pergunta digitada. */
.est-perg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.est-perg-chip {
  border: 1px solid rgba(255,255,255,.09); border-radius: 999px;
  background: rgba(255,255,255,.03); color: rgba(240,240,240,.55);
  font-family: 'Inter', sans-serif; font-size: .715rem; padding: 6px 12px;
  cursor: pointer; transition: background .16s, color .16s, border-color .16s;
}
.est-perg-chip:hover {
  background: rgba(168,85,247,.14); color: #e9d5ff; border-color: rgba(168,85,247,.3);
}

.est-perg-saida {
  margin-top: 14px; padding: 14px 15px; border-radius: 12px;
  background: rgba(168,85,247,.06); border: 1px solid rgba(168,85,247,.14);
}
.est-perg-saida p {
  margin: 0 0 8px; font-size: .79rem; line-height: 1.62; color: rgba(240,240,240,.74);
}
.est-perg-saida p:last-child { margin-bottom: 0; }
.est-perg-saida.est-erro { background: rgba(248,113,113,.06); border-color: rgba(248,113,113,.16); }
.est-perg-saida.est-erro p { color: #fca5a5; }

/* A pergunta ecoada acima da resposta. Depois de dez segundos esperando, quem
   perguntou já não lembra exatamente como formulou — e uma resposta sobre
   "os últimos 15 dias" só se confere sabendo que a pergunta dizia 15. */
.est-perg-eco {
  font-size: .715rem !important; color: rgba(240,240,240,.38) !important;
  border-left: 2px solid rgba(168,85,247,.35); padding-left: 9px; margin-bottom: 11px !important;
}
.est-perg-espera { color: rgba(240,240,240,.4) !important; font-style: italic; }
/* Quais funções do motor responderam. É o que transforma "confie em mim" em
   algo conferível: quem duvidar do número sabe onde ele foi buscado. */
.est-perg-fontes {
  margin-top: 11px !important; padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: .655rem !important; color: rgba(240,240,240,.28) !important;
}
.est-perg-pe { margin-top: 12px; }
/* O saldo do mês fica na esquerda do rodapé, longe do botão: é informação de
   contexto, não uma ação. */
.est-perg-saldo {
  margin-right: auto; align-self: center;
  font-size: .68rem; color: rgba(240,240,240,.3);
}

/* ═══════════════════════════════════════════════════════════════════════
   TABLET E CELULAR
   ═══════════════════════════════════════════════════════════════════════
   As duas faixas que o app já tem. A tabela mantém a estratégia de ROLAGEM
   CONTROLADA em vez de virar cartão: comparar linhas é a razão de uma tabela
   de estoque existir, e cartão empilhado joga isso fora. O que muda é o
   alcance — filtros que empilham e ações que não saem da tela. */
@media (max-width: 1180px) {
  .est-grade2 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  #est-view { padding: 14px 12px 40px; }
  .est-titulo { font-size: 1.24rem; }
  .est-topo { gap: 12px; }
  /* As ações vão para uma linha própria e cabem inteiras: um botão de ação
     principal cortado pela borda é a diferença entre poder e não poder
     registrar uma entrada. */
  .est-acoes-topo { width: 100%; }
  .est-acoes-topo .est-btn { flex: 1 1 auto; justify-content: center; text-align: center; }
  .est-kpis { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 9px; }
  .est-kpi { padding: 12px 13px; }
  .est-kpi-num { font-size: 1.2rem; }
  .est-filtros { gap: 7px; }
  .est-busca { flex: 1 1 100%; }
  .est-sel { flex: 1 1 calc(50% - 4px); }
  .est-bloco { padding: 13px 14px; }
  .est-modal-corpo { max-height: none; }
  .est-form-grade { grid-template-columns: 1fr; }
  .est-item-linha { grid-template-columns: 1fr 60px 84px 28px; }
  .est-prod-topo .est-acoes-topo { width: 100%; }
}

/* O botão que devolve o caminho para os outros painéis. Tem cor própria e
   discreta: ele não é ação sobre o estoque, é navegação para fora dele. */
.est-btn-modelo{display:inline-flex;align-items:center;gap:6px;
  border-color:rgba(99,102,241,.28);background:rgba(99,102,241,.1);color:#a5b4fc;}
.est-btn-modelo:hover{background:rgba(99,102,241,.18);color:#c7d2fe;}

/* ═══════════════════════════════════════════════════════════════════════
   VISÃO GERAL — a versão densa
   ═══════════════════════════════════════════════════════════════════════
   A primeira era número e rótulo. Um número sozinho não diz se é bom: "121
   unidades" só significa alguma coisa contra o que era antes e contra o que
   representa. Cada cartão passou a ter ícone (leitura periférica), número,
   linha de apoio, tendência e miniatura. */
.est-kpi{padding:14px 15px 13px;}
.est-kpi-topo{display:flex;align-items:center;gap:7px;margin-bottom:9px;}
.est-kpi-ico{font-size:.82rem;line-height:1;opacity:.85;}
.est-kpi-lbl{margin:0;font-size:.685rem;font-weight:600;color:rgba(240,240,240,.45);}
.est-kpi-linha{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;}
.est-kpi-num{font-size:1.34rem;letter-spacing:-.6px;}
.est-kpi-pe{margin-top:4px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:.655rem;color:rgba(240,240,240,.3);}
/* A cor da tendência diz o SENTIDO, não a direção: em saídas subir é bom, em
   produtos parados subir é ruim. Quem chama decide qual é qual. */
.est-kpi-tend{font-weight:700;font-variant-numeric:tabular-nums;}
.est-kpi-tend.sobe{color:#34d399;}
.est-kpi-tend.desce{color:#f87171;}
.est-kpi-faixa{flex-shrink:0;opacity:.9;line-height:0;}

/* Selo do módulo, à esquerda do título. */
.est-selo-modulo{width:42px;height:42px;flex-shrink:0;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  background:rgba(99,102,241,.14);border:1px solid rgba(99,102,241,.24);}
.est-topo{align-items:center;}
.est-topo-txt{flex:1;min-width:0;}

/* Duas colunas com pilha própria: a da esquerda conta o que aconteceu, a da
   direita diz o que fazer. Empilhá-las faria a decisão aparecer depois de
   rolar — quando já foi tomada com o que estava à vista. */
.est-coluna{display:flex;flex-direction:column;min-width:0;}
.est-coluna .est-bloco:last-child{margin-bottom:0;}
.est-verTodos{margin-top:10px;width:100%;}

/* Rosca da distribuição. O furo carrega o total, que é o número que todo o
   resto divide. */
.est-rosca{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap;}
.est-rosca svg{flex-shrink:0;}
.est-rosca-n{fill:#f0f0f0;font-family:Syne,sans-serif;font-size:19px;font-weight:800;}
.est-rosca-l{fill:rgba(240,240,240,.32);font-family:Inter,sans-serif;font-size:8.5px;}
.est-rosca-leg{list-style:none;margin:0;padding:0;flex:1;min-width:118px;
  display:flex;flex-direction:column;gap:5px;}
/* ═══════════════════════════════════════════════════════════════════════
   O NOME DA CATEGORIA EM CIMA, O DINHEIRO EMBAIXO
   ═══════════════════════════════════════════════════════════════════════
   Os quatro cabiam numa linha só — bolinha, nome, porcentagem, valor —, e o
   nome era o único que podia encolher. Numa loja de verdade o valor imprime
   "R$ 219.489,20" (13 caracteres, ~90px) e a porcentagem reserva 30px: sobravam
   38px para o nome, que virava "Eq…".

   O estrago não é estético. Com 38px, "Equipamentos" e "Equipamento de solda"
   viram "Eq…" e "Equi…" — duas fatias diferentes da rosca com rótulos que
   ninguém distingue. Uma legenda que não identifica não é legenda.

   Aumentar a coluna não resolvia: o valor cresce com o estoque, e qualquer
   largura escolhida hoje seria pouca para quem tem mais mercadoria. Duas
   linhas resolvem em qualquer largura — o nome fica com a linha inteira, e o
   número, que tem tamanho previsível, fica embaixo.

   Em grade e não em flex por causa da bolinha: ela precisa ficar na coluna da
   esquerda ao lado das DUAS linhas, e não empurrar a segunda. */
.est-rosca-leg li{
  display:grid;
  grid-template-columns:8px minmax(0,1fr) auto;
  grid-template-areas:"cor nome nome" "cor pct valor";
  column-gap:7px;row-gap:1px;align-items:center;
  font-size:.685rem;color:rgba(240,240,240,.5);
}
.est-rosca-leg i{grid-area:cor;width:8px;height:8px;border-radius:3px;align-self:center;}
/* `anywhere` e não `break-word`: categoria costuma ser uma palavra só e longa
   ("Equipamentos"), e sem isto ela estoura a coluna em vez de quebrar. */
.est-rosca-leg span{grid-area:nome;min-width:0;color:rgba(240,240,240,.72);
  line-height:1.3;overflow-wrap:anywhere;}
.est-rosca-leg em{grid-area:pct;font-style:normal;color:rgba(240,240,240,.28);
  text-align:left;}
.est-rosca-leg b{grid-area:valor;color:rgba(240,240,240,.8);
  font-variant-numeric:tabular-nums;text-align:right;}

/* ═══════════════════════════════════════════════════════════════════════
   CATEGORIAS
   ═══════════════════════════════════════════════════════════════════════
   O seletor é `<select>` nativo de propósito: cem itens pedem busca, e ele já
   tem a que serve (digitar salta para o item). No telefone vira o seletor do
   próprio sistema — rolagem, tamanho e busca resolvidos pelo aparelho, sem
   risco de estourar a tela, que é o que um dropdown desenhado à mão erra. */
.est-cat-linha{display:flex;gap:6px;align-items:stretch;}
.est-cat-linha select{flex:1;min-width:0;}
/* Quadrado e do mesmo tamanho do campo: ele é o irmão do seletor, não um botão
   de ação da tela. */
.est-cat-nova{
  flex-shrink:0;width:36px;border:1px solid rgba(255,255,255,.08);border-radius:9px;
  background:rgba(255,255,255,.04);color:rgba(240,240,240,.5);
  font-size:1rem;line-height:1;cursor:pointer;transition:background .15s,color .15s;
}
.est-cat-nova:hover{background:rgba(99,102,241,.16);color:#a5b4fc;border-color:rgba(99,102,241,.3);}

.est-cat-criar{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap;}
.est-cat-criar input{
  flex:1;min-width:120px;box-sizing:border-box;background:rgba(255,255,255,.04);
  border:1px solid rgba(99,102,241,.35);border-radius:9px;padding:8px 11px;
  font-family:'Inter',sans-serif;font-size:.78rem;color:#f0f0f0;outline:0;
}
.est-cat-criar input:focus{border-color:rgba(99,102,241,.6);}

.est-cat-lista{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:4px;}
.est-cat-item{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;
  background:rgba(255,255,255,.03);font-size:.755rem;color:rgba(240,240,240,.72);
}
.est-cat-nome{flex:1;min-width:0;overflow-wrap:anywhere;}
.est-cat-qtd{font-size:.68rem;color:rgba(240,240,240,.3);flex-shrink:0;}
.est-cat-acao{
  flex-shrink:0;width:26px;height:26px;border:0;border-radius:7px;
  background:rgba(255,255,255,.05);color:rgba(240,240,240,.4);
  font-size:.72rem;cursor:pointer;transition:background .14s,color .14s;
}
.est-cat-acao:hover{background:rgba(255,255,255,.11);color:#f0f0f0;}
.est-cat-acao.perigo:hover{background:rgba(248,113,113,.16);color:#fca5a5;}
/* O botão de gerenciar fica na fileira de filtros e não pode competir com
   eles: mesma altura, sem cor própria. */
.est-btn-cats{flex-shrink:0;}

/* Sugestão de compra, agrupada por fornecedor — é assim que se compra. */
.est-sug{margin-bottom:11px;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.05);}
.est-sug:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0;}
.est-sug-topo{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;}
.est-sug-topo b{font-size:.755rem;color:#f0f0f0;}
.est-sug-topo span{font-size:.7rem;font-weight:700;color:#a5b4fc;font-variant-numeric:tabular-nums;}
.est-sug-item{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:4px 6px;border-radius:7px;cursor:pointer;font-size:.71rem;
  color:rgba(240,240,240,.5);transition:background .13s;}
.est-sug-item:hover{background:rgba(255,255,255,.04);}
.est-sug-item em{font-style:normal;font-weight:600;color:rgba(240,240,240,.75);flex-shrink:0;}
.est-sug-mais{padding:3px 6px;font-size:.66rem;color:rgba(240,240,240,.28);}

/* Cobertura em dias na barra dos mais movimentados: traduz quantidade em
   TEMPO, que é o que decide a compra de hoje. */
.est-barra-l{grid-template-columns:minmax(80px,1.1fr) 2.4fr auto auto;}
.est-barra-cob{font-size:.645rem;color:rgba(240,240,240,.3);min-width:52px;text-align:right;
  font-variant-numeric:tabular-nums;}

@media (max-width:768px){
  .est-selo-modulo{width:36px;height:36px;font-size:.95rem;}
  .est-kpi-faixa{display:none;}   /* miniatura de 78px numa coluna estreita vira risco */
  .est-rosca{justify-content:center;}
  .est-barra-l{grid-template-columns:minmax(70px,1fr) 1.6fr auto;}
  .est-barra-cob{display:none;}
}

/* ═══════════════════════════════════════════════════════════════════════
   GRADE DE TRÊS COLUNAS, ANÁLISES E MOVIMENTO
   ═══════════════════════════════════════════════════════════════════════
   O painel era uma pilha. Três colunas mudam a leitura: a primeira conta o
   que aconteceu, a segunda mostra a composição, a terceira diz o que fazer —
   e as três cabem numa olhada, sem rolar. Rolar para decidir é decidir com o
   que estava à vista. */
/* Três colunas FIXAS, e não `auto-fit`: com auto-fit a largura da janela
   decidia quantas colunas havia, e `est-largo2` passava a significar coisas
   diferentes em cada tela — o gráfico ficava do tamanho da rosca e a tabela
   de alertas rolava dentro de um terço de tela. Fixando em três, "largo2" é
   sempre dois terços, que é a proporção do desenho. */
.est-grade3{
  display:grid;gap:14px;margin-bottom:14px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  /* `stretch` e não `start`: lado a lado, um cartão alto ao lado de um baixo
     lê como cartão inacabado, e não como cartão com menos conteúdo. */
  align-items:stretch;
}
.est-grade3 > .est-bloco{margin-bottom:0;}
.est-largo2{grid-column:span 2;}
.est-largo3{grid-column:1/-1;}

/* ── Cartões: grade que não deixa órfão ──────────────────────────────────
   Eram seis com `auto-fit`, e o sexto caía sozinho numa segunda fileira. São
   cinco, e cinco colunas iguais: a fileira fecha. */
.est-kpis{grid-template-columns:repeat(5,minmax(0,1fr));}
.est-kpi{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:15px 16px;transition:transform .18s cubic-bezier(.16,1,.3,1),border-color .18s;}
.est-kpi:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.12);}
.est-kpi.destaque{border-color:color-mix(in srgb,var(--kpi) 34%,transparent);}
.est-kpi-corpo{min-width:0;flex:1;}
.est-kpi-topo{margin-bottom:8px;gap:6px;}
/* O valor NÃO quebra em duas linhas: "R$ 1.437,00" partido ao meio deixa de
   ser um número e vira duas coisas. */
/* A cor saiu daqui: o número é branco em todos os cartões, e quem carrega a
   cor é o ícone. Tamanho e cor definitivos ficam no bloco de identidade, lá
   embaixo. */
.est-kpi-num{line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.est-kpi-pe{margin-top:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.est-kpi-pe.bom{color:#34d399;}
.est-kpi-pe.ruim{color:#f87171;}
.est-kpi-pe.atencao{color:#fbbf24;}
/* Selo redondo à direita, como na referência: dá ao olho um alvo de cor para
   achar o cartão certo sem percorrer os cinco rótulos. */
.est-kpi-selo{width:38px;height:38px;flex-shrink:0;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  background:color-mix(in srgb,var(--kpi,#6366f1) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--kpi,#6366f1) 26%,transparent);}

/* ── Barra secundária de análises ────────────────────────────────────── */
.est-analises{display:flex;gap:4px;margin:0 0 16px;overflow-x:auto;scrollbar-width:none;}
.est-analises::-webkit-scrollbar{display:none;}
.est-an-item{border:1px solid transparent;background:none;border-radius:9px;padding:7px 14px;
  font-family:Inter,sans-serif;font-size:.735rem;font-weight:600;
  color:rgba(240,240,240,.38);cursor:pointer;white-space:nowrap;
  transition:background .16s,color .16s,border-color .16s;}
.est-an-item:hover{color:rgba(240,240,240,.72);background:rgba(255,255,255,.04);}
.est-an-item.ativo{color:#f0f0f0;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);}

/* ── Linhas de resumo e de validade ──────────────────────────────────── */
.est-linhas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.est-linha-m{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:9px;
  transition:background .14s;}
.est-linha-m:hover{background:rgba(255,255,255,.03);}
.est-lm-ico{width:28px;height:28px;flex-shrink:0;border-radius:9px;display:flex;
  align-items:center;justify-content:center;font-size:.78rem;}
.est-lm-nome{flex:1;min-width:0;font-size:.745rem;color:rgba(240,240,240,.72);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.est-lm-n{font-size:.8rem;font-weight:700;color:#f0f0f0;font-variant-numeric:tabular-nums;}
.est-lm-var{font-size:.655rem;font-weight:700;min-width:46px;text-align:right;
  font-variant-numeric:tabular-nums;}
.est-lm-var.bom{color:#34d399;}
.est-lm-var.ruim{color:#f87171;}

.est-linha-v{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:9px;
  cursor:pointer;transition:background .14s;}
.est-linha-v:hover{background:rgba(255,255,255,.04);}
.est-lv-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.est-lv-txt b{font-size:.745rem;font-weight:600;color:#f0f0f0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.est-lv-txt em{font-style:normal;font-size:.655rem;color:rgba(240,240,240,.3);}
.est-lv-qtd{font-size:.7rem;color:rgba(240,240,240,.45);flex-shrink:0;}
.est-lv-dias{flex-shrink:0;padding:2px 9px;border-radius:20px;font-size:.645rem;
  font-weight:700;background:rgba(245,158,11,.14);color:#fbbf24;
  border:1px solid rgba(245,158,11,.26);}
.est-lv-dias.urgente{background:rgba(239,68,68,.14);color:#f87171;border-color:rgba(239,68,68,.28);}

/* ── Curva ABC ───────────────────────────────────────────────────────── */
.est-abc{display:flex;flex-direction:column;gap:9px;margin-bottom:4px;}
.est-abc-l{display:flex;align-items:center;gap:11px;}
.est-abc-let{width:28px;height:28px;flex-shrink:0;border-radius:9px;border:1px solid;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:Syne,sans-serif;font-size:.8rem;font-weight:800;}
.est-abc-txt{font-size:.71rem;line-height:1.45;color:rgba(240,240,240,.5);}

/* ── Sazonalidade: colunas por mês ───────────────────────────────────── */
.est-colunas{display:flex;align-items:flex-end;gap:6px;height:190px;margin-top:14px;}
.est-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;height:100%;gap:5px;}
.est-col-n{font-size:.62rem;color:rgba(240,240,240,.4);font-variant-numeric:tabular-nums;}
.est-col-b{width:100%;max-width:46px;border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,#818cf8,#6366f1);
  transition:height .45s cubic-bezier(.16,1,.3,1),filter .16s;}
.est-col:hover .est-col-b{filter:brightness(1.25);}
.est-col-r{font-size:.62rem;color:rgba(240,240,240,.3);text-transform:capitalize;}

/* Tabela compacta dentro de um cartão: sem borda dupla. */
.est-tabela-wrap.sem-borda{border:0;background:none;}
.est-tab-mini{min-width:420px;font-size:.71rem;}
.est-tab-mini thead th{padding:8px 10px;background:transparent;}
.est-tab-mini td{padding:9px 10px;}

/* ═══ MOVIMENTO ═══════════════════════════════════════════════════════
   O painel trocava de seção com corte seco. A entrada em escala diz que o
   conteúdo é novo, e o atraso em cascata faz a grade parecer montar em vez de
   piscar pronta. Quem pediu menos movimento não recebe nenhum. */
@keyframes estEntra{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}
#est-corpo > .est-kpis > .est-kpi,
#est-corpo > .est-grade3 > .est-bloco,
#est-corpo > .est-bloco{animation:estEntra .34s cubic-bezier(.16,1,.3,1) both;}
#est-corpo > .est-grade3 > .est-bloco:nth-child(2){animation-delay:.05s;}
#est-corpo > .est-grade3 > .est-bloco:nth-child(3){animation-delay:.1s;}
#est-corpo > .est-grade3 > .est-bloco:nth-child(4){animation-delay:.15s;}
#est-corpo > .est-grade3 > .est-bloco:nth-child(5){animation-delay:.2s;}
#est-corpo > .est-grade3 > .est-bloco:nth-child(6){animation-delay:.25s;}
.est-kpis .est-kpi:nth-child(2){animation-delay:.04s;}
.est-kpis .est-kpi:nth-child(3){animation-delay:.08s;}
.est-kpis .est-kpi:nth-child(4){animation-delay:.12s;}
.est-kpis .est-kpi:nth-child(5){animation-delay:.16s;}
@media (prefers-reduced-motion:reduce){
  #est-corpo > .est-kpis > .est-kpi,
  #est-corpo > .est-grade3 > .est-bloco,
  #est-corpo > .est-bloco{animation:none;}
  .est-col-b{transition:none;}
}

@media (max-width:1180px){
  .est-kpis{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
  .est-grade3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .est-largo2,.est-largo3{grid-column:1/-1;}
}
@media (max-width:768px){
  .est-grade3{grid-template-columns:1fr;}
  .est-kpi-selo{width:32px;height:32px;font-size:.88rem;}
  .est-colunas{height:150px;gap:3px;}
  .est-col-n{display:none;}
}

/* ── Identidade da linha na tabela: selo, nome, código ───────────────── */
.est-cel-prod{display:flex;align-items:center;gap:10px;min-width:0;}
.est-mini{
  width:30px;height:30px;flex-shrink:0;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-family:Syne,sans-serif;font-size:.78rem;font-weight:800;
  color:hsl(var(--h),70%,72%);
  background:hsl(var(--h),58%,18%);
  border:1px solid hsl(var(--h),50%,30%);
}
.est-cel-txt{display:flex;flex-direction:column;gap:1px;min-width:0;}
.est-cel-txt b{font-weight:600;color:#f0f0f0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.est-cel-txt em{font-style:normal;font-size:.63rem;letter-spacing:.02em;
  color:rgba(240,240,240,.3);}

/* ── Nível de estoque: número e barra ────────────────────────────────── */
/* A barra encosta no número, e não na largura da coluna: esticada de ponta a
   ponta ela vira régua da tabela e some como informação do produto. */
.est-nivel{display:flex;flex-direction:column;align-items:flex-end;gap:5px;
  min-width:64px;max-width:104px;margin-left:auto;}
.est-nivel-n{font-variant-numeric:tabular-nums;}
.est-nivel-t{display:block;width:100%;height:4px;border-radius:20px;
  background:rgba(255,255,255,.07);overflow:hidden;}
.est-nivel-t i{display:block;height:100%;border-radius:20px;
  transition:width .5s cubic-bezier(.16,1,.3,1);}
@media (prefers-reduced-motion:reduce){ .est-nivel-t i{transition:none;} }

/* A ficha do produto tem QUATRO cartões, não cinco: fixar cinco colunas
   deixaria um vão à direita do último. */
.est-kpis-4{grid-template-columns:repeat(4,minmax(0,1fr));}

/* ── Calculadora de preço ────────────────────────────────────────────────
   Fica dentro do bloco financeiro e parece parte dele, não um painel à parte:
   ela não é uma ferramenta separada, é o modo de preencher um dos dois campos
   que estão logo acima. */
.est-calc{
  margin-top:10px;padding:13px 14px;border-radius:12px;
  background:rgba(99,102,241,.055);
  border:1px solid rgba(99,102,241,.16);
}
.est-calc-topo{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.est-calc-tit{font-size:.735rem;font-weight:600;color:rgba(240,240,240,.62);}
/* A prévia é o único número da caixa, então ela pode ser o único destaque. */
.est-calc-previa{font-family:Syne,sans-serif;font-size:.86rem;font-weight:700;
  color:#a5b4fc;font-variant-numeric:tabular-nums;}
.est-calc-previa.fraca{font-family:Inter,sans-serif;font-size:.7rem;font-weight:500;
  color:rgba(240,240,240,.3);}

.est-calc-linha{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;}
.est-calc-modo,.est-calc-valor{
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.09);
  border-radius:9px;padding:8px 11px;color:#f0f0f0;
  font-family:Inter,sans-serif;font-size:.755rem;
}
.est-calc-modo{flex:1;min-width:170px;}
.est-calc-valor{width:96px;flex-shrink:0;font-variant-numeric:tabular-nums;}
.est-calc-modo:focus,.est-calc-valor:focus{
  outline:none;border-color:rgba(99,102,241,.55);background:rgba(0,0,0,.4);}
.est-calc-linha .est-btn{padding:8px 16px;}

.est-calc-atalhos{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;}
.est-calc-at{padding:4px 11px;font-size:.68rem;}

.est-calc-auto{display:flex;align-items:flex-start;gap:8px;margin-top:11px;
  font-size:.72rem;color:rgba(240,240,240,.6);cursor:pointer;}
.est-calc-auto input{margin-top:1px;accent-color:#6366f1;flex-shrink:0;}
.est-calc-nota{margin:5px 0 0 24px;font-size:.655rem;}

/* Um pisca curto no campo que acabou de mudar: sem ele, aplicar a conta com o
   campo fora da vista parece não ter feito nada. */
@keyframes estPiscou{
  0%{background:rgba(99,102,241,.34);}
  100%{background:rgba(0,0,0,.28);}
}
.est-piscou{animation:estPiscou .7s ease-out;}
@media (prefers-reduced-motion:reduce){ .est-piscou{animation:none;} }

@media (max-width:768px){
  .est-kpis-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .est-calc-modo{min-width:100%;}
  .est-calc-valor{flex:1;width:auto;}
}

/* ── Ícones de traço ─────────────────────────────────────────────────────
   Herdam a cor de quem os contém, então não há uma regra de cor por ícone.
   `flex-shrink:0` porque um ícone espremido deixa de ser reconhecível — e um
   ícone irreconhecível é ruído. */
.est-ico{display:block;flex-shrink:0;}
.est-kpi-ico{display:inline-flex;align-items:center;color:var(--kpi,#818cf8);}
.est-kpi-selo .est-ico{opacity:.95;}
.est-selo-modulo .est-ico,
.est-vazio-ico .est-ico{margin:0 auto;}
.est-vazio-ico{color:rgba(240,240,240,.22);display:flex;justify-content:center;}
.est-lm-ico .est-ico{width:15px;height:15px;}

/* ═══════════════════════════════════════════════════════════════════════
   ACABAMENTO
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Rosca ─────────────────────────────────────────────────────────────
   O tamanho do número do centro vem do JS (sai do comprimento do texto), então
   aqui não se fixa font-size — fixar sobrescreveria o cálculo e o número
   voltaria a vazar. */
.est-rosca-n{fill:#f0f0f0;font-family:Syne,sans-serif;font-weight:800;
  letter-spacing:-.3px;}
.est-rosca svg{overflow:visible;}

/* Fatias que se desenham ao entrar. `stroke-dashoffset` já é usado para
   posicionar cada fatia, então a animação é de OPACIDADE e escala — mexer no
   offset apagaria a posição. */
@keyframes estFatia{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:none;}}
.est-fatia{
  transform-origin:64px 64px;
  animation:estFatia .5s cubic-bezier(.16,1,.3,1) both;
  animation-delay:var(--atraso,0s);
  transition:filter .16s;
}
.est-rosca:hover .est-fatia{filter:brightness(1.12);}
@media (prefers-reduced-motion:reduce){ .est-fatia{animation:none;} }

/* A legenda vira GRADE: com flex, o valor de cada linha começava numa coluna
   diferente conforme o comprimento do nome, e uma coluna de dinheiro que não
   se alinha não se compara. */
.est-rosca-leg li{
  display:grid;
  grid-template-columns:8px minmax(0,1fr) auto auto;
  align-items:center;gap:8px;padding:2px 0;
}
.est-rosca-leg em{min-width:34px;}
.est-rosca-leg b{min-width:0;text-align:right;white-space:nowrap;}

/* ── Cartões: superfície com um pouco de profundidade ─────────────────
   Um degradê muito curto no topo, quase invisível, é o que separa "retângulo
   com borda" de "cartão". Mais do que isso vira plástico. */
.est-kpi,.est-bloco{
  background-image:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 42%);
}
.est-bloco{transition:border-color .2s;}
.est-bloco:hover{border-color:rgba(255,255,255,.1);}

/* O selo do indicador ganha um brilho fraco da própria cor — dá relevo sem
   acender a interface. */
.est-kpi-selo{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--kpi,#6366f1) 10%,transparent),
             0 4px 14px -6px color-mix(in srgb,var(--kpi,#6366f1) 55%,transparent);
}
/* A barra de cor do topo do cartão desbota para as pontas em vez de bater
   seca na borda arredondada. */
.est-kpi::before{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--kpi) 25%,transparent),
    var(--kpi) 22%, var(--kpi) 78%,
    color-mix(in srgb,var(--kpi) 25%,transparent));
}

/* ── Tabelas ─────────────────────────────────────────────────────────── */
.est-tabela tbody tr{transition:background .14s;}
.est-tabela tbody tr:hover{background:rgba(255,255,255,.035);}
.est-tabela thead th{
  font-size:.635rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(240,240,240,.3);font-weight:600;
}

/* ── Navegação ───────────────────────────────────────────────────────── */
.est-nav-item.ativo::after{
  content:'';position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  border-radius:2px;background:#818cf8;
}

/* Números tabulares em todo canto onde há coluna de número: sem isso, o 1 é
   mais estreito que o 8 e a coluna serpenteia. */
.est-kpi-num,.est-tabela .num,.est-lm-n,.est-nivel-n,.est-col-n{
  font-variant-numeric:tabular-nums;
}

/* ── Barra das movimentações ──────────────────────────────────────────── */
.est-mov-barra{
  display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px;
}
.est-mov-mes{min-width:210px;margin:0;}
.est-mov-conta{
  flex:1;font-size:.72rem;color:rgba(240,240,240,.32);
  padding-bottom:10px;white-space:nowrap;
}
.est-mov-limpar{margin-top:0;margin-bottom:1px;}

/* O aviso do apagar tem peso próprio: ele é a frase que evita o arrependimento. */
.est-perigo-txt{color:#fca5a5 !important;font-weight:600;}
.est-campo-perigo input{
  border-color:rgba(248,113,113,.35);
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;
}
.est-campo-perigo input:focus{border-color:#f87171;}

/* ── Ficha do produto ─────────────────────────────────────────────────── */
.est-prod-topo{margin-bottom:18px;}
.est-prod-nome{
  font-family:Syne,sans-serif;font-size:1.7rem;font-weight:800;
  letter-spacing:-.8px;margin:0;color:#f0f0f0;line-height:1.15;
}
.est-prod-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:6px;}
.est-prod-meta .est-mono{
  font-size:.68rem;letter-spacing:.06em;color:rgba(240,240,240,.3);
}

/* A lista de informações vira grade de duas colunas: rótulo à esquerda, valor
   à direita, com um fio pontilhado ligando os dois. Sem o fio, o olho perde a
   linha no meio do caminho quando o rótulo é curto e o valor está longe. */
.est-info-l{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:8px;padding:7px 0;font-size:.73rem;}
.est-info-l + .est-info-l{border-top:1px solid rgba(255,255,255,.035);}
.est-info-l dt{color:rgba(240,240,240,.4);margin:0;}
.est-info-l .est-fio{
  border-bottom:1px dotted rgba(255,255,255,.09);transform:translateY(-3px);
}
.est-info-l dd{margin:0;color:#f0f0f0;font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums;}
.est-info-l dd.vazio{color:rgba(240,240,240,.22);font-weight:400;}

@media (max-width:768px){
  .est-mov-mes{min-width:100%;}
  .est-mov-conta{display:none;}
  .est-mov-limpar{width:100%;}
  .est-prod-nome{font-size:1.35rem;}
}

/* ═══════════════════════════════════════════════════════════════════════
   SELECTS: O MENU QUE ABRE TAMBÉM É PARTE DA INTERFACE
   ═══════════════════════════════════════════════════════════════════════
   A caixa fechada estava escura, mas a LISTA que o navegador abre é desenhada
   pelo sistema — e vinha branca, com destaque azul de Windows, no meio de um
   painel escuro. Estilizar `option` não resolve sozinho: o Chrome só escurece
   a lista quando o elemento declara `color-scheme: dark`. É uma linha, e vale
   para todos os selects do painel de uma vez — unidade, motivo, fornecedor,
   mês — em vez de um dropdown próprio para cada um. */
#est-view select,
.est-modal select,
.est-calc-modo{
  color-scheme: dark;
  appearance:none;-webkit-appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,rgba(240,240,240,.45) 50%),
    linear-gradient(135deg,rgba(240,240,240,.45) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:30px;
}
#est-view select option,
.est-modal select option{
  background:#17171f;color:#f0f0f0;
}
#est-view select:disabled,
.est-modal select:disabled{opacity:.5;}

/* ── Botões de download ───────────────────────────────────────────────
   O ícone estava caindo ACIMA do texto porque `.est-ico` é `display:block`.
   Aqui a linha é uma só, com o rótulo alinhado à marca do arquivo. */
.est-btn-arq{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;
}
.est-btn-arq .est-ico-arq{flex-shrink:0;display:block;}
.est-btn-arq span{line-height:1;}
/* Estes dois botões NÃO são a ação principal da tela — a ação principal é ler
   o relatório. Ficam com o peso de botão comum, e a cor vem do ícone. */
.est-btn-arq:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);}

.est-rel-topo{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;}
.est-rel-acoes{display:flex;gap:8px;flex-wrap:wrap;}

@media (max-width:768px){
  .est-rel-topo{align-items:stretch;}
  .est-rel-acoes{width:100%;}
  .est-btn-arq{flex:1;justify-content:center;}
}

/* A unidade escrita ao lado do rotulo da quantidade. Ela responde a pergunta
   que o campo vazio deixava no ar — "quantidade de que?" — e muda sozinha
   quando se troca de produto. */
.est-campo > span > .est-un{
  font-style:normal;margin-left:6px;padding:1px 6px;border-radius:20px;
  font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:600;
  background:rgba(255,255,255,.07);color:rgba(240,240,240,.45);
  text-transform:none;letter-spacing:0;
}
/* ── A conta, escrita por extenso ────────────────────────────────────────
   "De X para Y" mostrava o fim e escondia a operação. Com os números lado a
   lado e o sinal entre eles, o campo se explica sozinho: quem digita vê o que
   o número vai fazer com o estoque ANTES de confirmar. */
.est-conta{
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  margin:12px 0 0;padding:10px 12px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  font-variant-numeric:tabular-nums;
}
.est-conta-txt{font-size:.72rem;color:rgba(240,240,240,.45);line-height:1.5;}
.est-conta-n{font-family:'JetBrains Mono',monospace;font-size:.8rem;
  color:rgba(240,240,240,.5);}
.est-conta-n.destaque{color:#a5b4fc;font-weight:700;}
.est-conta-n.forte{color:#f0f0f0;font-weight:700;font-size:.92rem;}
.est-conta-op{font-size:.8rem;color:rgba(240,240,240,.3);font-weight:600;}
.est-conta-un{font-size:.66rem;color:rgba(240,240,240,.3);}
.est-conta.ok{border-color:rgba(16,185,129,.2);background:rgba(16,185,129,.05);}
.est-conta.erro{border-color:rgba(239,68,68,.26);background:rgba(239,68,68,.06);}
.est-conta.erro .est-conta-txt{color:#fca5a5;}

/* A saída para "Ajustar" fica logo abaixo da conta, e é um botão de texto —
   não um link azul: ela troca de operação dentro do mesmo fluxo, não navega. */
.est-saida-ajuste{margin-top:9px;line-height:1.55;}
.est-link{
  background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:#a5b4fc;font-weight:600;text-decoration:underline;
  text-underline-offset:2px;
}
.est-link:hover{color:#c7d2fe;}

/* ── Lotes que o produto ja tem ────────────────────────────────────────
   Aparecem como fichas clicaveis, e nao so na lista do datalist: o datalist
   so abre depois que se digita alguma coisa, e quem nao lembra o nome do lote
   nao tem o que digitar. */
.est-lotes{display:flex;gap:6px;flex-wrap:wrap;margin-top:-2px;margin-bottom:4px;}
.est-lote-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:20px;cursor:pointer;
  border:1px solid rgba(99,102,241,.26);background:rgba(99,102,241,.12);
  font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:600;
  color:#c7d2fe;transition:background .14s,border-color .14s;
}
.est-lote-chip:hover{background:rgba(99,102,241,.22);border-color:rgba(129,140,248,.45);}
.est-lote-chip i{font-style:normal;font-family:Inter,sans-serif;font-size:.62rem;
  color:rgba(199,210,254,.6);}
/* O tamanho da janela ao lado do titulo do painel: "Proximos a vencer" nao diz
   proximos QUANDO, e sem isso um vazio parece defeito em vez de resposta. */
.est-bloco-topo h3 > .est-janela{
  font-family:Inter,sans-serif;font-style:normal;font-weight:500;
  font-size:.63rem;color:rgba(240,240,240,.3);
  padding:1px 7px;border-radius:20px;background:rgba(255,255,255,.05);
}
/* ═══════════════════════════════════════════════════════════════════════
   IDENTIDADE: UMA COR, COMO OS OUTROS PAINÉIS
   ═══════════════════════════════════════════════════════════════════════
   Clientes é teal, e o painel inteiro sabe disso. O estoque tinha cinco cores
   nos cinco cartões — indigo, roxo, verde, âmbar, vermelho — e lia como cinco
   avisos em vez de um retrato. A cor voltou para onde ela informa: o ÍCONE do
   cartão de alerta continua âmbar, o de esgotado continua vermelho, porque ali
   a cor é a mensagem. O NÚMERO é sempre branco, e é isso que faz a fileira
   parecer uma fileira.

   O índigo é a cor do módulo: o selo do topo já era índigo, e clientes ficou
   com o teal, então não há choque entre os dois painéis. */
#est-view{
  --est-cor:#818cf8;
  --est-cor-forte:#6366f1;
  --est-cartao:rgba(255,255,255,.045);
}

/* ── Cartões: a mesma anatomia do `.cli-kpi` ────────────────────────────
   Ícone à esquerda num quadrado de 44, texto à direita, degradê e sombra. */
.est-kpis{gap:14px;}
.est-kpi{
  display:flex;align-items:center;gap:14px;
  border-radius:15px;padding:15px 17px;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:border-color .2s,background .2s,transform .18s cubic-bezier(.16,1,.3,1);
}
.est-kpi:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.16);
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
}
/* A barra colorida no topo era o que mais gritava as cinco cores. Sai. */
.est-kpi::before{display:none;}
.est-kpi.destaque{border-color:rgba(255,255,255,.14);}

.est-kpi-ico{
  width:44px;height:44px;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--kpi,var(--est-cor));
  background:color-mix(in srgb,var(--kpi,#818cf8) 17%,transparent);
  border:1px solid color-mix(in srgb,var(--kpi,#818cf8) 26%,transparent);
  box-shadow:none;
}
.est-kpi-ico .est-ico{width:19px;height:19px;}
.est-kpi-corpo{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px;}

/* TIPOGRAFIA. Os números são o conteúdo do painel: 1,42rem os tratava como
   legenda. 1,65rem em Syne 800 é a medida que o painel de clientes usa, e é
   por isso que os dois passam a parecer do mesmo produto.
   Branco, sempre — a cor está no ícone. */
.est-kpi-num{
  font-family:'Syne',sans-serif;font-size:1.65rem;font-weight:800;
  color:#fff;line-height:1.12;letter-spacing:-.6px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.est-kpi-lbl{
  font-family:'Inter',sans-serif;font-size:.715rem;font-weight:500;
  color:rgba(240,240,240,.55);margin:0;
}
.est-kpi-pe{
  font-family:'Inter',sans-serif;font-size:.69rem;margin-top:2px;
  color:rgba(240,240,240,.42);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Só o que É alerta fica colorido no rodapé. "lucro potencial" e "22,5 mi
   unidades" são apoio, não aviso — em verde competiam com o número. */
.est-kpi-pe.bom{color:rgba(240,240,240,.42);}
.est-kpi-pe.atencao{color:#fbbf24;}
.est-kpi-pe.ruim{color:#f87171;}

/* ── Títulos dos blocos, um degrau acima ─────────────────────────────── */
.est-bloco-topo h3{font-size:1.02rem;letter-spacing:-.3px;}
.est-titulo{font-size:1.72rem;}
.est-sub{font-size:.8rem;}

/* ── Rosca maior ─────────────────────────────────────────────────────── */
.est-rosca{gap:20px;}
.est-rosca-n{font-size:inherit;}          /* o tamanho vem do JS */
.est-rosca-l{font-size:10px;}
.est-rosca-leg{min-width:150px;gap:7px;}
.est-rosca-leg li{font-size:.735rem;gap:10px;}
.est-rosca-leg i{width:9px;height:9px;border-radius:3px;}
.est-rosca-leg b{font-size:.75rem;color:rgba(240,240,240,.88);}
.est-rosca-leg em{font-size:.7rem;min-width:38px;}

/* ── Tabelas e listas acompanham ─────────────────────────────────────── */
.est-tabela{font-size:.775rem;}
.est-tabela .num{font-size:.79rem;}
.est-lm-n{font-size:.86rem;}
.est-lm-nome{font-size:.775rem;}
.est-conta-n.forte{font-size:1rem;}

@media (max-width:1180px){
  .est-kpi-ico{width:40px;height:40px;border-radius:12px;}
  .est-kpi-num{font-size:1.45rem;}
}
@media (max-width:768px){
  .est-kpi{padding:13px 14px;gap:11px;}
  .est-kpi-ico{width:36px;height:36px;border-radius:11px;}
  .est-kpi-ico .est-ico{width:17px;height:17px;}
  .est-kpi-num{font-size:1.3rem;}
  .est-titulo{font-size:1.24rem;}
  .est-rosca{justify-content:center;}
}

/* ── Esqueleto de carregamento ────────────────────────────────────────
   Ocupa o mesmo espaco do painel montado, para a tela nao dar um pulo quando
   o dado chega. O brilho que atravessa e o unico sinal de que algo esta
   acontecendo — sem ele, esqueleto parado e indistinguivel de tela travada. */
@keyframes estEsq{from{background-position:-380px 0;}to{background-position:380px 0;}}
.est-esqueleto{display:flex;flex-direction:column;gap:14px;}
.est-esq-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;}
.est-esq-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.est-esq-cartao,.est-esq-bloco{
  border-radius:15px;border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(90deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.075) 50%,rgba(255,255,255,.03) 100%);
  background-size:380px 100%;
  animation:estEsq 1.15s linear infinite;
}
.est-esq-cartao{height:78px;}
.est-esq-bloco{height:300px;}
.est-esq-bloco.largo{grid-column:span 2;}
.est-esq-txt{font-size:.72rem;color:rgba(240,240,240,.26);text-align:center;padding-top:2px;}
.est-sub-vazio{color:rgba(240,240,240,.22);}
@media (prefers-reduced-motion:reduce){
  .est-esq-cartao,.est-esq-bloco{animation:none;}
}
@media (max-width:1180px){
  .est-esq-kpis{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
  .est-esq-grade{grid-template-columns:repeat(2,minmax(0,1fr));}
  .est-esq-bloco.largo{grid-column:1/-1;}
}
@media (max-width:768px){
  .est-esq-grade{grid-template-columns:1fr;}
  .est-esq-bloco{height:200px;}
}
/* ── Proximos a vencer: lista numerada, e maior ─────────────────────────
   Era uma lista de linhas finas, do mesmo peso do resto do painel. Com muitos
   lotes o que importa e a ORDEM — o que vence primeiro decide o que se faz
   hoje —, e ordem sem numero obriga a contar com o dedo. O numero a esquerda
   e o mesmo recurso de um ranking: diz onde olhar antes de ler.

   O painel mostra os seis primeiros. Quarenta lotes numa caixa de dashboard
   deixam de ser resposta e viram arquivo — para isso existe a aba Validade. */
.est-vencs{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:3px;
  counter-reset:venc;}
.est-venc{
  display:grid;grid-template-columns:26px minmax(0,1fr) auto auto;
  align-items:center;gap:12px;
  padding:11px 10px;border-radius:11px;cursor:pointer;
  border:1px solid transparent;
  transition:background .14s,border-color .14s,transform .14s;
}
.est-venc:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);
  transform:translateX(2px);}
.est-venc-n{
  width:26px;height:26px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Syne',sans-serif;font-size:.78rem;font-weight:800;
  background:rgba(255,255,255,.06);color:rgba(240,240,240,.4);
}
.est-venc-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.est-venc-txt b{font-size:.83rem;font-weight:600;color:#f0f0f0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.est-venc-txt em{font-style:normal;font-size:.7rem;color:rgba(240,240,240,.38);}
.est-venc-qtd{font-size:.76rem;color:rgba(240,240,240,.5);white-space:nowrap;
  font-variant-numeric:tabular-nums;}
.est-venc-dias{
  min-width:56px;text-align:center;
  padding:5px 11px;border-radius:20px;
  font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;
  background:rgba(255,255,255,.07);color:rgba(240,240,240,.55);
  border:1px solid rgba(255,255,255,.09);
}
/* A cor sobe conforme o prazo aperta, e o numero da esquerda acompanha: quem
   olha de longe ve a fileira mudar de cor de cima para baixo. */
.est-venc.atencao .est-venc-dias{background:rgba(245,158,11,.15);color:#fbbf24;border-color:rgba(245,158,11,.28);}
.est-venc.atencao .est-venc-n{background:rgba(245,158,11,.14);color:#fbbf24;}
.est-venc.urgente .est-venc-dias{background:rgba(249,115,22,.17);color:#fdba74;border-color:rgba(249,115,22,.3);}
.est-venc.urgente .est-venc-n{background:rgba(249,115,22,.16);color:#fdba74;}
.est-venc.vencido .est-venc-dias{background:rgba(239,68,68,.17);color:#fca5a5;border-color:rgba(239,68,68,.32);}
.est-venc.vencido .est-venc-n{background:rgba(239,68,68,.16);color:#fca5a5;}
.est-venc.vencido .est-venc-txt b{color:#fca5a5;}

@media (max-width:768px){
  .est-venc{grid-template-columns:24px minmax(0,1fr) auto;gap:9px;padding:10px 8px;}
  .est-venc-qtd{display:none;}
}
/* ═══════════════════════════════════════════════════════════════════════
   A FAIXA DE IDENTIDADE
   ═══════════════════════════════════════════════════════════════════════
   Financeiro abre com faixa azul, recrutamento com roxa, clientes com teal —
   sempre de largura total, com o titulo em Syne branco por cima. O estoque era
   o unico que comecava direto no fundo preto, e era so isso que o fazia
   parecer de outro produto.

   Verde porque as outras tres cores ja tem dono, e porque a cor de um painel
   precisa ser dele: e por ela que a pessoa sabe onde esta antes de ler.

   Mesma receita do .cli-faixa: dois brilhos radiais no alto e um degrade
   descendo ate o fundo do painel. A transicao e por gradiente e nao por borda,
   porque borda marcaria uma divisao que nao existe. */
#est-view{padding:0 0 60px;}
.est-faixa{
  position:relative;padding:0 0 20px;margin-bottom:18px;
  background:
    radial-gradient(900px 380px at 14% 0%,rgba(16,185,129,.17),transparent 58%),
    radial-gradient(760px 320px at 82% -10%,rgba(52,211,153,.11),transparent 60%),
    linear-gradient(180deg,#062b21 0%,#05201a 62%,#0a0a0c 100%);
  border-bottom:1px solid rgba(255,255,255,.045);
}
.est-topo{padding:24px 26px 4px;margin-bottom:0;}
.est-nav{margin:0 26px 20px;}
.est-corpo{padding:0 26px;}

/* O selo do modulo pega a cor da faixa. */
.est-selo-modulo{
  background:rgba(16,185,129,.16);
  border:1px solid rgba(16,185,129,.3);
  color:#6ee7b7;
}
.est-titulo{color:#fff;}

@media (max-width:768px){
  #est-view{padding:0 0 40px;}
  .est-topo{padding:16px 14px 4px;}
  .est-nav{margin:0 14px 14px;}
  .est-corpo{padding:0 14px;}
  .est-faixa{padding-bottom:14px;margin-bottom:14px;}
}
/* ═══ IDENTIFICACAO ═══════════════════════════════════════════════════ */
.est-ident .est-bloco-topo{margin-bottom:6px;}
.est-id-linha{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:10px;padding:9px 0;border-top:1px solid rgba(255,255,255,.04);}
.est-id-linha:first-of-type{border-top:0;}
.est-id-rot{font-size:.72rem;color:rgba(240,240,240,.4);min-width:118px;}
.est-id-val{font-family:'JetBrains Mono',monospace;font-size:.84rem;font-weight:600;
  color:#f0f0f0;letter-spacing:.02em;overflow-wrap:anywhere;}
.est-id-val.barras{color:#6ee7b7;}
.est-id-val.interno{color:#a5b4fc;}
.est-id-linha.vazio .est-id-val{color:rgba(240,240,240,.22);font-family:Inter,sans-serif;font-weight:400;}
.est-id-btn{background:none;border:0;padding:4px;cursor:pointer;border-radius:7px;
  color:rgba(240,240,240,.3);display:flex;transition:color .14s,background .14s;}
.est-id-btn:hover{color:#f0f0f0;background:rgba(255,255,255,.07);}
.est-id-acao{background:rgba(16,185,129,.13);border:1px solid rgba(16,185,129,.28);
  color:#6ee7b7;border-radius:8px;padding:4px 11px;font-size:.68rem;font-weight:600;
  cursor:pointer;font-family:Inter,sans-serif;transition:background .14s;}
.est-id-acao:hover{background:rgba(16,185,129,.22);}
.est-id-extras{display:flex;align-items:flex-start;gap:10px;padding-top:9px;
  border-top:1px solid rgba(255,255,255,.04);}
.est-id-chips{display:flex;gap:5px;flex-wrap:wrap;}
.est-id-chip{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:.66rem;
  padding:2px 8px;border-radius:20px;background:rgba(255,255,255,.06);
  color:rgba(240,240,240,.55);}
.est-selo-ok{font-size:.62rem;font-weight:700;padding:2px 8px;border-radius:20px;
  background:rgba(16,185,129,.14);color:#6ee7b7;border:1px solid rgba(16,185,129,.26);}
.est-selo-aviso{font-size:.62rem;font-weight:700;padding:2px 8px;border-radius:20px;
  background:rgba(245,158,11,.15);color:#fbbf24;border:1px solid rgba(245,158,11,.3);cursor:help;}
.est-cod-fmt{font-style:normal;margin-left:6px;font-size:.6rem;color:rgba(240,240,240,.3);}
.est-dup-alvo{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:12px;margin:10px 0;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);}
.est-dup-qtd{font-size:.75rem;color:rgba(240,240,240,.5);white-space:nowrap;}

/* ═══ IMPORTACAO ══════════════════════════════════════════════════════ */
.est-arquivo{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:30px 20px;border-radius:14px;cursor:pointer;text-align:center;
  border:2px dashed rgba(255,255,255,.12);background:rgba(255,255,255,.02);
  transition:border-color .16s,background .16s;}
.est-arquivo:hover,.est-arquivo.sobre{border-color:rgba(16,185,129,.45);background:rgba(16,185,129,.06);}
.est-arquivo-ico{color:rgba(240,240,240,.28);}
.est-arquivo b{font-size:.86rem;color:#f0f0f0;}
.est-arquivo em{font-style:normal;font-size:.7rem;color:rgba(240,240,240,.35);}

.est-map{display:flex;flex-direction:column;gap:6px;margin-bottom:4px;}
.est-map-l{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr);
  align-items:center;gap:10px;}
.est-map-col{display:flex;flex-direction:column;min-width:0;}
.est-map-col b{font-size:.76rem;color:#f0f0f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.est-map-col em{font-style:normal;font-size:.66rem;color:rgba(240,240,240,.3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.est-map-seta{color:rgba(240,240,240,.22);font-size:.8rem;}
.est-map-sel{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.09);
  border-radius:9px;padding:7px 10px;color:#f0f0f0;font-size:.74rem;font-family:Inter,sans-serif;}

.est-radios{display:flex;gap:8px;flex-wrap:wrap;}
.est-radio{display:flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;
  cursor:pointer;font-size:.74rem;color:rgba(240,240,240,.6);
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);transition:all .14s;}
.est-radio.ativo{border-color:rgba(16,185,129,.4);background:rgba(16,185,129,.1);color:#6ee7b7;}
.est-radio input{accent-color:#10b981;}

.est-imp-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;}
.est-imp-num{padding:13px 14px;border-radius:12px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:2px;}
.est-imp-num b{font-family:Syne,sans-serif;font-size:1.5rem;font-weight:800;color:#f0f0f0;
  font-variant-numeric:tabular-nums;}
.est-imp-num span{font-size:.68rem;color:rgba(240,240,240,.42);}
.est-imp-num.bom b{color:#34d399;}
.est-imp-num.atencao b{color:#fbbf24;}
.est-imp-num.ruim b{color:#f87171;}

.est-imp-erros{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;
  max-height:240px;overflow:auto;}
.est-imp-erros li{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.4fr);
  gap:10px;align-items:baseline;padding:7px 9px;border-radius:8px;font-size:.72rem;}
.est-imp-erros li.grave{background:rgba(239,68,68,.07);}
.est-imp-erros b{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:rgba(240,240,240,.45);}
.est-imp-erros span{color:#f0f0f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.est-imp-erros em{font-style:normal;color:rgba(240,240,240,.42);}
.est-imp-erros li.grave em{color:#fca5a5;}

.est-imp-acoes{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;}
.est-imp-resumo{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:1px;}
.est-imp-resumo li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 2px;font-size:.76rem;border-top:1px solid rgba(255,255,255,.04);}
.est-imp-resumo li:first-child{border-top:0;}
.est-imp-resumo span{color:rgba(240,240,240,.45);}
.est-imp-resumo b{font-family:Syne,sans-serif;font-size:1rem;color:#f0f0f0;
  font-variant-numeric:tabular-nums;}

@media (max-width:768px){
  .est-map-l{grid-template-columns:1fr;gap:4px;}
  .est-map-seta{display:none;}
  .est-id-linha{grid-template-columns:1fr auto;row-gap:2px;}
  .est-id-rot{grid-column:1/-1;min-width:0;}
}
/* O valor do indicador NAO e cortado: o tamanho vem do JS, conforme o
   comprimento, e o ellipsis sai. Numero truncado perde o fim — os centavos e
   a ordem de grandeza —, que e a parte que se estava tentando ler. */
.est-kpi-num{text-overflow:clip;}
/* ── Filtros: espaco de verdade para o que tem texto longo ────────────
   O menu nativo do select herda a LARGURA do proprio select. Com ele
   apertado, "Todas as categorias" ja ocupava a caixa inteira e os nomes das
   categorias abriam numa coluna estreita, cortando "Laticinios" e afins.

   A busca continua sendo quem cede espaco (ela e elastica); os seletores
   ganham um piso proprio, e o de categoria — que recebe nome escrito pela
   empresa, e nao rotulo fixo — ganha o maior. */
.est-filtros{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.est-busca{flex:1 1 260px;min-width:200px;}
.est-sel{
  min-width:190px;
  padding:9px 32px 9px 13px;
  font-size:.76rem;
  border-radius:10px;
  background-color:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.09);
  color:#f0f0f0;
  font-family:Inter,sans-serif;
  cursor:pointer;
}
/* Categoria e o unico que mostra texto do usuario: nome de categoria pode ser
   "Produtos de limpeza pesada" e precisa caber sem reticencia. */
.est-sel[data-est-campo="categoria"]{min-width:230px;}
.est-sel:hover{border-color:rgba(255,255,255,.16);}
.est-sel:focus{outline:none;border-color:rgba(16,185,129,.5);background-color:rgba(0,0,0,.4);}
/* As opcoes tambem respiram: no Chrome elas herdam padding do proprio option. */
.est-sel option{padding:8px 12px;font-size:.78rem;line-height:1.9;}

.est-limpar-prod{margin-top:0;margin-left:auto;}

@media (max-width:768px){
  .est-sel,.est-sel[data-est-campo="categoria"]{min-width:100%;flex:1 1 100%;}
  .est-busca{flex:1 1 100%;}
  .est-limpar-prod{width:100%;margin-left:0;}
}
/* ── Resultado das vendas ─────────────────────────────────────────────
   Fica ACIMA do resumo de estoque: quem abre relatorio quer saber quanto
   ganhou antes de quanto tem. */
.est-resultado{margin-bottom:14px;}
.est-res-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.est-res-num{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:13px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.07);}
.est-res-num b{font-family:Syne,sans-serif;font-size:1.35rem;font-weight:800;color:#fff;
  letter-spacing:-.5px;font-variant-numeric:tabular-nums;}
.est-res-num span{font-size:.7rem;color:rgba(240,240,240,.45);}
.est-res-num.bom b{color:#34d399;}
.est-res-num.ruim b{color:#f87171;}
/* ── Faixa de esgotado ────────────────────────────────────────────────
   Vem ANTES dos indicadores porque produto zerado e venda perdida com o
   cliente na loja — e um numero entre outros quatro nao interrompe ninguem.
   Some sozinha quando nao ha nenhum: faixa vermelha permanente vira moldura,
   e moldura ninguem le. */
.est-faixa-alerta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 18px;border-radius:14px;margin-bottom:14px;
  background:linear-gradient(100deg,rgba(239,68,68,.14),rgba(239,68,68,.05));
  border:1px solid rgba(239,68,68,.3);
}
.est-fa-ico{color:#f87171;flex-shrink:0;display:flex;}
.est-fa-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
.est-fa-txt b{font-family:Syne,sans-serif;font-size:.95rem;font-weight:800;color:#fca5a5;}
.est-fa-txt em{font-style:normal;font-size:.72rem;color:rgba(240,240,240,.5);}
.est-fa-chips{display:flex;gap:6px;flex-wrap:wrap;}
.est-fa-chip{
  padding:5px 12px;border-radius:20px;cursor:pointer;
  border:1px solid rgba(239,68,68,.3);background:rgba(239,68,68,.12);
  color:#fca5a5;font-family:Inter,sans-serif;font-size:.7rem;font-weight:600;
  max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .14s,border-color .14s;
}
.est-fa-chip:hover{background:rgba(239,68,68,.22);border-color:rgba(239,68,68,.5);}
.est-fa-chip.mais{font-family:'JetBrains Mono',monospace;font-weight:700;}
.est-sub-esg{color:#fca5a5;}

@media (max-width:768px){
  .est-faixa-alerta{padding:12px 14px;gap:10px;}
  .est-fa-chips{width:100%;}
  .est-fa-chip{max-width:100%;}
}
/* A faixa agora tem numero e porta, e nao a lista: com quinze itens as fichas
   viravam uma parede no topo e empurravam os indicadores para baixo — o aviso
   atrapalhando a tela que ele deveria destacar. */
.est-faixa-alerta{justify-content:space-between;}
.est-fa-btn{
  flex-shrink:0;padding:9px 18px;border-radius:10px;cursor:pointer;
  border:1px solid rgba(239,68,68,.4);background:rgba(239,68,68,.16);
  color:#fca5a5;font-family:Inter,sans-serif;font-size:.76rem;font-weight:600;
  transition:background .14s,border-color .14s;
}
.est-fa-btn:hover{background:rgba(239,68,68,.26);border-color:rgba(239,68,68,.6);}
.est-esg-bloco{margin-bottom:14px;}

@media (max-width:768px){ .est-fa-btn{width:100%;} }