/* ═══════════════════════════════════════════════════════════════════════
   ESTOQUE — A CAPA AZUL (26/09/2026)
   ═══════════════════════════════════════════════════════════════════════
   O Estoque trocou a faixa branca por uma capa azul, a pedido do dono do
   produto, a partir da arte conceitual aprovada. A regra antiga — cada painel
   com a sua cor, e azul só no Financeiro — foi aposentada: hoje os painéis
   seguem um padrão só, no azul do MyDesk.

   Esta folha vem DEPOIS de `paineis-identidade.css` e do tema claro. A capa
   usa classes próprias (`.est-capa*`), e não `.est-topo`, porque o topo antigo
   carregava margens negativas e fundos de três folhas diferentes; reaproveitar
   o nome seria herdar a briga. O que ela repinta além da capa (abas, análises,
   blocos) vem com `#est-view` e ganha pela especificidade, não pela sorte.

   ── O AZUL, MEDIDO ─────────────────────────────────────────────────────
   Mais claro que o da arte (que ia até #1e3a8a, quase marinho), e ainda assim
   com texto branco acima de 4,5:1 em cada parada do degradê. Os brilhos e o
   vidro dos cartões entram na conta: `test/estoque-capa.test.js` compõe cada
   brilho sobre cada parada, põe o vidro por cima e mede o texto branco ali —
   lendo os valores desta folha, e não uma lista que concordaria consigo mesma.

   ── O MOVIMENTO ────────────────────────────────────────────────────────
   Três voltas, todas em `transform` (o navegador anima sem repintar):
     · a luz    — dois brilhos que derivam devagar no lado direito (24 s);
     · o reflexo — uma faixa de luz que atravessa a capa e descansa (8 s);
     · a marca  — a caixa grande do canto gira devagar (48 s).
   A fase vem do JS (`--capa-fase`), para a capa repintada continuar de onde
   a anterior estava. Quem pediu menos movimento ao sistema não recebe nenhum.
   ═══════════════════════════════════════════════════════════════════════ */

#est-view{
  --capa-a:#2468e3;
  --capa-b:#1f5ed6;
  --capa-c:#1a52c4;
  /* Os brilhos. Ficam do lado direito da capa, longe do subtítulo (texto
     pequeno direto sobre o azul); onde há texto sobre eles, há vidro. */
  --capa-brilho:rgba(191,230,255,.28);
  --capa-brilho-2:rgba(196,181,253,.22);
  /* O vidro é ESCURO, e não branco: branco translúcido clareia o fundo e
     derruba o contraste do rótulo; escuro translúcido segura o texto branco
     mesmo quando o brilho passa por trás. */
  --capa-vidro:rgba(10,36,102,.28);
  --capa-vidro-forte:rgba(10,36,102,.38);
  /* A caixa grande do canto, em traço branco quase transparente. */
  --capa-marca:rgba(255,255,255,.07);
  /* Os botões brancos: a tinta azul e o fundo do hover. */
  --capa-tinta:#1a4fb8;
  --capa-branco-hover:#eef5ff;
  --capa-linha:rgba(255,255,255,.26);
}

/* ── A CAPA ──────────────────────────────────────────────────────────── */
:root #est-view .est-capa{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:16px;
  margin:22px 26px 16px;
  padding:22px 24px;
  border-radius:18px;
  color:#fff;
  background:linear-gradient(105deg,var(--capa-a) 0%,var(--capa-b) 52%,var(--capa-c) 100%);
  box-shadow:0 18px 40px -14px rgba(26,82,196,.55),inset 0 1px 0 rgba(255,255,255,.28);
}

/* A luz: uma camada só do lado direito, com dois brilhos, que deriva. */
.est-capa-luz{
  position:absolute;
  z-index:0;
  inset:-40% -14% -40% 44%;
  pointer-events:none;
  background:
    radial-gradient(closest-side at 62% 34%,var(--capa-brilho),transparent),
    radial-gradient(closest-side at 30% 80%,var(--capa-brilho-2),transparent);
  animation:estCapaLuz 24s ease-in-out infinite;
  animation-delay:var(--capa-fase,0s);
  will-change:transform;
}
@keyframes estCapaLuz{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(-5%,6%,0) scale(1.06)}
  66%{transform:translate3d(4%,-4%,0) scale(.97)}
}

/* O reflexo: atravessa em cerca de 3 s e descansa o resto da volta. Um
   brilho que nunca para cansa; um que passa de vez em quando é acabamento. */
.est-capa-reflexo{
  position:absolute;
  z-index:0;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  border-radius:inherit;
}
.est-capa-reflexo::before{
  content:"";
  position:absolute;
  top:-30%;
  bottom:-30%;
  left:0;
  width:18%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);
  transform:translateX(-150%) skewX(-16deg);
  animation:estCapaReflexo 8s cubic-bezier(.4,0,.2,1) infinite;
  animation-delay:var(--capa-fase,0s);
}
@keyframes estCapaReflexo{
  0%{transform:translateX(-150%) skewX(-16deg)}
  40%,100%{transform:translateX(650%) skewX(-16deg)}
}

/* A caixa grande do canto: a marca do painel, girando devagar. Fica atrás
   dos botões (que têm vidro) e some quando a capa estreita e o título passa
   a atravessar o canto. */
.est-capa-marca{
  position:absolute;
  z-index:0;
  right:-30px;
  top:-60px;
  width:260px;
  height:260px;
  stroke:var(--capa-marca);
  pointer-events:none;
  transform-origin:50% 50%;
  animation:estCapaMarca 48s ease-in-out infinite;
  animation-delay:var(--capa-fase,0s);
}
@keyframes estCapaMarca{
  0%,100%{transform:rotate(0deg) translateY(0)}
  50%{transform:rotate(6deg) translateY(8px)}
}

/* ── Título e ações do dia a dia ─────────────────────────────────────── */
.est-capa-linha{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px 16px;
}
.est-capa-txt{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:5px;}
:root #est-view .est-capa .est-titulo{margin:0;color:#fff;}
:root #est-view .est-capa .est-sub{margin:0;font-size:13px;font-weight:500;color:#fff;}
:root #est-view .est-capa .est-sub-esg{color:#fff;font-weight:700;}
:root #est-view .est-capa .est-sub-vazio{color:rgba(255,255,255,.7);}

.est-capa-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto;}
/* OS BOTÕES SÃO BRANCOS, todos (pedido de 26/09/2026): o mesmo botão do
   resto do MyDesk, em vez de um vidro que só existia aqui. O principal
   continua sendo o que o olho acha primeiro — mais peso e mais sombra. */
:root #est-view .est-capa-btn{
  height:40px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 14px;
  border:0;
  border-radius:11px;
  background:#fff;
  color:var(--capa-tinta);
  font:inherit;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(10,36,102,.2);
  transition:background .18s,transform .18s,box-shadow .18s;
}
:root #est-view .est-capa-btn:hover{background:var(--capa-branco-hover);transform:translateY(-1px);}
:root #est-view .est-capa-btn .est-ia-ico{color:inherit;font-size:.9rem;}
:root #est-view .est-capa-novo{font-weight:800;box-shadow:0 6px 16px rgba(10,36,102,.3);}
:root #est-view .est-capa-novo:hover{box-shadow:0 10px 22px rgba(10,36,102,.34);}
:root #est-view :is(.est-capa-btn,.est-capa-chip,.est-capa-selo):focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

/* ── Os atalhos do painel inteiro ────────────────────────────────────── */
.est-capa-atalhos{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;}
:root #est-view .est-capa-chip{
  height:30px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 11px;
  border:0;
  border-radius:999px;
  background:#fff;
  color:var(--capa-tinta);
  box-shadow:0 3px 10px rgba(10,36,102,.16);
  font:inherit;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  transition:background .18s,transform .18s;
}
:root #est-view .est-capa-chip:hover{background:var(--capa-branco-hover);transform:translateY(-1px);}
.est-capa-chip .est-ico-arq{width:13px;height:15px;flex-shrink:0;}

/* ── Os indicadores, em vidro ────────────────────────────────────────── */
.est-capa-kpis{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.est-capa-kpi{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 16px;
  border-radius:14px;
  background:var(--capa-vidro);
  border:1px solid var(--capa-linha);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .2s cubic-bezier(.16,1,.3,1),background .2s;
}
.est-capa-kpi:hover{transform:translateY(-2px);background:var(--capa-vidro-forte);}
.est-capa-kpi-lbl{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  font-size:12px;
  font-weight:600;
  color:#fff;
}
.est-capa-kpi-lbl > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* O número e o selo dividem a linha. O número NUNCA quebra; se faltar
   espaço, o selo desce inteiro para a linha de baixo. */
.est-capa-kpi-linha{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0;}
.est-capa-kpi-num{
  font-size:24px;
  font-weight:800;
  letter-spacing:-.5px;
  line-height:1.1;
  color:#fff;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.est-capa-kpi-num.t2{font-size:21px;}
.est-capa-kpi-num.t3{font-size:19px;}
.est-capa-kpi-num.t4{font-size:17px;}
.est-capa-kpi-pe{
  display:block;
  font-size:12px;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* O tom vira ponto, e só onde é aviso: "lucro potencial" é apoio. */
.est-capa-kpi-pe:is(.ruim,.atencao)::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin:0 6px 1px 0;
  border-radius:50%;
  vertical-align:middle;
  box-shadow:0 0 0 2px rgba(255,255,255,.35);
}
.est-capa-kpi-pe.ruim::before{background:#fb7185;}
.est-capa-kpi-pe.atencao::before{background:#fcd34d;}
:root #est-view .est-capa-selo{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 9px;
  border:0;
  border-radius:999px;
  background:#fff;
  color:#b45309;
  font:inherit;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(10,36,102,.2);
}
:root #est-view .est-capa-selo:hover{background:#fff7ed;}
.est-capa-kpi-apoio{font-size:12px;color:#fff;white-space:nowrap;}
.est-capa-kpi-barra{
  position:relative;
  display:block;
  height:5px;
  margin-top:5px;
  border-radius:3px;
  background:rgba(255,255,255,.25);
  overflow:hidden;
}
.est-capa-kpi-barra i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:#fff;}
:root #est-view .est-capa-kpi-acao{
  width:100%;
  font:inherit;
  color:#fff;
  text-align:left;
  cursor:pointer;
  appearance:none;
}
.est-capa-kpi-acao .est-capa-kpi-lbl::after{content:"→";margin-left:auto;padding-left:6px;}

/* ── A barra de abas, com a busca ────────────────────────────────────── */
#est-view .est-navbar{display:flex;align-items:center;gap:8px;margin:0 26px 16px;}
#est-view .est-navbar .est-nav{flex:1 1 auto;min-width:0;margin:0;}
.est-nav-busca{
  flex:0 0 210px;
  height:36px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 10px;
  border-radius:10px;
  background:rgba(255,255,255,.05);
  color:rgba(240,240,240,.6);
}
.est-nav-busca input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  font:inherit;
  font-size:13px;
  color:#f0f0f0;
}
.est-nav-busca:focus-within{box-shadow:0 0 0 2px rgba(59,130,246,.55);}
html[data-theme="light"] #est-view .est-navbar{
  padding:6px;
  background:#fff;
  border:1px solid #e3e9f1;
  border-radius:14px;
  box-shadow:0 2px 8px rgba(15,39,68,.05);
}
html[data-theme="light"] #est-view .est-navbar .est-nav{padding:0;background:transparent;border:0;box-shadow:none;}
html[data-theme="light"] #est-view .est-nav .est-nav-item{padding:9px 13px;border-radius:10px;color:#3d4f66;}
html[data-theme="light"] #est-view .est-nav .est-nav-item:hover{background:#eef4fc;color:#16457f;}
html[data-theme="light"] #est-view .est-nav .est-nav-item.ativo{
  background:linear-gradient(105deg,var(--capa-a),var(--capa-c));
  color:#fff;
  box-shadow:0 4px 10px rgba(36,104,227,.28);
}
html[data-theme="light"] #est-view .est-nav .est-nav-item.ativo::after{display:none;}
html[data-theme="light"] .est-nav-busca{background:#f3f5f9;color:#5b6878;}
html[data-theme="light"] .est-nav-busca input{color:#0f1b2d;}
html[data-theme="light"] .est-nav-busca input::placeholder{color:#5b6878;}

/* ── As análises: rótulo e pílulas com o ponto do bloco ──────────────── */
#est-view .est-analises{align-items:center;gap:8px;}
.est-an-rot{
  margin-right:2px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  color:rgba(240,240,240,.55);
}
#est-view .est-an-item{display:inline-flex;align-items:center;gap:6px;}
.est-an-ponto{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--c);}
html[data-theme="light"] #est-view .est-analises{border-bottom:0;}
html[data-theme="light"] #est-view .est-an-rot{color:#5b6878;}
html[data-theme="light"] #est-view .est-analises .est-an-item{
  padding:6px 12px;
  border:1px solid #e3e8ef;
  border-radius:999px;
  background:#fff;
  color:#3d4a5c;
}
html[data-theme="light"] #est-view .est-analises .est-an-item:hover{background:#f3f7fd;color:#173653;}
html[data-theme="light"] #est-view .est-analises .est-an-item.ativo{
  background:#e8f1fe;
  border-color:#c9dcf8;
  color:#174ea8;
}

/* ═══ A VISÃO GERAL ═══════════════════════════════════════════════════
   Uma linha de dois (o que aconteceu, o que pede atitude) e uma de quatro
   (o que se consulta), como na arte. */
.est-visao{display:flex;flex-direction:column;gap:16px;margin-bottom:16px;}
.est-visao-l1{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:stretch;}
.est-visao-l2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch;}
#est-view .est-visao .est-bloco{margin:0;min-width:0;}
#est-corpo .est-visao .est-bloco{animation:estEntra .34s cubic-bezier(.16,1,.3,1) both;}
#est-corpo .est-visao-l1 > .est-bloco:nth-child(2){animation-delay:.05s;}
#est-corpo .est-visao-l2 > .est-bloco:nth-child(1){animation-delay:.1s;}
#est-corpo .est-visao-l2 > .est-bloco:nth-child(2){animation-delay:.14s;}
#est-corpo .est-visao-l2 > .est-bloco:nth-child(3){animation-delay:.18s;}
#est-corpo .est-visao-l2 > .est-bloco:nth-child(4){animation-delay:.22s;}

/* Os blocos: cartão mais leve e selo de assunto. */
html[data-theme="light"] #est-view .est-bloco{
  border-radius:16px;
  border-color:#e6eaf0;
  box-shadow:0 2px 10px rgba(15,27,45,.04);
}
#est-view .est-bloco-topo h3{gap:10px;}
.est-bloco-ico{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  color:#fff;
  background:linear-gradient(145deg,var(--c,#1f63d8),color-mix(in srgb,var(--c,#1f63d8) 82%,#fff));
  box-shadow:0 6px 14px -4px color-mix(in srgb,var(--c,#1f63d8) 55%,transparent);
}
.est-bloco-tit{display:flex;flex-direction:column;gap:2px;min-width:0;}
.est-bloco-tit small{font-size:.74rem;font-weight:500;letter-spacing:0;color:rgba(240,240,240,.6);}
html[data-theme="light"] #est-view .est-bloco-tit small{color:#5b6878;}
:root #est-view .est-bloco-link{
  padding:0;
  border:0;
  background:none;
  font:inherit;
  font-size:.8rem;
  font-weight:700;
  color:#93c5fd;
  cursor:pointer;
  white-space:nowrap;
}
:root #est-view .est-bloco-link:hover{text-decoration:underline;}
html[data-theme="light"] #est-view .est-bloco-link{color:#1f63d8;}
.est-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ── Evolução do estoque ─────────────────────────────────────────────── */
:root #est-view .est-evo{display:flex;flex-direction:column;gap:14px;}
#est-view .est-evo > .est-bloco-topo{margin-bottom:0;}
.est-evo-acoes{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.est-evo-resumo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.est-evo-mini{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
}
.est-evo-mini-txt{display:flex;flex-direction:column;gap:1px;min-width:0;}
.est-evo-mini-txt em{font-style:normal;font-size:12px;color:rgba(240,240,240,.6);}
.est-evo-mini-txt b{font-size:17px;font-weight:800;color:#f0f0f0;white-space:nowrap;font-variant-numeric:tabular-nums;}
.est-evo-mini-txt small{font-size:12px;font-weight:600;color:rgba(240,240,240,.6);}
html[data-theme="light"] #est-view .est-evo-mini{border-color:#eef1f5;}
html[data-theme="light"] #est-view .est-evo-mini-txt em,
html[data-theme="light"] #est-view .est-evo-mini-txt small{color:#5b6878;}
html[data-theme="light"] #est-view .est-evo-mini-txt b{color:#0f1b2d;}

/* O gráfico. As duas cores de cada tema foram validadas juntas para
   daltonismo; no escuro elas sobem um degrau para a superfície escura. */
#est-view{
  --gr-ent:#3987e5;
  --gr-sai:#d95926;
  --gr-grade:rgba(255,255,255,.06);
  --gr-base:rgba(255,255,255,.18);
  --gr-eixo:rgba(240,240,240,.55);
  --gr-valor:#f0f0f0;
}
html[data-theme="light"] #est-view{
  --gr-ent:#2a78d6;
  --gr-sai:#eb6834;
  --gr-grade:#eef1f5;
  --gr-base:#d8dee6;
  --gr-eixo:#5b6878;
  --gr-valor:#0f1b2d;
}
:root #est-view .est-gr-legenda{display:flex;gap:16px;margin:0;font-size:12px;color:inherit;}
:root #est-view .est-gr-legenda span{display:inline-flex;align-items:center;gap:6px;}
:root #est-view .est-gr-legenda i{width:10px;height:10px;border-radius:3px;display:inline-block;}
.est-gr-legenda i.ent,.est-gr-dica-l i.ent{background:var(--gr-ent);}
.est-gr-legenda i.sai,.est-gr-dica-l i.sai{background:var(--gr-sai);}
:root #est-view .est-gr-wrap{position:relative;min-height:200px;margin-top:-4px;}
.est-gr-svg{display:block;overflow:visible;}
.est-gr-ent{fill:var(--gr-ent);}
.est-gr-sai{fill:var(--gr-sai);}
.est-gr-grade{stroke:var(--gr-grade);stroke-width:1;}
.est-gr-base{stroke:var(--gr-base);stroke-width:1;}
.est-gr-eixo{fill:var(--gr-eixo);font-size:11px;font-variant-numeric:tabular-nums;}
.est-gr-valor{fill:var(--gr-valor);font-size:11px;font-weight:800;}
.est-gr-alvo{fill:transparent;cursor:crosshair;}
.est-gr-faixa{fill:rgba(42,120,214,.08);pointer-events:none;}
.est-gr-dica{
  position:absolute;
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  border-radius:10px;
  background:#0f1b2d;
  color:#fff;
  font-size:12px;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:0 10px 24px rgba(15,27,45,.22);
}
.est-gr-dica[hidden]{display:none;}
.est-gr-dica-data{font-size:11px;color:#b8c3d1;}
.est-gr-dica-l{display:flex;align-items:center;gap:6px;font-weight:700;}
.est-gr-dica-l i{width:8px;height:8px;border-radius:2px;}
.est-gr-dica-nota{max-width:260px;overflow:hidden;text-overflow:ellipsis;font-size:11px;color:#d6dde7;}
.est-gr-vazio{
  position:absolute;
  inset:0 0 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  font-size:12.5px;
  color:var(--gr-eixo);
  pointer-events:none;
}

/* O período ativo no azul da capa, como na arte. */
html[data-theme="light"] #est-view .est-evo .est-periodos{padding:3px;background:#f3f5f9;border-radius:10px;}
html[data-theme="light"] #est-view .est-evo .est-per{padding:5px 11px;border-radius:8px;color:#4b5869;}
html[data-theme="light"] #est-view .est-evo .est-per.ativo{background:linear-gradient(105deg,var(--capa-a),var(--capa-c));color:#fff;}

/* A última movimentação, em uma frase. */
:root #est-view .est-ultima{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  margin-top:auto;
  padding:10px 12px;
  border:0;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  color:rgba(240,240,240,.88);
  font:inherit;
  font-size:13px;
  text-align:left;
}
:root #est-view button.est-ultima{cursor:pointer;}
:root #est-view button.est-ultima:hover{background:rgba(255,255,255,.07);}
.est-ultima-tag{
  padding:3px 8px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:6px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(240,240,240,.75);
}
.est-ultima-av{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(145deg,#0e7490,#0f766e);
  color:#fff;
  font-size:12px;
  font-weight:800;
}
/* A foto cobre o círculo inteiro; o degradê fica só para a inicial. */
.est-ultima-av.tem-foto{background:none;overflow:hidden;}
.est-ultima-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.est-ultima-txt{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.est-ultima-txt b{font-weight:650;}
.est-ultima-chip{
  padding:3px 9px;
  border-radius:999px;
  background:rgba(59,130,246,.18);
  color:#bfdbfe;
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
}
.est-ultima-quando{font-size:12px;color:rgba(240,240,240,.6);white-space:nowrap;font-variant-numeric:tabular-nums;}
html[data-theme="light"] #est-view .est-ultima{background:#f6f8fb;color:#1c2a3d;}
html[data-theme="light"] #est-view button.est-ultima:hover{background:#eef3f9;}
html[data-theme="light"] #est-view .est-ultima-tag{background:#fff;border-color:#e6eaf0;color:#4b5869;}
html[data-theme="light"] #est-view .est-ultima-chip{background:#e8f1fe;color:#174ea8;}
html[data-theme="light"] #est-view .est-ultima-quando{color:#5b6878;}

/* ── Produtos em alerta: cabeçalho rosa, lista e a ação no rodapé ────── */
:root #est-view .est-bloco-alerta{
  display:flex;
  flex-direction:column;
  padding:0 18px;
  overflow:hidden;
  border-color:#f3d0d8;
}
:root #est-view .est-bloco-alerta:hover{border-color:#eab3bf;}
:root #est-view .est-bloco-alerta > .est-bloco-topo{
  flex-wrap:nowrap;
  min-height:72px;
  box-sizing:border-box;
  margin:0 -18px 4px;
  padding:11px 12px 11px 16px;
  background:
    radial-gradient(ellipse 40% 90% at 0 -10%,rgba(251,113,133,.3),transparent 90%),
    linear-gradient(100deg,#be123c,#9f1239);
}
:root #est-view .est-bloco-alerta > .est-bloco-topo h3{color:#fff;}
:root #est-view .est-bloco-alerta .est-bloco-tit small{color:#fff;}
:root #est-view .est-bloco-alerta .est-bloco-ico{
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:none;
}
/* O contador em dois anéis, como na arte. */
.est-al-conta{
  width:50px;
  height:50px;
  flex:0 0 50px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}
.est-al-conta span{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:12px;
  font-weight:800;
}
.est-al-lista{list-style:none;margin:0;padding:0 0 4px;display:flex;flex-direction:column;}
.est-al-lista > li + li{border-top:1px solid rgba(255,255,255,.06);}
:root #est-view .est-al-item{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:10px 0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
:root #est-view .est-al-item:hover .est-al-txt b{text-decoration:underline;}
/* O selo do produto: lightness fixa em OKLCH, para o branco da inicial ler
   igual em qualquer matiz — em HSL, os amarelos saíam claros demais. */
.est-av{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  color:#fff;
  font-size:14px;
  font-weight:800;
  background:#4f46e5;
  background:linear-gradient(145deg,oklch(42% .12 var(--h,270)),oklch(50% .13 var(--h,270)));
}
.est-al-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.est-al-txt b{font-size:13px;font-weight:650;color:#f0f0f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.est-al-txt em{font-style:normal;font-size:11.5px;color:rgba(240,240,240,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.est-al-qtd{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-variant-numeric:tabular-nums;}
.est-al-qtd b{font-size:13px;font-weight:750;color:#f0f0f0;white-space:nowrap;}
.est-al-qtd b.neg{color:#fb7185;}
.est-al-qtd b i{font-style:normal;font-weight:500;color:rgba(240,240,240,.6);}
.est-al-barra{position:relative;width:64px;height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;}
.est-al-barra i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;}
.est-al-vazio{padding:18px 0;}
html[data-theme="light"] #est-view .est-al-lista > li + li{border-top-color:#f5eef0;}
html[data-theme="light"] #est-view .est-al-txt b,
html[data-theme="light"] #est-view .est-al-qtd b{color:#0f1b2d;}
html[data-theme="light"] #est-view .est-al-qtd b.neg{color:#be123c;}
html[data-theme="light"] #est-view .est-al-txt em,
html[data-theme="light"] #est-view .est-al-qtd b i{color:#5b6878;}
html[data-theme="light"] #est-view .est-al-barra{background:#f1f4f8;}
.est-bloco-pe{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:auto -18px 0;
  padding:12px 18px;
  border-top:1px solid rgba(244,63,94,.18);
  background:rgba(244,63,94,.06);
}
:root #est-view .est-bloco-alerta .est-bloco-link{color:#fda4af;}
/* `.est-btn.` junto: o tema claro pinta `#est-view .est-btn` e o hover dele
   de branco, e só uma classe a mais vence os dois. */
:root #est-view .est-btn.est-bloco-compra{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:0;
  color:#fff;
  font-weight:800;
  background:linear-gradient(105deg,#be123c,#9f1239);
  box-shadow:0 6px 14px rgba(190,18,60,.28);
}
:root #est-view .est-btn.est-bloco-compra:hover{
  color:#fff;
  background:linear-gradient(105deg,#be123c,#9f1239);
  box-shadow:0 8px 18px rgba(190,18,60,.36);
}
html[data-theme="light"] #est-view .est-bloco-pe{border-top-color:#f5e3e7;background:#fff8f9;}
html[data-theme="light"] #est-view .est-bloco-alerta .est-bloco-link{color:#be123c;}

/* ── Os quatro cartões de baixo ──────────────────────────────────────── */
:root #est-view .est-cartao{display:flex;flex-direction:column;gap:12px;padding:18px;}
#est-view .est-cartao > .est-bloco-topo{margin-bottom:0;flex-wrap:nowrap;}
#est-view .est-cartao .est-bloco-topo h3{font-size:.95rem;min-width:0;}
.est-cartao-pilula{
  flex-shrink:0;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(14,116,144,.2);
  color:#67e8f9;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.est-cartao-txt{margin:0;font-size:12.5px;line-height:1.45;color:rgba(240,240,240,.62);}
#est-view .est-cartao > :is(.est-bloco-link,.est-cartao-acao):last-child{margin-top:auto;align-self:flex-start;}
html[data-theme="light"] #est-view .est-cartao-pilula{background:#e6f6f8;color:#0e5f75;}
html[data-theme="light"] #est-view .est-cartao-txt{color:#5b6878;}
/* "Informar custos": a única ação principal da linha, no azul da capa. */
:root #est-view .est-btn.est-cartao-acao{
  border:0;
  color:#fff;
  font-weight:700;
  background:linear-gradient(105deg,var(--capa-a),var(--capa-c));
}
:root #est-view .est-btn.est-cartao-acao:hover{color:#fff;background:linear-gradient(105deg,var(--capa-a),var(--capa-c));filter:brightness(1.06);}
/* "Registrar lote" é contornado, na cor do cartão de validade. */
:root #est-view .est-btn.est-val-acao{
  border:1px solid rgba(94,234,212,.35);
  background:transparent;
  color:#5eead4;
}
:root #est-view .est-btn.est-val-acao:hover{background:rgba(94,234,212,.08);color:#5eead4;filter:none;}
html[data-theme="light"] #est-view .est-btn.est-val-acao{border-color:#b6e3ea;background:#fff;color:#0e5f75;}
html[data-theme="light"] #est-view .est-btn.est-val-acao:hover{background:#f0fbfc;color:#0e5f75;}

/* Categorias sem valor: fichas. O texto fica na tinta do tema; a cor da
   categoria mora no ponto. */
.est-cat-fichas{display:flex;flex-wrap:wrap;gap:6px;}
.est-cat-ficha{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding:4px 9px;
  border-radius:999px;
  background:color-mix(in srgb,var(--c) 18%,transparent);
  color:#f0f0f0;
  font-size:11.5px;
  font-weight:650;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.est-cat-ficha i{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--c);}
html[data-theme="light"] #est-view .est-cat-ficha{background:color-mix(in srgb,var(--c) 11%,#fff);color:#1c2a3d;}

/* A rosca pequena e a legenda ao lado. */
.est-cartao-rosca{display:flex;align-items:center;gap:14px;min-width:0;}
.est-rosca-mini{flex:0 0 92px;overflow:visible;}
.est-rosca-mini-trilha{stroke:rgba(255,255,255,.07);}
.est-rosca-mini-n{fill:#f0f0f0;font-weight:800;}
.est-rosca-mini-l{fill:rgba(240,240,240,.6);font-size:11px;}
html[data-theme="light"] #est-view .est-rosca-mini-trilha{stroke:#eef1f5;}
html[data-theme="light"] #est-view .est-rosca-mini-n{fill:#0f1b2d;}
html[data-theme="light"] #est-view .est-rosca-mini-l{fill:#5b6878;}
.est-cartao-leg{list-style:none;margin:0;padding:0;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:7px;font-size:12.5px;}
.est-cartao-leg li{display:flex;align-items:center;gap:7px;min-width:0;}
.est-cartao-leg li > i{width:10px;height:10px;flex:0 0 10px;border-radius:3px;}
.est-cartao-leg li > span:not(.est-abc-let){flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.est-cartao-leg li > b{font-weight:700;font-variant-numeric:tabular-nums;}
.est-abc-leg .est-abc-let{width:22px;height:22px;flex:0 0 22px;font-size:11px;}
.est-abc-leg li.vazio > :is(span:not(.est-abc-let),b){color:rgba(240,240,240,.5);}
html[data-theme="light"] #est-view .est-abc-leg li.vazio > :is(span:not(.est-abc-let),b){color:#5b6878;}

/* Validade: a lista curta, ou o "tudo em dia". */
.est-val-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
:root #est-view .est-val-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  background:none;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.est-val-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;}
.est-val-txt b{font-size:12.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.est-val-txt em{font-style:normal;font-size:11.5px;color:rgba(240,240,240,.6);}
.est-val-dias{flex-shrink:0;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800;background:rgba(14,116,144,.22);color:#67e8f9;}
.est-val-item.atencao .est-val-dias{background:rgba(245,158,11,.2);color:#fcd34d;}
.est-val-item.urgente .est-val-dias{background:rgba(249,115,22,.2);color:#fdba74;}
.est-val-item.vencido .est-val-dias{background:rgba(244,63,94,.2);color:#fda4af;}
html[data-theme="light"] #est-view .est-val-item{border-color:#eef1f5;}
html[data-theme="light"] #est-view .est-val-txt em{color:#5b6878;}
html[data-theme="light"] #est-view .est-val-dias{background:#e6f6f8;color:#0e5f75;}
html[data-theme="light"] #est-view .est-val-item.atencao .est-val-dias{background:#fef3c7;color:#92400e;}
html[data-theme="light"] #est-view .est-val-item.urgente .est-val-dias{background:#ffedd5;color:#9a3412;}
html[data-theme="light"] #est-view .est-val-item.vencido .est-val-dias{background:#ffe4e6;color:#9f1239;}
.est-val-ok{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:rgba(20,184,166,.1);}
.est-val-ok-ico{
  width:40px;
  height:40px;
  flex:0 0 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff;
  color:#0e7490;
  box-shadow:0 4px 10px rgba(14,116,144,.15);
}
.est-val-ok b{display:block;font-size:13.5px;font-weight:750;color:#5eead4;}
.est-val-ok em{display:block;font-style:normal;font-size:12px;color:rgba(240,240,240,.7);}
html[data-theme="light"] #est-view .est-val-ok{background:linear-gradient(135deg,#ecfbfd,#e6f6f3);}
html[data-theme="light"] #est-view .est-val-ok b{color:#0b4f63;}
html[data-theme="light"] #est-view .est-val-ok em{color:#2f5f6c;}

/* Sincronia com Vendas. O ponto "ao vivo" pulsa — é o único movimento fora
   da capa, e para junto com ela para quem pediu menos movimento. */
html[data-theme="light"] #est-view .est-sinc{border-color:#cdeedb;}
.est-sinc-vivo{display:inline-flex;align-items:center;gap:5px;background:rgba(21,128,61,.2);color:#86efac;}
.est-sinc-vivo i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#22c55e;
  animation:estVivo 2s ease-out infinite;
}
@keyframes estVivo{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}
  70%,100%{box-shadow:0 0 0 6px rgba(34,197,94,0)}
}
html[data-theme="light"] #est-view .est-sinc-vivo{background:#e7f8ef;color:#0f6b3f;}
.est-sinc-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.est-sinc-lista li{display:flex;align-items:flex-start;gap:9px;}
.est-sinc-ok{
  width:20px;
  height:20px;
  flex:0 0 20px;
  margin-top:1px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(34,197,94,.16);
  color:#4ade80;
}
.est-sinc-lista b{display:block;font-size:12.5px;font-weight:700;color:#f0f0f0;}
.est-sinc-lista em{display:block;font-style:normal;font-size:12px;color:rgba(240,240,240,.62);}
:root #est-view .est-sinc-link{color:#86efac;}
html[data-theme="light"] #est-view .est-sinc-ok{background:#e7f8ef;color:#15803d;}
html[data-theme="light"] #est-view .est-sinc-lista b{color:#0f1b2d;}
html[data-theme="light"] #est-view .est-sinc-lista em{color:#5b6878;}
html[data-theme="light"] #est-view .est-sinc-link{color:#15803d;}

/* ── Responsivo ──────────────────────────────────────────────────────── */
/* Cinco cartões em três colunas deixariam dois órfãos na segunda linha. O
   valor em reais — o número mais longo — ocupa duas, e as linhas fecham. */
@media (max-width:1180px){
  .est-capa-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
  .est-capa-kpi:first-child{grid-column:span 2;}
  .est-visao-l1{grid-template-columns:minmax(0,1fr);}
  .est-visao-l2{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* Abaixo disto o título quebra em várias linhas e passa a atravessar o
   lado direito, onde mora a luz: ela fica fraca o bastante para o subtítulo
   continuar acima de 4,5:1 sobre ela, e a caixa do canto sai. */
@media (max-width:900px){
  .est-capa-luz{opacity:.25;}
  .est-capa-marca{display:none;}
  .est-evo-resumo{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:768px){
  :root #est-view .est-capa{margin:14px;padding:18px 16px;border-radius:16px;}
  .est-capa-acoes{width:100%;margin-left:0;}
  :root #est-view .est-capa-btn{flex:1 1 auto;justify-content:center;}
  /* No telefone o painel tem pouco mais de 300px (a lateral recolhe para
     os ícones). O valor em reais é o único número longo: ele ganha a linha
     inteira, e os outros quatro ficam dois a dois. Rótulo e rodapé quebram
     linha em vez de virar "Itens com…". */
  .est-capa-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .est-capa-kpi{padding:12px 13px;}
  .est-capa-kpi:first-child{grid-column:1/-1;}
  .est-capa-kpi-lbl{align-items:flex-start;line-height:1.25;}
  .est-capa-kpi-lbl > span,
  .est-capa-kpi-pe{white-space:normal;overflow:visible;line-height:1.3;}
  #est-view .est-navbar{flex-wrap:wrap;margin:0 14px 14px;}
  .est-nav-busca{flex:1 1 100%;}
  .est-visao-l2{grid-template-columns:minmax(0,1fr);}
  :root #est-view .est-bloco-alerta{padding:0 14px;}
  :root #est-view .est-bloco-alerta > .est-bloco-topo{margin:0 -14px 4px;padding:10px 12px;}
  .est-bloco-pe{margin:auto -14px 0;padding:12px 14px;}
  :root #est-view .est-ultima{flex-wrap:wrap;}
  .est-ultima-txt{flex-basis:100%;order:3;white-space:normal;}
  .est-evo-mini{padding:8px 10px;}
}

@media (prefers-reduced-motion:reduce){
  .est-capa-luz,
  .est-capa-reflexo::before,
  .est-capa-marca,
  .est-sinc-vivo i{animation:none;}
  .est-capa-reflexo{display:none;}
  #est-corpo .est-visao .est-bloco{animation:none;}
  :root #est-view :is(.est-capa-btn,.est-capa-chip,.est-capa-kpi){transition:none;}
  :root #est-view :is(.est-capa-btn,.est-capa-chip,.est-capa-kpi):hover{transform:none;}
}

/* Visão operacional: anatomia da capa e dos dois painéis da arte aprovada. */
#est-view{
  --op-fundo:#101d2e;
  --op-superficie:#17273a;
  --op-tinta:#f3f7ff;
  --op-suave:#aabbd0;
  --op-borda:#2c415b;
  --op-azul:#71adff;
  --op-claro:#223a57;
}
html[data-theme="light"] #est-view{
  --op-fundo:#f1f6fc;
  --op-superficie:#fff;
  --op-tinta:#102b52;
  --op-suave:#607795;
  --op-borda:#e2ebf6;
  --op-azul:#1765e8;
  --op-claro:#f0f6fe;
}
#est-view .est-capa.com-indicadores{gap:12px;margin:4px 5px 12px;padding:22px 32px 16px;border-radius:15px;background:linear-gradient(106deg,#2371ed 0%,#267cf5 65%,#439eff 100%)}
#est-view .est-capa.com-indicadores .est-titulo{font-size:clamp(27px,2.3vw,36px);line-height:1.06;letter-spacing:-.045em}
#est-view .est-capa.com-indicadores .est-sub{max-width:450px;font-size:15px;line-height:1.25}
#est-view .est-capa.com-indicadores .est-capa-atalhos{display:none}
#est-view .est-capa.com-indicadores .est-capa-acoes{align-self:flex-start}
#est-view .est-capa.com-indicadores .est-capa-btn{height:38px;border-radius:9px}
#est-view .est-capa.com-indicadores .est-capa-novo{background:#1662de;color:#fff;border:1px solid rgba(255,255,255,.9)}
#est-view .est-capa.com-indicadores .est-capa-novo:hover{background:#0c52c3}
#est-view .est-capa.com-indicadores .est-capa-kpis{gap:10px}
#est-view .est-capa.com-indicadores .est-capa-kpi{
  position:relative;min-height:83px;box-sizing:border-box;gap:2px;
  padding:11px 11px 10px 75px;border-radius:10px;
  /* Fundo opaco: no Edge o degradê podia sumir numa camada animada e
     deixar texto escuro sobre o azul da capa. Vale para todos os KPIs. */
  background:#f7fbff;border:1px solid #e1ecfa;transition:none;
  box-shadow:0 5px 12px rgba(8,47,123,.13);color:#112b53;
}
#est-view .est-capa.com-indicadores .est-capa-kpi:hover{transform:none;background:#fff;box-shadow:0 7px 18px rgba(8,47,123,.2)}
/* --light-muted (CORES.md): #637798 e #687e9c davam 4,37 e 4,0 sobre o #f7fbff (01/10/2026). */
#est-view .est-capa.com-indicadores .est-capa-kpi-lbl{font-size:11px;font-weight:700;color:#536b84}
#est-view .est-capa.com-indicadores .est-capa-kpi-lbl .est-ico{
  position:absolute;left:12px;top:16px;box-sizing:content-box;width:24px;height:24px;
  padding:11px;border-radius:50%;background:#e8f1ff;color:#2c78f0;
}
#est-view .est-capa.com-indicadores .est-capa-kpi:nth-child(1) .est-ico{background:#e5f8ee;color:#16a46b}
#est-view .est-capa.com-indicadores .est-capa-kpi:nth-child(4) .est-ico{background:#fff3df;color:#f59e0b}
#est-view .est-capa.com-indicadores .est-capa-kpi:nth-child(5) .est-ico{background:#ffebef;color:#f43f5e}
#est-view .est-capa.com-indicadores .est-capa-kpi-linha{margin-top:1px}
#est-view .est-capa.com-indicadores .est-capa-kpi-num{font-size:21px;color:#10274e;letter-spacing:-.035em}
#est-view .est-capa.com-indicadores .est-capa-kpi-pe{font-size:11px;color:#536b84}
#est-view .est-capa.com-indicadores .est-capa-kpi-pe:is(.ruim,.atencao)::before{display:none}
#est-view .est-capa.com-indicadores .est-capa-kpi-acao{color:#10274e}
#est-view .est-capa.com-indicadores .est-capa-kpi-acao .est-capa-kpi-lbl::after{display:none}
#est-view .est-capa.com-indicadores .est-capa-selo{font-size:10px;height:18px;box-shadow:none;background:#fff3dd}
#est-view .est-capa.com-indicadores .est-capa-kpi-apoio{color:#536b84}
#est-view .est-navbar{margin:0 5px 12px;gap:0}
#est-view .est-navbar .est-nav{display:flex;overflow-x:auto;white-space:nowrap;scrollbar-width:thin}
#est-view .est-nav-busca{display:none}
#est-view .est-nav-extras{position:relative;flex:none;margin-left:5px}
#est-view .est-nav-extras summary{display:grid;place-items:center;width:36px;height:34px;border:1px solid var(--op-borda);border-radius:9px;background:var(--op-superficie);color:var(--op-tinta);font-size:23px;line-height:1;cursor:pointer;list-style:none}
#est-view .est-nav-extras summary::-webkit-details-marker{display:none}
#est-view .est-nav-extras[open] summary,#est-view .est-nav-extras summary:hover{background:var(--op-claro)}
#est-view .est-nav-extras>div{position:absolute;z-index:30;top:40px;right:0;display:grid;gap:3px;min-width:210px;padding:6px;border:1px solid var(--op-borda);border-radius:11px;background:var(--op-superficie);box-shadow:0 12px 28px rgba(15,40,75,.2)}
#est-view .est-nav-extras button{width:100%;padding:9px 10px;border:0;border-radius:7px;background:transparent;color:var(--op-tinta);font:inherit;font-size:12px;text-align:left;cursor:pointer}
#est-view .est-nav-extras button:hover,#est-view .est-nav-extras button:focus-visible{background:var(--op-claro);color:var(--op-azul)}
#est-view .est-corpo{padding:0 5px 24px}

/* Passos de uso: cada bloco inteiro abre a função correspondente. */
#est-view .est-op-passos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-bottom:13px;padding:12px 14px;background:var(--op-superficie);border:1px solid var(--op-borda);border-radius:14px;box-shadow:0 4px 15px rgba(16,47,88,.06)}
#est-view .est-op-passos button{display:flex;align-items:center;gap:13px;min-width:0;padding:5px 12px;border:0;background:transparent;text-align:left;color:var(--op-tinta);font:inherit;cursor:pointer}
#est-view .est-op-passos button+button{border-left:1px solid var(--op-borda)}
#est-view .est-op-passos button>b{display:grid;place-items:center;flex:0 0 40px;height:40px;border-radius:50%;background:#e7f0ff;color:#1261dd;font-size:18px}
#est-view .est-op-passos button span{min-width:0}
#est-view .est-op-passos strong{display:block;font-size:13px;line-height:1.25}
#est-view .est-op-passos small{display:block;margin-top:3px;color:var(--op-suave);font-size:11px;line-height:1.25}
#est-view .est-op-passos i{margin-left:auto;color:#2279f5;font-style:normal;font-size:25px}
#est-view .est-op-passos button:hover strong{color:var(--op-azul)}
#est-view .est-op-grid{display:grid;grid-template-columns:minmax(0,1.93fr) minmax(345px,1fr);gap:12px;align-items:start}
#est-view .est-op-lista,#est-view .est-op-lateral>section{min-width:0;background:var(--op-superficie);color:var(--op-tinta);border:1px solid var(--op-borda);border-radius:14px;box-shadow:0 5px 18px rgba(20,64,115,.06)}
#est-view .est-op-lista{padding:16px 17px 17px;min-height:445px}
#est-view .est-op-lista>header{display:flex;align-items:center;gap:12px;margin-bottom:13px}
#est-view .est-op-titulo-icone{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:10px;background:#2c75ef;color:#fff;box-shadow:0 4px 10px rgba(24,100,225,.22)}
#est-view .est-op-lista h3,#est-view .est-op-lateral h3{margin:0;color:var(--op-tinta);font-size:16px;line-height:1.2}
#est-view .est-op-lista header small{display:block;margin-top:4px;color:var(--op-suave);font-size:12px}
#est-view .est-op-lista>header>label{display:flex;align-items:center;gap:8px;margin-left:auto;color:var(--op-suave);font-size:11px}
#est-view .est-op-lista select{max-width:210px;min-width:135px;height:35px;padding:0 10px;border:1px solid var(--op-borda);border-radius:9px;background:var(--op-superficie);color:var(--op-tinta);font-weight:600}
#est-view .est-op-filtros{display:flex;align-items:center;gap:9px;margin-bottom:10px}
#est-view .est-op-categorias{display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:thin;flex:1}
#est-view .est-op-categorias button{flex:0 0 auto;border:1px solid var(--op-borda);border-radius:999px;padding:7px 10px;background:var(--op-superficie);color:var(--op-suave);font:inherit;font-size:11px;cursor:pointer}
#est-view .est-op-categorias button.ativo{border-color:#2a7af4;background:#2b78ef;color:#fff}
#est-view .est-op-categorias b{margin-left:3px;padding:2px 5px;border-radius:999px;background:var(--op-claro);color:var(--op-azul)}
#est-view .est-op-categorias .ativo b{background:rgba(255,255,255,.18);color:#fff}
#est-view .est-op-busca{display:flex;align-items:center;gap:6px;flex:0 1 205px;min-width:130px;padding:0 9px;height:34px;border:1px solid var(--op-borda);border-radius:9px;background:var(--op-claro);color:var(--op-suave)}
#est-view .est-op-busca input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--op-tinta);font:inherit;font-size:11px}
#est-view .est-op-tabela-rola{max-height:425px;overflow:auto;scrollbar-width:thin}
#est-view .est-op-tabela-rola table{width:100%;border-collapse:collapse;font-size:12px}
#est-view .est-op-tabela-rola th{position:sticky;top:0;z-index:1;padding:10px 9px;background:var(--op-claro);color:var(--op-suave);text-align:left;white-space:nowrap;font-size:10px;text-transform:none}
#est-view .est-op-tabela-rola th:first-child{border-radius:7px 0 0 0}
#est-view .est-op-tabela-rola th:last-child{border-radius:0 7px 0 0}
#est-view .est-op-tabela-rola th button{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
#est-view .est-op-tabela-rola td{padding:6px 9px;border-bottom:1px solid var(--op-borda);color:var(--op-suave);white-space:nowrap}
#est-view .est-op-tabela-rola td:first-child{min-width:165px}
#est-view .est-op-tabela-rola td>b{color:var(--op-tinta)}
#est-view .est-op-tabela-rola tbody tr:hover{background:var(--op-claro)}
#est-view .est-op-tabela-rola tr[hidden]{display:none}
#est-view .est-op-produto{display:flex;align-items:center;gap:8px;max-width:240px;padding:0;border:0;background:transparent;color:var(--op-tinta);font:inherit;text-align:left;cursor:pointer}
#est-view .est-op-produto img,#est-view .est-op-alertas img{width:32px;height:32px;flex:0 0 32px;border-radius:7px;object-fit:cover}
#est-view .est-op-produto .est-av,#est-view .est-op-alertas .est-av{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;min-width:32px;min-height:32px;margin:0;padding:0;border-radius:7px;font-size:13px}
#est-view .est-op-produto b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#est-view .est-op-situacao{display:inline-block;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:700}
#est-view .est-op-situacao.normal{background:#e4f8ee;color:#078255}
#est-view .est-op-situacao.atencao{background:#fff1df;color:#b96a08}
#est-view .est-op-situacao.esgotado{background:#ffe8eb;color:#c62645}
#est-view .est-op-menu{width:30px;height:27px;border:0;border-radius:8px;background:var(--op-claro);color:var(--op-tinta);font-size:20px;line-height:15px;cursor:pointer}
#est-view .est-op-lateral{display:flex;flex-direction:column;gap:10px;min-width:0}
#est-view .est-op-lateral>section{padding:14px 15px}
#est-view .est-op-lateral section>header{display:flex;align-items:center;justify-content:space-between;gap:8px}
#est-view .est-op-lateral h3{display:flex;align-items:center;gap:8px;font-size:14px}
#est-view .est-op-lateral h3 svg{color:var(--op-azul)}
#est-view .est-op-unidade{position:relative;isolation:isolate;overflow:hidden;min-height:174px}
#est-view .est-op-unidade-foto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
#est-view .est-op-unidade.com-foto::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(17,32,50,.94),rgba(17,32,50,.7) 58%,rgba(17,32,50,.56))}
html[data-theme="light"] #est-view .est-op-unidade.com-foto::before{background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.85) 56%,rgba(255,255,255,.74))}
#est-view .est-op-no-ar{border-radius:999px;padding:5px 9px;background:#e8f8ef;color:#068355;font-size:10px;font-weight:700;white-space:nowrap}
#est-view .est-op-unidade-nome{display:flex;flex-direction:column;gap:4px;margin:24px 0 14px}
#est-view .est-op-unidade-nome b{font-size:18px;color:var(--op-tinta)}
#est-view .est-op-unidade-nome small{font-size:11px;color:var(--op-suave)}
#est-view .est-op-unidade-metricas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--op-borda);padding-top:12px}
#est-view .est-op-unidade-metricas span{min-width:0;padding:0 8px}
#est-view .est-op-unidade-metricas span:first-child{padding-left:0}
#est-view .est-op-unidade-metricas span+span{border-left:1px solid var(--op-borda)}
#est-view .est-op-unidade-metricas b{display:block;color:var(--op-tinta);font-size:15px;white-space:nowrap}
#est-view .est-op-unidade-metricas small{display:block;color:var(--op-suave);font-size:10px;line-height:1.3}
#est-view .est-op-alertas header button{border:0;background:transparent;color:var(--op-azul);font:inherit;font-size:11px;font-weight:700;cursor:pointer}
#est-view .est-op-alertas ul{list-style:none;margin:10px 0 0;padding:0}
#est-view .est-op-alertas li+li{border-top:1px solid var(--op-borda)}
#est-view .est-op-alertas li button{display:flex;align-items:center;gap:8px;width:100%;padding:6px 0;border:0;background:transparent;text-align:left;font:inherit;cursor:pointer}
#est-view .est-op-alertas li button span{min-width:0;flex:1}
#est-view .est-op-alertas li button b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--op-tinta);font-size:11px}
#est-view .est-op-alertas li button small{display:block;color:var(--op-suave);font-size:10px}
#est-view .est-op-alertas li button em{min-width:70px;color:#d13a55;text-align:right;font-size:10px;font-style:normal;font-weight:700}
#est-view .est-op-alertas li button em i{display:block;margin-top:5px;height:4px;border-radius:5px;background:var(--op-claro)}
#est-view .est-op-alertas li button em u{display:block;height:4px;border-radius:5px;background:#ec4659}
#est-view .est-op-sem-alerta{color:var(--op-suave);font-size:12px}
#est-view .est-op-acoes>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:10px}
#est-view .est-op-acoes>div button,#est-view .est-op-acoes details button{min-height:37px;padding:5px;border:1px solid var(--op-borda);border-radius:9px;background:var(--op-claro);color:var(--op-azul);font:inherit;font-size:10px;font-weight:700;cursor:pointer}
#est-view .est-op-acoes>div button:hover,#est-view .est-op-acoes details button:hover{border-color:var(--op-azul)}
#est-view .est-op-acoes details{margin-top:9px;color:var(--op-suave);font-size:11px}
#est-view .est-op-acoes details summary{cursor:pointer}
#est-view .est-op-acoes details button{margin:5px 5px 0 0;padding:5px 9px}
#est-view .est-op-ver-analises{display:block;margin:13px auto;padding:9px 16px;border:1px solid var(--op-borda);border-radius:9px;background:var(--op-superficie);color:var(--op-azul);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
@media(max-width:1100px){#est-view .est-op-grid{grid-template-columns:minmax(0,1fr)}#est-view .est-op-lateral{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#est-view .est-op-acoes{grid-column:1/-1}#est-view .est-op-passos{grid-template-columns:repeat(2,minmax(0,1fr))}#est-view .est-op-passos button:nth-child(3){border-left:0}}
@media(max-width:760px){#est-view .est-capa.com-indicadores{margin:5px;padding:17px}#est-view .est-capa.com-indicadores .est-capa-kpi{min-height:78px;padding-left:69px}#est-view .est-capa.com-indicadores .est-capa-kpi:first-child{grid-column:1/-1}#est-view .est-op-passos{grid-template-columns:1fr;padding:6px}#est-view .est-op-passos button+button{border-left:0;border-top:1px solid var(--op-borda)}#est-view .est-op-lateral{display:flex}#est-view .est-op-filtros{flex-wrap:wrap}#est-view .est-op-busca{flex:1 1 100%}#est-view .est-op-lista>header{flex-wrap:wrap}#est-view .est-op-lista>header>label{width:100%;margin-left:0}#est-view .est-op-lista>header>label select{flex:1;max-width:none}#est-view .est-op-tabela-rola{overflow-x:auto}}