/* Portal Comercial · Mundo de LED
   Cores do manual de marca: marinho #123955, azul #0060AE, ciano #0089B9, verde #00C756.
   Títulos em fonte arredondada (Nunito, no lugar da All Round Gothic); textos em Inter (no lugar da Articulat CF). */
:root {
  color-scheme: light;
  --marinho: #123955; --azul: #0060AE; --ciano: #0089B9; --verde: #00C756;
  --fundo: #F2F5F8; --sup: #FFFFFF; --sup2: #F7F9FB; --sup3: #EEF3F7;
  --zebra: #EBF2F9; --zebra-foco: #DCE9F5;
  --tinta: #0E1B2A; --tinta2: #475869; --muda: #6F8193;
  --linha: #E3E9EF; --borda: #D8E0E8; --trilho: #E4EAF0;
  --acento: #0060AE; --acento-sup: #E6F0FA; --link: #0060AE;
  --ok: #00813A; --ok-sup: #E2F6EA; --alerta: #A84B05; --alerta-sup: #FDF0E2;
  --perigo: #C0281C; --perigo-sup: #FCEBE9; --info: #0B6E99; --info-sup: #E4F3F9;
  --bronze: #A3622A; --prata: #7A8794; --ouro: #B08A12; --diamante: #0089B9;
  --ouro-escuro: #7A5C00;  /* texto "★ Publicidade" (11/10) */
  --t-va: #0060AE; --t-for: #0089B9; --t-sp: #00B04C; --t-central: #9AAABA;
  --sombra: 0 1px 2px rgba(18, 57, 85, .06), 0 4px 14px rgba(18, 57, 85, .06);
  --raio: 16px; --raio-m: 12px; --raio-p: 8px;
  --fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-tit: 'Nunito', 'Inter', system-ui, sans-serif;
}
/* Tema claro é o padrão (decisão do usuário em 09/10/2026), mesmo com o aparelho no modo escuro.
   O escuro só entra quando a pessoa escolhe no botão do topo (fica guardado no navegador dela). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --fundo: #08131D; --sup: #0F1E2C; --sup2: #132536; --sup3: #172C40;
  --zebra: #172D42; --zebra-foco: #203B57;
  --tinta: #E9EFF5; --tinta2: #A9B8C7; --muda: #7F91A3;
  --linha: #1C3247; --borda: #24405A; --trilho: #1E3448;
  --acento: #3D9BE9; --acento-sup: #12304A; --link: #6CB4F0;
  --ok: #3DDC84; --ok-sup: #0F3324; --alerta: #F5A94A; --alerta-sup: #3A2810; --perigo: #FF7A6E; --perigo-sup: #3D1714;
  --info: #5CC3EC; --info-sup: #0F2E3D;
  --bronze: #D08B4F; --prata: #A9B6C2; --ouro: #E2BC3D; --diamante: #4CC3EC;
  --ouro-escuro: #E8C04A;  /* no fundo escuro, o dourado precisa ser claro para ler */
  --t-va: #3D9BE9; --t-for: #28B9DF; --t-sp: #2FD178; --t-central: #5E7488;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 15px/1.45 var(--fonte); }
h1, h2, h3 { font-family: var(--fonte-tit); letter-spacing: -.01em; margin: 0; }
a { color: var(--link); }
button, input, select { font: inherit; color: inherit; }
.carregando { display: grid; place-items: center; min-height: 60vh; color: var(--muda); }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--ciano); outline-offset: 2px; }

/* ---------- logo horizontal (desenhado na página) ---------- */
.logo-h { display: block; width: auto; overflow: visible; }
.logo-h.marinho { color: var(--marinho); }
.logo-h.branco { color: #fff; }
.logo-h .logo-letra, .logo-h .logo-simbolo path { fill: currentColor; }
.logo-h.branco .logo-simbolo path { fill: var(--verde); }
.logo-h.anima .logo-simbolo path { animation: led 6s ease-in-out infinite; }
@keyframes led { 0%, 64%, 100% { opacity: 1; } 72% { opacity: .18; } 82% { opacity: 1; } }

/* ---------- entrada: fundo claro com luzes da marca se movendo (manual: azul, ciano, marinho) ---------- */
.entrada {
  /* a tela de entrada é sempre clara, como a peça da marca */
  color-scheme: light; --sup: rgba(255, 255, 255, .80); --sup2: #FFFFFF; --tinta: #0E1B2A; --tinta2: #475869;
  --muda: #6F8193; --borda: #D3DDE6; --alerta: #A84B05; --alerta-sup: #FDF0E2; --perigo: #C0281C; --perigo-sup: #FCEBE9;
  color: var(--tinta); position: relative; overflow: hidden; isolation: isolate;
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 28px 16px; background: #F4F6F8;
}
.luzes {
  position: absolute; inset: -40px; z-index: -1; pointer-events: none;
  /* profundidade: no computador as luzes acompanham de leve o mouse (--mx/--my vêm do app.js) */
  transform: translate3d(calc(var(--mx, 0) * -36px), calc(var(--my, 0) * -28px), 0); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
/* painel de LED: pontos acendendo em ondas (desenhados no app.js); some perto do cartão para não atrapalhar a leitura */
.leds {
  position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 34% 46% at 50% 50%, transparent 55%, #000 100%);
  mask-image: radial-gradient(ellipse 34% 46% at 50% 50%, transparent 55%, #000 100%);
}
/* um brilho passa pelo botão de entrar de tempos em tempos */
.entrada .btn.primario { position: relative; overflow: hidden; isolation: isolate; }
.entrada .btn.primario::after {
  content: ''; position: absolute; top: -10%; bottom: -10%; left: -60%; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent); transform: skewX(-20deg);
  animation: brilho 5.5s ease-in-out 1.2s infinite;
}
@keyframes brilho { 0%, 72% { left: -60%; } 100% { left: 130%; } }
.luz { position: absolute; border-radius: 50%; will-change: transform; animation: deriva 24s ease-in-out infinite alternate; }
.luz.l1 { width: 70vmax; height: 70vmax; right: -24vmax; top: -34vmax; animation-duration: 27s;
  background: radial-gradient(closest-side, #040D24 0%, #0A1B45 42%, rgba(10, 27, 69, .55) 66%, rgba(10, 27, 69, 0) 100%); }
.luz.l2 { width: 60vmax; height: 60vmax; right: -10vmax; top: -6vmax; animation-duration: 22s; animation-delay: -7s;
  background: radial-gradient(closest-side, #0757D6 0%, #0A6FD8 38%, rgba(0, 96, 174, .45) 66%, rgba(0, 96, 174, 0) 100%); }
.luz.l3 { width: 64vmax; height: 64vmax; right: -18vmax; bottom: -30vmax; animation-duration: 25s; animation-delay: -12s;
  background: radial-gradient(closest-side, #00B2EE 0%, #1CC0F0 40%, rgba(0, 178, 238, .4) 68%, rgba(0, 178, 238, 0) 100%); }
.luz.l4 { width: 52vmax; height: 52vmax; left: 30vw; bottom: -32vmax; animation-duration: 29s; animation-delay: -4s;
  background: radial-gradient(closest-side, #8DE6F3 0%, #B5EFF7 46%, rgba(181, 239, 247, .35) 70%, rgba(181, 239, 247, 0) 100%); }
.grao {
  position: absolute; inset: 0; opacity: .35; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@keyframes deriva {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-5vmax, 4vmax, 0) scale(1.08); }
  100% { transform: translate3d(4vmax, -3vmax, 0) scale(.95); }
}
.entrada-caixa { width: 100%; max-width: 440px; animation: surgir .7s ease-out both; }
@keyframes surgir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.entrada-marca { text-align: center; margin: 0 0 22px; }
.entrada-marca .logo-h { height: 42px; margin: 0 auto; }
.entrada-marca p { margin: 12px 0 0; font-family: var(--fonte-tit); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 12.5px; color: var(--marinho); opacity: .75; }
.entrada-cartao {
  background: var(--sup); border: 1px solid rgba(255, 255, 255, .75); border-radius: 22px; padding: 26px 24px;
  box-shadow: 0 24px 60px rgba(4, 13, 36, .16), 0 2px 8px rgba(4, 13, 36, .06);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
}
.entrada-cartao h1 { font-size: 22px; margin-bottom: 4px; color: var(--marinho); }
.entrada-cartao .sub { color: var(--tinta2); margin: 0 0 18px; }
@media (max-width: 600px) {  /* no celular o topo fica claro (logo marinho) e as luzes vêm de baixo e da direita */
  .luz.l1 { top: auto; bottom: -46vmax; right: -38vmax; }
  .luz.l2 { top: 34vh; right: -34vmax; }
  .luz.l3 { bottom: -26vmax; right: -24vmax; }
  .luz.l4 { left: -24vw; bottom: -36vmax; }
  .entrada-marca .logo-h { height: 30px; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .luz, .logo-h.anima .logo-simbolo path, .entrada-caixa, .icone-btn.girando svg, .entrada .btn.primario::after { animation: none; }
  .luzes { transform: none; transition: none; }
}
.campo { display: grid; gap: 6px; margin-bottom: 14px; }
.campo label { font-weight: 600; font-size: 13.5px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 11px 12px; border-radius: var(--raio-p); border: 1px solid var(--borda);
  background: var(--sup2); color: var(--tinta);
}
.erro { background: var(--perigo-sup); color: var(--perigo); border-radius: var(--raio-p); padding: 9px 12px; margin: 0 0 12px; font-size: 14px; }
.aviso-demo { background: var(--alerta-sup); color: var(--alerta); border-radius: var(--raio-p); padding: 9px 12px; font-size: 13.5px; margin: 0 0 14px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent;
  border-radius: 10px; padding: 10px 16px; font-weight: 600; cursor: pointer; background: var(--sup2); color: var(--tinta);
  border-color: var(--borda); text-decoration: none; white-space: nowrap;
}
.btn:hover { filter: brightness(.97); }
.btn.primario { background: var(--azul); color: #fff; border-color: var(--azul); }
.btn.largo { width: 100%; padding: 12px 16px; }
.btn.pequeno { padding: 6px 10px; font-size: 13px; border-radius: 8px; }
.btn[disabled] { opacity: .55; cursor: default; }
.demo-grupo { margin: 4px 0 14px; }
.demo-grupo h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muda); margin: 0 0 8px; font-family: var(--fonte); }
.demo-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.demo-usuario {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--borda);
  background: var(--sup2); cursor: pointer; text-align: left;
}
.demo-usuario:hover { border-color: var(--azul); }
.demo-usuario small { display: block; color: var(--muda); font-size: 12px; }
.entrada-rodape { color: var(--tinta2); text-align: center; font-size: 12.5px; margin-top: 16px; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 20; color: #fff;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .08) 1.2px, transparent 1.4px) 0 0 / 16px 16px,
    linear-gradient(100deg, #0C2A40 0%, var(--marinho) 45%, #134A72 100%);
  box-shadow: 0 2px 10px rgba(5, 20, 35, .25);
}
.topo-linha { max-width: 1320px; margin: auto; display: flex; align-items: center; gap: 14px; padding: 10px 16px; }
.topo-logo { display: block; flex: none; }
.topo-logo .logo-h { height: 22px; }
.topo-logo .logo-h.so-simbolo { display: none; height: 28px; }
.topo-titulo { font-family: var(--fonte-tit); font-weight: 800; font-size: 15px; opacity: .92; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .25); white-space: nowrap; }
.topo-espaco { flex: 1; }
.topo select {
  background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px;
  padding: 7px 10px; font-weight: 600;
}
.topo select option { color: #0E1B2A; }
.usuario-chip { display: flex; align-items: center; gap: 9px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 3px 12px 3px 3px; }
.usuario-chip b { display: block; font-size: 13.5px; line-height: 1.15; }
.usuario-chip small { display: block; font-size: 11.5px; opacity: .8; line-height: 1.15; }
.topo .icone-btn {
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .2); color: #fff; border-radius: 10px;
  width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer;
}
.icone-btn.girando svg { animation: girar 1.1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.aviso-barra { background: var(--info-sup); color: var(--info); border-radius: 12px; padding: 9px 14px; font-size: 13.5px; font-weight: 500; margin: 0 0 14px; }
.aviso-barra[hidden] { display: none; }
.chip-nao-salvo[hidden] { display: none; }  /* 30/10: o .chip mostrava o aviso mesmo sem nada a salvar */
.abas { max-width: 1320px; margin: auto; display: flex; gap: 2px; padding: 0 10px; overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas button {
  background: none; border: 0; color: rgba(255, 255, 255, .78); padding: 10px 12px 11px; border-bottom: 3px solid transparent;
  font-weight: 600; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 7px;
}
.abas button[aria-selected="true"] { color: #fff; border-bottom-color: var(--verde); }
.contador { background: var(--perigo); color: #fff; border-radius: 999px; font-size: 11.5px; font-weight: 700; padding: 1px 7px; line-height: 1.5; }
.contador.zero { background: rgba(255, 255, 255, .2); }

/* ---------- conteúdo ---------- */
main { max-width: 1320px; margin: auto; padding: 18px 16px 40px; }
.cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.cabeca h1 { font-size: 24px; }
.cabeca .sub { color: var(--tinta2); margin: 2px 0 0; font-size: 14px; }
/* 22/10 (pedido do usuário): no orçamento, o Vendedor ao lado do título */
.cabeca.orc-cabeca { justify-content: flex-start; align-items: center; gap: 10px 28px; }
.orc-cab-vend { min-width: 0; flex: 0 1 300px; }
/* 22/10 (pedido do usuário: "melhore o desenho e coloque em uma linha"): o topo do orçamento numa faixa — o Voltar em pílula, o título com
   a situação num selo, o Vendedor compacto e as Cores à direita */
.cabeca.orc-cabeca { flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 14px; margin-bottom: 12px; background: var(--sup); border: 1px solid var(--linha);
  border-radius: 18px; box-shadow: var(--sombra); }
.orc-cab-volta { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px; border: 1px solid var(--borda); border-radius: 999px; background: var(--sup2);
  color: var(--tinta); font: 700 14px var(--fonte); white-space: nowrap; cursor: pointer; }
.orc-cab-volta:hover { border-color: var(--acento); color: var(--acento); }
.orc-cab-volta:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.orc-cab-tit { display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 18px; border-left: 1px solid var(--linha); }
.orc-cab-tit h1 { margin: 0; font-size: 22px; white-space: nowrap; }
.orc-cab-tit .sub { margin: 0; padding: 3px 11px; border-radius: 999px; background: var(--acento-sup); color: var(--acento); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.orc-visual-4 .orc-cab-tit .sub { background: color-mix(in srgb, var(--v4-rosa) 12%, transparent); color: var(--v4-rosa-tx); }
.orc-visual-4 .orc-cab-volta:hover { border-color: var(--v4-rosa); color: var(--v4-rosa-tx); }
.cabeca.orc-cabeca .orc-cab-vend { flex: 0 1 300px; padding-left: 18px; border-left: 1px solid var(--linha); }
.cabeca.orc-cabeca .orc-cab-vend .campo label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta2); }
.cabeca.orc-cabeca .orc-cab-vend .campo input { min-height: 38px; border-radius: 999px; padding: 6px 14px; }
@media (max-width: 860px) {
  .orc-cab-tit, .cabeca.orc-cabeca .orc-cab-vend { padding-left: 0; border-left: 0; }
  .orc-cab-tit h1 { font-size: 19px; white-space: normal; }
  .cabeca.orc-cabeca .orc-cab-vend { flex: 1 1 100%; }
}
.orc-cab-vend .campo { margin: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.orc-cab-vend .campo input { padding: 8px 12px; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtros select, .filtros input {
  background: var(--sup); border: 1px solid var(--borda); border-radius: 10px; padding: 7px 10px; color: var(--tinta);
}
.filtros label { font-size: 12.5px; color: var(--muda); display: grid; gap: 3px; }
.segmentos { display: inline-flex; background: var(--sup3); border-radius: 11px; padding: 3px; gap: 2px; }
.segmentos button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font-weight: 600; color: var(--tinta2); cursor: pointer; }
.segmentos button[aria-pressed="true"] { background: var(--sup); color: var(--tinta); box-shadow: var(--sombra); }

.grade { display: grid; gap: 14px; }
.grade.c2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.tile { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tile-rot { color: var(--tinta2); font-size: 13px; font-weight: 600; }
.tile-val { font-family: var(--fonte-tit); font-size: 27px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile-sub { color: var(--muda); font-size: 12.5px; }
.tile.destaque { background: linear-gradient(135deg, var(--marinho), var(--azul)); color: #fff; border: 0; }
.tile.destaque .tile-rot, .tile.destaque .tile-sub { color: rgba(255, 255, 255, .82); }
.tile.perigo .tile-val { color: var(--perigo); }
.tile-botao { font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.tile-botao:hover { border-color: var(--ciano); }
.tile-botao[aria-pressed="true"] { border-color: var(--azul); box-shadow: inset 0 0 0 2px var(--azul), var(--sombra); }
.tile-botao:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.cab-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tile button.tile-link { all: unset; cursor: pointer; color: var(--link); font-size: 12.5px; font-weight: 600; }

.cartao { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); margin-bottom: 14px; min-width: 0; }
.cartao-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 14px 16px 10px; }
.cartao-cab h2 { font-size: 17px; }
.cartao-cab .sub { color: var(--muda); font-size: 13px; margin: 2px 0 0; }
.submenu { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
/* Cartão de cabeçalho escuro (bloco "Impostos na venda" da Tabela de preços, como na planilha) */
.cartao.escuro .cartao-cab, .blocos-azuis .cartao > .cartao-cab { background: var(--marinho); color: #fff; border-radius: var(--raio) var(--raio) 0 0; padding-bottom: 12px; }
.cartao.escuro .cartao-cab .sub, .blocos-azuis .cartao > .cartao-cab .sub { color: rgba(255, 255, 255, .8); }
.cartao-corpo { padding: 4px 16px 16px; }
.vazio { color: var(--muda); padding: 14px 16px 18px; }
.nota { color: var(--muda); font-size: 12.5px; margin: 8px 0 0; }

/* medidores */
.meter { display: block; position: relative; height: 10px; border-radius: 999px; background: var(--trilho); overflow: hidden; }
.meter > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--azul); }
.meter.ok > span { background: var(--verde); }
.meter.pequeno { height: 6px; width: 90px; display: inline-block; vertical-align: middle; margin-right: 8px; }
.linha-meta { display: grid; grid-template-columns: 130px 1fr minmax(150px, auto); gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--linha); }
.linha-meta:first-child { border-top: 0; }
/* Vendas × meta por time: uma trilha de medalhas por time, lado a lado */
.times-medalhas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px 28px; }
.time-meta-cab { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.time-meta-cab b { font-family: var(--fonte-tit); font-size: 15px; font-weight: 800; }
.time-meta-cab span { font-family: var(--fonte-tit); font-size: 18px; font-weight: 900; color: var(--tinta); font-variant-numeric: tabular-nums; }
.time-meta-cab small { font-size: 12.5px; color: var(--muda); font-weight: 600; }
.meta-compacta .trilha { margin: 28px 20px 58px; }
.meta-compacta .medalha-valor .v-longo { display: none; }
.meta-compacta .medalha-valor .v-curto { display: inline; }
.linha-meta b { font-variant-numeric: tabular-nums; }
.linha-meta small { display: block; color: var(--muda); font-size: 12px; }

/* meta em degraus (até a Bronze, Prata, Ouro, Diamante) */
.degraus { display: flex; gap: 6px; padding: 12px 0 8px; }
.degrau { flex: 1 1 0; min-width: 0; display: grid; gap: 4px; }
.degrau-trilho { display: block; height: 14px; border-radius: 999px; background: var(--trilho); overflow: hidden; }
.degrau-cheio { display: block; height: 100%; border-radius: 999px; background: var(--azul); }
.degrau-cheio.Bronze { background: linear-gradient(90deg, var(--azul), var(--ciano)); }
.degrau-cheio.Prata { background: var(--prata); } .degrau-cheio.Ouro { background: var(--ouro); } .degrau-cheio.Diamante { background: var(--diamante); }
.degrau-nome { font-size: 12px; font-weight: 700; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.degrau-nome.Bronze { color: var(--bronze); } .degrau-nome.Prata { color: var(--prata); } .degrau-nome.Ouro { color: var(--ouro); } .degrau-nome.Diamante { color: var(--diamante); }
.degrau-valor { font-size: 11.5px; color: var(--muda); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.faixa { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--sup3); color: var(--tinta2); white-space: nowrap; }
.faixa::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.faixa.Bronze { color: var(--bronze); background: color-mix(in srgb, var(--bronze) 14%, transparent); }
.faixa.Prata { color: var(--prata); background: color-mix(in srgb, var(--prata) 16%, transparent); }
.faixa.Ouro { color: var(--ouro); background: color-mix(in srgb, var(--ouro) 16%, transparent); }
.faixa.Diamante { color: var(--diamante); background: color-mix(in srgb, var(--diamante) 14%, transparent); }

/* tabelas */
.tabela-busca { width: 100%; max-width: 320px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--borda); background: var(--sup2); }
.tabela-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { padding: 9px 12px; border-top: 1px solid var(--linha); text-align: left; white-space: nowrap; vertical-align: middle; }
thead th { border-top: 0; background: var(--sup2); color: var(--tinta2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; user-select: none; position: sticky; top: 0; }
th.asc::after { content: " ▲"; } th.desc::after { content: " ▼"; }
.dica { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 5px; border-radius: 50%;
  background: var(--acento-sup); color: var(--link); font: 700 11px/1 var(--fonte-tit); text-transform: none; cursor: help; vertical-align: 1px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.quebra { white-space: normal; min-width: 200px; max-width: 340px; line-height: 1.35; }
tr.linha-clica { cursor: pointer; }
.pedidos-tel { display: grid; gap: 10px; margin-top: 8px; }  /* 29/10: o andamento do pedido (o botão "Pedido" da extensão) */
.pedido-tel { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px; justify-items: start; }
.pedido-tel-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pedido-tel-frase { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--sup2); font-size: 13px; line-height: 1.45; }
.lista-leads-tel { display: grid; gap: 8px; margin-top: 10px; }  /* 29/10: o telefone com vários leads (a extensão no WhatsApp Web) */
.lista-leads-tel .lead-tel { display: grid; gap: 2px; width: 100%; text-align: left; justify-content: start; justify-items: start; white-space: normal; height: auto; padding: 10px 12px; }
.compra-custo-usd { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }  /* 29/10: o custo na China em US$ */
.compra-custo-reais { display: block; margin-top: 2px; }  /* 29/10: a linha inteira abre (Compras do sistema) */
tr.linha-clica:hover > td { background: var(--sup2); }
/* 12/10: colunas mais estreitas (Reativar clientes sem rolagem lateral); texto longo em até 2 linhas, inteiro no title */
td.quebra.col-estreita { min-width: 140px; max-width: 230px; }
td.col-acoes { white-space: normal; }
td.col-acoes .acoes-linha { max-width: 250px; margin-left: auto; }
.linhas-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cli-curto { white-space: nowrap; }
.cli-curto .cortado { display: inline-block; margin-left: 3px; padding: 0 5px; border-radius: 6px; background: var(--sup3); color: var(--tinta2); font-weight: 700; font-size: 11px; line-height: 15px; cursor: help; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.num-link { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
.num-link:hover, .num-link:focus-visible { outline: 2px solid var(--azul, #0060AE); outline-offset: 1px; }
.muda { color: var(--muda); }
/* Linhas alternadas (zebra) em todas as tabelas e listas longas — pedido do usuário (10/10/2026): uma linha clara, outra um
   pouco mais escura, para facilitar a leitura */
tbody tr:nth-child(even) > td, tbody tr:nth-child(even) > th { background: var(--zebra); }
tbody tr:hover > td, tbody tr:hover > th { background: var(--zebra-foco); }
/* Tabelas em cartões no celular (pedido do usuário em 11/10, aba Pedidos do vendedor): cada linha vira um bloco com
   "rótulo · valor", em vez da tabela larga com rolagem de lado */
@media (max-width: 600px) {
  .tabela-cartoes thead { display: none; }
  .tabela-cartoes table, .tabela-cartoes tbody, .tabela-cartoes tr { display: block; width: 100%; }
  .tabela-cartoes tr { padding: 10px 16px 12px; border-top: 1px solid var(--linha); }
  .tabela-cartoes tbody tr:nth-child(even) { background: var(--zebra); }
  .tabela-cartoes tbody tr > td { background: transparent !important; }
  .tabela-cartoes td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 3px 0; border: 0; white-space: normal; text-align: right; min-width: 0; max-width: none; }
  .tabela-cartoes td::before { content: attr(data-r); flex: none; color: var(--muda); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-align: left; }
  .tabela-cartoes td:not([data-r])::before { content: none; }
  .tabela-cartoes td:not([data-r]) { justify-content: flex-end; padding-top: 6px; }
  .tabela-cartoes td:first-child { font-weight: 700; font-size: 14.5px; }
  .tabela-cartoes td.vazio { justify-content: center; }
  .tabela-cartoes td .cli-curto { white-space: normal; }
}
/* Tabela zebrada (linhas alternadas em azul bem claro) — "Meses anteriores" */
.tabela-historico .mes-atual { margin-left: 8px; font-size: 11px; }
.mini-pct { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.mini-pct > :last-child { min-width: 42px; }
.mini-barra { width: 64px; height: 6px; border-radius: 999px; background: var(--trilho); overflow: hidden; display: inline-block; }
.mini-barra i { display: block; height: 100%; border-radius: 999px; background: var(--azul); }
.mini-barra.ok i { background: var(--ok); }
.pessoa { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pessoa b { font-weight: 600; }
.pessoa-link { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 9px; cursor: pointer; border-radius: 8px; }
.pessoa-link b { color: var(--link); }
.pessoa-link:hover b { text-decoration: underline; }
.pessoa-link:focus-visible { outline: 3px solid var(--ciano); outline-offset: 2px; }
.cor-ok { color: var(--ok); } .cor-alerta { color: var(--alerta); }
.media-time { color: var(--muda); font-size: 12.5px; }
.pessoa small { display: block; color: var(--muda); font-size: 12px; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--sup3); color: var(--tinta2); white-space: nowrap; }
.chip.ok { background: var(--ok-sup); color: var(--ok); }
.chip.alerta { background: var(--alerta-sup); color: var(--alerta); }
.chip.perigo { background: var(--perigo-sup); color: var(--perigo); }
.chip.info { background: var(--info-sup); color: var(--info); }
.pos { font-family: var(--fonte-tit); font-weight: 900; color: var(--muda); width: 22px; display: inline-block; }
.pos.p1 { color: var(--ouro); } .pos.p2 { color: var(--prata); } .pos.p3 { color: var(--bronze); }

/* avatar */
.avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; background: var(--azul); overflow: hidden; font-family: var(--fonte-tit); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.g { width: 76px; height: 76px; font-size: 26px; border: 3px solid rgba(255, 255, 255, .85); }
.avatar.p { width: 26px; height: 26px; font-size: 11px; }
.avatar.desenho { background: transparent; }
.avatar-svg { width: 100%; height: 100%; display: block; }
.avatar.xg { width: 132px; height: 132px; }
button.usuario-chip { font: inherit; color: inherit; cursor: pointer; text-align: left; }
button.usuario-chip:hover { background: rgba(255, 255, 255, .18); }
.avatar-botao { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; flex: none; }
.avatar-botao:focus-visible { outline: 3px solid var(--ciano); outline-offset: 2px; }
.avatar-lapis { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--marinho); font-size: 14px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.dlg-avatar { width: min(780px, calc(100vw - 24px)); }
.aviso-avatar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--sup); border: 1px solid var(--linha);
  border-left: 4px solid var(--ciano); border-radius: var(--raio); padding: 10px 14px; margin-bottom: 14px; box-shadow: var(--sombra); font-size: 14px; }
.aviso-avatar > span:nth-child(2) { flex: 1 1 260px; }
.aviso-avatar-botoes { display: flex; gap: 8px; }
.av-editor { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: start; }
.av-previa { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.av-previa .btn { width: 100%; }
.av-grupos { display: flex; flex-direction: column; gap: 12px; max-height: 58vh; overflow-y: auto; padding: 2px 4px 2px 2px; }
.av-titulo { display: block; font-size: 12px; font-weight: 700; color: var(--tinta2); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.av-opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.av-op { border: 2px solid var(--linha); background: var(--sup); padding: 0; cursor: pointer; overflow: hidden; }
.av-op[aria-pressed="true"] { border-color: var(--azul); box-shadow: 0 0 0 2px var(--azul); }
.av-op:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.av-mini { width: 50px; height: 50px; border-radius: 12px; }
.av-mini svg { width: 100%; height: 100%; display: block; }
.av-cor { width: 30px; height: 30px; border-radius: 50%; }
@media (max-width: 560px) {
  .av-editor { grid-template-columns: 1fr; }
  .avatar.xg { width: 104px; height: 104px; }
  .av-grupos { max-height: none; }
}

/* urgentes */
.resumo-urg { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.urg-card { all: unset; box-sizing: border-box; cursor: pointer; background: var(--sup); border: 1px solid var(--linha); border-left: 5px solid var(--muda); border-radius: var(--raio-m); padding: 10px 12px; box-shadow: var(--sombra); display: grid; gap: 2px; }
.urg-card b { font-family: var(--fonte-tit); font-size: 24px; font-weight: 900; }
.urg-card span { font-size: 12.5px; color: var(--tinta2); font-weight: 600; }
.urg-card.perigo { border-left-color: var(--perigo); } .urg-card.perigo b { color: var(--perigo); }
.urg-card.alerta { border-left-color: var(--alerta); } .urg-card.alerta b { color: var(--alerta); }
.urg-card.info { border-left-color: var(--info); } .urg-card.info b { color: var(--info); }
.urg-card.zero b { color: var(--muda); }
.urg-card[aria-pressed="true"] { outline: 2px solid var(--azul); }
.urg-grupo .cartao-cab h2 { display: flex; align-items: center; gap: 8px; }
.ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--muda); flex: none; }
.ponto.perigo { background: var(--perigo); } .ponto.alerta { background: var(--alerta); } .ponto.info { background: var(--info); }
.urg-lista { list-style: none; margin: 0; padding: 0; }
.urg-item { display: grid; grid-template-columns: minmax(150px, 190px) minmax(160px, 1.2fr) minmax(200px, 2fr) auto; gap: 6px 14px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--linha); }
.urg-item > * { min-width: 0; }  /* deixa o nome do cliente cortar em vez de passar da tela */
.urg-item .cli b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.urg-item .cli a, .urg-item .cli span { font-size: 12.5px; }
.urg-item .det { color: var(--tinta2); font-size: 13.5px; }
.urg-item .det small { display: block; color: var(--muda); font-size: 12px; }
.urg-item .acoes { display: flex; gap: 6px; justify-content: flex-end; }
.mais { display: block; width: 100%; padding: 10px; border: 0; border-top: 1px solid var(--linha); background: none; color: var(--link); font-weight: 600; cursor: pointer; border-radius: 0 0 var(--raio) var(--raio); }

/* página do vendedor */
.heroi {
  border-radius: 20px; color: #fff; padding: 20px; margin-bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .10) 1.4px, transparent 1.6px) 0 0 / 18px 18px,
    linear-gradient(125deg, var(--marinho) 0%, var(--azul) 70%, var(--ciano) 100%);
  box-shadow: var(--sombra);
}
.heroi h1 { font-size: 26px; }
.heroi p { margin: 2px 0 0; opacity: .88; }
.heroi .faixa { background: rgba(255, 255, 255, .92); }
.heroi-direita { margin-left: auto; text-align: right; }
.heroi-direita b { font-family: var(--fonte-tit); font-size: 30px; font-weight: 900; display: block; line-height: 1.1; }
.heroi-direita small { opacity: .85; }
.tudo-certo { display: flex; align-items: center; gap: 10px; color: var(--ok); font-weight: 600; padding: 16px; }
.pedidos-lista { list-style: none; margin: 0; padding: 0; }
.pedidos-lista li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 16px; border-top: 1px solid var(--linha); }
.pedidos-lista li small { color: var(--muda); font-size: 12.5px; }
.pedidos-lista li b { font-variant-numeric: tabular-nums; text-align: right; }
.pedidos-lista li:nth-child(even), .lista-param li:nth-child(even), .leads-dia li:nth-child(even), .catalogo > li:nth-child(even) { background: var(--zebra); }

/* metas e tabela de preços (administração) */
.tabela-metas td { padding: 6px 10px; }
.tabela-metas .grupo-titulo th { background: var(--sup3); color: var(--marinho); font-family: var(--fonte-tit); font-size: 14px; text-transform: none; letter-spacing: 0; position: static; cursor: default; }
.tabela-metas .subtotal td { background: var(--sup2); color: var(--tinta2); font-size: 13px; }
.tabela-metas tfoot th, .tabela-metas tfoot td { background: var(--sup2); border-top: 2px solid var(--borda); font-weight: 800; text-transform: none; position: static; }
.entrada-valor { width: 120px; text-align: right; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--borda); background: var(--sup2); color: var(--tinta); font-variant-numeric: tabular-nums; }
.entrada-cargo { width: 190px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--borda); background: var(--sup2); color: var(--tinta); }
.acoes-form { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 12px; }
.acoes-form select { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--borda); background: var(--sup); color: var(--tinta); }
.faixa-aviso { background: var(--alerta-sup); color: var(--alerta); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; margin: 0 0 14px; }

/* seção Leads da Visão geral */
.secao-titulo { font-size: 20px; margin: 22px 0 10px; }
.tabela-dias tbody th, .tabela-dias tfoot th { text-align: left; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 13.5px; background: none; position: static; cursor: default; color: var(--tinta); }
.tabela-dias tfoot td, .tabela-dias tfoot th { font-weight: 800; border-top: 2px solid var(--borda); background: var(--sup2); }
.tabela-dias tr.fim-de-semana th, .tabela-dias tr.fim-de-semana td { color: var(--muda); background: var(--sup2); }
.linha-origem { display: grid; grid-template-columns: minmax(120px, 1.3fr) 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--linha); }
.linha-origem:first-child { border-top: 0; }
.origem-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.origem-num { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.origem-num small { color: var(--muda); }
.destaque-num { margin: 0 0 8px; color: var(--tinta2); }
.destaque-num b { font-family: var(--fonte-tit); font-size: 22px; font-weight: 900; color: var(--tinta); }
.dias-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 8px; }
.dias-semana small { display: block; text-align: center; color: var(--tinta2); font-size: 12px; margin-top: 3px; }

/* gráfico de barras (leads por dia) */
.grafico { width: 100%; height: auto; display: block; }
.grafico text { fill: var(--muda); font-size: 11px; font-family: var(--fonte); }
.grafico .grade-linha { stroke: var(--linha); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--tinta2); margin: 0 0 6px; padding: 0; list-style: none; }
.legenda li { display: flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.barra-empilhada { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--trilho); margin: 6px 0 10px; }
.barra-empilhada span { display: block; height: 100%; }

/* administração */
.formulario { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 14px; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 6px 0; }
.opcoes label { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14px; }
/* 30/10 (pedido do usuário: "a janela é estreita e o usuário precisa usar a barra de rolagem para o lado"): a janela padrão passou de
   640 para 860 px e a que tem tabela abre com 1100 px (as de tamanho próprio, como as pequenas de confirmar, continuam como estão);
   o app.js ainda alarga a janela até caber o que passar para o lado (até a largura da tela) */
dialog { border: 0; border-radius: 18px; padding: 0; width: min(860px, calc(100vw - 24px)); max-width: calc(100vw - 24px); background: var(--sup); color: var(--tinta); box-shadow: 0 24px 60px rgba(5, 20, 35, .45); }
dialog:has(table) { width: min(1100px, calc(100vw - 24px)); }
dialog::backdrop { background: rgba(8, 19, 29, .55); }
/* 22/10 (pedido do usuário): a foto da montagem (feita com IA ou do pedido) abre grande na própria página */
dialog.dlg-foto { width: fit-content; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); padding: 10px; }
dialog.dlg-foto[open] { display: grid; gap: 10px; justify-items: center; overflow: auto; }
.dlg-foto img { display: block; max-width: 100%; max-height: calc(100vh - 110px); width: auto; height: auto; border-radius: 12px; }
.dlg-foto-acoes { display: flex; gap: 10px; justify-content: flex-end; width: 100%; }
.dialogo-cab { padding: 18px 20px 6px; }
.dialogo-corpo { padding: 8px 20px 4px; }
.dialogo-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 18px; }
.param-titulo { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muda); margin: 14px 0 4px; font-family: var(--fonte); }
.param-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 9px 0; border-top: 1px solid var(--linha); }
.param-controles { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--tinta2); font-size: 13.5px; }
.param-controles input[type=number] { width: 84px; }
.param-controles input { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--borda); background: var(--sup2); color: var(--tinta); }
.param-controles input:disabled { opacity: .45; }
.param-check { display: inline-flex; align-items: center; gap: 5px; }
.lista-param { list-style: none; margin: 0; padding: 0; }
.lista-param li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--linha); }
.lista-param li:first-child { border-top: 0; }
.rodape { color: var(--muda); font-size: 11px; text-align: center; padding: 6px 16px 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* 23/10: menor, numa linha */
@media (max-width: 860px) { .rodape { white-space: normal; } }

@media (max-width: 760px) {
  .topo-titulo, .usuario-chip div { display: none; }
  .usuario-chip { padding: 3px; }
  .topo-linha { gap: 6px; padding: 8px 12px; }
  .topo-logo .logo-h { display: none; }
  .topo-logo .logo-h.so-simbolo { display: block; }
  .topo select { padding: 6px 4px; font-size: 13.5px; max-width: 138px; }
  .topo .icone-btn { width: 34px; height: 34px; }
  main { padding: 14px 12px 32px; }
  .cabeca h1 { font-size: 21px; }
  .tile-val { font-size: 23px; }
  .linha-meta { grid-template-columns: 1fr; gap: 4px; }
  .urg-item { grid-template-columns: 1fr auto; }
  .urg-item .vend { grid-column: 1 / -1; }
  .urg-item .det { grid-column: 1 / -1; order: 3; }
  .heroi-direita { margin-left: 0; text-align: left; width: 100%; }
  .grade.c2 { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .topo .tema-btn { display: none; }
  .degrau-valor { font-size: 10.5px; }
}
@media print {
  .topo, .filtros, .mais, .acoes { display: none !important; }
  body { background: #fff; }
  .cartao, .tile { box-shadow: none; break-inside: avoid; }
}

/* Consulta de dono do cliente (SDR) */
.consulta-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.consulta-form input { flex: 1 1 220px; max-width: 320px; font-size: 18px; padding: 10px 12px; }
.consulta-resultado p { margin: 6px 0; }
.consulta-resultado .chip { font-size: 14px; padding: 4px 12px; }
.consulta-dono { margin: 8px 0; }
.consulta-hist { list-style: none; margin: 0; padding: 0; }
/* 19/10: a consulta da inscrição estadual não funcionou */
.aviso-ie-falhou { margin: 8px 0; padding: 10px 12px; border-radius: var(--raio-p); border: 2px solid var(--perigo); background: var(--perigo-sup); color: var(--tinta); font-size: 14px; }
.aviso-ie-falhou b { color: var(--perigo); font-size: 15px; letter-spacing: .02em; }
.consulta-hist li { margin: 4px 0; }
.consulta-hist b { font-variant-numeric: tabular-nums; margin-right: 2px; }

/* ---------- sino de avisos ---------- */
.sino-btn { position: relative; }
.sino-num {
  position: absolute; top: -6px; right: -6px; background: var(--perigo); color: #fff; border-radius: 999px; font-size: 10.5px;
  font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; line-height: 1;
}
.sino-num[hidden] { display: none; }
.avisos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 60vh; overflow-y: auto; }
.aviso-item {
  display: grid; gap: 2px; width: 100%; text-align: left; background: var(--sup2); border: 1px solid var(--linha);
  border-radius: 12px; padding: 10px 12px; color: var(--tinta); cursor: pointer; font: inherit;
}
.aviso-item[disabled] { cursor: default; }
.avisos-lista li.novo .aviso-item { border-color: var(--azul); background: var(--info-sup); }
.avisos-lista .aviso-link { margin: 4px 0 2px 12px; }
/* avisos vermelhos (16/10): saldo crítico do SintegraWS e serviço com problema */
.avisos-lista li.vermelho .aviso-item { border-color: var(--perigo); background: var(--perigo-sup); }
.avisos-lista li.vermelho .aviso-item b, .notif-lista li.vermelho b { color: var(--perigo); }
.notif-lista li.vermelho { border-left: 4px solid var(--perigo); background: var(--perigo-sup); }  /* 16/10: o link do aviso (ex.: comprar consultas do SintegraWS) */
.aviso-item span { font-size: 13.5px; color: var(--tinta2); }
.aviso-item small { font-size: 12px; color: var(--muda); }

/* ---------- novo cliente (vendedor) e pedidos de lead direto (Central) ---------- */
.novo-form .btn.primario { margin-top: 2px; }
.novo-texto { font-size: 15px; }
.novo-etapa2 { display: grid; gap: 12px; margin-top: 14px; }
.novo-etapa2:empty { display: none; }
.novo-etapa2 .novo-resultado { padding: 12px 14px; border-radius: 12px; background: var(--sup2); border: 1px solid var(--linha); }
.novo-acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* Leads do dia (aba Leads do vendedor) */
.dia-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.dia-nav .btn { min-width: 40px; }
.dia-nav input[type=date] { padding: 8px 10px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--sup); color: var(--tinta); font: inherit; }
.leads-dia { list-style: none; margin: 0 -16px; padding: 0; }
.leads-dia li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--linha); }
.ld-hora { font-family: var(--fonte-tit); font-weight: 900; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--tinta); }
.ld-linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 2px; font-size: 13px; }
.consulta-form .campo { margin-bottom: 0; flex: 1 1 220px; max-width: 320px; }
.pedidos-fila { display: grid; gap: 12px; padding: 4px 16px 16px; }
.pedido-cartao { border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; background: var(--sup2); }
.pedido-cartao.atrasado { border-color: var(--perigo); }
.pedido-cartao p { margin: 0; }
.pedido-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pedido-decisao { display: grid; gap: 8px; }
.pedido-decisao input, .pedido-decisao select {
  padding: 10px 12px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--sup); color: var(--tinta); font: inherit;
}
.pedido-botoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.pedido-dono { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pedido-dono select { min-width: 140px; }
.aviso-sino { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--info-sup); color: var(--info); flex: none; }
.push-caixa { border-top: 1px solid var(--linha); margin-top: 12px; padding-top: 10px; display: grid; gap: 8px; justify-items: start; }
.push-caixa .nota { margin: 0; }

/* ---------- portal do vendedor: Pendências, Leads, Pedidos ---------- */
.secao-vend { margin: 6px 0 4px; }
.secao-tit { font-size: 18px; margin: 18px 0 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.secao-tit small { font-family: var(--fonte); font-size: 13px; font-weight: 500; color: var(--muda); }
.link-btn { background: none; border: 0; padding: 0; color: var(--link); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.nota-pend { margin: 4px 2px 18px; }
@media (max-width: 760px) {
  /* celular: botões do item numa linha embaixo (não passam da borda) e quadros do topo da Pendências em 2 colunas */
  .urg-item { grid-template-columns: 1fr auto !important; }  /* vale também para a largura fixa posta no próprio item */
  .urg-item .acoes { grid-column: 1 / -1; order: 4; justify-content: flex-start; flex-wrap: wrap; }
  .tiles.dois-col { grid-template-columns: 1fr 1fr; }
  .tiles.dois-col .tile-val { font-size: 21px; }
}

/* ---------- meta do vendedor: trilha com medalhas (Bronze, Prata, Ouro, Diamante) ---------- */
.meta-v2 { display: grid; gap: 16px; padding-top: 6px; }
.meta-topo { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.meta-rot { display: block; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muda); }
.meta-valor { display: block; font-family: var(--fonte-tit); font-size: 25px; font-weight: 900; color: var(--tinta); line-height: 1.15; margin-top: 2px; }
.meta-sub { display: block; font-size: 13px; color: var(--tinta2); margin-top: 2px; }
.meta-anel {
  --p: 0; flex: none; width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--azul), var(--ciano) calc(var(--p) * 1%), var(--trilho) 0);
}
.meta-anel::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--sup); }
.meta-anel span { position: relative; text-align: center; line-height: 1.05; }
.meta-anel b { display: block; font-family: var(--fonte-tit); font-size: 21px; font-weight: 900; color: var(--azul); }
.meta-anel small { font-size: 11px; color: var(--muda); font-weight: 600; }

.trilha { position: relative; margin: 30px 20px 62px; }
.trilha-base { position: relative; height: 14px; border-radius: 999px; background: var(--trilho); box-shadow: inset 0 1px 2px rgba(4, 13, 36, .08); }
.trilha-cheio {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; overflow: hidden;
  background: linear-gradient(90deg, var(--marinho), var(--azul) 55%, var(--ciano));
}
.trilha-cheio::after {  /* brilho que corre pela parte já vendida */
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); animation: correr 3.4s ease-in-out infinite;
}
@keyframes correr { 65%, 100% { transform: translateX(100%); } }
.trilha-voce {
  position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--azul);
  transform: translate(-50%, -50%); box-shadow: 0 2px 8px rgba(0, 96, 174, .4); z-index: 2;
}
.trilha-voce::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--ciano); opacity: 0; animation: onda 2.4s ease-out infinite; }
@keyframes onda { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.trilha-proj {  /* faixa tracejada: cobre a trilha inteira, embaixo da parte já vendida */
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 999px;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ciano) 38%, var(--trilho)) 0 7px, color-mix(in srgb, var(--ciano) 26%, var(--trilho)) 7px 14px);
}
.medalha { position: absolute; top: 7px; width: 96px; transform: translate(-50%, -18px); display: grid; justify-items: center; text-align: center; z-index: 3; }
.medalha.ultima { justify-items: end; text-align: right; transform: translate(calc(-100% + 18px), -18px); }
.medalha-icone {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--sup);
  border: 2px solid var(--borda); color: var(--muda); box-shadow: var(--sombra); transition: transform .2s;
}
.medalha-icone svg { width: 17px; height: 17px; }
.medalha-icone { position: relative; }
.medalha-ok {  /* selo verde de "conquistada" */
  position: absolute; right: -5px; bottom: -4px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ok); color: #fff; border: 2px solid var(--sup); box-shadow: 0 1px 3px rgba(4, 13, 36, .25);
}
.medalha-icone .medalha-ok svg { width: 9px; height: 9px; stroke-width: 3.4; }
.medalha:hover .medalha-icone { transform: scale(1.08); }
.medalha-nome { font-size: 12px; font-weight: 800; margin-top: 5px; line-height: 1.1; }
.medalha-valor { font-size: 11.5px; color: var(--muda); font-variant-numeric: tabular-nums; white-space: nowrap; }
.medalha-valor .v-curto { display: none; }
.medalha-bonus { font-size: 11px; font-weight: 700; color: var(--tinta2); white-space: nowrap; margin-top: 1px; }
.medalha-bonus .v-curto { display: none; }
.medalha.ok .medalha-bonus { color: var(--ok); }
.medalha.est .medalha-icone { border-style: dashed; }
.trilha.com-bonus { margin-bottom: 78px; }
.meta-bonus .meta-caixas { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.medalha.Bronze .medalha-nome { color: var(--bronze); } .medalha.Prata .medalha-nome { color: var(--prata); }
.medalha.Ouro .medalha-nome { color: var(--ouro); } .medalha.Diamante .medalha-nome { color: var(--diamante); }
.medalha.Bronze .medalha-icone { color: var(--bronze); border-color: color-mix(in srgb, var(--bronze) 45%, transparent); }
.medalha.Prata .medalha-icone { color: var(--prata); border-color: color-mix(in srgb, var(--prata) 45%, transparent); }
.medalha.Ouro .medalha-icone { color: var(--ouro); border-color: color-mix(in srgb, var(--ouro) 45%, transparent); }
.medalha.Diamante .medalha-icone { color: var(--diamante); border-color: color-mix(in srgb, var(--diamante) 45%, transparent); }
.medalha.ok .medalha-icone { border: 0; color: #fff; }
.medalha.Bronze.ok .medalha-icone { background: radial-gradient(circle at 32% 28%, #F4C79A, #C27A3E 55%, #84491B); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bronze) 20%, transparent), 0 4px 12px rgba(132, 73, 27, .45); }
.medalha.Prata.ok .medalha-icone { background: radial-gradient(circle at 32% 28%, #FFFFFF, #BAC4CD 55%, #6F7D8A); box-shadow: 0 0 0 4px color-mix(in srgb, var(--prata) 22%, transparent), 0 4px 12px rgba(80, 95, 110, .45); }
.medalha.Ouro.ok .medalha-icone { background: radial-gradient(circle at 32% 28%, #FFF3B0, #E5BC3C 55%, #9E7908); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ouro) 22%, transparent), 0 4px 12px rgba(158, 121, 8, .5); }
.medalha.Diamante.ok .medalha-icone { background: radial-gradient(circle at 32% 28%, #E2FAFF, #4CC3EC 55%, #0071A3); box-shadow: 0 0 0 4px color-mix(in srgb, var(--diamante) 22%, transparent), 0 4px 12px rgba(0, 113, 163, .5); }
.medalha.proxima .medalha-icone { animation: pulsar 2.2s ease-in-out infinite; }
@keyframes pulsar { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--azul) 40%, transparent), var(--sombra); } 50% { box-shadow: 0 0 0 9px transparent, var(--sombra); } }

.meta-caixas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.meta-caixa { background: var(--sup2); border: 1px solid var(--linha); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; }
.meta-caixa span { font-size: 12px; color: var(--muda); font-weight: 700; }
.meta-caixa b { font-family: var(--fonte-tit); font-size: 19px; font-weight: 900; color: var(--tinta); }
.meta-caixa small { font-size: 12px; color: var(--tinta2); }
.meta-caixa.ok b { color: var(--ok); }
.meta-caixa.festa { background: linear-gradient(135deg, color-mix(in srgb, var(--diamante) 18%, var(--sup2)), var(--sup2)); }
@media (max-width: 600px) {
  .meta-valor { font-size: 21px; }
  .meta-anel { width: 72px; height: 72px; }
  .meta-anel b { font-size: 18px; }
  .trilha { margin: 30px 16px 56px; }
  .medalha { width: 66px; }
  .medalha-icone { width: 32px; height: 32px; }
  .medalha-nome { font-size: 11px; }
  .medalha-valor { font-size: 10.5px; }
  .medalha-valor .v-longo { display: none; }
  .medalha-valor .v-curto { display: inline; }
  .medalha-bonus .v-longo { display: none; }
  .medalha-bonus .v-curto { display: inline; }
  .trilha.com-bonus { margin-bottom: 70px; }
  .medalha.ultima { transform: translate(calc(-100% + 16px), -16px); }
}

/* ---------- inspiração do dia (quadro azul da página do vendedor) ---------- */
.inspira-botao {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .14);
  color: #fff; border-radius: 999px; padding: 2px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .2s;
}
.inspira-botao:hover, .inspira-botao[aria-expanded="true"] { background: rgba(255, 255, 255, .28); }
.inspira { flex-basis: 100%; border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 14px; display: flex; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; }
.inspira[hidden] { display: none; }
.inspira.entrando { animation: inspirar .6s cubic-bezier(.2, .7, .2, 1); }
@keyframes inspirar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.inspira-frase { margin: 0; flex: 1 1 320px; position: relative; padding-left: 38px; }
.inspira-frase::before { content: "\201C"; position: absolute; left: 0; top: -14px; font-family: Georgia, "Times New Roman", serif; font-size: 64px; line-height: 1; opacity: .55; }
.heroi .inspira-frase p { margin: 0; font-family: var(--fonte-tit); font-size: 19px; font-weight: 800; line-height: 1.35; opacity: 1; }
.inspira-frase footer { margin-top: 6px; font-size: 13.5px; font-weight: 600; opacity: .85; }
/* Medalha conquistada: um brilho passa de tempos em tempos; na hora da conquista ela salta e acende */
.medalha.ok .medalha-icone::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .75) 50%, transparent 62%) no-repeat; background-size: 260% 100%;
  background-position: 160% 0; animation: reluzir 5s ease-in-out infinite;
}
.medalha.ok:nth-child(2) .medalha-icone::before { animation-delay: .5s; } .medalha.ok:nth-child(3) .medalha-icone::before { animation-delay: 1s; }
.medalha.ok:nth-child(4) .medalha-icone::before { animation-delay: 1.5s; } .medalha.ok:nth-child(5) .medalha-icone::before { animation-delay: 2s; }
@keyframes reluzir { 0%, 55% { background-position: 160% 0; } 85%, 100% { background-position: -60% 0; } }
.medalha.conquista { z-index: 5; }
.medalha.Bronze { --cor: var(--bronze); } .medalha.Prata { --cor: var(--prata); } .medalha.Ouro { --cor: var(--ouro); } .medalha.Diamante { --cor: var(--diamante); }
.medalha.conquista .medalha-icone { animation: conquistar 1.3s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes conquistar {
  0% { transform: scale(.4) rotate(-25deg); }
  45% { transform: scale(1.5) rotate(8deg); box-shadow: 0 0 0 12px color-mix(in srgb, var(--cor) 35%, transparent), 0 0 28px 6px color-mix(in srgb, var(--cor) 60%, transparent); }
  100% { transform: scale(1) rotate(0); }
}
.medalha.conquista.Ouro .medalha-icone { animation-duration: 1.6s; }
.medalha.conquista.Diamante .medalha-icone { animation: conquistar-diamante 1.7s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes conquistar-diamante {
  0% { transform: scale(.3) rotate(-360deg); }
  50% { transform: scale(1.65) rotate(10deg); box-shadow: 0 0 0 14px color-mix(in srgb, var(--cor) 35%, transparent), 0 0 34px 8px color-mix(in srgb, var(--cor) 70%, transparent); }
  100% { transform: scale(1) rotate(0); }
}
.medalha.conquista .medalha-nome { animation: acender 1.3s ease-out; }
@keyframes acender { 0%, 30% { transform: scale(1.25); } 100% { transform: none; } }

/* Faixa "Parabéns! Você bateu a ..." no alto do quadro da meta */
.festa-faixa {
  --cor: var(--ouro); position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 46px 12px 14px; margin-bottom: 16px;
  border-radius: 14px; color: #fff; box-shadow: 0 8px 22px rgba(0, 60, 120, .28);
  background: linear-gradient(110deg, var(--marinho), var(--azul) 58%, var(--ciano));
  animation: festa-entra .7s cubic-bezier(.2, .9, .3, 1.25) both; overflow: hidden;
}
.festa-faixa.Bronze { --cor: var(--bronze); background: linear-gradient(110deg, #5A2E0F, #A3622A 55%, #D08B4F); }
.festa-faixa.Prata { --cor: var(--prata); background: linear-gradient(110deg, #3E4954, #6F7D8A 55%, #A9B6C2); }
.festa-faixa.Ouro { --cor: var(--ouro); background: linear-gradient(110deg, #6B4F06, #B08A12 55%, #E2BC3D); }
.festa-faixa.Diamante { --cor: var(--diamante); background: linear-gradient(110deg, #023B5E, #0071A3 55%, #4CC3EC); }
.festa-faixa::after {  /* brilho que atravessa a faixa */
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); animation: correr 2.8s ease-in-out .6s 3;
}
.festa-faixa b { display: block; font-family: var(--fonte-tit); font-size: 17px; font-weight: 900; }
.festa-faixa span { font-size: 13.5px; color: rgba(255, 255, 255, .88); }
.festa-medalha {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 32% 28%, #FFF3B0, #E5BC3C 55%, #9E7908); box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 4px 14px rgba(4, 13, 36, .35);
  animation: festa-gira 1s cubic-bezier(.2, .9, .3, 1.4) .15s both;
}
.festa-faixa.Bronze .festa-medalha { background: radial-gradient(circle at 32% 28%, #F4C79A, #C27A3E 55%, #84491B); }
.festa-faixa.Prata .festa-medalha { background: radial-gradient(circle at 32% 28%, #FFFFFF, #BAC4CD 55%, #6F7D8A); }
.festa-faixa.Diamante .festa-medalha { background: radial-gradient(circle at 32% 28%, #E2FAFF, #4CC3EC 55%, #0071A3); }
.festa-medalha svg { width: 21px; height: 21px; }
.festa-fechar {
  position: absolute; top: 6px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent;
  font-size: 20px; line-height: 1; color: #fff; cursor: pointer;
}
.festa-fechar:hover { background: rgba(255, 255, 255, .18); }
@keyframes festa-entra { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes festa-gira { from { transform: scale(0) rotate(-180deg); } to { transform: none; } }
.previa-festa { margin-top: 12px; font-size: 13px; }
.confetes { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; }
.festa-clarao {  /* celular: clarão da cor da medalha por trás das partículas */
  --cor: var(--ouro); position: fixed; inset: 0; pointer-events: none; z-index: 9998; animation: clarao 1.4s ease-out both;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--cor) 60%, transparent), transparent 72%);
}
.festa-clarao.Bronze { --cor: var(--bronze); } .festa-clarao.Prata { --cor: var(--prata); } .festa-clarao.Ouro { --cor: var(--ouro); } .festa-clarao.Diamante { --cor: var(--diamante); }
@keyframes clarao { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .trilha-cheio::after, .trilha-voce::after, .medalha.proxima .medalha-icone, .inspira.entrando,
  .medalha.ok .medalha-icone::before, .festa-faixa::after, .festa-medalha, .medalha.conquista .medalha-nome { animation: none; }
  .festa-faixa { animation: festa-surge .4s ease-out both; }
  .medalha.conquista .medalha-icone { animation: conquistar-calmo 2.4s ease-in-out both; }
}
@keyframes festa-surge { from { opacity: 0; } to { opacity: 1; } }
@keyframes conquistar-calmo { 0%, 100% { box-shadow: var(--sombra); } 30%, 70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--cor) 40%, transparent), 0 0 18px 4px color-mix(in srgb, var(--cor) 50%, transparent); } }

/* ---------- bônus trimestral: trilha de medalhas (trimestre, a mesma da meta do mês) + colunas (mês a mês) ---------- */
.bonus-corpo { display: grid; gap: 14px; position: relative; }
.bonus-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--tinta2); }
.bonus-status .chip { font-size: 13px; padding: 3px 10px; white-space: normal; }
.ponto-faixa { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.ponto-faixa.Bronze { background: var(--bronze); } .ponto-faixa.Prata { background: var(--prata); }
.ponto-faixa.Ouro { background: var(--ouro); } .ponto-faixa.Diamante { background: var(--diamante); }
/* Ritmo (até onde o ritmo leva) e metas estimadas (não oficiais): mais claro e tracejado */
.bonus-tabela summary { cursor: pointer; font-weight: 700; color: var(--link); font-size: 13px; }
.bonus-tabela .tabela-wrap { margin-top: 8px; }
.bonus-tabela .nota { margin: 8px 0 0; }

/* ---------- Visão geral: vendas no Bling (as informações principais da página) ---------- */
.vendas-bling { margin-bottom: 4px; }
.vendas-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 2px 0 10px; }
.vendas-cab h2 { font-size: 18px; }
.vendas-cab span { font-size: 12.5px; color: var(--muda); }
.vendas-tiles { grid-template-columns: 1.4fr repeat(3, 1fr); }
.vendas-tiles .tile { padding: 18px 20px; }
.vendas-tiles .tile-rot { font-size: 14px; }
.vendas-tiles .tile-val { font-size: 30px; }
.vendas-tiles .tile.destaque .tile-val { font-size: 38px; }
.vendas-tiles .tile-sub { font-size: 13px; }
.vendas-tiles .tile-sub b { color: var(--tinta); font-weight: 800; }
.vendas-tiles .tile.destaque .tile-sub b { color: #fff; }
@media (max-width: 900px) {
  .vendas-tiles { grid-template-columns: 1fr 1fr; }
  .vendas-tiles .tile.destaque { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .vendas-tiles .tile { padding: 14px 14px; }
  .vendas-tiles .tile-val { font-size: 21px; }
  .vendas-tiles .tile.destaque .tile-val { font-size: 30px; }
}
.tiles-bonus { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* ---------- Preços (catálogo dos vendedores) e Produtos da Tabela de preços (administração) ---------- */
.catalogo-pag { display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: center; padding: 12px 16px; background: var(--sup2); border-bottom: 1px solid var(--linha); border-radius: var(--raio) var(--raio) 0 0; }
.catalogo-pag label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.catalogo-pag select, .catalogo-pag input[type=number] { font: inherit; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--borda); background: var(--sup); color: var(--tinta); }
.catalogo-pag input[type=number] { width: 72px; }
.catalogo-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--linha); }
.catalogo-filtros select { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--borda); background: var(--sup2); color: var(--tinta); font: inherit; max-width: 100%; }
.catalogo { list-style: none; margin: 0; padding: 0; }
.catalogo > li { border-top: 1px solid var(--linha); }
.catalogo > li:first-child { border-top: 0; }
.catalogo > li.vazio { padding: 16px; }
.catalogo summary { position: relative; display: grid; grid-template-columns: auto minmax(200px, 560px) auto minmax(0, 320px); justify-content: start; gap: 4px 28px; align-items: center; padding: 10px 16px; cursor: pointer; list-style: none; }
/* Preços em blocos (pedido do usuário em 11/10): título por categoria e um bloco por grupo (medidas · ambiente), como a planilha */
.cat-lista { padding: 4px 16px 10px; }
.cat-categoria { margin-top: 20px; scroll-margin-top: calc(var(--topo-alt, 96px) + 60px); }
.cat-categoria:first-child { margin-top: 10px; }
.cat-categoria > h3 { display: flex; align-items: center; gap: 8px; font-family: var(--fonte-tit); font-size: 17px; margin: 0 0 10px; color: var(--marinho); }
.cat-categoria > h3 svg { width: 20px; height: 20px; flex: none; }
.cat-categoria > h3 small { color: var(--muda); font-family: var(--fonte); font-weight: 600; font-size: 12.5px; }
.cat-bloco { border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; margin-bottom: 14px; background: var(--sup); }
.cat-bloco-cab { display: flex; align-items: baseline; gap: 10px; padding: 8px 16px; background: var(--sup3); color: var(--tinta); font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--borda); }
.cat-bloco-cab small { color: var(--muda); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 12px; }
.cat-bloco .catalogo > li:first-child { border-top: 0; }
.cat-lista > p.vazio { padding: 16px 0; }
/* atalhos por categoria (como os botões INÍCIO · TOTEM · ESTRUTURAS · CONTROLADORAS no topo da aba Valores da planilha) */
.cat-atalhos { position: sticky; top: var(--topo-alt, 96px); z-index: 3; display: flex; gap: 6px; align-items: center; padding: 8px 16px; background: var(--sup); border-bottom: 1px solid var(--linha); overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.cat-atalhos::-webkit-scrollbar { display: none; }
.cat-atalhos button { display: inline-flex; align-items: center; gap: 6px; flex: none; border: 1px solid var(--borda); background: var(--sup2); color: var(--tinta); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.cat-atalhos button:hover, .cat-atalhos button:focus-visible { background: var(--acento-sup); border-color: var(--azul); color: var(--azul); }
.cat-atalhos button svg { width: 15px; height: 15px; }
.cat-atalhos button small { color: var(--muda); font-weight: 600; font-size: 12px; }
.cat-atalhos button.cat-topo { background: var(--marinho); color: #fff; border-color: var(--marinho); }
/* Produtos (admin): cada grupo da tabela em seu bloco, com a mesma faixa de título */
tbody.grupo-bloco { scroll-margin-top: calc(var(--topo-alt, 96px) + 60px); }
tbody.grupo-bloco > tr.grupo-sep > td { background: var(--sup3) !important; color: var(--tinta); font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 14px; white-space: normal; border-top: 2px solid var(--borda); border-left: 2px solid var(--borda); border-right: 2px solid var(--borda); }
tbody.grupo-bloco > tr.grupo-sep small { margin-left: 8px; color: var(--muda); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 12px; }
tbody.grupo-bloco > tr:not(.grupo-sep):not(.grupo-fim) > td:first-child { border-left: 2px solid var(--borda); }
tbody.grupo-bloco > tr:not(.grupo-sep):not(.grupo-fim) > td:last-child { border-right: 2px solid var(--borda); }
tbody.grupo-bloco > tr.grupo-fim > td { padding: 0; height: 14px; border-top: 2px solid var(--borda); background: transparent !important; }
.orc-bloco { scroll-margin-top: calc(var(--topo-alt, 96px) + 12px); }
/* foto do produto (ou ícone do tipo): quadrinho branco, a foto cabe inteira */
.cat-foto { width: 58px; height: 58px; border-radius: 12px; background: #fff; border: 1px solid var(--linha); display: grid; place-items: center; overflow: hidden; color: var(--muda); flex: none; }
.cat-foto img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 3px; box-sizing: border-box; }
.cat-foto svg { width: 26px; height: 26px; }
.cat-foto.pequena { width: 40px; height: 40px; border-radius: 9px; }
.cat-foto.pequena svg { width: 20px; height: 20px; }
.cat-foto-grande { float: right; width: min(200px, 42%); margin: 0 0 8px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--linha); padding: 6px; box-sizing: border-box; }
.cat-detalhe::after { content: ""; display: block; clear: both; }
.prod-foto { display: flex; align-items: center; gap: 10px; align-self: end; flex-wrap: wrap; }
.espec-grupo { margin-top: 6px; }
/* tabela de especificações no visual da planilha: Especificação | Valor */
.espec-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.espec-tabela th, .espec-tabela td { border: 1px solid var(--linha); padding: 4px 8px; white-space: normal; vertical-align: middle; }
.espec-tabela thead th { background: var(--marinho); color: #fff; text-transform: none; letter-spacing: 0; font-size: 13px; position: static; cursor: default; }
.espec-tabela tbody th { text-align: left; width: 40%; font-weight: 600; background: var(--sup2); }
.espec-tabela tbody th small { display: block; font-weight: 400; color: var(--muda); font-size: 11.5px; }
.espec-tabela tr.grupo th { background: var(--acento-sup, var(--sup3)); color: var(--tinta); font-weight: 800; text-transform: uppercase; font-size: 12px; letter-spacing: .03em; }
.espec-tabela td input, .espec-tabela td select { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 6px; background: var(--sup); color: var(--tinta); font: inherit; font-size: 13.5px; }
.espec-tabela td .composto { display: flex; gap: 6px; }
.espec-tabela td .param-controles { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.espec-tabela td .param-controles input { width: 120px; flex: none; text-align: right; }
.espec-tabela td .param-controles > :not(input) { color: var(--muda); font-size: 12.5px; }
.espec-tabela tbody tr:nth-child(even) > td { background: transparent; }
@media (max-width: 600px) { .espec-tabela tbody th { width: 46%; } }
.campo-composto .composto { display: flex; gap: 6px; }
.campo-composto .composto input { min-width: 0; flex: 1; }
.campo-composto label small { font-weight: 400; }
.campos-tabela th { font-size: 11px; text-transform: uppercase; color: var(--muda); padding: 4px 6px 4px 0; border: 0; text-align: left; white-space: normal; }
.campos-tabela td { white-space: normal; }
.campos-tabela input.largo { min-width: 180px; }
.campos-tabela select { padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; background: var(--sup); color: var(--tinta); font-size: 13px; }
.cat-campos { overflow-x: auto; }
.espec-grupo h3 { font-size: 13px; color: var(--muda); text-transform: uppercase; letter-spacing: .03em; margin: 8px 0 2px; }
.prod-foto-acoes { display: inline-flex; gap: 6px; }
.opcoes.promo { display: grid; gap: 6px; }
.promo-campos:empty { display: none; }
@media (max-width: 600px) {
  .pagina-produto-rodape { position: sticky; bottom: 0; background: var(--sup); z-index: 2; box-shadow: 0 -6px 16px rgba(4, 13, 36, .08); }
}
.prod-foto small { font-size: 12px; }
.catalogo summary::-webkit-details-marker { display: none; }
.catalogo summary:hover { background: var(--zebra-foco); }
.cat-prod { display: grid; gap: 2px; min-width: 0; }
.cat-prod b { font-family: var(--fonte-tit); font-size: 15px; }
.cat-prod span { color: var(--tinta); overflow-wrap: anywhere; }
.cat-prod small { color: var(--muda); font-size: 12.5px; }
.cat-prod .chip { font-size: 11px; margin-left: 4px; }
.cat-precos { display: grid; justify-items: start; text-align: left; gap: 1px; }  /* perto da descrição (pedido do usuário em 11/10) */
.cat-est { min-width: 0; }  /* 17/10: o estoque à direita dos preços */
.cat-est:empty { display: none; }
.cat-aviso { white-space: nowrap; grid-column: 4; justify-self: start; }  /* 17/10: o "Avisar quando chegar" na linha (no celular fica nos detalhes) */
@media (min-width: 1400px) { .cat-aviso { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); } }  /* tela larga: no espaço da direita */
.cat-aviso.marcado { color: var(--ok); border-color: var(--ok); }
.cat-est .chip { white-space: normal; line-height: 1.35; display: inline-block; }
.chips-estoque { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; }  /* 18/10: estoque e a caminho separados */
.cat-est .chips-estoque { flex-direction: column; }
.cat-precos b { font-family: var(--fonte-tit); font-size: 18px; font-weight: 900; color: var(--tinta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cat-precos small { color: var(--tinta2); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cat-detalhe { padding: 0 16px 14px; }
.cat-detalhe p { white-space: pre-line; margin: 0 0 8px; color: var(--tinta2); font-size: 13.5px; }
.cat-espec { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 16px; font-size: 13px; }
.cat-espec li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--linha); padding: 3px 0; }
.cat-espec span { color: var(--muda); }
.prod-nome .chip { font-size: 11px; margin-left: 4px; }
.prod-previa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.prod-previa div { background: var(--sup2); border: 1px solid var(--linha); border-radius: 10px; padding: 8px 10px; display: grid; }
.prod-previa small { color: var(--muda); font-size: 12px; }
.prod-previa b { font-variant-numeric: tabular-nums; }
/* Categorias (Tabela de preços › Parâmetros) */
.categorias-lista li { display: block; }
.categorias-lista li.inativa { opacity: .55; }
.cat-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cat-icone { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--sup2); color: var(--tinta2); flex: none; }
.cat-nome { flex: 1 1 160px; min-width: 120px; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; background: var(--sup); color: var(--tinta); }
.cat-linha select { padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; background: var(--sup); color: var(--tinta); }
.cat-uso { font-size: 12.5px; white-space: nowrap; }
.cat-acoes { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.cat-exige { font-size: 12.5px; margin: 4px 0 0 38px; }
.cat-exige > summary { cursor: pointer; color: var(--muda); }
.cat-exige-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 10px; padding: 6px 0 2px; }
.cat-exige-lista label { display: flex; gap: 6px; align-items: center; font-size: 12.5px; }
.obrig .chip { margin-left: 8px; font-size: 11px; vertical-align: middle; }

/* página do produto (Tabela de preços › Produtos › Editar) */
.volta { margin: 0 0 10px; }
.volta .link-btn { font-weight: 700; }
.pagina-produto .cartao-corpo { padding: 14px 16px 4px; }
.pagina-produto .formulario { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pagina-produto-rodape { padding: 12px 16px; border-top: 1px solid var(--linha); justify-content: flex-end; margin-top: 10px; }
.prod-pagina-foto .cat-foto { width: 64px; height: 64px; }
.prod-previa { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* diálogo do produto: seções dobráveis (especificações e ficha técnica) */
.prod-secao { margin: 12px 0 0; border: 1px solid var(--linha); border-left: 4px solid var(--acento); border-radius: 12px; padding: 0 12px 10px; }  /* a linha azul à esquerda, como o "Custo pela composição" (14/10) */
.prod-secao > summary { cursor: pointer; font-weight: 700; padding: 10px 0; font-size: 14px; }
.ficha-tabela { width: 100%; border-collapse: collapse; }
.ficha-tabela td { padding: 2px 6px 2px 0; }
.ficha-tabela td:first-child { width: 38%; }
.ficha-tabela td:last-child { width: 36px; padding-right: 0; }
.ficha-tabela input { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--sup); color: var(--tinta); font: inherit; font-size: 13px; }
.ficha-editor .acoes-form { margin-top: 8px; }
.ficha-copiar { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ficha-copiar input { width: 130px; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--sup); color: var(--tinta); font: inherit; }
.cat-ficha { margin-top: 10px; clear: both; }
.cat-ficha > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--azul); }
.cat-ficha .cat-espec { margin-top: 6px; }
.btn.perigo-texto { color: var(--perigo); margin-right: auto; }
@media (max-width: 600px) {
  .catalogo summary { grid-template-columns: auto minmax(0, 1fr); }
  .cat-foto { width: 48px; height: 48px; }
  .cat-foto-grande { float: none; display: block; width: min(220px, 70%); margin: 0 auto 10px; }
  .cat-precos { grid-column: 2; justify-items: start; text-align: left; grid-auto-flow: row; }
  .cat-est { grid-column: 2; }
  .cat-aviso { display: none; }
  .prod-previa { grid-template-columns: 1fr 1fr; }
}

/* ---------- Instalações e Técnicos ---------- */
.inst-acoes { justify-content: flex-start; padding: 0 16px 10px; margin-top: 0; }
.inst-acoes .segmentos { max-width: 100%; overflow-x: auto; flex: 0 0 auto; }
.inst-acoes .segmentos button { white-space: nowrap; }
.estrelas { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.estrelas-icones { color: var(--ouro); letter-spacing: 1px; font-size: 15px; }
.estrelas small { color: var(--muda); font-size: 12px; }
.nota-botoes { display: flex; gap: 2px; margin: 4px 0 8px; }
.nota-btn { border: 0; background: none; font-size: 32px; line-height: 1; color: var(--trilho); cursor: pointer; padding: 2px 4px; transition: transform .1s; }
.nota-btn.marcada { color: var(--ouro); }
.nota-btn:hover { transform: scale(1.15); }
.nota-btn:focus-visible { outline: 2px solid var(--ciano); border-radius: 6px; }
.ufs { display: flex; flex-wrap: wrap; gap: 4px; max-width: 240px; }
.ufs .chip { font-size: 11px; padding: 1px 7px; }
.estados-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px 8px; padding: 4px 0; }
.estados-opcoes label { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; }
.estados-opcoes label:first-child { grid-column: 1 / -1; font-weight: 700; }

/* Calculadora de instalação */
.calc-grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr); gap: 18px 28px; align-items: start; }
.calc-resultado { background: var(--sup2); border: 1px solid var(--linha); border-radius: 14px; padding: 14px 16px; }
.calc-total { display: grid; gap: 2px; margin-bottom: 10px; }
.calc-total small { color: var(--muda); font-size: 12.5px; font-weight: 700; }
.calc-total b { font-family: var(--fonte-tit); font-size: 30px; font-weight: 900; color: var(--azul); line-height: 1.1; }
.calc-total span { font-size: 13.5px; color: var(--tinta2); }
.calc-linhas li { padding: 7px 0; }
.calc-linhas li small { display: block; color: var(--muda); font-size: 12px; }
.calc-linhas li:nth-child(even) { background: none; }
.calc-linhas li:last-child { border-top: 2px solid var(--borda); }
@media (max-width: 760px) { .calc-grade { grid-template-columns: 1fr; } }

/* Empresas e garantias (Tabela de preços) */
.pre-linhas { white-space: pre-line; font-size: 12.5px; color: var(--tinta2); }
.garantias { display: grid; gap: 14px; }
.garantia { border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px 2px; background: var(--sup2); }

/* Consulta de CNPJ */
.cnpj-resultado { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--sup2); border: 1px solid var(--linha); }
.cnpj-resultado > p { margin: 4px 0; }
.cnpj-resultado > p:first-child b { font-family: var(--fonte-tit); font-size: 16px; }
.cnpj-linhas { margin: 8px -14px 0 !important; }
.cnpj-linhas li { padding: 7px 14px; gap: 16px; }
.cnpj-linhas li b { text-align: right; font-weight: 600; overflow-wrap: anywhere; }

/* Orçamentos */
.orc-painel { margin-top: 12px; }
.orc-painel-cab { display: flex; gap: 14px; align-items: flex-start; }
.orc-foto { width: 84px; height: 84px; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid var(--linha); padding: 4px; flex: none; }
.orc-painel-cab p { margin: 4px 0 0; font-size: 13px; }
/* 22/10 (pedido do usuário): os dados do painel numa linha só (no celular, a linha rola para o lado) */
.orc-dados { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 12px; overflow-x: auto; padding-bottom: 2px; }
.orc-dado { flex: 1 1 0; min-width: 92px; background: var(--sup2); border: 1px solid var(--linha); border-radius: 10px; padding: 6px 8px; display: grid; gap: 1px; }
.orc-dado small { color: var(--muda); font-size: 11px; line-height: 1.2; }
.orc-dado b { font-size: 13px; white-space: nowrap; }
.orc-dado b { font-variant-numeric: tabular-nums; }
.orc-itens td { vertical-align: top; }
.orc-itens td input, .orc-itens td select { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--sup); color: var(--tinta); max-width: 100%; }
.orc-itens td.quebra { min-width: 240px; max-width: 420px; }
.orc-itens td.quebra select { display: block; margin-bottom: 4px; max-width: 100%; }
.orc-inst { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; font-size: 12.5px; }
.orc-totais li b { font-size: 16px; }
.orc-acoes { padding-top: 10px; }
.orc-acoes > .btn { padding: 8px 14px; }  /* Voltar, Salvar e Duplicar um pouco menores (14/10) */
.orc-acoes select { padding: 7px 10px; border-radius: 10px; border: 1px solid var(--borda); background: var(--sup); color: var(--tinta); font: inherit; }
@media (max-width: 600px) {
  .orc-itens td.quebra { min-width: 0; }
  .orc-acoes { position: sticky; bottom: 0; background: var(--sup); z-index: 2; box-shadow: 0 -6px 16px rgba(4, 13, 36, .08); padding-bottom: 10px; }
}

.btn.desativado { opacity: .55; cursor: not-allowed; }

/* Página do orçamento: passos numerados e blocos bem separados (11/10) */
.orc-passos { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
/* 22/10 (pedido do usuário): o "Passo a passo" — um passo por vez, com a barra de andamento, o resumo ao lado e os botões grandes embaixo */
.orc-modo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; font-size: 13px; }
.orc-pagina.orc-modo-passos { padding-bottom: 110px; }
@media (max-width: 860px) { .orc-pagina.orc-modo-passos { padding-bottom: 170px; } }
.orc-modo-passos .orc-passos { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
.orc-modo-passos .orc-passos li.atual button { border: 2px solid var(--acento); background: var(--acento-sup); }
.orc-modo-passos .orc-passos li.atual .orc-num { background: var(--acento); color: #fff; }
.orc-pp-barra { height: 6px; border-radius: 99px; background: var(--trilho); margin: -8px 0 18px; overflow: hidden; }
.orc-pp-barra i { display: block; height: 100%; width: 20%; background: var(--acento); border-radius: inherit; transition: width .3s; }
@media (prefers-reduced-motion: reduce) { .orc-pp-barra i { transition: none; } }
.orc-pp-blocos { min-width: 0; }
/* 22/10 (pedido do usuário): no Passo a passo, o resumo "Até agora" de novo na lateral direita */
.orc-pp-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.orc-pp-lado { position: sticky; top: 12px; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px; display: grid; gap: 10px; font-size: 14px; }
.orc-pp-lado h3 { margin: 0; font: 800 15px var(--fonte-tit); }
.orc-pp-lado .orc-pp-total { color: var(--acento); font-size: 26px; }
.orc-pp-lado dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; }
.orc-pp-lado dt { color: var(--muda); }
.orc-pp-lado dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.orc-pp-lado .chip { justify-self: start; white-space: normal; }
@media (max-width: 860px) { .orc-pp-corpo { grid-template-columns: 1fr; } .orc-pp-lado { position: static; } .orc-passos-classico.orc-pagina.orc-modo-passos { padding-bottom: 130px; } }
/* 22/10 (pedido do usuário): no passo a passo, sem a barra da lateral esquerda do bloco e sem o número grande (o passo já está marcado em cima) */
.orc-modo-passos .orc-bloco, .orc-modo-passos .orc-bloco.orc-resumo { border-left: 1px solid var(--linha); margin-top: 0; }
.orc-modo-passos .orc-bloco > .cartao-cab > .orc-num.grande { display: none; }
/* o resumo na barra de baixo: o total grande e, ao lado, o cliente, o painel, o pagamento e o que falta */
.orc-pp-resumo { display: flex; align-items: center; gap: 4px 14px; min-width: 0; flex: 1 1 360px; }
.orc-pp-total { font: 900 24px var(--fonte-tit); color: var(--acento); font-variant-numeric: tabular-nums; white-space: nowrap; }
.orc-pp-sobre { display: grid; gap: 2px; min-width: 0; font-size: 13px; color: var(--tinta2); }
.orc-pp-sobre-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orc-pp-sobre .chip { justify-self: start; }
.orc-pp-rodape { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--sup); border-top: 1px solid var(--linha); box-shadow: 0 -4px 14px rgba(18, 57, 85, .08);
  padding-block: 10px calc(10px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.orc-pp-rodape-dentro { max-width: 1240px; margin: 0 auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.orc-pp-esp { flex: 1; }
.orc-pagina [hidden] { display: none !important; }
.btn.btn-grande { min-height: 48px; padding: 0 20px; font-size: 15.5px; }
/* 22/10 (pedido do usuário): o "Passo a passo 2" — o mesmo funcionamento com outro desenho: os passos numa linha do tempo, o bloco sem
   borda com o "PASSO 2 DE 5" em verde, campos maiores e a barra de baixo azul-marinho com o botão verde */
.orc-visual-2:not(.orc-passos-classico) .orc-pp-barra { display: none; }
.orc-visual-2:not(.orc-passos-classico) .orc-passos { gap: 0; margin: 6px 0 28px; }
.orc-visual-2:not(.orc-passos-classico) .orc-passos li { position: relative; }
.orc-visual-2:not(.orc-passos-classico) .orc-passos li + li::before { content: ""; position: absolute; top: 20px; right: 50%; width: 100%; height: 4px; border-radius: 2px; background: var(--trilho); }
.orc-visual-2:not(.orc-passos-classico) .orc-passos li.feito::before, .orc-visual-2:not(.orc-passos-classico) .orc-passos li.atual::before { background: var(--ok); }
.orc-visual-2:not(.orc-passos-classico) .orc-passos li button, .orc-visual-2:not(.orc-passos-classico) .orc-passos li.feito button, .orc-visual-2:not(.orc-passos-classico) .orc-passos li.atual button {
  position: relative; z-index: 1; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0 4px; border: 0; background: none; }
.orc-visual-2:not(.orc-passos-classico) .orc-passos li button:hover { background: none; }
.orc-visual-2:not(.orc-passos-classico) .orc-passos li button:hover .orc-num { border-color: var(--acento); }
.orc-visual-2:not(.orc-passos-classico) .orc-passos .orc-num { width: 44px; height: 44px; font-size: 18px; background: var(--sup); color: var(--tinta2); border: 3px solid var(--trilho); transition: box-shadow .2s; }
.orc-visual-2:not(.orc-passos-classico) .orc-passos li.feito .orc-num { background: var(--ok); border-color: var(--ok); color: #fff; }
.orc-visual-2:not(.orc-passos-classico) .orc-passos li.atual .orc-num { background: var(--marinho); border-color: var(--verde); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--verde) 28%, transparent); }
.orc-visual-2:not(.orc-passos-classico) .orc-passo-txt { justify-items: center; }
.orc-visual-2:not(.orc-passos-classico) .orc-passo-txt b { font-size: 15px; }
.orc-visual-2:not(.orc-passos-classico) .orc-passos li.atual .orc-passo-txt b { color: var(--ok); }
.orc-visual-2 .orc-bloco, .orc-visual-2 .orc-bloco.orc-resumo { border: 0; border-radius: 22px; box-shadow: 0 2px 4px rgba(18, 57, 85, .05), 0 14px 34px rgba(18, 57, 85, .10); }
.orc-visual-2 .orc-bloco > .cartao-cab, .orc-visual-2 .orc-bloco.orc-resumo > .cartao-cab { flex-wrap: wrap; background: none; border-bottom: 0; padding: 24px 26px 4px; }
.orc-visual-2 .orc-bloco > .cartao-cab[data-etapa]::before { content: attr(data-etapa); flex-basis: 100%; font: 800 12px var(--fonte); letter-spacing: .12em; text-transform: uppercase; color: var(--ok); }
.orc-visual-2 .orc-bloco > .cartao-cab h2 { font-size: 27px; }
/* 22/10: também na Página inteira — sem o número grande (o "PASSO 2 DE 5" está em cima do título) e os botões arredondados */
.orc-visual-2 .orc-bloco > .cartao-cab > .orc-num.grande { display: none; }
.orc-visual-2:not(.orc-modo-passos) .orc-bloco { margin-top: 26px; }
.orc-visual-2 .btn { border-radius: 999px; }
.orc-visual-2 .orc-bloco > div:not(.cartao-cab):not(.cartao-corpo) > p.muda:only-child { margin: 0 26px 26px; }
.orc-visual-2 .btn.primario { background: var(--verde); border-color: var(--verde); color: var(--marinho); font-weight: 800; }
.orc-visual-2 .orc-bloco .cartao-corpo { padding-left: 26px; padding-right: 26px; padding-bottom: 26px; }
.orc-visual-2 .orc-bloco .campo label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta2); }
.orc-visual-2 .orc-bloco .campo input, .orc-visual-2 .orc-bloco .campo select, .orc-visual-2 .orc-bloco .campo textarea {
  min-height: 52px; font-size: 16px; border-radius: 14px; border-width: 2px; background: var(--sup); }
.orc-visual-2 .orc-bloco .campo input:focus, .orc-visual-2 .orc-bloco .campo select:focus, .orc-visual-2 .orc-bloco .campo textarea:focus {
  outline: none; border-color: var(--verde); box-shadow: 0 0 0 4px color-mix(in srgb, var(--verde) 22%, transparent); }
.orc-visual-2 .orc-pp-rodape { background: var(--marinho); border-top: 0; box-shadow: 0 -8px 26px rgba(18, 57, 85, .28); }
.orc-visual-2 .orc-pp-total { color: var(--verde); font-size: 28px; }
.orc-visual-2 .orc-pp-sobre { color: rgba(255, 255, 255, .8); }
.orc-visual-2 .orc-pp-sobre .chip.alerta { background: rgba(255, 255, 255, .14); color: #FFD08A; }
.orc-visual-2 .orc-pp-sobre .chip.ok { background: rgba(0, 199, 86, .18); color: #7CF0AE; }
.orc-visual-2 .orc-pp-rodape .btn { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .35); border-radius: 999px; }
.orc-visual-2 .orc-pp-rodape .btn:hover:not([disabled]) { border-color: #fff; }
.orc-visual-2 .orc-pp-rodape .btn.primario { background: var(--verde); border-color: var(--verde); color: var(--marinho); font-weight: 800; }
.orc-visual-2 .orc-pp-rodape .btn[disabled] { opacity: .45; }
@media (max-width: 860px) {
  .orc-visual-2:not(.orc-passos-classico) .orc-passos .orc-num { width: 36px; height: 36px; font-size: 15px; }
  .orc-visual-2:not(.orc-passos-classico) .orc-passos li + li::before { top: 16px; }
  .orc-visual-2 .orc-bloco > .cartao-cab h2 { font-size: 22px; }
  .orc-visual-2 .orc-bloco > .cartao-cab, .orc-visual-2 .orc-bloco .cartao-corpo { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .orc-visual-2:not(.orc-passos-classico) .orc-passos .orc-num { transition: none; } }
/* 22/10 (pedido do usuário): o "Passo a passo 2" com cores bem nítidas — azul forte, verde vivo e amarelo, contornos escuros e o título do
   bloco numa faixa azul (por cima do orc-visual-2) */
.orc-visual-3 { --v3-azul: #0057E7; --v3-azul-esc: #003C9E; --v3-verde: #00D15A; --v3-amarelo: #FFD400; --v3-tinta: #0A1724; --v3-borda: #4A5B6C; }
:root[data-theme="dark"] .orc-visual-3 { --v3-azul: #1A55CC; --v3-azul-esc: #0B3A8C; --v3-tinta: #F2F6FA; --v3-borda: #8FA3B8; }
.orc-visual-2.orc-visual-3 .orc-passos li + li::before { height: 6px; top: 19px; background: color-mix(in srgb, var(--v3-borda) 35%, transparent); }
.orc-visual-2.orc-visual-3 .orc-passos li.feito::before, .orc-visual-2.orc-visual-3 .orc-passos li.atual::before { background: var(--v3-verde); }
.orc-visual-2.orc-visual-3 .orc-passos .orc-num { border-color: var(--v3-borda); color: var(--v3-tinta); font-weight: 900; }
.orc-visual-2.orc-visual-3 .orc-passos li.feito .orc-num { background: var(--v3-verde); border-color: var(--v3-verde); color: #04210F; }
.orc-visual-2.orc-visual-3 .orc-passos li.atual .orc-num { background: var(--v3-azul); border-color: var(--v3-amarelo); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--v3-amarelo) 45%, transparent); }
.orc-visual-2.orc-visual-3 .orc-passo-txt b { color: var(--v3-tinta); font-weight: 900; }
.orc-visual-2.orc-visual-3 .orc-passos li.atual .orc-passo-txt b { color: var(--v3-azul); }
.orc-visual-3 .orc-bloco, .orc-visual-3 .orc-bloco.orc-resumo { border: 3px solid var(--v3-azul); border-radius: 20px; box-shadow: 0 10px 28px color-mix(in srgb, var(--v3-azul) 22%, transparent); overflow: hidden; }
.orc-visual-3 .orc-bloco > .cartao-cab, .orc-visual-3 .orc-bloco.orc-resumo > .cartao-cab { background: var(--v3-azul); padding: 16px 26px 18px; margin-bottom: 18px; border-radius: 0; }
.orc-visual-3 .orc-bloco > .cartao-cab h2, .orc-visual-3 .orc-bloco > .cartao-cab .muda, .orc-visual-3 .orc-bloco > .cartao-cab small { color: #fff; }
.orc-visual-3 .orc-bloco > .cartao-cab[data-etapa]::before { color: var(--v3-amarelo); }
.orc-visual-3 .orc-bloco .campo label { color: var(--v3-tinta); font-weight: 800; }
.orc-visual-3 .orc-bloco .campo input, .orc-visual-3 .orc-bloco .campo select, .orc-visual-3 .orc-bloco .campo textarea { border-color: var(--v3-borda); color: var(--v3-tinta); }
.orc-visual-3 .orc-bloco .campo input:focus, .orc-visual-3 .orc-bloco .campo select:focus, .orc-visual-3 .orc-bloco .campo textarea:focus {
  border-color: var(--v3-azul); box-shadow: 0 0 0 4px color-mix(in srgb, var(--v3-amarelo) 60%, transparent); }
.orc-visual-3 .btn.primario { background: var(--v3-verde); border-color: var(--v3-verde); color: #04210F; }
.orc-visual-3 .orc-pp-rodape { background: var(--v3-azul-esc); box-shadow: 0 -8px 26px color-mix(in srgb, var(--v3-azul) 40%, transparent); }
.orc-visual-3 .orc-pp-total { color: var(--v3-amarelo); font-size: 30px; }
.orc-visual-3 .orc-pp-sobre { color: #fff; }
.orc-visual-3 .orc-pp-sobre .chip.alerta { background: var(--v3-amarelo); color: #2B2100; }
.orc-visual-3 .orc-pp-sobre .chip.ok { background: var(--v3-verde); color: #04210F; }
.orc-visual-3 .orc-pp-rodape .btn { border-color: #fff; }
.orc-visual-3 .orc-pp-rodape .btn.primario { background: var(--v3-verde); border-color: var(--v3-verde); color: #04210F; font-size: 17px; }
@media (max-width: 860px) {
  .orc-pp-resumo { flex-basis: 100%; }
  .orc-pp-total { font-size: 20px; }
  .orc-pp-rodape-dentro .btn-grande { flex: 1 1 auto; padding: 0 12px; }
  .orc-pp-esp { display: none; }
}
.orc-passos li button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 14px; background: var(--sup); color: var(--tinta); font: inherit; cursor: pointer; text-align: left; }
.orc-passos li button:hover { background: var(--zebra-foco); }
.orc-passos li.feito button { border-color: color-mix(in srgb, var(--ok) 50%, var(--linha)); background: color-mix(in srgb, var(--ok) 8%, var(--sup)); }
.orc-passo-txt { display: grid; line-height: 1.15; min-width: 0; }
.orc-passo-txt b { font-family: var(--fonte-tit); font-size: 14px; }
.orc-passo-txt small { color: var(--muda); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orc-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--marinho); color: #fff; font-family: var(--fonte-tit); font-weight: 900; font-size: 15px; }
.orc-passos li.feito .orc-num { background: var(--ok); }
.orc-num svg { width: 16px; height: 16px; }
.orc-num.grande { width: 38px; height: 38px; font-size: 18px; margin-right: 12px; }
.orc-bloco { margin-top: 22px; border-left: 6px solid var(--marinho); }
.orc-bloco > .cartao-cab { align-items: center; justify-content: flex-start; flex-wrap: nowrap; background: var(--sup2); border-bottom: 1px solid var(--linha); margin-bottom: 12px; border-radius: var(--raio) var(--raio) 0 0; }
.orc-bloco > .cartao-cab > div { flex: 1; min-width: 0; }
.orc-bloco .formulario { align-items: start; }
.orc-bloco > .cartao-cab h2 { font-size: 19px; }
.orc-bloco.orc-resumo { border-left-color: var(--ok); }
.orc-bloco.orc-resumo > .cartao-cab { background: color-mix(in srgb, var(--ok) 10%, var(--sup2)); }
@media (max-width: 700px) {
  .orc-passos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .orc-passos li button { flex-direction: column; gap: 4px; padding: 8px 4px; text-align: center; }
  .cat-lista { padding: 4px 10px 10px; }
  .cat-bloco-cab, .catalogo summary { padding-left: 12px; padding-right: 12px; }
  .cat-atalhos { padding: 8px 10px; }
  .orc-passo-txt small { display: none; }
  .orc-passo-txt b { font-size: 12px; }
}

/* Preços: bloco fixo "Controladoras NovaStar" (pedido do usuário em 11/10) — à direita da lista no computador, no topo no celular */
.cat-corpo.com-lado { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 0 18px; align-items: start; padding-right: 16px; }
.cat-corpo.com-lado > .cat-lado { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--topo-alt, 96px) + 62px); margin-top: 14px; }
.cat-corpo.com-lado > .cat-lista { grid-column: 1; grid-row: 1; }
.cat-lado details { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--sup); overflow: hidden; box-shadow: var(--sombra); }
.cat-lado summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--marinho); color: #fff; font-family: var(--fonte-tit); font-weight: 800; font-size: 15px; cursor: pointer; list-style: none; }
.cat-lado summary::-webkit-details-marker { display: none; }
.cat-lado summary svg { width: 18px; height: 18px; flex: none; }
.cat-lado summary small { margin-left: auto; background: rgba(255, 255, 255, .18); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-family: var(--fonte); }
.cat-lado ul { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - var(--topo-alt, 96px) - 190px); overflow-y: auto; }
.cat-lado li:nth-child(even) button { background: var(--zebra); }
.cat-lado li button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 14px; border: 0; border-top: 1px solid var(--linha); background: var(--sup); color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.cat-lado li button:hover, .cat-lado li button:focus-visible { background: var(--zebra-foco); }
.cat-lado-nome { display: grid; min-width: 0; }
.cat-lado-nome b { font-size: 14px; }
.cat-lado-nome small { color: var(--muda); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-lado-preco { display: flex; align-items: baseline; gap: 6px; flex: none; font-family: var(--fonte-tit); font-weight: 900; font-size: 15px; font-variant-numeric: tabular-nums; }
.cat-lado-preco small { font-family: var(--fonte); font-weight: 600; font-size: 11px; color: var(--tinta2); }
.cat-lado-nota { margin: 0; padding: 7px 14px; font-size: 11.5px; color: var(--muda); border-top: 1px solid var(--linha); background: var(--sup2); }
.catalogo > li.destaque > details > summary { background: var(--acento-sup); box-shadow: inset 4px 0 0 var(--azul); }
@media (max-width: 1099px) {
  .cat-corpo.com-lado { display: block; padding-right: 0; }
  .cat-corpo.com-lado > .cat-lado { position: static; margin: 12px 16px 0; }
  .cat-lado ul { max-height: 340px; }
}
@media (max-width: 700px) { .cat-corpo.com-lado > .cat-lado { margin: 10px 10px 0; } }
.catalogo > li { scroll-margin-top: calc(var(--topo-alt, 96px) + 66px); }  /* ao abrir pelo bloco NovaStar, o produto aparece abaixo dos atalhos */

/* ===== Orçamentos (pedidos do usuário em 11/10): situação na lista, publicidade, cliente, itens como a planilha, PDF, Análises ===== */
.orc-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtro-pub { border: 1px solid color-mix(in srgb, var(--ouro) 45%, var(--borda)); background: var(--sup); color: var(--ouro-escuro); border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }  /* desmarcado: neutro (11/10) */
.filtro-pub[aria-pressed="true"] { background: color-mix(in srgb, var(--ouro) 18%, var(--sup)); border-color: var(--ouro); color: var(--ouro-escuro); box-shadow: inset 0 0 0 1px var(--ouro); }
.chip-pub { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: var(--ouro-escuro); background: color-mix(in srgb, var(--ouro) 14%, transparent); white-space: nowrap; }
.sit-cel { display: grid; gap: 2px; justify-items: start; }
.sit-cel small { font-size: 11.5px; max-width: 220px; }
.sit-select { border: 1px solid var(--borda); border-radius: 999px; padding: 4px 26px 4px 10px; font: inherit; font-size: 13px; font-weight: 700; background-color: var(--sup2); color: var(--tinta); cursor: pointer; }
.sit-select.sit-enviado { background-color: var(--info-sup); color: var(--info); border-color: transparent; }
.sit-select.sit-aprovado, .sit-select.sit-pedido { background-color: var(--ok-sup); color: var(--ok); border-color: transparent; }
.sit-select.sit-perdido { background-color: var(--perigo-sup); color: var(--perigo); border-color: transparent; }
.sit-select option { color: var(--tinta); background: var(--sup); }
.dialogo-motivo .motivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; margin: 4px 0 12px; }
.dialogo-motivo .motivos label { display: flex; align-items: center; gap: 8px; font-size: 14.5px; cursor: pointer; }
.dialogo-motivo input:not([type]) { width: 100%; }
.dup-lista { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 8px; }
.dup-lista li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--sup2); }
/* cliente: perfil de relance + "ver mais" */
.cli-perfil { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--sup2); display: grid; gap: 8px; }
.cli-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-perfil { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--sup); border: 1px solid var(--linha); color: var(--tinta2); }
.chip-perfil.pub { background: color-mix(in srgb, var(--ouro) 14%, var(--sup)); border-color: color-mix(in srgb, var(--ouro) 50%, transparent); color: var(--ouro-escuro); font-weight: 800; }
.chip-perfil.porte-grande { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.chip-perfil.alerta { color: var(--alerta); background: var(--alerta-sup); border-color: transparent; }
.cli-ativ { margin: 0; font-size: 13px; color: var(--muda); }
.cli-links { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; }
.cli-links a { color: var(--azul); font-weight: 600; }
/* 22/10 (pedido do usuário): os links do cliente em ícones redondos (o nome aparece ao parar o mouse) */
.cli-links a.cli-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--borda); background: var(--sup); color: var(--azul); }
.cli-links a.cli-ic:hover { border-color: var(--azul); background: var(--acento-sup); }
.cli-links a.cli-ic:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.cli-links a.cli-ic svg { width: 19px; height: 19px; }
details.cli-mais { margin: 10px 0 4px; border: 1px solid var(--linha); border-radius: var(--raio); }
details.cli-mais > summary { padding: 9px 14px; cursor: pointer; font-weight: 700; color: var(--marinho); }
details.cli-mais > summary small { font-weight: 500; color: var(--muda); }
details.cli-mais[open] > summary { border-bottom: 1px solid var(--linha); }
details.cli-mais > .formulario, details.cli-mais > .cli-motivo, details.cli-mais > .cli-receita { margin-left: 14px; margin-right: 14px; }
.cli-motivo { margin: 0 0 6px; font-size: 12.5px; }
.cli-receita { margin: 6px 14px 12px; }
/* "Ver todos os dados do cliente": rótulo e valor em duas colunas, o valor alinhado à esquerda (pedido do usuário em 11/10) */
.cli-receita li { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; justify-content: start; gap: 4px 16px; }
.cli-receita li b { font-weight: 600; text-align: left; }
@media (max-width: 700px) { .cli-receita li { grid-template-columns: 1fr; } }
/* itens da proposta como a planilha: cabeçalho azul-marinho, grade, zebra e VALOR TOTAL na última linha */
.orc-itens.planilha { padding: 0 16px 16px; }
.orc-itens.planilha table { border-collapse: collapse; width: 100%; border: 1px solid var(--borda); }
.orc-itens.planilha thead th { background: var(--marinho); color: #fff; text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--marinho) 70%, #fff); }
.orc-itens.planilha tbody td { border: 1px solid var(--linha); padding: 7px 10px; vertical-align: top; }
.orc-itens.planilha tbody tr:nth-child(even) td { background: var(--zebra); }
.orc-itens.planilha .orc-item-tipo { display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muda); margin-bottom: 2px; }
.orc-itens.planilha .orc-unit { display: grid; gap: 4px; justify-items: end; }
.orc-itens.planilha .orc-unit select { font-size: 12.5px; padding: 3px 6px; }
.orc-itens.planilha .orc-unit input { width: 120px; text-align: right; }
.orc-itens.planilha tfoot td { background: var(--sup3); border: 1px solid var(--borda); padding: 9px 10px; font-family: var(--fonte-tit); font-weight: 900; font-size: 15px; color: var(--marinho); }
/* botões da proposta: o PDF em destaque; o .pptx discreto */
.btn.btn-pdf { background: var(--marinho); border-color: var(--marinho); color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.btn.btn-pdf:hover { filter: brightness(1.12); }
.pptx-link { font-size: 12.5px; color: var(--muda); }
.pptx-link.desativado { opacity: .5; }
/* meta do mês: vendido (cheio) + em negociação (listrado) com as marcas das faixas */
.meta-orc { display: grid; gap: 6px; }
.meta-orc.compacta { min-width: 150px; max-width: 220px; gap: 3px; }
.meta-orc small { font-size: 12px; color: var(--muda); }
.mo-trilho { position: relative; height: 12px; border-radius: 999px; background: var(--trilho); overflow: visible; }
.meta-orc.compacta .mo-trilho { height: 8px; }
.mo-vendido { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--ok); }
.mo-neg { position: absolute; top: 0; bottom: 0; border-radius: 0 999px 999px 0; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ok) 55%, transparent) 0 4px, color-mix(in srgb, var(--ok) 25%, transparent) 4px 8px); }
.mo-marca { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; border-radius: 2px; }
.mo-marca.Bronze { background: var(--bronze); } .mo-marca.Prata { background: var(--prata); } .mo-marca.Ouro { background: var(--ouro); } .mo-marca.Diamante { background: var(--diamante); }
/* Análises */
.orc-an-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.orc-an-filtros select { max-width: 220px; }
.orc-an-filtros .btn { margin-left: auto; }
.an-sub { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muda); }
.an-nota { margin: 10px 0 0; font-size: 12.5px; }
@media (max-width: 700px) {
  .orc-itens.planilha { padding: 0 0 12px; }
  .orc-itens.planilha table { border: 0; }
  .orc-itens.planilha tbody td { border: 0; }
  .orc-itens.planilha tfoot, .orc-itens.planilha tfoot tr { display: block; }
  .orc-itens.planilha tfoot td { display: flex; justify-content: space-between; border: 0; border-top: 2px solid var(--marinho); }
  .orc-itens.planilha tfoot td[colspan] { display: none; }
  .orc-itens.planilha tfoot td[data-r]::before { content: attr(data-r); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
  .orc-itens.planilha .orc-unit { justify-items: end; }
  .orc-an-filtros .btn { margin-left: 0; }
  .meta-orc.compacta { max-width: none; }
}
.link-btn.perigo-texto { color: var(--perigo); }
.orc-itens.planilha th:first-child, .orc-itens.planilha td:first-child { width: 190px; max-width: 190px; }
.orc-itens.planilha td:first-child select { width: 100%; max-width: 180px; }
.orc-itens.planilha td.quebra { min-width: 260px; }
.orc-itens.planilha th:nth-child(n+4), .orc-itens.planilha td:nth-child(n+4) { white-space: nowrap; }
.meta-orc.compacta small { white-space: nowrap; }
@media (max-width: 700px) {
  .orc-itens.planilha th:first-child, .orc-itens.planilha td:first-child { width: auto; max-width: none; }
  .orc-itens.planilha td:first-child select { max-width: 60vw; }
  .orc-itens.planilha td.quebra { min-width: 0; }
}
/* Tabela de preços › Parâmetros: cabeçalho do bloco azul-marinho (blocos-azuis) e a linha "Parâmetro | Valor" em azul mais claro (11/10) */
/* (11/10: Parâmetros voltaram ao visual simples; ver .param-lista) */
.chip-perfil.suframa { color: var(--ok); background: var(--ok-sup); border-color: transparent; }
.campo-fixo { margin: 8px 0 0; font-size: 13.5px; }

/* ===== Venda (11/10): Converter em venda, comemoração, Dados da venda, ações em duas linhas ===== */
.btn.btn-venda { background: var(--verde); border-color: var(--verde); color: #04210F; font-weight: 800; padding: 6px 12px; white-space: nowrap; }
.btn.btn-venda:hover { filter: brightness(1.06); }
button.chip-venda { border: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; }
.orc-acoes-sec { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--linha); }
.orc-acoes-rot { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muda); margin-right: 4px; }
.orc-venda { border-left-color: var(--verde) !important; }
.orc-venda > .cartao-cab { background: color-mix(in srgb, var(--verde) 12%, var(--sup2)); }
.venda-status { margin: 0 0 12px; padding: 9px 12px; border-radius: var(--raio-p, 8px); font-size: 14px; font-weight: 600; }
.venda-status.alerta { background: var(--alerta-sup); color: var(--alerta); }
.venda-status.info { background: var(--info-sup); color: var(--info); }
.venda-status.ok { background: var(--ok-sup); color: var(--ok); }
.venda-entrega { margin: 14px 0 6px; display: grid; gap: 8px; }
.venda-entrega textarea { width: 100%; }
.venda-pend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 4px; font-size: 13.5px; }
.venda-lancar { margin-top: 12px; }
.venda-lancar input { max-width: 220px; }
.btn.btn-lancar { background: var(--verde); border-color: var(--verde); color: #04210F; font-weight: 800; font-size: 15px; padding: 10px 22px; }
.btn.btn-lancar:disabled { opacity: .45; cursor: not-allowed; }
/* Salvar do orçamento (14/10): verde quando há mudança para salvar; sem mudança, cinza e sem clique */
.btn.btn-gravar { background: var(--verde); border-color: var(--verde); color: #04210F; font-weight: 800; }
.btn.btn-gravar:hover:not([disabled]) { filter: brightness(1.05); }
.btn.btn-gravar[disabled] { background: var(--sup); border-color: var(--linha); color: var(--muda); font-weight: 600; opacity: 1; cursor: not-allowed; }
.venda-resumo { margin: 0 0 8px; }
.festa-venda { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(0, 199, 86, .28), rgba(8, 19, 29, .62) 62%);
  animation: festa-entra .25s ease-out; cursor: pointer; }
.festa-venda.saindo { opacity: 0; transition: opacity .4s ease; }
.festa-confete { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.festa-caixa { position: relative; display: grid; justify-items: center; gap: 6px; padding: 26px 34px 22px; border-radius: 22px; background: var(--sup); color: var(--tinta);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45); text-align: center; max-width: min(440px, calc(100vw - 32px)); animation: festa-pop .55s cubic-bezier(.2, 1.4, .4, 1); }
.festa-icone { font-size: 52px; line-height: 1; }
.festa-caixa b { font-family: var(--fonte-tit); font-size: 30px; font-weight: 900; color: var(--ok); }
.festa-caixa span { font-weight: 700; }
.festa-caixa strong { font-family: var(--fonte-tit); font-size: 22px; color: var(--marinho); }
.festa-caixa small { color: var(--muda); font-size: 13px; }
@keyframes festa-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes festa-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .festa-venda, .festa-caixa { animation: none; } }
.orc-msg-fim:not(:empty) { margin-top: 12px; }
.orc-msg-fim p { margin: 0; }

/* Ações do orçamento à direita, menores que o Salvar (11/10). 14/10 (pedido do usuário: muitos botões → menores, principalmente na
   largura): cada um na largura do próprio nome, com nomes curtos */
.orc-acoes-sec { justify-content: flex-end; }
.btn.btn-acao { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: auto; min-width: 0; min-height: 32px; padding: 5px 11px; font-size: 13px;
  font-weight: 700; background: var(--sup); color: var(--tinta); border: 1px solid var(--borda); text-decoration: none; }
.btn.btn-acao:hover { background: var(--sup2); }
.btn.btn-acao svg { width: 15px; height: 15px; }
.btn.btn-acao.btn-pdf { background: var(--sup); color: var(--marinho); border-color: color-mix(in srgb, var(--marinho) 45%, transparent); }
.btn.btn-acao.btn-venda { background: var(--ok-sup); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); padding: 5px 11px; }
.btn.btn-acao.btn-aprovar { color: var(--ok); }
.btn.btn-acao.acao-perigo { color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 35%, transparent); }
.btn.btn-acao.desativado { opacity: .5; }
.orc-acoes-sec .orc-acoes-rot { margin-right: auto; }
.desc-acr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; }
.segmentos.mini button { padding: 5px 10px; font-size: 12.5px; }
.venda-ou { font-size: 12.5px; }
/* Tabela de preços › Parâmetros: linhas simples (nome · valor · unidade) */
.param-lista { display: grid; padding: 4px 16px 10px; }
.param-linha { display: grid; grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 0; border-top: 1px solid var(--linha); }
.param-linha:first-child { border-top: 0; }
.param-rotulo { font-weight: 600; }
.param-valor input { width: 100%; text-align: right; }
.param-unid { color: var(--muda); font-size: 12.5px; }
@media (max-width: 700px) {
  .param-linha { grid-template-columns: minmax(0, 1fr) 110px; }
  .param-unid { grid-column: 1 / -1; margin-top: -4px; }
  .btn.btn-acao { flex: 1 1 auto; min-width: 0; }  /* celular: cada linha cheia, na largura dos nomes (14/10) */
}
.venda-status.perigo { background: var(--perigo-sup); color: var(--perigo); }
.campo-lead { display: flex; gap: 8px; align-items: center; }
.campo-lead input { flex: 1; min-width: 0; }
.campo-lead-rot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }  /* 23/10: o nome do campo e o "Puxar do Kommo" */
.campo-lead-puxar { font-size: 12px; font-weight: 700; white-space: nowrap; }
.lead-acoes { display: inline-flex; flex-direction: column; gap: 4px; }
.lead-acoes .btn { text-align: center; white-space: nowrap; padding: 3px 10px; font-size: 12px; line-height: 1.35; }
.orc-do-lead { font-weight: 700; color: var(--azul); }
.filtro-seg { border: 1px solid var(--borda); background: var(--sup); color: var(--tinta2); border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 700; font-size: 13px; max-width: 260px; }
.filtro-seg.ativo { border-color: var(--azul); color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.campo-lead a[hidden] { display: none; }  /* sem ID do lead, o botão Kommo some (11/10) */
.cat-bloco[id] { scroll-margin-top: calc(var(--topo-alt, 96px) + 66px); }  /* atalhos Rental e 64x48 (11/10) */
/* Consultar CNPJ e Calcular frete: efeito enquanto busca (11/10) */
.btn.consultando::before { content: ''; display: inline-block; width: 13px; height: 13px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar .8s linear infinite; }
.consulta-espera { display: block; margin-top: 6px; color: var(--muda); font-size: 12.5px; animation: piscar 1.4s ease-in-out infinite; }
@keyframes piscar { 50% { opacity: .45; } }
.orc-frete { display: grid; gap: 6px; justify-items: start; }
.frete-opcoes { display: grid; gap: 6px; width: 100%; max-width: 520px; }
.frete-opcao { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; text-align: left; padding: 8px 12px; border: 1px solid var(--borda);
  border-radius: 10px; background: var(--sup); color: var(--tinta); font: inherit; font-size: 13.5px; cursor: pointer; }
.frete-opcao:hover { border-color: var(--azul); }
.frete-opcao small { color: var(--muda); }
.orc-avista-rot { font-weight: 600; }
.orc-itens td input[aria-label="Descrição"] { width: 100%; min-width: 220px; }  /* descrição da instalação, do frete e do outro item inteira (11/10) */
/* Expedição e Financeiro (12/10) */
.exp-nota { margin: -4px 0 10px; font-size: 13px; }
.exp-filtros { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filtro-exp { border: 1px solid var(--borda); background: var(--sup); color: var(--tinta2); border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.filtro-exp.ativo { border-color: var(--ok); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
.exp-lista { display: grid; gap: 10px; }
.exp-linha { background: var(--sup); border: 1px solid var(--linha); border-left: 5px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; display: grid; gap: 8px; }
.exp-linha.pago { border-left-color: var(--ok); }
.exp-linha.despachado { opacity: .72; }
.exp-cab { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.exp-prazo { display: grid; justify-items: center; min-width: 78px; padding: 6px 8px; border-radius: 10px; background: var(--sup2); line-height: 1.15; }
.exp-prazo b { font-size: 17px; }
.exp-prazo small { font-size: 11.5px; color: var(--muda); }
.exp-prazo.atrasado { background: var(--perigo-sup); color: var(--perigo); }
.exp-prazo.atrasado small { color: var(--perigo); }
.exp-prazo.perto { background: var(--alerta-sup); color: var(--alerta); }
.exp-prazo.perto small { color: var(--alerta); }
.exp-cliente { display: grid; gap: 2px; min-width: 0; }
.exp-cliente b { font-size: 15.5px; }
.exp-sinais { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.exp-pedidos { display: grid; gap: 6px; }
.exp-pedido { display: grid; gap: 3px; padding: 8px 10px; border-radius: 10px; background: var(--sup2); }
.exp-ped-cab { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 13.5px; }
.exp-itens { font-size: 13px; color: var(--tinta2); }
.exp-obs { color: var(--alerta); font-weight: 600; }
.exp-conta { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: color-mix(in srgb, var(--azul) 14%, transparent); color: var(--azul); }
.exp-conta.est { background: color-mix(in srgb, var(--bronze) 18%, transparent); color: var(--bronze); }
.exp-rodape { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.exp-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.nf-chip { text-decoration: none; }
.dialogo-exp .formulario { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.dialogo-exp .campo.largo { grid-column: 1 / -1; }
.acoes-linha { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.rec-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rec-lista li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--sup2); }
.rec-indicar { display: inline-flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
@media (max-width: 700px) { .exp-cab { grid-template-columns: auto 1fr; } .exp-sinais { grid-column: 1 / -1; justify-content: flex-start; } }
/* Versões do orçamento (12/10) */
.orc-versoes { margin: -6px 0 10px; font-size: 13.5px; color: var(--tinta2); }
.orc-versoes select { margin-left: 6px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--borda); background: var(--sup); color: var(--tinta); font: inherit; max-width: 100%; }
.orc-versoes label { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; max-width: 100%; }  /* celular: o total na versão não passa da tela (12/10) */
.orc-versao-aviso { margin-bottom: 10px; }
details.lr-dobra > summary { padding: 12px 16px; cursor: pointer; font-weight: 700; color: var(--marinho); }
details.lr-dobra[open] > summary { border-bottom: 1px solid var(--linha); }
.orc-somente-leitura .orc-bloco[inert] .cartao-corpo, .orc-somente-leitura .orc-bloco[inert] > div:not(.cartao-cab) { opacity: .88; }
/* Condições: empresa vendedora e garantia no fim, discretas (12/10) */
.cond-raros { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--linha); }
.orc-sim { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--borda-nitida); }  /* 23/10 (pedido do usuário): a linha acima do "Mostrar um segundo valor" bem à vista */
.orc-visual-4 .orc-sim { border-top-color: var(--v4-borda); }
/* plano de boletos com juros (14/10): o bloco nas Condições, os trechos, as opções e a tabela dos boletos */
.orc-plano { margin-top: 12px; border: 1px solid var(--linha); border-left: 4px solid var(--azul); border-radius: 12px; overflow: hidden; }
.orc-plano-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: #0B2545; color: #FFFFFF; }
.orc-plano-cab small { opacity: .85; font-size: 12px; }
.plano-taxa-auto { display: flex; align-items: center; gap: 8px; min-height: 42px; }
.plano-taxa-auto input { max-width: 110px; }
.plano-taxa-valor { font-size: 16px; }
.orc-plano > .formulario, .orc-plano > .campo, .orc-plano > .param-check, .orc-plano-res { margin: 12px 14px; }
.orc-plano-trechos { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.orc-plano-trecho { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.orc-plano-trecho input { width: 110px; }
.orc-plano-trecho label input { width: 64px; }
.orc-plano-ops { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.orc-plano-op { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--linha); border-radius: 10px; min-width: 200px; flex: 1 1 220px; }
.orc-plano-op span { font-size: 13px; }
.orc-plano-tab summary { cursor: pointer; color: var(--link); font-size: 13px; margin-top: 6px; }
.orc-plano-tab table { font-size: 12.5px; }
.orc-qtd { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.orc-por-painel { font-size: 11.5px; white-space: nowrap; }
.orc-total-juros td { font-weight: 700; }
/* painéis parecidos já vendidos (14/10): no bloco 2, recolhível */
.orc-parecidos-cx { margin-top: 12px; border: 1px solid var(--linha); border-left: 4px solid var(--verde); border-radius: 12px; padding: 10px 14px; }
.orc-parecidos-cx > summary { cursor: pointer; font-weight: 700; }
.orc-parecidos-corpo h4 { margin: 10px 0 4px; font-size: 13.5px; }
.orc-parecidos-corpo ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }
.orc-parecidos-corpo .chip { margin-left: 6px; }
.orc-parecidos-frase { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; }
.orc-parecidos-vazio { margin-top: 10px; }
/* Dia a dia (14/10): "Total repassados" em destaque, para a SDR conferir */
.tabela-dias .destaque-col { background: var(--acento-sup); color: var(--link); font-weight: 800; border-left: 2px solid var(--acento); border-right: 2px solid var(--acento); }
/* Vídeos (14/10): a biblioteca do QNAP */
.video-topo { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; margin-bottom: 8px; }
.video-filtros { margin: 6px 0 10px; }
.video-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.video-item { border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; display: grid; gap: 5px; }
.video-nome { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.video-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.video-caminho { font-size: 12px; }
.video-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.video-copias summary { cursor: pointer; font-size: 12.5px; color: var(--link); }
.video-copias ul { margin: 4px 0 0; padding-left: 16px; font-size: 12px; }
.video-lista-orc .video-item { padding: 8px 10px; }
.dialogo-video { max-width: 760px; }
.chave-produtos { margin: 0 0 12px; }
/* Aprovações para decidir (14/10): o pedido expande com a análise */
.aprov-item { border: 1px solid var(--linha); border-left: 4px solid var(--acento); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }  /* 15/10: a borda azul à esquerda, como em Editar produto */
.aprov-item summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; list-style: none; }
.aprov-item summary::-webkit-details-marker { display: none; }
.aprov-item .aprov-tit { font-size: 18px; font-weight: 600; color: var(--tinta); }
.aprov-item .aprov-tit b { font-weight: 800; }
.aprov-item .aprov-sub { flex-basis: 100%; font-size: 13px; }
.aprov-item[open] summary { border-bottom: 1px solid var(--linha); padding-bottom: 8px; margin-bottom: 8px; }
.aprov-bloco h4 { margin: 4px 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: var(--tinta2); }
.aprov-bloco .lista-param li { padding: 4px 0; }
/* 19/10: o resumo rápido da aprovação (veredito, os números que decidem e "para onde vai o dinheiro") */
:root { --seg-custo: #5B6B7D; --seg-desp: #8E7CC3; --seg-imp: #D9822B; --seg-cartao: #C2A23A; --seg-din: #2A7FB8; --seg-com: #B5568A; --seg-rep: #7A9A3A; --seg-outros: #B8C2CC; --seg-lucro: #1E9E5A; }
:root[data-theme="dark"] { --seg-custo: #8696A8; --seg-desp: #A898DA; --seg-imp: #E9984A; --seg-cartao: #D6B955; --seg-din: #4FA3DB; --seg-com: #D27AAA; --seg-rep: #98B85A; --seg-outros: #5D6B78; --seg-lucro: #34C77A; }
.aprov-resumo { border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; margin: 4px 0 12px; }
.aprov-veredito { margin: 0 0 10px; padding: 8px 12px; border-radius: var(--raio-p); font-size: 16px; font-weight: 700; }
.aprov-veredito.ok { background: var(--ok-sup); color: var(--ok); }
.aprov-veredito.alerta { background: var(--alerta-sup); color: var(--alerta); }
.aprov-veredito.perigo { background: var(--perigo-sup); color: var(--perigo); }
.aprov-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-bottom: 12px; }
.aprov-kpi { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: var(--raio-p); background: var(--zebra); }
.aprov-kpi span { font-size: 12px; color: var(--tinta2); text-transform: uppercase; letter-spacing: .02em; }
.aprov-kpi b { font-size: 20px; font-variant-numeric: tabular-nums; }
.aprov-kpi small { font-size: 12px; color: var(--tinta2); }
.aprov-kpi.ok b { color: var(--ok); } .aprov-kpi.alerta b { color: var(--alerta); } .aprov-kpi.perigo b { color: var(--perigo); }
.aprov-barra-tit { margin: 0 0 4px; font-size: 13px; }
.aprov-barra { display: flex; height: 26px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--fundo, transparent); }
.aprov-barra .seg { display: flex; align-items: center; justify-content: center; min-width: 2px; color: #FFFFFF; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.aprov-barra .seg-outros { color: #1B2A38; }
.seg-custo { background: var(--seg-custo); } .seg-desp { background: var(--seg-desp); } .seg-imp { background: var(--seg-imp); } .seg-cartao { background: var(--seg-cartao); }
.seg-din { background: var(--seg-din); } .seg-com { background: var(--seg-com); } .seg-rep { background: var(--seg-rep); } .seg-outros { background: var(--seg-outros); }
.seg-lucro { background: var(--seg-lucro); }
.aprov-legenda { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 3px 16px; font-size: 13px; }
.aprov-legenda li { display: grid; grid-template-columns: 12px 1fr auto 48px; align-items: center; gap: 8px; }
.aprov-legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.aprov-legenda b { font-variant-numeric: tabular-nums; } .aprov-legenda small { color: var(--tinta2); text-align: right; font-variant-numeric: tabular-nums; }
.aprov-fatos { display: flex; flex-wrap: wrap; gap: 6px; }
.aprov-cascata { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 2px 0 10px; }
.aprov-cascata td { padding: 4px 6px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.aprov-cascata td.num { text-align: right; font-variant-numeric: tabular-nums; }
.aprov-cascata td:nth-child(3) { color: var(--tinta2); width: 56px; }
.aprov-cascata .cas-trilho { width: 42%; min-width: 120px; position: relative; padding: 0; }
@media (max-width: 640px) { .aprov-cascata .cas-trilho { display: none; } }  /* o espaço do gráfico que saiu: só no computador */
.aprov-cascata .cas-total td { font-weight: 700; }
.aprov-cascata .cas-lucro td { font-weight: 800; font-size: 15px; border-bottom: 0; border-top: 2px solid var(--tinta2); }
.aprov-cascata .cas-lucro.ok td:nth-child(-n+2) { color: var(--ok); } .aprov-cascata .cas-lucro.perigo td:nth-child(-n+2) { color: var(--perigo); }
.seg-total { background: var(--tinta2); } .seg-prejuizo { background: var(--perigo); }
.aprov-det-titulo { margin: 6px 0 2px; font-size: 13px; }
.aprov-secao { border: 1px solid var(--linha); border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; }  /* 19/10: a seção 2 (os números um por um) */
.aprov-botoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-top: 10px; }
.aprov-botoes .aprov-btn { width: 100%; min-height: 44px; font-size: 15px; font-weight: 700; justify-content: center; border-radius: 10px; }
.aprov-btn-ok { background: var(--ok); border-color: var(--ok); color: #FFFFFF; }
.aprov-btn-negar { background: var(--perigo); border-color: var(--perigo); color: #FFFFFF; }
.aprov-btn-contra { background: var(--acento); border-color: var(--acento); color: #FFFFFF; }
.aprov-btn-abrir { background: var(--sup); border-color: var(--borda); color: var(--tinta); }
.aprov-botoes .aprov-btn:hover { filter: brightness(1.08); }
.aprov-recomendado { margin: 0 0 10px; padding: 8px 12px; border-radius: var(--raio-p); font-size: 14px; }
.aprov-recomendado small { display: block; margin-top: 2px; color: var(--tinta2); font-size: 12.5px; }
.aprov-caminhos { margin-top: 8px; font-size: 14px; color: var(--tinta); }
.aprov-caminhos ul { margin: 4px 0 0; padding-left: 18px; }
.aprov-caminhos li { margin: 2px 0; }
.aprov-recomendado.ok { background: var(--ok-sup); } .aprov-recomendado.ok b { color: var(--ok); }
.aprov-recomendado.alerta { background: var(--alerta-sup); } .aprov-recomendado.alerta b { color: var(--alerta); }
.aprov-boletos { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.aprov-boletos small { font-weight: 400; color: var(--tinta2); font-size: 12.5px; }
/* 19/10: cada custo abre o detalhe (explicação e a conta) */
.aprov-bloco .lista-param li.aprov-det { display: block; }
.aprov-det summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.aprov-det summary::-webkit-details-marker { display: none; }
.aprov-det summary > span { text-decoration: underline dotted; text-underline-offset: 3px; }
.aprov-det-seta { display: inline-block; width: 1em; color: var(--tinta2); transition: transform .15s; }
.aprov-det details[open] .aprov-det-seta { transform: rotate(90deg); }
.aprov-det-corpo { margin: 6px 0 6px 1em; padding: 8px 10px; background: var(--zebra); border-radius: var(--raio-p); font-size: 13px; }
.aprov-det-expl { margin: 0 0 6px; color: var(--tinta2); }
.aprov-det-corpo .aviso-barra { margin: 6px 0; }
.aprov-det-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 4px 0 6px; }
.aprov-det-tab th, .aprov-det-tab td { padding: 3px 6px; border-bottom: 1px solid var(--linha); text-align: left; }
.aprov-det-tab .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aprov-det-tab tfoot td { font-weight: 700; border-bottom: 0; }
.aprov-corpo .cor-ok { color: var(--verde); }
.aprov-corpo .cor-alerta { color: #b4531a; }
/* Pagar vendedores (14/10): o cálculo do bônus mês a mês, clicando no nome */
.bonus-detalhe { max-width: 720px; }
.bonus-detalhe summary { cursor: pointer; list-style: none; }
.bonus-detalhe summary::-webkit-details-marker { display: none; }
.bonus-detalhe[open] summary small { color: var(--link); }
.bonus-meses { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.bonus-meses th, .bonus-meses td { padding: 3px 8px; border-bottom: 1px solid var(--linha); text-align: left; }
.bonus-meses .num { text-align: right; }
/* vídeos enviados pelo sistema e cases do site (14/10): miniatura com play, destaque, sugestão da IA, envio em partes e o player */
.video-item.com-thumb { grid-template-columns: 148px 1fr; column-gap: 12px; }
/* 16/10: o vídeo em cartão (miniatura em cima, título, etiquetas, descrição e dois botões + "⋯") */
.video-item.video-card { padding: 0; overflow: visible; display: flex; flex-direction: column; background: var(--sup); }
.video-card > .video-thumb { width: 100%; border-radius: 10px 10px 0 0; }
.video-card.destaque { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.video-card-corpo { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; flex: 1; }
.video-card .video-nome { flex-wrap: nowrap; align-items: flex-start; }
.video-titulo { font-size: 14.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-desc { font-size: 12.5px; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.video-card .video-acoes { margin-top: auto; padding-top: 4px; }
/* 16/10: os botões pequenos do cartão (WhatsApp, Kommo + link do lead, ícones), sem o menu "⋯" */
.video-card .video-acoes { gap: 6px; }
.video-icones { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.video-acoes .btn.pequeno.icone { min-width: 30px; padding: 3px 6px; text-align: center; font-size: 13px; }
.video-acoes .video-wa { color: #fff; background: #1f9d55; border-color: #1f9d55; }
.video-acoes .video-kommo { color: #fff; background: #2b5797; border-color: #2b5797; border-radius: 6px 0 0 6px; }
.video-kommo-grupo { display: inline-flex; align-items: stretch; flex: 1 1 150px; min-width: 0; }
.video-lead-url { flex: 1; width: 0; min-width: 60px; font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--linha); border-left: 0; border-radius: 0 6px 6px 0; background: var(--sup); color: var(--tinta); }
/* 16/10: o envio de vários vídeos (imagem, duração, repetido, barra) e o botão da IA */
.envio-fila { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 8px; }
.envio-item { display: grid; grid-template-columns: 112px 1fr auto; gap: 10px; align-items: start; border: 1px solid var(--linha); border-radius: 10px; padding: 8px; background: var(--sup); }
.envio-item.erro { border-color: var(--perigo); }
.envio-item.ok { border-color: var(--verde); }
.envio-thumb { position: relative; width: 112px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--marinho); color: #fff; display: grid; place-items: center; font-size: 22px; }
.envio-thumb img { width: 100%; height: 100%; object-fit: cover; }
.envio-thumb .dur { position: absolute; right: 4px; bottom: 4px; font-size: 11px; background: rgba(0, 0, 0, .6); padding: 1px 4px; border-radius: 4px; }
.envio-info { display: grid; gap: 3px; min-width: 0; font-size: 13.5px; }
.envio-info progress { width: 100%; }
.envio-nome { font-size: 12px; }
.envio-repetido { color: #b4531a; font-size: 12.5px; }
.ok-texto { color: var(--verde); font-size: 12.5px; }
.video-ia-btn { width: 100%; justify-content: center; font-weight: 700; color: var(--link); background: var(--acento-sup); border-color: var(--acento); }
.ia-sugerido { background: var(--acento-sup) !important; border-color: var(--acento) !important; }
.video-legenda { font-size: 13px; margin: 4px 0 0; }
.video-menu { position: relative; }
.video-menu > summary { list-style: none; min-width: 36px; text-align: center; }
.video-menu > summary::-webkit-details-marker { display: none; }
.video-menu-lista { position: absolute; z-index: 20; right: 0; bottom: calc(100% + 4px); min-width: 250px; max-width: 320px; background: var(--sup); border: 1px solid var(--linha);
  border-radius: 10px; box-shadow: var(--sombra); padding: 6px; display: flex; flex-direction: column; }
.video-menu-lista > button, .video-menu-lista > a { all: unset; cursor: pointer; padding: 8px 10px; border-radius: 6px; font-size: 13.5px; color: var(--tinta); }
.video-menu-lista > button:hover, .video-menu-lista > a:hover, .video-menu-lista > button:focus-visible, .video-menu-lista > a:focus-visible { background: var(--zebra-foco); }
.video-menu-lista > .perigo-texto { color: var(--perigo); }
.video-menu-info { border-top: 1px solid var(--linha); margin-top: 4px; padding: 8px 10px 4px; font-size: 12px; display: grid; gap: 3px; }
.aviso-flutuante { position: fixed; right: 16px; bottom: 16px; z-index: 1000; max-width: min(420px, calc(100vw - 32px)); background: var(--marinho); color: #fff; padding: 12px 14px;
  border-radius: 10px; box-shadow: var(--sombra); font-size: 13.5px; display: flex; gap: 10px; align-items: flex-start; }
.aviso-flutuante .link-btn { color: #fff; text-decoration: underline; flex: none; }
.video-card > .video-thumb.case { aspect-ratio: 16 / 9; background: var(--marinho); }
.video-thumb.case .case-selo { font-size: 15px; font-weight: 700; }
.video-thumb.case img + .case-selo, .video-thumb.case img ~ .case-selo { inset: auto 8px 8px auto; font-size: 11px; background: rgba(0, 0, 0, .55); padding: 2px 6px; border-radius: 4px; display: block; }
.video-filtros-det > summary { cursor: pointer; font-weight: 700; color: var(--link); margin: 4px 0 8px; }
/* 16/10: cartões das listas do Estoque (Fora do catálogo, Ligações com o Bling) */
.cartoes-grade { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.item-cartao { border: 1px solid var(--linha); border-left: 4px solid var(--borda); border-radius: 12px; background: var(--sup); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.item-cartao.ligado { border-left-color: var(--ok); }
.item-cartao.decidido { opacity: .85; border-left-color: var(--info); }
.item-cartao-topo { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.item-cartao-topo small { display: block; margin-top: 2px; }
.item-cartao-tit { font-size: 14px; line-height: 1.3; }
.item-cartao-valor { text-align: right; flex: none; }
.item-cartao-valor b { display: block; font: 800 19px/1.1 var(--fonte-tit); font-variant-numeric: tabular-nums; color: var(--alerta); }
.item-cartao-valor small { font-size: 11.5px; color: var(--muda); }
.item-cartao-talvez, .item-cartao-bloco { background: var(--sup2); border-radius: 8px; padding: 8px 10px; display: grid; gap: 6px; }
.item-cartao-bloco { background: var(--ok-sup); }
.item-cartao-linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.item-cartao-bts { display: inline-flex; gap: 6px; flex: none; }
.item-cartao-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; }
.item-cartao .est-outro { width: 100%; }
.est-kpi-fixo { cursor: default; }
.compra-qtd { font-size: 15px; }
.compra-qtd.urgente { color: var(--perigo); }
.compra-det { max-width: 640px; }
.video-extensao summary { cursor: pointer; }
.video-extensao ol { margin: 8px 0 0; padding-left: 20px; line-height: 1.6; }
.video-item.com-thumb > .video-thumb { grid-row: 1 / span 6; align-self: start; }
.video-thumb { position: relative; display: block; width: 148px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #0b1220; border: 0; padding: 0; cursor: pointer; color: #fff; text-decoration: none; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-thumb .play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.video-thumb.parado { cursor: default; }
.video-thumb.parado .play { font-size: 12px; text-align: center; padding: 0 6px; background: rgba(0, 0, 0, .45); }
.video-thumb .dur { position: absolute; right: 6px; bottom: 5px; font-size: 11px; background: rgba(0, 0, 0, .65); padding: 1px 5px; border-radius: 4px; }
.video-thumb.case { aspect-ratio: 4 / 3; }
.btn-estrela { all: unset; cursor: pointer; font-size: 20px; line-height: 1; color: var(--muda); }
.btn-estrela.on, .chip.destaque { color: #c99400; }
.chip.destaque { font-weight: 700; }
.video-ia { background: var(--acento-sup); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.video-ia-topo { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 10px; }
.video-envio progress { width: 100%; height: 10px; margin-top: 8px; }
/* 22/10: a janela do vídeo mais larga (o "modo amplo"); 23/10 (pedido do usuário): tudo cabe na tela, sem barra de rolagem — o vídeo
   fica com a altura que sobra depois do título, das etiquetas e dos botões; o texto longo fica em até 2 linhas */
.dialogo-player { max-width: 1280px; width: 96vw; max-height: calc(100vh - 24px); overflow: hidden; }
.dialogo-player[open] { display: flex; flex-direction: column; }
.dialogo-player .dialogo-cab { padding: 12px 20px 4px; }
.dialogo-player .dialogo-cab h2 { font-size: 18px; margin: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.dialogo-player .dialogo-corpo { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 6px 20px 2px; }
.dialogo-player video { width: 100%; max-height: calc(100vh - 240px); min-height: 0; background: #000; border-radius: 8px; display: block; object-fit: contain; }
.dialogo-player .dialogo-corpo > p { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dialogo-player .dialogo-rodape { padding: 8px 20px 12px; }
@media (max-width: 640px) {
  .video-item.com-thumb { grid-template-columns: 1fr; }
  .video-item.com-thumb > .video-thumb { grid-row: auto; width: 100%; }
}
@media (max-width: 700px) { .video-topo { grid-template-columns: 1fr; } }
.hist-param > li { align-items: flex-start; gap: 12px; }
.venda-pag { margin: 14px 0 6px; padding-top: 10px; border-top: 1px dashed var(--linha); }
.notif-filtros { flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.com-avisos { margin: 0; padding-left: 16px; font-size: 12.5px; min-width: 180px; max-width: 240px; white-space: normal; }
.com-avisos li { margin: 2px 0; }
.com-regras { margin: 0; padding-left: 18px; }
.com-regras li { margin: 6px 0; }
.notif-lista { list-style: none; margin: 0; padding: 0; }
.notif-lista > li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.notif-lista > li.novo { background: var(--acento-sup); }
.notif-lista > li.novo b { color: var(--marinho); }
.notif-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 320px; }
.notif-acoes { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; }
.notif-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; }
.notif-outros > summary { cursor: pointer; margin: 8px 0; color: var(--link); }
.venda-pag h4 { margin: 0 0 4px; font-size: 14px; }
.pv-tabela input, .pv-tabela select { width: 100%; min-width: 0; }
.pv-tabela td:nth-child(1) { min-width: 150px; } .pv-tabela td:nth-child(3) { min-width: 150px; }
.hist-mudou { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.lista-param .hist-mudou li { display: list-item; padding: 1px 0; border-top: 0; }  /* o antes → depois em lista simples (14/10) */
.orc-sim-campos { margin-top: 8px; }
.formulario.orc-sim-campos { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }  /* 23/10: os campos da simulação do tamanho dos de cima (sem esticar) */
.cond-raros-tit { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muda); }
.cond-raros .campo label { font-size: 12.5px; color: var(--muda); font-weight: 600; }
.cond-raros select { font-size: 13.5px; color: var(--tinta2); opacity: .85; }
.cond-raros select:hover, .cond-raros select:focus { opacity: 1; }
.cond-raros .formulario { grid-template-columns: repeat(auto-fill, minmax(200px, 240px)); }
.orc-totais li.orc-nf-alternar { justify-content: flex-start; font-size: 13px; }  /* NF oculta até clicar (12/10) */
/* Bloco Cliente (12/10): Consultar CNPJ ao lado do CNPJ; razão social e contribuinte embaixo; selos e links na mesma linha */
.formulario.cli-linha { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (min-width: 760px) { .cli-linha .cli-largo { grid-column: span 2; } }
.cli-doc .btn { flex: none; white-space: nowrap; }
.cli-doc .consulta-espera { flex-basis: 100%; margin-top: 0; }
.cli-perfil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cli-perfil .cli-chips, .cli-perfil .cli-links { display: contents; }
.cli-perfil { padding: 10px 12px; }
.cli-perfil .chip-perfil { font-size: 12.5px; padding: 3px 9px; }
/* 19/10: CNPJ inapto na Receita — a linha toda em vermelho */
.cli-perfil.inapta { background: var(--perigo-sup); border: 1px solid var(--perigo); border-radius: 10px; }
.cli-perfil.inapta .chip-perfil { background: var(--perigo); color: #fff; border-color: var(--perigo); }
.cli-perfil.inapta .cli-links a { color: var(--perigo); }
.cli-perfil.inapta .cli-inapta { font-weight: 800; }
.cli-perfil .cli-links a { font-size: 13px; margin-left: 8px; white-space: nowrap; }
/* "Consultar" sempre ao lado do CNPJ, mesmo em janelas médias (12/10) */
.cli-doc { flex-wrap: nowrap; }
.cli-doc input { min-width: 0; flex: 1 1 auto; }
.orc-filtros .filtro-seg { max-width: 300px; }
/* Cliente numa linha só e "Redundância de sinal" Não | Sim (12/10) */
.formulario.cli-linha1 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (min-width: 1100px) { .formulario.cli-linha1 { grid-template-columns: 180px minmax(300px, 340px) minmax(220px, 1fr) 215px; } }
.segmentos.sim-nao { display: inline-flex; min-height: 44px; align-items: stretch; }
.segmentos.sim-nao button { min-width: 64px; }
.param-marcas { width: 100%; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borda); background: var(--sup); color: var(--tinta); }
/* Itens da proposta: colunas centralizadas, menos Produto; texto da estrutura editável (12/10) */
.orc-itens td.centro, .orc-itens th.centro { text-align: center; }
.orc-itens.planilha td.centro .orc-unit { justify-items: center; }
.orc-itens.planilha td.centro .orc-unit input { text-align: center; }
.orc-itens td.quebra textarea.orc-desc { display: block; width: 100%; font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--borda); border-radius: 8px; background: var(--sup); color: var(--tinta); resize: vertical; }
.campo > .segmentos.sim-nao { width: max-content; align-self: flex-start; justify-self: start; }
/* Itens da proposta: bordas um pouco mais escuras (pedido do usuário em 12/10) */
.orc-itens.planilha { --borda-itens: color-mix(in srgb, var(--borda) 55%, var(--muda)); }
.orc-itens.planilha table { border-color: var(--borda-itens); }
.orc-itens.planilha tbody td, .orc-itens.planilha tfoot td { border-color: var(--borda-itens); }
/* Itens da proposta: colunas (menos Produto) centralizadas também na altura da linha (pedido do usuário em 12/10) */
.orc-itens.planilha tbody td.centro, .orc-itens.planilha tfoot td { vertical-align: middle; }
.orc-itens td input[aria-label="Descrição da estrutura"] { width: 100%; min-width: 220px; }  /* igual à instalação (12/10) */
.orc-inst .orc-pedir-tec { font-size: 12.5px; }  /* pedir inclusão de técnico (12/10) */
.orc-itens.planilha tbody td.quebra { vertical-align: middle; }  /* Produto também no meio da linha (12/10) */
/* Instalações › Aprovar Novos Técnicos (12/10) */
.tec-aprovar { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tec-aprovar li { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--sup); }
.tec-aprovar-dados { display: grid; gap: 3px; min-width: 0; }
.tec-aprovar-dados b { font-size: 15px; }
.tec-aprovar .acao-perigo { color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 35%, transparent); }
/* Desconto/Acréscimo: campo da porcentagem mais largo (pedido do usuário em 12/10) */
.campo-desc .desc-acr { grid-template-columns: auto minmax(110px, 140px); }
@media (min-width: 900px) { .formulario .campo-desc { grid-column: span 2; } }
/* "Pouco alterados" fechado; abre com um clique (12/10) */
details.cond-raros > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muda); }
details.cond-raros > summary::-webkit-details-marker { display: none; }
details.cond-raros > summary::before { content: '▸'; font-size: 13px; transition: transform .15s; }
details.cond-raros[open] > summary::before { transform: rotate(90deg); }
details.cond-raros > summary small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.campo-desc .desc-acr { grid-template-columns: max-content minmax(110px, 140px); justify-content: start; }
/* Quem já atende este cliente (12/10) */
.atend { flex-basis: 100%; margin: 4px 0 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--sup); display: grid; gap: 6px; }
.atend-alerta { border-color: color-mix(in srgb, var(--alerta) 45%, transparent); background: var(--alerta-sup); }
.atend-tit { margin: 0; font-weight: 800; font-size: 13.5px; }
.atend-alerta .atend-tit { color: var(--alerta); }
.atend-lista { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13px; }
/* Menu agrupado (12/10): o segundo menu do grupo aberto, logo abaixo do topo */
.submenu-grupo { margin: 0 0 16px; }
.submenu-grupo .segmentos { max-width: 100%; overflow-x: auto; scrollbar-width: none; background: color-mix(in srgb, var(--marinho) 10%, var(--sup3)); }
.submenu-grupo .segmentos::-webkit-scrollbar { display: none; }
.submenu-grupo .segmentos button { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; padding: 8px 16px; white-space: nowrap; }
.submenu-grupo .segmentos button[aria-pressed="true"] { color: var(--marinho); }

/* Código do produto com sugestões (12/10): "Skyl" já mostra o Skyler */
.campo-sug { position: relative; }
.sugestoes { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: 4px 0; list-style: none;
  background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio-p); box-shadow: var(--sombra); max-height: 300px; overflow-y: auto; }
.sugestoes[hidden] { display: none; }
.sugestoes li { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; cursor: pointer; min-width: 0; }
.sugestoes li small { color: var(--muda); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sugestoes li[aria-selected="true"], .sugestoes li:hover { background: var(--acento-sup); }
/* Ambiente (12/10): a linha inteira do bloco 2, campo de largura média */
.orc-ambiente { grid-column: 1 / -1; }
.orc-ambiente input { max-width: 420px; }
.orc-ambiente small { display: block; margin-top: 4px; }
/* PDF com vários ambientes (12/10) */
.dialogo-amb { width: min(640px, calc(100vw - 32px)); }
.amb-itens { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.amb-itens li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio-p); }
.amb-itens li.marcado { background: var(--acento-sup); border-color: var(--acento); }
.amb-itens label { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.amb-itens label span { display: flex; flex-direction: column; min-width: 0; }
.amb-itens label small { color: var(--muda); }
.amb-ordem { display: flex; gap: 4px; flex: none; }
/* Consultar CNPJ (12/10): endereço, capital, contato e atividade fechados; o vendedor clica para ver */
.cnpj-mais { margin-top: 8px; }
.cnpj-mais > summary { cursor: pointer; font-weight: 700; color: var(--link); font-size: 13.5px; padding: 4px 0; }
.cnpj-mais[open] > summary { margin-bottom: 8px; }
/* Consultar CNPJ com dono → enviar para a SDR (12/10) */
.cnpj-sdr { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
/* Usuários do portal (12/10): colunas enxutas, sem rolagem lateral no navegador */
.usu-perfil { display: flex; flex-direction: column; gap: 2px; min-width: 170px; }
.usu-perfil small { color: var(--muda); font-size: 12.5px; }
.usu-acesso { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.usu-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
/* bloco 2 (12/10): colunas/fileiras ou "Quantidade" trocam sem sair da grade do formulário */
.orc-dims { display: contents; }
/* Tabela de preços › Controladoras (12/10): a ordem da sugestão automática */
.ctrl-ordem { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ctrl-ordem li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--sup); }
.ctrl-ordem li.ctrl-falta { opacity: .65; }
.ctrl-pos { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--marinho); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.ctrl-nome { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ctrl-nome small { color: var(--muda); }
.ctrl-botoes { display: flex; gap: 4px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.ctrl-fora { margin-top: 16px; }
.ctrl-fora .ctrl-ordem li { background: var(--sup2); }
/* submenus das páginas (Tabela de preços, Instalações, Financeiro…; 12/10): no celular rolam dentro da barra, sem rolagem lateral da página */
.submenu .segmentos { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.submenu .segmentos::-webkit-scrollbar { display: none; }
.submenu .segmentos button { flex: none; white-space: nowrap; }
/* Diretoria (12/10): lucro embaixo do total na lista e o bloco das análises do diretor */
.orc-lucro { display: block; font-size: 12px; }
.diretoria { margin: 8px 0 4px; padding-top: 8px; border-top: 2px solid var(--marinho); }
.diretoria-tit { font-family: var(--fonte-tit); font-size: 20px; margin: 4px 0 12px; color: var(--marinho); }
/* Aba Preços (12/10): botões da ficha e do termo; ficha técnica numa página própria */
.cat-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cat-acoes .btn { display: inline-flex; align-items: center; gap: 6px; }
.dialogo-ficha { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; display: flex; flex-direction: column; }
.dialogo-ficha[open] { display: flex; }
.ficha-cab { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; background: var(--sup2); border-bottom: 1px solid var(--linha); }
.ficha-foto { width: 120px; height: 120px; object-fit: contain; background: var(--sup); border-radius: var(--raio-p); flex: none; }
.ficha-tit { flex: 1; min-width: 0; }
.ficha-tit small { color: var(--muda); }
.ficha-tit h2 { margin: 2px 0 2px; font-family: var(--fonte-tit); font-size: 22px; }
.ficha-tit p { margin: 0 0 8px; color: var(--tinta2); }
.ficha-precos { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.ficha-precos b { font-size: 20px; color: var(--marinho); }
.ficha-precos small { color: var(--muda); }
.ficha-fechar { flex: none; }
.ficha-corpo { padding: 16px 20px; overflow-y: auto; }
.ficha-desc { margin: 0 0 14px; color: var(--tinta2); }
.ficha-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.ficha-grupo { border: 1px solid var(--borda); border-radius: var(--raio-m); overflow: hidden; }
.ficha-grupo h3 { margin: 0; padding: 8px 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--marinho); }
.ficha-grupo dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.ficha-grupo dt, .ficha-grupo dd { margin: 0; padding: 7px 12px; border-top: 1px solid var(--linha); font-size: 13.5px; }
.ficha-grupo dt { color: var(--tinta2); }
.ficha-grupo dd { font-weight: 600; }
.ficha-grupo dl > :nth-child(4n+3), .ficha-grupo dl > :nth-child(4n+4) { background: var(--zebra); }
@media (max-width: 600px) {
  .dialogo-ficha { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .ficha-cab { flex-wrap: wrap; }
  .ficha-foto { width: 84px; height: 84px; }
}
.dialogo-ficha .dialogo-rodape { flex-wrap: wrap; }
.dialogo-ficha .dialogo-rodape .btn { white-space: normal; text-align: center; }

/* Contrato inteligente (12/10): diálogo no orçamento, prévia com cara de documento, lista de contratos e o modelo na Tabela de preços */
.dialogo-ct { width: min(900px, calc(100vw - 32px)); }
.dialogo-ct .dialogo-cab p { margin: 2px 0 0; }
.ct-ver { margin: 10px 0 4px; }
.ct-ver summary { cursor: pointer; font-weight: 600; color: var(--link); padding: 6px 0; }
.ct-falta { margin: 4px 0 0 18px; padding: 0; }
.contrato-previa { background: #fff; color: #0E1B2A; border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 18px 22px; max-height: 55vh; overflow: auto;
  font-size: 13.5px; line-height: 1.5; }
.contrato-previa h3 { font-size: 14px; color: #123955; margin: 14px 0 6px; text-transform: uppercase; }
.contrato-previa p { margin: 0 0 7px; text-align: justify; }
.contrato-previa ul { margin: 2px 0 8px 18px; padding: 0; }
.contrato-previa table { border-collapse: collapse; margin: 4px 0 10px; }
.contrato-previa .ct-venc td { border: 1px solid #D8E0E8; padding: 3px 8px; font-size: 12.5px; }
.contrato-previa .ct-assin { width: 100%; margin-top: 14px; }
.contrato-previa .ct-assin td { width: 50%; padding: 22px 10px 4px; vertical-align: top; font-size: 12.5px; }
.ct-titulo { font-size: 15px; margin: 16px 0 6px; }
.ct-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ct-itens li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio-p); }
.ct-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ct-nome small { flex-basis: 100%; color: var(--muda); }
.ct-botoes { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-modelo { width: 100%; min-height: 420px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.45; }
.ct-ajuda { margin: 6px 0 10px; }
.ct-ajuda summary { cursor: pointer; font-weight: 600; color: var(--link); }
.ct-ajuda ul { margin: 6px 0 0 18px; padding: 0; color: var(--tinta2); font-size: 13px; }
.ct-ajuda li { margin: 0 0 4px; }
.ct-ajuda code { background: var(--sup3); padding: 0 4px; border-radius: 4px; }

/* A1 (12/10): composição do custo no produto, conflito ao salvar a Tabela de preços e o que mudou em Versões */
.comp-tabela input.comp-peca { width: 100%; min-width: 180px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--sup2); color: var(--tinta); font: inherit; }
.comp-tabela td { vertical-align: middle; }
.comp-acoes { justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.comp-total { margin: 6px 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.comp-numeros { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.comp-numeros span:not(.chip) { display: flex; flex-direction: column; }
.comp-numeros small { color: var(--muda); font-size: 12px; }
.dialogo-conflito { width: min(720px, calc(100vw - 32px)); }
.conflito { border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 8px 12px 10px; margin: 0 0 10px; }
.conflito legend { font-weight: 700; padding: 0 4px; }
.conflito label { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; cursor: pointer; word-break: break-word; }
.versao-resumo { display: block; color: var(--tinta2); font-size: 12.5px; margin-top: 2px; }
.pc-troca { margin-top: 10px; }
.pc-troca summary { cursor: pointer; font-weight: 600; color: var(--link); }
/* Orçamentos › Estoque (12/10): um item por linha, o número grande à direita (verde = tem; vermelho = faltam; cinza = sem estoque) */
.est-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 0 16px 12px; }
.est-filtros .busca { flex: 1 1 260px; max-width: 420px; }
.est-zerados { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; cursor: pointer; }
.est-grupo h3 { margin: 0; padding: 10px 16px 8px; font: 700 12.5px var(--fonte-tit); text-transform: uppercase; letter-spacing: .04em; color: var(--tinta2);
  background: var(--sup3); border-top: 1px solid var(--linha); }
.est-item { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--linha); }
.est-txt { min-width: 0; }
.est-txt > b { display: block; font-size: 14px; }
.est-txt > small { display: block; margin-top: 2px; }
.est-num { flex: none; min-width: 96px; text-align: right; }
.est-num b { display: block; font: 800 20px/1.15 var(--fonte-tit); font-variant-numeric: tabular-nums; }
.est-num small { font-size: 11.5px; color: var(--muda); }
.est-num.ok b { color: var(--ok); } .est-num.falta b { color: var(--perigo); } .est-num.zero b { color: var(--muda); }
.est-det { margin-top: 6px; }
.est-det summary { cursor: pointer; color: var(--link); font-weight: 600; font-size: 13px; }
.est-det .tabela-hist { max-width: 640px; }
.est-pedidos { margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.orc-estoque { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.orc-estoque > div { display: flex; flex-direction: column; gap: 3px; }
.orc-estoque small { color: var(--muda); font-size: 11.5px; }
.chip-estoque { white-space: normal; text-align: left; }
.cat-prod .chip-estoque { justify-self: start; margin: 3px 0 0; font-size: 11px; }  /* 14/10: embaixo da descrição (o preço não sai do lugar) */
/* Tabela de preços › Estoque no Bling (12/10) */
.est-ligados { display: flex; flex-wrap: wrap; gap: 4px; }
.est-ligados .chip { white-space: normal; display: inline-flex; align-items: center; gap: 4px; }
.chip-x { border: 0; background: none; color: inherit; font: 700 15px/1 var(--fonte); cursor: pointer; padding: 0 2px; opacity: .7; }
.chip-x:hover { opacity: 1; }
.est-sugs { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.est-outro { width: 150px; }
/* Área Estoque (16/10): os grupos em blocos com ícone (clicar filtra), o estoque e o custo do produto, os números do Resumo */
.est-blocos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.est-bloco { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px 6px 6px;
  border: 1px solid var(--linha); border-radius: 10px; background: var(--sup); font-size: 13.5px; color: var(--tinta); }
.est-bloco:hover, .est-bloco:focus-visible { border-color: var(--acento); background: var(--zebra-foco); }
.est-bloco:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.est-bloco[aria-pressed="true"] { border-color: var(--acento); background: var(--acento-sup); font-weight: 700; }
.est-bloco-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--sup2); color: var(--tinta2); flex: none; }
.est-bloco[aria-pressed="true"] .est-bloco-ico { color: var(--acento); background: var(--sup); }
.est-bloco b { font-variant-numeric: tabular-nums; color: var(--muda); }
.est-cel { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.est-cel .est-tem { color: var(--ok); }
.est-cel .est-zero { color: var(--perigo); }
.est-custo { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.est-det-prod .est-item:first-child { border-top: 0; }
.est-ligado { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.btn-remover { color: var(--perigo); }
.est-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; margin: 0 0 16px; }
.est-kpi { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--linha);
  border-left: 4px solid var(--borda); border-radius: 12px; background: var(--sup); color: var(--tinta); }
.est-kpi:hover { border-color: var(--acento); }
.est-kpi:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.est-kpi-tit { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--tinta2); }
.est-kpi b { font: 800 24px/1.1 var(--fonte-tit); font-variant-numeric: tabular-nums; }
.est-kpi small { font-size: 12.5px; color: var(--muda); }
.est-kpi.perigo { border-left-color: var(--perigo); } .est-kpi.perigo b { color: var(--perigo); }
.est-kpi.atencao { border-left-color: var(--alerta); } .est-kpi.atencao b { color: var(--alerta); }
.est-kpi.info { border-left-color: var(--info); }
.est-kpi.ok { border-left-color: var(--ok); }
.est-acoes li { align-items: center; }
.est-ia-pri { margin: 4px 0 10px; padding-left: 20px; display: grid; gap: 8px; font-size: 13.5px; }
.est-ia-pri small { display: block; }
/* Peças de backup (16/10): os campos "1 a cada N gabinetes" */
.bk-campo { display: inline-flex; align-items: center; gap: 6px; }
/* a conta do disponível no Estoque (16/10) */
.est-calc .tabela-hist { max-width: 720px; }
.est-calc .tabela-hist td { padding: 4px 8px; }
.est-calc-total td { font-weight: 800; border-top: 2px solid var(--borda); }
.est-calc-info td { color: var(--tinta2); font-style: italic; }
.est-calc-ped { font-size: 12.5px; margin: 4px 0 8px; max-width: 720px; }
.bk-num { width: 70px; text-align: right; }
@media (max-width: 600px) {  /* no celular os blocos dos grupos ficam numa faixa que rola para o lado */
  .est-blocos { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .est-bloco { flex: none; }
  .custos-filtros .segmentos { flex-wrap: wrap; max-width: 100%; }  /* os filtros quebram em linhas, sem alargar a página */
}
/* Orçamentos › Empresas e contas (12/10): texto e o botão de copiar lado a lado */
.copiar-linha { display: flex; align-items: flex-start; gap: 12px; }
.contas-texto { white-space: pre-line; line-height: 1.45; font-size: 13.5px; text-align: left; }
.cnpj-num { font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 4px; }
.btn-copiar { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.btn-copiar svg { width: 15px; height: 15px; }
.btn-copiar.copiado { background: var(--ok-sup, #DCFCE7); color: var(--ok, #15803D); border-color: currentColor; }
/* histórico do preço da peça (12/10) */
.tabela-hist { width: 100%; margin-top: 8px; font-size: 13.5px; }
.tabela-hist th, .tabela-hist td { padding: 6px 10px; }

/* Contrato v2 (12/10): edição no sistema e a prévia com o desenho novo (o HTML do contrato vem sem estilo em linha) */
.dialogo-ed { width: min(980px, calc(100vw - 32px)); }
.ed-motivo { width: 100%; font: inherit; font-size: 14px; line-height: 1.45; }
.ed-hist { margin: 4px 0 0; font-size: 12.5px; }
.ed-blocos { display: grid; gap: 8px; margin-top: 10px; }
.ed-bloco { border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 8px 10px; background: var(--sup); }
.ed-bloco.ed-mudou { border-color: var(--alerta); box-shadow: inset 3px 0 0 var(--alerta); }
.ed-fixo { background: var(--sup3); color: var(--tinta2); font-weight: 600; font-size: 13px; }
.ed-rotulo { font-size: 12px; font-weight: 700; color: var(--tinta2); margin-bottom: 4px; display: flex; gap: 6px; align-items: center; }
.ed-bloco textarea, .ed-bloco input { width: 100%; font: inherit; font-size: 14px; line-height: 1.45; padding: 6px 8px; border: 1px solid var(--borda);
  border-radius: 8px; background: var(--sup2); color: var(--tinta); resize: vertical; }
.ed-botoes { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.ed-botoes .btn { padding: 2px 8px; font-size: 12px; border-radius: 6px; }
.ed-curto { background: var(--sup3); }
.ed-rotulo { flex-wrap: wrap; }
.contrato-previa table { width: 100%; table-layout: auto; }
.contrato-previa td { white-space: normal; word-break: break-word; }
.contrato-previa .ct-titulo { text-align: center; font-size: 16px; font-weight: 700; color: #123955; margin: 0 0 2px; }
.contrato-previa .ct-sub { text-align: center; font-size: 12px; color: #5A6B7B; margin: 0 0 8px; }
.contrato-previa .ct-secao { background: #123955; color: #fff; font-weight: 700; font-size: 12.5px; padding: 4px 8px; margin: 12px 0 6px; }
.contrato-previa .ct-itens { width: 100%; border-collapse: collapse; margin: 4px 0 8px; }
.contrato-previa .ct-itens td { border: 1px solid #D8E0E8; padding: 4px 6px; font-size: 12.5px; }
.contrato-previa .ct-itens tr:first-child td, .contrato-previa .ct-venc tr:first-child td { background: #123955; color: #fff; font-weight: 700; }
.contrato-previa .ct-itens tr:nth-child(odd):not(:first-child) td { background: #F5F8FB; }
.contrato-previa .ct-nao { border: 1px solid #EBD3A1; background: #FFF8E8; margin: 6px 0 10px; padding: 6px 8px; font-size: 12.5px; }
.contrato-previa .ct-assin { width: 100%; border-collapse: collapse; }
.contrato-previa .ct-assin td[colspan] { height: 36px; }
.contrato-previa .ct-assin tr:not(:first-child) td:not([colspan]):not(:empty) { border-top: 1px solid #1B2733; font-size: 12px; padding-top: 3px; }
.contrato-previa .t-tit { font-weight: 700; color: #123955; margin: 10px 0 2px; }
.contrato-previa .ct-itens tr:first-child td, .contrato-previa .ct-itens td:first-child, .contrato-previa .ct-itens td:nth-child(3) { white-space: nowrap; word-break: normal; }
/* Contrato do comprador e a IA no contrato (12/10): "Anexado" em verde forte; análise do contrato do cliente; sugestão no Editar */
.chip.ok-forte { background: var(--ok); color: #fff; }
.btn.btn-anexado { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 700; }
:root[data-theme="dark"] .chip.ok-forte, :root[data-theme="dark"] .btn.btn-anexado { color: #06210F; }
.btn.btn-ia { color: var(--tinta); border-color: color-mix(in srgb, #D97757 50%, var(--borda)); background: color-mix(in srgb, #D97757 7%, var(--sup2)); gap: 6px; }
.ic-claude { flex: none; display: inline-block; vertical-align: -0.18em; }
.chip .ic-claude { margin-right: 4px; vertical-align: -0.15em; }
.chip.claude { background: color-mix(in srgb, #D97757 15%, var(--sup)); color: var(--tinta); }
.ia-tit { display: flex; align-items: center; gap: 8px; }
.ed-ia-cab .ia-tit { display: inline-flex; gap: 6px; }
.dialogo-ia { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.ia-rec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; font-size: 14px; }
.ia-rec.ok { background: var(--ok-sup); color: var(--ok); }
.ia-rec.alerta { background: var(--alerta-sup); color: var(--alerta); }
.ia-rec.perigo { background: var(--perigo-sup); color: var(--perigo); }
.ia-rec.info { background: var(--info-sup); color: var(--info); }
.ia-rec span { color: var(--tinta); }
.ia-resumo { margin: 0 0 6px; }
.ia-secao { margin: 16px 0 0; }
.ia-secao h3 { font-size: 14px; margin: 0 0 8px; }
.ia-riscos { margin: 0; padding-left: 22px; display: grid; gap: 12px; }
.ia-riscos p { margin: 3px 0 0; }
.ia-risco-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ia-trecho { margin: 6px 0 0; padding: 4px 10px; border-left: 3px solid var(--borda); color: var(--tinta2); font-style: italic; }
.ia-pedir { color: var(--tinta); }
.ia-lista { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.ia-msg { width: 100%; font: inherit; font-size: 14px; line-height: 1.45; padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio-p);
  background: var(--sup3); color: var(--tinta); resize: vertical; }
.ia-nota { font-size: 12.5px; margin: 14px 0 0; }
.dialogo-ia .dialogo-rodape { flex-wrap: wrap; }
.ed-ia-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.ed-ia { border: 1px solid color-mix(in srgb, #D97757 45%, var(--borda)); background: color-mix(in srgb, #D97757 8%, var(--sup)); border-radius: var(--raio-p); padding: 10px 12px; margin: 10px 0 0; }
.ed-ia[hidden] { display: none; }
.ed-ia-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--tinta); }
.ed-ia-cab span { color: var(--tinta); }
.ed-ia ul { margin: 6px 0; padding-left: 18px; }
.ed-ia .faixa-aviso { margin: 8px 0; }
.ed-ia .faixa-aviso ul { margin: 4px 0 0; }
.ed-ia-botoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ed-bloco.ed-ia-mudou { border-color: #D97757; box-shadow: inset 3px 0 0 #D97757; }
/* Peça ligada a um item do catálogo (12/10): o custo do item mudou → o administrador autoriza */
.pc-mudou { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
/* Ausências (12/10): o quadro da SDR */
.aus-quadro ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; }
/* Avatar com IA (12/10): botão "mágico" e as opções */
.btn.btn-magico { background: linear-gradient(135deg, #7C3AED, #DB2777 55%, #F59E0B); color: #FFFFFF; border: 0; display: inline-flex; align-items: center; gap: 4px; }
.btn.btn-magico:hover { filter: brightness(1.08); }
.btn.btn-magico:disabled { opacity: .55; filter: grayscale(.4); cursor: not-allowed; }
.ic-openai { vertical-align: -3px; flex: none; }
.dlg-avatar-ia { width: min(880px, calc(100vw - 24px)); }
.dlg-avatar-ia .sub { display: flex; align-items: center; gap: 6px; }
.aia-envio { display: flex; gap: 16px; align-items: flex-start; }
.aia-previa { flex: none; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: var(--sup3); border: 2px dashed var(--linha); }
.aia-previa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aia-gerando { margin: 14px 0; padding: 14px; border-radius: 12px; background: var(--sup3); font-weight: 600; display: flex; gap: 10px; align-items: center; }
.aia-brilho { display: inline-block; animation: aia-girar 1.6s linear infinite; }
@keyframes aia-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .aia-brilho { animation: none; } }
.aia-tit { margin: 16px 0 8px; font: 700 14px var(--fonte-tit); }
.aia-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.aia-grade.pequena { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.aia-op { margin: 0; border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; background: var(--sup); }
.aia-op img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.aia-op figcaption { padding: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.aia-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.aia-antigas { margin-top: 14px; }
.aia-antigas summary { cursor: pointer; color: var(--link); font-weight: 600; }
@media (max-width: 600px) { .aia-envio { flex-direction: column; align-items: center; text-align: center; } }
.est-errados ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.5; }
/* Condição especial da Diretoria (etapa B, 12/10): o bloco no topo das Condições, a faixa do vendedor e a marca na lista */
.esp-bloco { margin: 0 0 14px; border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; }
.esp-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: #0B2545; color: #FFFFFF; }
.esp-cab small { opacity: .8; font-size: 12px; }
.esp-corpo { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.esp-corpo .formulario { margin-left: 26px; }
.esp-resumo { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--sup3); }
.esp-faixa { margin: 0 0 12px; }
.chip.chip-diretoria { background: #0B2545; color: #FFFFFF; }

/* Relatar problema ou sugestão (13/10): janela, "Meus relatos" e Administração › Relatos */
.dialogo-relato .segmentos { margin-bottom: 12px; }
.dialogo-relato textarea { font: inherit; width: 100%; }
.relato-previa { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 10px; }
.relato-previa img { max-width: min(100%, 420px); max-height: 240px; border: 1px solid var(--borda); border-radius: 8px; }
.relatos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.relato-item { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; background: var(--sup); }
.relato-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.relato-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.relato-resposta { margin: 0; padding: 6px 10px; border-left: 3px solid var(--ok); background: var(--ok-sup); border-radius: 0 6px 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.relato-mini { display: block; max-height: 90px; max-width: 160px; border: 1px solid var(--borda); border-radius: 6px; }
.relato-ctx summary { cursor: pointer; font-size: .85rem; color: var(--muda); }
.relato-ctx ul { margin: 6px 0 0; padding-left: 18px; font-size: .85rem; overflow-wrap: anywhere; }
.relatos-admin { padding: 0 16px 16px; }

/* Lucro real do pedido (etapa C, 13/10): campos à esquerda, estimado × real à direita (empilha no celular) */
.lr-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
@media (max-width: 980px) { .lr-grade { grid-template-columns: minmax(0, 1fr); } }
.lr-form, .lr-resultado { min-width: 0; }
.lr-form h3 { margin: 4px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--tinta2); }
.lr-form h3:not(:first-child) { margin-top: 14px; }
.lr-form textarea { font: inherit; width: 100%; }
.lr-cab { margin-bottom: 6px; }
.lr-rolagem { overflow-x: auto; }
.lr-tab td, .lr-tab th { padding: 6px 10px; }
.lr-tab thead th { cursor: default; position: static; }
.lr-tab tr.lr-total td { font-weight: 700; }
.lr-tab tr.lr-sub td:first-child { padding-left: 22px; color: var(--tinta2); white-space: normal; }
.lr-tab tr.lr-lucro td { font-size: 15px; border-top: 2px solid var(--borda); }
.lr-notas { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--tinta2); display: grid; gap: 4px; }

/* Administração › Serviços (13/10): um cartão por serviço externo, as rotinas do servidor e os vencimentos */
.srv-tit { font-size: 18px; margin: 18px 0 10px; }
.srv-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; margin-bottom: 18px; }
.srv-cartao { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; border-left: 4px solid var(--borda); }
.srv-cartao.srv-ok { border-left-color: var(--ok); }
.srv-cartao.srv-atencao { border-left-color: var(--alerta); }
.srv-cartao.srv-problema { border-left-color: var(--perigo); }
.srv-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.srv-cab h3 { margin: 0; font-size: 16px; }
.srv-para, .srv-texto { margin: 0; }
.srv-det { margin: 0; padding-left: 18px; font-size: 13px; overflow-wrap: anywhere; }
.srv-acoes { margin-top: auto; padding-top: 6px; }
.srv-rotinas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.srv-rotinas li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: baseline; }
.srv-rotinas li > span:last-child { grid-column: 2; color: var(--tinta2); font-size: 13px; }
.srv-faixa-perigo { border-left-color: var(--perigo); }

/* Lançar no Bling (13/10): a prévia do pedido (Mundo de LED e Estrutura) */
dialog.dialogo-bling { width: min(1120px, calc(100vw - 24px)); }
.bl-corpo { max-height: calc(100vh - 170px); overflow: auto; }
.bl-cab { margin: 0 0 8px; }
.bl-tit { margin: 18px 0 8px; font-size: 17px; border-bottom: 2px solid var(--borda); padding-bottom: 4px; }
.bl-sub { margin: 12px 0 4px; font-size: 14px; }
.bl-rolagem { overflow-x: auto; }
.bl-tab td, .bl-tab th { padding: 5px 6px; vertical-align: middle; }
.bl-tab thead th { cursor: default; position: static; }
.bl-tab input, .bl-tab select { width: 100%; min-width: 0; }
.bl-tab td.bl-prod { min-width: 280px; }
.bl-tab td.quebra { min-width: 160px; max-width: 260px; }
.bl-num { max-width: 110px; }
.bl-falta { border-color: var(--perigo) !important; background: var(--perigo-sup) !important; }
.com-gestor + .com-gestor { margin-top: 28px; padding-top: 18px; border-top: 2px solid var(--linha); }  /* Comissões › gestores (14/10) */
.com-gestor-tit { margin: 0 0 10px; font-size: 20px; }
.com-gestor-tit small { font-size: 14px; color: var(--muda); font-weight: 600; }
.bl-novo { margin-top: 6px; }  /* Estrutura: produto novo quando não escolhe um já cadastrado (14/10) */
.bl-novo-campos { display: flex; gap: 6px; margin-top: 2px; }
.bl-novo-campos input:first-child { flex: 1; }
.bl-tit-depois { color: var(--muda); border-bottom-style: dashed; }  /* Lançar no Bling: a Estrutura abre depois da Mundo de LED (14/10) */
.bl-manual { justify-content: flex-start; margin-top: 10px; }
.bl-manual input { max-width: 220px; }
.bl-totais { margin: 8px 0; font-size: 14px; }
.bl-largo textarea { width: 100%; font: inherit; }

/* Custo pela composição no produto (13/10): o quadro no topo, as sugestões da planilha e as simulações */
.cc-quadro { border: 1px solid var(--borda); border-left: 4px solid var(--acento); border-radius: var(--raio-m); padding: 12px 14px; margin: 0 0 14px; background: var(--sup2); }
.cc-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.cc-cab h3 { margin: 0; font-size: 16px; }
/* 14/10: o quadro recolhível (abre ao clicar no título), com o resumo no título */
.cc-quadro > summary { cursor: pointer; font-weight: 700; font-size: 15px; }
.cc-quadro[open] > summary { margin-bottom: 6px; }
.cc-resumo { font-weight: 600; margin-left: 4px; }
.cc-nota { margin: 0 0 8px; font-size: 13px; }
/* 17/10 (pedido do usuário): o Custo em ¥ na linha da descrição do produto, logo depois dela */
.prod-sub-custo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.prod-custo-inline .campo { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.prod-custo-inline .campo label { margin: 0; font-weight: 700; color: var(--tinta); white-space: nowrap; }
.prod-custo-inline .campo input { width: 150px; font-size: 1.05rem; font-weight: 700; padding: 6px 10px; }
.pc-preco { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-end; }  /* 17/10: Preço usado | Novo preço das peças */
.rev-sub { margin: 10px 0; }  /* 17/10: Revisão de custos › Peças | Produtos compostos */
.prod-dados { margin-top: 0; }  /* o bloco de dados, o primeiro do produto (14/10) */
.prod-dados > summary .chip { margin-left: 4px; font-weight: 600; }
.prod-dados + .cc-quadro { margin-top: 12px; }
.prod-custo-auto:empty { display: none; }  /* produto novo: o custo veio da composição (14/10) */
.prod-custo-auto { margin: 4px 0 6px; font-size: 13px; }
/* 14/10: Imposto, Nome curto e Descrição numa linha só */
.formulario.prod-linha3 { grid-template-columns: minmax(150px, 0.8fr) minmax(200px, 1.4fr) minmax(260px, 2.2fr); align-items: start; }
@media (max-width: 760px) { .formulario.prod-linha3 { grid-template-columns: 1fr; } }
.cc-rolagem { overflow-x: auto; }
.cc-tab td, .cc-tab th { padding: 6px 10px; }
.cc-tab thead th { cursor: default; position: static; }
.cc-tab tbody th { text-align: left; font-weight: 600; white-space: normal; }
.cc-detalhe { margin: 8px 0; }
.cc-detalhe summary, .cc-sug summary { cursor: pointer; color: var(--link); font-size: 13px; }
.cc-linhas { margin: 6px 0; padding-left: 18px; font-size: 13px; }
.cc-acoes { margin-top: 8px; }
.cc-sub { margin: 16px 0 8px; font-size: 14px; }
.cc-sugs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 10px; }
.cc-sug { border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 10px 12px; background: var(--sup); display: grid; gap: 6px; }
.cc-sug.cc-em-uso { border-color: var(--ok); }
.cc-sug-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cc-sug-conta { margin: 0; font-size: 13px; }
.cc-aviso { margin: 0; font-size: 13px; }
.cc-sims { margin: 0; padding-left: 18px; }
.dialogo-sim .comp-tabela input { width: 100%; }
dialog.dialogo-sim { width: min(900px, calc(100vw - 24px)); }
/* 14/10: quadro que abre e fecha pelo título (aba Leads: leads diretos e clientes a vencer na carteira) */
.cartao-alternar { all: unset; cursor: pointer; display: inline-flex; align-items: baseline; gap: 8px; }
.cartao-alternar::before { content: "▸"; display: inline-block; font-size: .8em; opacity: .7; transition: transform .15s; }
.cartao-alternar[aria-expanded="true"]::before { transform: rotate(90deg); }
.cartao-alternar:hover { color: var(--link); }
.cartao-alternar:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
.cartao-recolhivel.fechado > :not(.cartao-cab), .cartao-recolhivel.fechado .cartao-cab > :not(:first-child) { display: none; }
/* 14/10: contraproposta da Diretoria (o lucro mínimo; o vendedor vê quanto falta) */
.orc-contra-recado { display: block; margin-top: 2px; }
.dialogo-contra .erro:empty { display: none; }
.dialogo-contra .lista-param { margin: 0 0 10px; }
/* 15/10: Preços e estoque — a listagem de antes; as controladoras no topo em blocos pequenos (código, preço, revenda; sem foto) */
.ctrl-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin: 0 0 6px; }
.ctrl-bloco { all: unset; box-sizing: border-box; position: relative; cursor: pointer; display: grid; gap: 0; padding: 6px 9px; border: 1px solid var(--linha); border-radius: 8px; background: var(--sup); }
.ctrl-bloco:hover, .ctrl-bloco:focus-visible { background: var(--zebra-foco); border-color: var(--acento); }
.ctrl-bloco.destaque { outline: 2px solid var(--acento); }
.ctrl-bloco b { font-family: var(--fonte-tit); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; }
.ctrl-preco { font-family: var(--fonte-tit); font-weight: 900; font-size: 13.5px; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ctrl-bloco small { color: var(--muda); font-size: 11px; font-variant-numeric: tabular-nums; }
.ctrl-est { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--muda); }
.ctrl-est.ok { background: var(--ok); }
.ctrl-promo { position: absolute; bottom: 5px; right: 7px; font-style: normal; font-size: 11px; color: var(--alerta); }
/* 15/10: só a primeira linha de controladoras; o último lugar é o "+N · ver todas" (e, aberto, o "Ver menos") */
.ctrl-bloco[hidden] { display: none; }
.ctrl-mais { border-style: dashed; align-content: center; justify-items: center; text-align: center; color: var(--link); }
.ctrl-mais b { padding-right: 0; color: var(--link); }
.ctrl-mais small { color: var(--link); }
.cat-detalhe-corpo p { white-space: pre-line; margin: 0 0 8px; color: var(--tinta2); font-size: 13.5px; }
.cat-so-estoque { white-space: nowrap; }
/* 16/10: Preços e estoque — o que está chegando (importação) */
.cat-chegando { margin: 8px 0 10px; border: 1px solid var(--linha); border-radius: 8px; padding: 6px 10px; }
.cat-chegando > summary { cursor: pointer; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cat-chegando ul { list-style: none; margin: 6px 0 0; padding: 0; }
.cat-chegando li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; border-top: 1px solid var(--linha); font-size: 13.5px; }
.cat-chegando li:first-child { border-top: 0; }
.cat-chegando-nome { flex: 1 1 200px; min-width: 0; color: var(--tinta2); }
.cat-chegando .nota { margin: 6px 0 2px; }
.est-bling > summary { cursor: pointer; list-style: none; }
.est-bling > summary::-webkit-details-marker { display: none; }
.est-bling > summary h2::before { content: "▸"; display: inline-block; margin-right: 8px; font-size: .8em; opacity: .7; transition: transform .15s; }
.est-bling[open] > summary h2::before { transform: rotate(90deg); }
.est-explica { margin: 0 0 8px; font-size: 13px; }
.fam { scroll-margin-top: calc(var(--topo-alt, 96px) + 60px); }  /* atalhos Rental e 64x48 */
/* 14/10: Orçamentos › Grandes empresas (administração e Diretoria) */
.gr-filtros { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 4px 0 12px; font-size: 13.5px; }
.gr-filtros select { margin-left: 6px; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; background: var(--sup); color: var(--tinta); }
.gr-emp b { display: block; }
.gr-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.gr-chips .chip { font-size: 10.5px; padding: 1px 6px; }
.gr-ultimo { display: inline-flex; gap: 6px; align-items: center; margin-top: 2px; }
.gr-ultimo .chip { font-size: 10.5px; padding: 1px 6px; }
.cat-lado li button { padding-top: 5px; padding-bottom: 5px; }  /* 14/10: uma linha por controladora */
/* 14/10: tarefas da administração (aba Aprovações) */
.tarefas-admin li { align-items: center; }
.tarefa-acao { display: inline-flex; align-items: center; gap: 8px; }
/* 15/10: Pendências — os quadrinhos são abas (uma lista por vez) */
.urg-card:disabled { cursor: default; opacity: .75; }
.urg-card[aria-selected="true"] { outline: 2px solid var(--azul); background: var(--acento-sup); }
/* 15/10: Financeiro › Análise de crédito */
.credito-cad li { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 0 14px; justify-content: start; }  /* 15/10: os valores à esquerda */
.credito-cad .credito-valor { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.credito-pontos { margin-top: 10px; }
.credito-pontos ul { margin: 4px 0 0; padding-left: 18px; }
.credito-form { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin-top: 10px; }
.credito-form .campo.largo { grid-column: 1 / -1; }
.credito-form textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; background: var(--sup); color: var(--tinta); resize: vertical; }
.credito-exp { margin-top: 12px; }
.credito-resumo { white-space: pre-wrap; font-family: var(--fonte); font-size: 13.5px; line-height: 1.5; background: var(--sup2); border: 1px solid var(--linha); border-radius: 10px; padding: 12px 14px; margin: 0 0 8px; max-height: 520px; overflow: auto; }
.credito-fachada { margin-top: 12px; display: grid; gap: 6px; }
/* 15/10: o símbolo do Claude (o dos contratos) pulsa enquanto o Claude trabalha */
.btn-ia.ia-trabalhando svg { animation: ia-pulso 1.1s ease-in-out infinite; }
@keyframes ia-pulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
@media (prefers-reduced-motion: reduce) { .btn-ia.ia-trabalhando svg { animation: none; } }
/* 15/10: a análise da negociação pelo Claude (aba Aprovações) */
.aprov-ia-pedir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 4px; }
.aprov-ia { margin-top: 10px; border: 1px solid color-mix(in srgb, #D97757 35%, var(--linha)); border-radius: 10px; padding: 8px 12px; background: color-mix(in srgb, #D97757 4%, var(--sup)); }
.aprov-ia h4 { display: flex; align-items: center; gap: 6px; }
.aprov-ia-rec { margin: 4px 0 8px; }
.aprov-ia-listas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 6px 18px; font-size: 13.5px; }
.aprov-ia-listas ul { margin: 4px 0 0; padding-left: 18px; }
.aprov-ia-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 8px; }
/* 15/10: tabela que abre o detalhe da linha (Comissões: clicar no vendedor abre os pedidos dele); a zebra conta só as linhas */
.tabela-detalhe tbody tr:not(.linha-detalhe) > td { background: transparent; }
.tabela-detalhe tbody tr:nth-child(even of :not(.linha-detalhe)) > td { background: var(--zebra); }
.tabela-detalhe tbody tr.linha-abre { cursor: pointer; }
.tabela-detalhe tbody tr.linha-abre:hover > td, .tabela-detalhe tbody tr.aberta > td { background: var(--zebra-foco); }
.tabela-detalhe tr.linha-abre:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.linha-detalhe > td { white-space: normal; padding: 6px 12px 14px 28px; border-top: 0; background: color-mix(in srgb, var(--link) 4%, var(--sup)) !important; box-shadow: inset 3px 0 0 var(--link); }
@media (min-width: 601px) {
  .tabela-detalhe tr.linha-abre > td:first-child::before { content: "▸"; display: inline-block; width: 16px; font-size: 1em; opacity: .75; color: var(--link); transition: transform .15s; }
  .tabela-detalhe tr.linha-abre.aberta > td:first-child::before { transform: rotate(90deg); }
}
@media (max-width: 600px) {
  .tabela-cartoes.tabela-detalhe tbody tr:nth-child(even) { background: transparent; }
  .tabela-cartoes.tabela-detalhe tbody tr:nth-child(even of :not(.linha-detalhe)) { background: var(--zebra); }
  .tabela-cartoes.tabela-detalhe tr.linha-abre::after { content: attr(data-dica) " ▾"; display: block; margin-top: 4px; font-size: 12px; color: var(--link); text-align: right; }
  .tabela-cartoes.tabela-detalhe tr.linha-abre.aberta::after { content: "Fechar ▴"; }
  .tabela-cartoes .linha-detalhe { padding: 0 8px 12px; border-top: 0; }
  .tabela-cartoes .linha-detalhe > td { display: block; padding: 6px 2px 4px 10px; text-align: left; font-weight: 400; font-size: 13px; }
}
/* os pedidos de uma pessoa, um por linha, e o status da comissão (pronta / retida com o produto na empresa / saiu, falta "Atendido") */
.com-ped { list-style: none; margin: 0; padding: 0; }
.com-ped li { display: grid; grid-template-columns: var(--com-c1, 96px) minmax(150px, 1fr) minmax(96px, 150px) 92px 50px 92px 210px; align-items: center; gap: 2px 12px; padding: 5px 8px; border-radius: 6px; font-size: 13px; }
.com-ped.sem-pct li { grid-template-columns: var(--com-c1, 96px) minmax(150px, 1fr) minmax(96px, 150px) 92px 92px 210px; }
.com-ped li:nth-child(odd):not(.com-ped-cab) { background: var(--zebra); }
/* 18/10 (pedido do usuário): uma linha clara entre uma venda e outra */
.com-ped li:not(.com-ped-cab) { border-radius: 0; border-bottom: 1px solid var(--linha); padding-top: 7px; padding-bottom: 7px; }
.com-ped li:last-child { border-bottom: 0; }
.com-ped .com-ped-cab { border-bottom: 2px solid var(--linha); }
.com-ped .com-ped-cab { padding-top: 0; padding-bottom: 2px; font-size: 11px; font-weight: 700; color: var(--muda); text-transform: uppercase; letter-spacing: .03em; }
.com-ped-num { white-space: nowrap; }
.com-ped-num small { color: var(--muda); }
.com-ped-cli, .com-ped-sit { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-ped-sit { color: var(--tinta2); }
.com-ped-val, .com-ped-pct, .com-ped-com { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.com-ped li > .chip { justify-self: start; white-space: nowrap; }
.com-ped-rodape { margin: 6px 8px 0; font-size: 12.5px; color: var(--muda); }
.com-ped-caixa > .link-btn { margin: 2px 8px 0; font-size: 12.5px; }
.com-estado { display: block; margin-top: 3px; }
@media (max-width: 900px) {
  .com-ped .com-ped-cab { display: none; }
  .com-ped li, .com-ped.sem-pct li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 7px 8px; }
  .com-ped-cli { flex: 1 1 55%; }
  .com-ped-sit { flex: 1 1 100%; }
}
/* 15/10: Comissões › Pedidos por pagamento — com a coluna do vendedor, a linha de detalhes e os totais no fim */
.com-ped-filtros { padding: 0 16px 10px; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px 10px; }
.com-ped.com-vend li { grid-template-columns: var(--com-c1v, 116px) minmax(70px, 104px) minmax(110px, 1fr) minmax(70px, 120px) 84px 44px 86px auto; }
.com-ped.com-vend.sem-pct li { grid-template-columns: var(--com-c1v, 116px) minmax(70px, 104px) minmax(110px, 1fr) minmax(70px, 120px) 84px 86px auto; }
.com-ped-ven { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.com-ped-extra { grid-column: 1 / -1; font-size: 12px; color: var(--muda); white-space: normal; line-height: 1.35; }
.com-ped-extra:empty { display: none; }
.com-ped-aviso { color: var(--alerta); }
.com-secao { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 0; font-size: 15px; }
.com-secao small { font-size: 13px; font-weight: 600; color: var(--tinta2); }
.com-secao ~ .com-secao { margin-top: 22px; }
.com-secao-sub { margin: 2px 0 6px; font-size: 12.5px; }
.com-totais { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 18px; padding: 12px 14px; border-top: 2px solid var(--linha); background: var(--zebra); border-radius: 8px; }
.com-totais > div { display: grid; gap: 1px; }
.com-totais span { font-size: 12px; color: var(--muda); font-weight: 600; }
.com-totais b { font-size: 19px; font-variant-numeric: tabular-nums; }
.com-totais small { font-size: 12px; color: var(--muda); }
@media (max-width: 900px) {
  .com-ped.com-vend li, .com-ped.com-vend.sem-pct li { display: flex; flex-wrap: wrap; }
  .com-ped-extra { flex: 1 1 100%; }
}
/* 15/10: Comissões › Pedidos — os totais em cartões grandes (presos no rodapé da tela), as seções com cor e os avisos recolhidos */
.com-resumo { display: flex; flex-wrap: wrap; gap: 8px 10px;  /* 16/10: no fim da lista, sem acompanhar a rolagem (pedido do usuário) */
  margin-top: 18px; padding: 12px; background: var(--sup); border: 1px solid var(--linha); border-radius: 12px; }
/* 16/10: marcar a comissão como paga */
.com-pagar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 6px 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--ok-sup); }
.com-pagar .campo-inline { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; }
.com-marca { margin-right: 6px; width: 17px; height: 17px; vertical-align: -3px; cursor: pointer; }
.com-ped-st { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; justify-self: start; white-space: nowrap; }
.com-ped.com-marcar { --com-c1: 122px; --com-c1v: 142px; }  /* com a caixa de marcar o pago */
.com-resumo-cab { flex: 1 1 100%; font-size: 13.5px; color: var(--tinta2); }
.com-resumo-cab b { color: var(--tinta); font-size: 15px; }
.com-card { flex: 1 1 210px; padding: 8px 14px; border-radius: 10px; border-left: 5px solid var(--linha); background: var(--zebra); }
.com-card.ok { border-left-color: var(--ok); background: var(--ok-sup); }
.com-card.alerta { border-left-color: var(--alerta); background: var(--alerta-sup); }
.com-card > span { display: block; font-size: 12.5px; font-weight: 700; color: var(--tinta2); }
.com-card > b { display: block; margin-top: 1px; font-size: 25px; line-height: 1.15; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tinta); }
.com-card.ok > b { color: var(--ok); }
.com-card.alerta > b { color: var(--alerta); }
.com-card.zero { background: var(--zebra); border-left-color: var(--linha); }
.com-card.zero > b { color: var(--muda); }
.com-card > small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tinta2); }
.com-secao { padding-left: 10px; border-left: 4px solid var(--linha); }
.com-secao.ok { border-left-color: var(--ok); }
.com-secao.alerta { border-left-color: var(--alerta); }
.com-secao .pill { padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--zebra); color: var(--tinta2); }
.com-secao.ok .pill { background: var(--ok-sup); color: var(--ok); }
.com-secao.alerta .pill { background: var(--alerta-sup); color: var(--alerta); }
.com-secao-sub { padding-left: 14px; }
/* 18/10: a participação de outro vendedor na venda (discreta) */
.venda-participacao { margin: 6px 0 10px; font-size: 13px; }
.venda-participacao > summary { cursor: pointer; color: var(--tinta2); }
.venda-participacao-corpo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
/* 18/10 (pedido do usuário: mais destaque): "Entram no pagamento de…" e "Em aberto hoje (retidas)" em faixa colorida */
.com-secao.ok, .com-secao.alerta { align-items: center; padding: 10px 14px; border-left-width: 6px; border-radius: 8px; font-size: 17px; margin-top: 14px; }
.com-secao.ok { background: var(--ok-sup); color: var(--ok); }
.com-secao.alerta { background: var(--alerta-sup); color: var(--alerta); }
.com-secao.ok .pill, .com-secao.alerta .pill { font-size: 14px; padding: 3px 12px; background: var(--sup); }
.com-secao.ok + .com-secao-sub, .com-secao.alerta + .com-secao-sub { margin-top: 6px; }
/* 18/10 (pedido do usuário): cada parte do pagamento num bloco (título colado em cima, os pedidos dentro) */
.com-bloco { margin-top: 18px; border: 1px solid var(--linha); border-left: 6px solid var(--linha); border-radius: 10px; background: var(--sup); overflow: hidden; padding-bottom: 12px; }
.com-bloco.ok { border-color: var(--ok); }
.com-bloco.alerta { border-color: var(--alerta); }
.com-bloco > .com-secao { margin: 0; border-left: 0; border-radius: 0; padding: 10px 14px; }
.com-bloco > .com-secao:not(.ok):not(.alerta):not(.acerto) { background: var(--zebra); }
.com-bloco > :not(.com-secao) { margin-left: 14px; margin-right: 14px; }
.com-bloco > .com-secao-sub { padding-left: 0; margin-top: 8px; }
/* 18/10: os acertos das comissões já pagas, a atrasada e a meta que bateu */
.com-bloco.acerto { border-color: var(--perigo); }
.com-bloco > .com-secao.acerto { align-items: center; font-size: 17px; background: var(--perigo-sup); color: var(--perigo); }
.com-secao.acerto .pill { font-size: 14px; padding: 3px 12px; background: var(--sup); color: var(--perigo); }
.com-bloco > .lista-param { margin-top: 6px; }
.com-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.com-meta { margin-right: 6px; }
.com-bling { color: var(--azul); text-decoration: underline dotted; text-underline-offset: 3px; }
.com-bling:hover { text-decoration-style: solid; }
/* 18/10: Minhas comissões (os últimos pagamentos) */
.com-min-pago { padding: 8px 14px; border-top: 1px solid var(--linha); }
.com-min-pago > summary { cursor: pointer; }
.dialogo-motivo .erro:empty { display: none; }  /* 18/10: a faixa do erro só aparece com o erro */
/* 18/10: Vendas do vendedor — o nº com o ícone do Bling e o detalhe do pedido */
.venda-num { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ico-bling { display: inline-flex; color: #1f9d55; border-radius: 6px; }
.ico-bling:hover, .ico-bling:focus-visible { color: #157a41; outline: 2px solid currentColor; outline-offset: 1px; }
.venda-det { width: min(760px, calc(100vw - 32px)); }
.venda-det-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.venda-det-cab .chip { margin-left: auto; }
.venda-det-sec { margin-top: 14px; }
.venda-det-sec > h3 { margin: 0 0 6px; font-size: 14px; color: var(--tinta2); text-transform: uppercase; letter-spacing: .03em; }
.venda-det-itens { width: 100%; border-collapse: collapse; font-size: 13px; }
.venda-det-itens th, .venda-det-itens td { padding: 5px 8px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.venda-det-itens .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 18/10: a linha do tempo, a cobrança, o quadro Hoje e o Meu assistente */
.venda-tempo { list-style: none; margin: 0; padding: 0; }
.venda-tempo li { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--linha); color: var(--muda); }
.venda-tempo li.feito { color: var(--tinta); }
.venda-tempo-marca { display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--linha); font-size: 12px; }
.venda-tempo li.feito .venda-tempo-marca { background: var(--ok); border-color: var(--ok); color: #fff; }
.venda-cobrar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--alerta-sup); color: var(--alerta); }
.btn-cobrar { display: inline-flex; align-items: center; gap: 6px; color: #128c4a; white-space: nowrap; }
.hoje-itens { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 2px; }
.meta-comissao { margin: 8px 16px 12px; font-size: 13.5px; }
.assist-perm { padding: 6px 0 10px; border-bottom: 1px solid var(--linha); }
.assist-perm:last-child { border-bottom: 0; }
.assist-perm .opcoes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }
/* 18/10: Vendas › Pagamentos (o vendedor diz de quem é o pagamento) */
.pag-lista { list-style: none; margin: 0; padding: 0; }
.pag-item { padding: 10px 0; border-bottom: 1px solid var(--linha); display: flex; flex-direction: column; gap: 6px; }
.pag-item:last-child { border-bottom: 0; }
.pag-indicar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pag-indicar select { min-width: 260px; max-width: 100%; }
.pag-indicar input { flex: 1 1 220px; min-width: 0; }
.rec-obs { display: block; color: var(--tinta2); font-style: italic; }
/* 18/10: Vídeos › Montagens (o pedido ao Marketing e a montagem rápida) */
.video-do-pedido { margin: 6px 0 0; font-size: 12.5px; }
.mont-orc { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.mont-achados { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mont-lista { list-style: none; margin: 0; padding: 0; }
.mont-item { padding: 12px 0; border-bottom: 1px solid var(--linha); display: flex; flex-direction: column; gap: 8px; }
.mont-item:last-child { border-bottom: 0; }
.mont-item.foco { background: var(--info-sup); border-radius: 8px; padding: 12px; }
.mont-cab { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.mont-cab small { flex: 1 1 100%; }
.mont-obs { margin: 0; white-space: pre-wrap; }
.mont-arqs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.mont-arq { display: flex; flex-direction: column; gap: 4px; width: 180px; }
.mont-arq img, .mont-arq video { width: 180px; height: 120px; object-fit: cover; border-radius: 6px; border: 1px solid var(--linha); background: #000; }
.mont-arq.resultado img, .mont-arq.resultado video { width: 260px; height: 170px; }
.mont-arq.resultado { width: 260px; }
.mont-msgs { list-style: none; margin: 0; padding: 8px 10px; background: var(--zebra); border-radius: 8px; font-size: 13px; }
.mont-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mont-msg { display: inline-flex; gap: 6px; flex: 1 1 280px; }
.mont-msg input { flex: 1; min-width: 0; }
.mont-rapida > summary { cursor: pointer; list-style: none; }
.mont-canvas { display: block; width: auto; height: auto; max-width: min(100%, 760px); max-height: 60vh; margin: 10px auto 0; border-radius: 8px; cursor: crosshair; touch-action: none; }  /* 25/10: 40% menor (pedido do usuário) */
.mont-dica { margin: 8px 0 0; font-weight: 600; color: var(--azul); }
/* 18/10: montagens com IA (imagem realista e vídeo) e os recebimentos (extrato, dono provável, comparação com o combinado) */
.ia-gerando { font-weight: 600; }
/* 18/10: a Montagem rápida compacta (abrir, colar ou arrastar a foto), as miniaturas e a espera da IA (brilho passando, o tempo, a etapa) */
.mont-abrir { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; border: 2px dashed var(--borda); border-radius: 12px;
  cursor: pointer; text-align: center; background: var(--sup2); transition: border-color .15s, background .15s; }
.mont-abrir:hover, .mont-abrir.sobre { border-color: var(--azul); background: var(--info-sup); }
.mont-abrir-icone { font-size: 30px; line-height: 1; }
.mont-abrir input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mont-mini { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.mont-mini img { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--linha); }
.mont-minis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mont-minis img { width: 84px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid var(--linha); }
.mont-pedir-mk { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 8px; }
.mont-tela { position: relative; }
.mont-rapida .formulario { align-items: start; }  /* 18/10: os campos não esticam até a altura do vizinho maior (o anúncio com a miniatura) */
.mont-rapida .campo label.mont-auto { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 500; font-size: 13px; cursor: pointer; }
.mont-rapida .campo label.mont-auto input { width: auto; flex: none; margin: 0; }
.mont-nota-parede { margin-top: 4px; font-size: 12.5px; color: var(--azul); }
/* 18/10: produtos pedidos pelos vendedores (o estoque busca o custo na China; a administração cadastra no catálogo) */
.pedprod-novo > summary { cursor: pointer; padding: 14px 16px; }
.pedprod-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pedprod { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--linha); border-radius: 10px; }
.pedprod.foco { outline: 2px solid var(--azul); outline-offset: 1px; }
.pedprod-foto img { display: block; width: 96px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--linha); }
.pedprod-corpo { flex: 1; min-width: 0; }
.pedprod-cab { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 2px; }
.pedprod-det { white-space: pre-wrap; margin: 6px 0; }
.pedprod-link, .pedprod-custo, .pedprod-ok { margin: 6px 0; }
.pedprod-acoes { justify-content: flex-start; margin-top: 8px; }
.pedprod-fechados > summary { cursor: pointer; padding: 14px 16px; }
.cat-pedir { margin-left: auto; white-space: nowrap; }
/* 18/10: Expedição › Medidas para o frete e as caixas reais do despacho */
.exp-caixas { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; }
.exp-cx { display: grid; gap: 6px; margin-bottom: 8px; }
.exp-cx-linha { display: grid; grid-template-columns: 70px repeat(4, minmax(70px, 1fr)) 28px; gap: 6px; align-items: center; }
.exp-cx-linha input { width: 100%; min-width: 0; }
.exp-cx-cab span { font-size: 12px; color: var(--muda); font-weight: 600; }
.fm-filtros { justify-content: flex-start; margin-bottom: 10px; }
.cot-linhas { display: grid; gap: 6px; margin-bottom: 8px; }
.cot-prod { display: grid; grid-template-columns: minmax(180px, 2fr) 110px 28px; gap: 8px; align-items: start; }
.cot-prod input { width: 100%; min-width: 0; }
.cot-prod small { display: block; margin-top: 2px; }
.cot-cab span { font-size: 12px; color: var(--muda); font-weight: 600; }
.cot-volumes { margin-top: 10px; }
.exp-acoes-frete { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.orc-km-info { color: var(--tinta); }  /* 19/10 (pedido do usuário): os km do Maps em preto (no tema escuro, a cor do texto) */
.fm-lista { display: grid; gap: 8px; }
.fm-item { display: grid; grid-template-columns: minmax(180px, 1.4fr) 1fr 1.3fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px; }
.fm-item.ok { border-left: 4px solid var(--verde, #1f9d55); }
.fm-nome, .fm-med { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
@media (max-width: 760px) { .fm-item { grid-template-columns: 1fr; } .exp-cx-linha { grid-template-columns: 56px repeat(4, minmax(52px, 1fr)) 24px; } }
@media (max-width: 600px) { .pedprod { flex-direction: column; } .pedprod-foto img { width: 100%; height: 160px; } }
.ia-espera { position: absolute; inset: 10px 0 0 0; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 20, 40, .45); backdrop-filter: blur(1.5px); }
.ia-espera-brilho { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(160, 120, 255, .35) 45%, rgba(255, 255, 255, .45) 50%, rgba(255, 120, 200, .3) 55%, transparent 70%);
  background-size: 250% 100%; animation: ia-varre 2.2s linear infinite; }
.ia-espera::after { content: ''; position: absolute; left: 0; right: 0; height: 3px; top: 0; background: linear-gradient(90deg, transparent, #fff, transparent);
  box-shadow: 0 0 18px 6px rgba(190, 150, 255, .55); animation: ia-desce 3s ease-in-out infinite; }
.ia-espera-caixa { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 22px; border-radius: 14px;
  background: rgba(8, 15, 30, .78); color: #fff; text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, .35); max-width: 90%; }
.ia-espera-caixa small { color: rgba(255, 255, 255, .75); }
.ia-espera-icone { font-size: 34px; animation: ia-pulso 1.2s ease-in-out infinite; }
.ia-espera-video { position: relative; inset: auto; min-height: 150px; aspect-ratio: 3 / 2; background: linear-gradient(135deg, #1b2a4a, #3a2160); }
@keyframes ia-varre { from { background-position: 150% 0; } to { background-position: -150% 0; } }
@keyframes ia-desce { 0% { top: 0; } 50% { top: calc(100% - 3px); } 100% { top: 0; } }
.btn.ia-trabalhando { position: relative; overflow: hidden; }
.btn.ia-trabalhando::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .6) 50%, transparent 75%);
  background-size: 250% 100%; animation: ia-varre 1.6s linear infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ia-espera-brilho, .ia-espera::after, .ia-espera-icone, .btn.ia-trabalhando::after { animation: none; } }
.ia-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ia-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ia-item img, .ia-item video { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; border: 1px solid var(--linha); background: #000; }
.ia-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ia-acoes select { flex: 1 1 180px; min-width: 0; max-width: 100%; }
.rec-sug { margin-top: 4px; padding: 4px 8px; border-radius: 6px; background: var(--info-sup); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; white-space: normal; }
.rec-conf { display: inline-block; margin-top: 4px; white-space: normal; }
.rec-pagador { white-space: normal; min-width: 180px; max-width: 320px; }
.rec-pedido { white-space: normal; min-width: 240px; max-width: 380px; }
.rec-info { display: block; white-space: normal; max-width: 230px; }
.rec-origem { margin-left: 6px; }
.dialogo-extrato { max-width: 980px; width: calc(100% - 32px); }
.tabela-rolagem { overflow-x: auto; max-height: 60vh; }
.tabela-extrato { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-extrato th, .tabela-extrato td { padding: 6px 8px; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; white-space: normal; }
.tabela-extrato th.num, .tabela-extrato td.num { text-align: right; white-space: nowrap; }
.tabela-extrato td small { display: block; }
.tabela-extrato .chip { margin: 0 4px 4px 0; white-space: normal; }
.tabela-extrato td:nth-child(4) { min-width: 200px; }
.extrato-total { margin-right: auto; align-self: center; }
.com-vazio { padding: 8px 14px; margin: 0; text-align: left; }
.com-ped-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.com-ped-avisos > summary { display: inline-block; cursor: pointer; list-style: none; padding: 0 8px; border-radius: 999px; font-weight: 700; color: var(--alerta); background: var(--alerta-sup); }
.com-ped-avisos > summary::-webkit-details-marker { display: none; }
.com-ped-avisos[open] { flex-basis: 100%; }
.com-ped-avisos ul { margin: 4px 0 2px; padding-left: 18px; color: var(--tinta2); }
.com-ped .com-ped-avisos li { display: list-item; padding: 1px 0; border-radius: 0; background: none !important; font-size: 12px; }
@media (max-width: 600px) {
  .com-resumo { position: static; box-shadow: none; }
  .com-card > b { font-size: 22px; }
}
/* 15/10: Comissões › Pedidos — o desconto estimado do pedido digitado no Bling (o clique mostra item por item) */
.com-ped-desc > summary { display: inline-block; cursor: pointer; list-style: none; padding: 0 8px; border-radius: 999px; font-weight: 700; color: var(--info); background: var(--info-sup); }
.com-ped-desc > summary::-webkit-details-marker { display: none; }
.com-ped-desc[open] { flex-basis: 100%; }
.com-ped-desc ul { margin: 4px 0 2px; padding-left: 18px; color: var(--tinta2); }
.com-ped .com-ped-desc li { display: list-item; padding: 1px 0; border-radius: 0; background: none !important; font-size: 12px; }
/* 15/10: Custos e fornecedores (Estoque) e os custos novos em Aprovações */
.custos-filtros { padding: 0 16px 10px; justify-content: flex-start; flex-wrap: wrap; gap: 8px 12px; }
.custos-aprov li { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(160px, 1fr) minmax(200px, 1.4fr) auto; align-items: center; gap: 6px 14px; }
.custos-aprov .custo-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.custos-aprov .custo-item small { flex-basis: 100%; }
.custos-aprov .custo-mudanca { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-variant-numeric: tabular-nums; }
.custos-aprov .custo-efeito { font-size: 12.5px; }
@media (max-width: 900px) { .custos-aprov li { grid-template-columns: 1fr; } }
dialog.dialogo-largo { width: min(860px, calc(100vw - 24px)); }
/* 15/10: Estoque › Pedidos de compra */
.compra-tit { margin: 0 6px; font-size: 18px; }
.compra-itens td { vertical-align: top; }
.compra-itens .compra-item { width: 100%; min-width: 220px; }
.compra-itens input { width: 100%; }
.compra-itens .compra-num { width: 96px; text-align: right; }
.compra-totais { display: flex; flex-wrap: wrap; gap: 4px 18px; font-variant-numeric: tabular-nums; }
.compra-anexar { cursor: pointer; display: inline-flex; margin-top: 8px; }
.compra-anexar input { display: none; }
.chip-estoque.info { background: var(--info-sup); color: var(--info); }
.ctrl-bloco small.ctrl-acaminho { color: var(--info); font-weight: 700; }
/* Vendas › Pedidos de todos os vendedores (16/10) */
.ped-filtros { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin: 12px 0 6px; }
.ped-filtros .campo { display: grid; gap: 3px; font-size: 12.5px; }
.ped-filtros .campo input[type=search] { min-width: 220px; }
.ped-parados-vend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 0; font-size: 13px; }
.ped-parados-vend .chip { cursor: pointer; border: 0; }
.ped-resumo { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 8px 0; }
.ped-prev-vencida { color: #b4531a; display: block; font-size: 11.5px; }
/* Ligações com o Bling (16/10): a foto pequena e o código que abre a composição (só para conferir) */
.item-cartao-topo .cat-foto.pequena { flex: none; }
.item-cartao-nome { flex: 1; min-width: 0; }
.item-cartao-nome .link-btn.item-cartao-tit { font-weight: 700; padding: 0; font-size: inherit; }
.comp-leitura td { vertical-align: top; text-align: left; }
.comp-leitura th, .comp-leitura td { white-space: normal; }
/* Links de acesso de quem falta criar a senha (16/10) */
.convites-lista { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 10px; }
.convite-linha { display: flex; gap: 6px; margin-top: 3px; }
.convite-linha input { flex: 1; min-width: 0; font-size: 12.5px; }
/* a logomarca do Claude nos botões da IA (16/10) */
.video-ia-btn .ic-claude, .video-ia-topo .ic-claude { margin-right: 2px; }
/* Pedidos de compra, etapa A (16/10): a ficha do container, o lote e quanto veio */
.compra-lote { margin-top: 4px; font-size: 12.5px; }
.compra-veio { display: grid; gap: 4px; margin-top: 4px; justify-items: end; }
.compra-resto { max-width: 190px; font-size: 12.5px; }
.compra-custos select { min-width: 230px; }
.compra-ficha-resumo { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--acento-sup); font-size: 13.5px; }
.compra-ficha-resumo .compra-pct b { color: var(--link); font-size: 15px; }
.compra-bling { margin-top: 10px; gap: 8px; }
/* Estoque (16/10): lotes (garantia) e inventário */
.lote-garantia { display: flex; gap: 6px; align-items: center; }
.lote-para { width: 150px; }
.lote-garantia .compra-num { width: 80px; }
/* Especificações pelo PDF do fornecedor (16/10) */
.espec-ia { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 8px 0 10px; }
.espec-ia-tab td { vertical-align: top; }
/* Invoice e Packing list (16/10, etapa B) */
.doc-itens td { vertical-align: top; }
.doc-mark { width: 120px; }
.doc-ncm { width: 105px; }
.doc-desc { width: 100%; min-width: 260px; font-size: 12.5px; }
.doc-fab { margin-top: 4px; width: 100%; font-size: 12.5px; }
.doc-avisos { margin: 4px 0 0 18px; padding: 0; }
/* Produto disponível ou não para vendedores e gestores (16/10) */
.btn.vendas-sim { color: var(--verde); border-color: var(--verde); }
.btn.vendas-nao { color: #b4531a; border-color: #e8a46a; background: #fff5ec; }
/* Custo novo: o fornecedor da lista do Bling (16/10) */
.forn-escolha { display: grid; gap: 6px; }
/* WhatsApp e Kommo no orçamento (16/10): a proposta anexada na conversa */
.orc-acoes-sec .btn.video-wa { color: #fff; background: #1f9d55; border-color: #1f9d55; }
.orc-acoes-sec .btn.video-kommo { color: #fff; background: #2b5797; border-color: #2b5797; }
/* 17/10: só o ícone do WhatsApp e do Kommo, ao lado de cada PDF */
.orc-anexar { display: inline-flex; gap: 4px; margin-right: 6px; }
.orc-acoes-sec .btn.btn-icone { padding: 6px 9px; min-width: 0; display: inline-flex; align-items: center; justify-content: center; }
.cartao .btn.video-wa { color: #fff; background: #1f9d55; border-color: #1f9d55; }

/* 17/10: o Pedido de compra em seções (como a edição do produto) e os itens em blocos */
.compra-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; }
.compra-topo .compra-tit { margin: 0; }
.compra-topo-esp { flex: 1; }
.compra-secao > summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.compra-sec-res { font-weight: 400; color: var(--muda); font-size: 12.5px; }
.compra-secao > .cartao-corpo { padding: 4px 0 6px; }
/* 17/10 (pedido do usuário): cada grupo de Dados da compra num bloco separado, com o título numa faixa */
.compra-grupo { margin: 12px 0 16px; padding: 0 14px 12px; border: 1px solid var(--borda); border-radius: var(--raio-m); background: var(--sup); box-shadow: var(--sombra); }
.compra-grupo h4 { margin: 0 -14px 12px; padding: 9px 14px; background: var(--sup3); border-bottom: 1px solid var(--borda); border-radius: var(--raio-m) var(--raio-m) 0 0;
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta); }
.compra-sub { margin: 10px 0; }
.compra-sub > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; padding: 6px 0; color: var(--link); }
.compra-rodape { margin: 16px 0; justify-content: space-between; flex-wrap: wrap; }
.ci-lista { display: grid; gap: 10px; }
.ci-item { border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; background: var(--sup); }
.ci-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ci-cab .compra-item { flex: 1 1 260px; min-width: 0; width: auto; }
.ci-n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 50%; background: var(--zebra); font-weight: 700; font-size: 12.5px; }
.ci-nome { flex: 1 1 220px; min-width: 0; display: grid; }
.ci-nome small { overflow-wrap: anywhere; }
.ci-qtd { font-size: 12.5px; color: var(--tinta2); white-space: nowrap; }
.ci-tirar { margin-left: auto; }
.ci-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 12px; margin-top: 8px; }
.ci-campo { display: grid; gap: 3px; min-width: 0; align-content: start; }  /* 22/10: a nota do "Embarca neste container" não estica os outros campos */
.ci-campo label { font-size: 11.5px; color: var(--muda); }
.ci-campo input, .ci-campo select, .ci-campo textarea { width: 100%; box-sizing: border-box; min-width: 0; }
.ci-campo .compra-num { width: 100%; }
.ci-larga { grid-column: span 2; }
.ci-toda { grid-column: 1 / -1; }
.ci-sub { padding-top: 6px; font-variant-numeric: tabular-nums; }
.ci-info { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--tinta2); }
.ci-ok { color: var(--ok, #1a7f37); }
.ci-falta { color: var(--muda); }
.ci-sobe { color: var(--perigo, #b42318); }
.ci-desce { color: var(--ok, #1a7f37); }
@media (max-width: 560px) { .ci-larga { grid-column: 1 / -1; } }
.compra-ptax { display: flex; gap: 6px; align-items: center; }
.compra-ptax input { flex: 1; min-width: 0; }
.compra-estimativa p { margin: 6px 0; font-size: 13px; }
.compra-grupo-tit { margin: 12px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muda); }
.pc-menu { margin: 0 0 12px; flex-wrap: wrap; max-width: 100%; }
/* 22/10 (pedido do usuário: "dois pedidos em um container", fácil de entender): a faixa do container no topo do pedido */
.ct-faixa { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--borda); border-left: 4px solid var(--acento); border-radius: var(--raio-m); background: var(--sup); box-shadow: var(--sombra); }
.ct-faixa-um { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; }
.ct-faixa-txt { flex: 1 1 260px; }
.ct-faixa-cab { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.ct-faixa-cab small { display: block; color: var(--muda); margin-top: 2px; }
.ct-faixa-ic { font-size: 22px; line-height: 1; }
.ct-pedidos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.ct-pedido { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--sup3); color: var(--tinta); cursor: pointer; font: inherit; }
.ct-pedido:hover { border-color: var(--acento); }
.ct-pedido.atual { background: var(--sup); border: 2px solid var(--acento); box-shadow: var(--sombra); cursor: default; }
.ct-pedido small { color: var(--tinta2); font-size: 12px; }
.ct-pedido-n { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--acento); }
.ct-novo { align-items: center; justify-content: center; border-style: dashed; background: none; color: var(--acento); }
.ct-legenda { margin: 10px 0 0; font-size: 12.5px; color: var(--tinta2); line-height: 1.9; }
.ct-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: middle; text-transform: none; letter-spacing: 0; }
.ct-tag-ct { background: var(--acento-sup); color: var(--acento); }
.ct-tag-f { background: var(--alerta-sup); color: var(--alerta); }
.ct-lista .ct-chip { margin-left: 6px; }
.ct-lista-ped { display: block; color: var(--tinta2); }  /* 22/10: com o "Faltou embarcar", quebra a linha no celular */
/* 17/10: Fora do catálogo — a foto pequena */
.fora-foto { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; border: 1px solid var(--linha); background: #fff; flex: 0 0 56px; }
.fora-sem-foto { display: grid; place-items: center; font-size: 11px; color: var(--muda); cursor: pointer; background: var(--zebra); }
.fora-tit { flex: 1; min-width: 0; display: grid; gap: 2px; align-content: start; }
.fora-tit .link-btn { justify-self: start; font-size: 12.5px; }
.campo-largo { margin-top: 8px; }
/* 17/10: as especificações usadas por categoria (Categorias) e o "Mostrar todas" no produto */
.cat-espec-grupo { margin: 6px 0 10px; }
.cat-espec-grupo > b { display: block; margin-bottom: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muda); }
.espec-todas { margin-top: 8px; }
/* 17/10: o container com vários fornecedores (Dados da compra) */
.compra-container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 12px; padding: 10px 14px; border: 1px solid var(--borda);
  border-left: 4px solid var(--info); border-radius: var(--raio-m); background: var(--info-sup); }
.compra-container > div:first-child { flex: 1 1 100%; }
.compra-container-lista { flex: 1 1 100%; margin: 0; padding-left: 18px; }
/* 17/10 (pedido do usuário): na linha do item, o item do cadastro (30%) e depois a descrição da PI (70%); a Invoice/PL dentro do item */
.ci-cab .ci-cadastro { flex: 0 1 30%; }
.ci-cab .ci-pi { flex: 1 1 0; }
.ci-cab .ci-cadastro .compra-item { width: 100%; }
.ci-doc { margin-top: 8px; border-top: 1px dashed var(--linha); padding-top: 6px; }
.ci-doc > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--tinta2); }
@media (max-width: 560px) { .ci-cab .ci-pi, .ci-cab .ci-cadastro { flex: 1 1 100%; } }
.btn-excel { display: inline-flex; align-items: center; gap: 6px; }  /* 17/10: a Invoice e o Packing List em Excel */
.emb-kpi { cursor: default; }  /* 17/10: os indicadores dos Embarques (sem clique) */
.emb-kpi b { font-size: 21px; }
/* 17/10 (Embarques, etapa 2): a linha do tempo do container */
.emb-tempo { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px 6px; }
.emb-passo { position: relative; display: grid; gap: 2px; padding: 8px 10px 8px 26px; border: 1px solid var(--linha); border-radius: 10px; background: var(--sup); font-size: 12.5px; }
.emb-passo b { font-size: 12px; }
.emb-ponto { position: absolute; left: 9px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--borda); }
.emb-passo.feito .emb-ponto { background: var(--ok); } .emb-passo.feito { border-color: var(--ok); }
.emb-passo.atrasado .emb-ponto { background: var(--perigo); } .emb-passo.atrasado { border-color: var(--perigo); }
.emb-detalhe { padding: 6px 4px; }
/* 17/10: o que falta no pedido de compra */
.compra-falta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; padding: 10px 14px; border: 1px solid var(--borda);
  border-left: 4px solid var(--alerta); border-radius: var(--raio-m); background: var(--alerta-sup); }
.compra-falta-item { cursor: pointer; border: 0; font: inherit; font-size: 12.5px; }
.compra-falta-sec > summary .compra-sec-tit { color: var(--alerta); }
.compra-falta-sec .compra-falta { margin: 0 12px 12px; }
.compra-anexos { margin-bottom: 10px; }
/* 17/10: com alteração sem salvar, os arquivos da Invoice ficam travados */
.compra-docs-acoes.travado a, .compra-docs-acoes.travado button { pointer-events: none; opacity: .45; }
.compra-docs-nota { color: var(--alerta); font-weight: 600; }
/* 17/10: o Preço ($) e a % do preço da PI */
.ci-pct { max-width: 90px; }
/* 17/10: uma versão do pedido de compra, só para ver */
.compra-versao-faixa { border-left: 4px solid var(--alerta); margin: 6px 0; }
.compra-versao-acoes { justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.compra-so-ver input:disabled, .compra-so-ver select:disabled, .compra-so-ver textarea:disabled { color: var(--tinta); opacity: 1; }
.compra-hist-vendo { background: var(--alerta-sup); border-radius: 6px; }
.compra-hist-marca { display: block; color: var(--alerta); font-size: 12px; }
/* 17/10: as prorrogações do pagamento */
.compra-prorrog li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.compra-prorrog-conc { margin-top: 8px; }
/* 17/10: os itens incluídos no orçamento e as setas da ordem */
.orc-cod { display: flex; align-items: center; justify-content: center; gap: 6px; }
.orc-setas { display: inline-flex; flex-direction: column; gap: 1px; }
.orc-seta { border: 1px solid var(--borda); background: var(--sup, #fff); color: var(--tinta2); border-radius: 4px; font-size: 11px; line-height: 1; padding: 3px 6px; cursor: pointer; }
.orc-seta:hover:not(:disabled) { color: var(--acento); border-color: var(--acento); }
.orc-seta:disabled { opacity: .3; cursor: default; }
.orc-extra-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.orc-incluir { margin: -4px 16px 16px; }  /* alinhado com a tabela (o padding de .orc-itens.planilha) */
.orc-incluir-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.orc-incluir-cod { min-width: 260px; flex: 1 1 260px; }
.orc-incluir-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ci-completar { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ci-pct-geral { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.compra-outros .compra-hist { margin-bottom: 10px; }
/* 17/10: a linha do tempo do container no fim da página, fora dos blocos */
.compra-linha-tempo { margin: 14px 2px 6px; }
.compra-linha-tempo > h4 { margin: 0 0 8px; font-size: 14px; }
.compra-hist li span { overflow-wrap: anywhere; }
/* 17/10: as fotos e os arquivos guardados no pedido de compra */
.compra-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.compra-foto img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--linha); display: block; }
.compra-arq { display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; width: 140px; min-height: 96px; padding: 8px; border: 1px solid var(--linha);
  border-radius: 8px; font-size: 12px; text-decoration: none; color: var(--tinta); overflow-wrap: anywhere; }
.compra-arq b { color: var(--acento); }
/* 17/10: "Avisar quando chegar" no catálogo */
.aviso-chegada { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 10px; }
/* 17/10: a nova linha no formulário (Editar produto, depois de Despesas no Brasil) */
.formulario .quebra-linha { grid-column: 1 / -1; height: 0; }

/* 20/10: a barra "Bling" da compra (logo abaixo do título) */
.compra-bling-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--linha); border-left: 4px solid var(--acento); border-radius: 10px; background: var(--sup); }
.compra-bling-barra.ok { border-left-color: var(--ok); } .compra-bling-barra.alerta { border-left-color: var(--alerta); background: var(--alerta-sup); }
.compra-bling-tit { font-size: 15px; } .compra-bling-txt { flex: 1 1 260px; } .compra-bling-nota { flex-basis: 100%; }
/* 20/10: o * dos obrigatórios para o Bling, os volumes (a seta dos itens), a barra dos vendedores, o Packing List e as Informações */
.obrig { color: var(--perigo); font-weight: 700; }
.ci-junto { margin-left: 28px; border-left: 4px solid var(--info); } .ci-vol-cab { border-left: 4px solid var(--info); }
.ci-setas { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; } .ci-setas + .ci-tirar { margin-left: 0; }
.ci-seta { min-width: 32px; font-size: 16px; line-height: 1; } .ci-seta-sel { max-width: 260px; }
.ci-vol-nota { margin: 4px 0 0; font-size: 12.5px; }
.compra-vend-barra { margin-top: -4px; }
.pl-tabela tr.pl-novo-vol td { border-top: 2px solid var(--linha); } .pl-tabela tr.pl-mesmo-vol td:first-child { color: var(--info); font-weight: 700; }
.pl-tabela select { max-width: 170px; } .pl-tabela .chip { white-space: nowrap; } .pl-opcao { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.compra-info-grupos { display: grid; gap: 12px 24px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.compra-info-grupo h4 { margin: 0 0 4px; font-size: 14px; } .compra-info-grupo ul { margin: 0; padding-left: 18px; } .compra-info-grupo li { margin: 3px 0; font-size: 13.5px; }
@media (max-width: 600px) { .ci-junto { margin-left: 12px; } }
/* 20/10: o custo final no Bling (Custos da importação) */
.compra-custo-bling { margin-top: 12px; } .compra-custo-bling h4 { margin: 0 0 4px; }
/* 20/10: o item da compra — o ¥ em US$, o "+ Lote" e o Invoice e Packing List sempre aberto */
.ci-conv { padding: 6px 0; font-weight: 600; white-space: nowrap; } .ci-mais-lote { align-self: end; padding: 8px 0; }
.ci-doc-tit { font-size: 12.5px; font-weight: 600; color: var(--tinta2); }
/* 20/10: o Bling e os vendedores num bloco só (outro desenho: não é uma das etapas) e a linha "só para conferir" do item */
.compra-status { margin: 0 0 14px; padding: 2px 14px 4px; border: 1px dashed var(--borda); border-radius: var(--raio-m); background: var(--sup2); }
.compra-status-cab { padding-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muda); }
.compra-status-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 0; }
.compra-status-linha + .compra-status-linha { border-top: 1px solid var(--linha); }
.compra-status-linha .compra-bling-tit { min-width: 84px; font-size: 14px; } .compra-status-linha .compra-bling-nota { padding-left: 32px; }
.compra-status-ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--acento-sup); color: var(--acento); }
.compra-status-linha.ok .compra-status-ic { background: var(--ok-sup); color: var(--ok); } .compra-status-linha.alerta .compra-status-ic { background: var(--alerta-sup); color: var(--alerta); }
.ci-info { padding: 6px 10px; border-radius: var(--raio-p); background: var(--sup2); border: 1px dashed var(--linha); font-style: italic; }
.ci-info-tit { font-style: normal; font-weight: 700; color: var(--muda); text-transform: uppercase; font-size: 10.5px; letter-spacing: .05em; align-self: center; }
@media (max-width: 600px) { .compra-status-linha .compra-bling-nota { padding-left: 0; } }
/* 20/10 (pedido do usuário: "coloque uma borda ou fundo"): o bloco "Bling e vendedores" com fundo azul-claro e borda */
.compra-status { background: var(--info-sup); border: 1px solid color-mix(in srgb, var(--info) 40%, transparent); box-shadow: var(--sombra); }
.compra-status-cab { color: var(--info); }
.compra-status-linha + .compra-status-linha { border-top-color: color-mix(in srgb, var(--info) 25%, transparent); }
.compra-status-ic { background: var(--sup); }
/* 20/10 (pedido do usuário): os produtos na mesma caixa numa moldura só (o volume), os de dentro recuados com a seta */
.ci-volume { display: grid; gap: 8px; padding: 8px 10px 10px; border: 2px dashed color-mix(in srgb, var(--info) 50%, transparent); border-radius: var(--raio-m); background: var(--info-sup); }
.ci-volume-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--info); font-size: 13.5px; }
.ci-volume-cab small { color: var(--tinta2); font-size: 12.5px; } .ci-volume-ic { font-size: 16px; }
.ci-volume .ci-vol-cab { border-left: 1px solid var(--linha); }
.ci-volume .ci-junto { position: relative; margin-left: 30px; border-left: 1px solid var(--linha); }
.ci-volume .ci-junto::before { content: '↳'; position: absolute; left: -24px; top: 10px; color: var(--info); font-size: 18px; font-weight: 700; }
@media (max-width: 600px) { .ci-volume .ci-junto { margin-left: 18px; } .ci-volume .ci-junto::before { left: -16px; font-size: 15px; } }
/* 20/10: o anexo subindo — o botão gira e diz o que está enviando */
.compra-anexar.enviando { pointer-events: none; cursor: progress; background: var(--info-sup); color: var(--info); border-color: var(--info); }
.giro { display: inline-block; flex: none; width: 14px; height: 14px; margin-right: 6px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: girar .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .giro { animation-duration: 2.4s; } }
/* 20/10 (pedido do usuário): o número do item em destaque (separa bem um item do outro) */
.ci-n { min-width: 34px; height: 34px; background: var(--acento); color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 0 0 3px var(--acento-sup); }
.ci-lista { gap: 14px; }
/* 20/10: a janela do "Completar pelo cadastro" (os campos para escolher) */
.completar-lista { display: grid; gap: 4px; }
/* 20/10: a busca do produto só pelo código do Bling (a lista embaixo do campo) */
.busca-bling { position: relative; min-width: 0; } .busca-bling .compra-item { width: 100%; }
.busca-bling-lista { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 2px); min-width: 320px; max-height: 300px; overflow: auto; margin: 0; padding: 4px;
  list-style: none; background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio-p); box-shadow: var(--sombra); }
.busca-bling-lista li { padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1.35; }
.busca-bling-lista li.foco, .busca-bling-lista li:hover { background: var(--acento-sup); } .busca-bling-lista li b { color: var(--acento); }
.busca-bling-lista .busca-lig { color: var(--ok); font-weight: 600; }
/* 20/10: os produtos ligados a cada item do Bling (Estoque, ao abrir o produto) */
.est-ligados { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; } .est-ligados .chip { font-size: 11.5px; }
/* 20/10: Estoque do sistema × Estoque do Bling */
.est-visao { margin: 0 0 14px; } .est-visao button { font-size: 15px; padding: 8px 18px; font-weight: 600; }
.chip-link { cursor: pointer; border: 1px solid var(--borda); } .chip-link:hover { background: var(--acento-sup); color: var(--acento); } .est-ver-bling { font-size: 12px; margin-left: 4px; }
/* 20/10: na permuta, os custos da venda no resumo do orçamento (só a diretoria) */
.orc-custos-tit { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--borda); } .orc-custos-tit small { margin-left: 6px; }
.orc-custo-linha > span:first-child { padding-left: 12px; color: var(--tinta2); }
.orc-custo-alerta, .orc-custo-alerta b { color: var(--perigo); } .orc-custo-ok, .orc-custo-ok b { color: var(--ok); }
/* 20/10: a linha das visões do Estoque com o "Atualizar com o Bling" */
.est-visao-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; } .est-visao-linha .est-visao { margin: 0; }
.est-atualizar { display: inline-flex; align-items: center; gap: 4px; }
/* 20/10: "+ Cadastrar no Bling" (na busca sem resultado e ao lado do "sem produto") */
.busca-bling-lista li.busca-vazio { cursor: default; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .busca-bling-lista li.busca-vazio:hover { background: none; }
.ci-cad-bling { font-size: 12.5px; }
/* 20/10: o ícone do topo "Atualizar o estoque com o Bling" (a caixa com a seta; girando enquanto lê) */
.estoque-btn { position: relative; } .estoque-btn-seta { position: absolute; right: 3px; bottom: 1px; font-size: 12px; font-weight: 800; line-height: 1; }
.estoque-btn.ocupado .estoque-btn-seta { display: inline-block; animation: girar .9s linear infinite; } .estoque-btn.ocupado { cursor: progress; }
@media (prefers-reduced-motion: reduce) { .estoque-btn.ocupado .estoque-btn-seta { animation-duration: 3s; } }
/* 20/10: o Lucro estimado do orçamento abre a conta (o mesmo visual dos detalhes da aprovação) */
.orc-totais li.orc-lucro-det { display: block; } .orc-lucro-det .aprov-det-corpo b { font-size: inherit; }
.orc-lucro-det .aprov-det-tab small { white-space: nowrap; }
/* 20/10: com o ícone do estoque, o topo passava da largura do celular (390 px): ícones, espaços e o mês um pouco menores */
@media (max-width: 420px) {
  .topo-linha { gap: 4px; } .topo .icone-btn { width: 31px; height: 31px; } .topo select { max-width: 128px; }
}
/* 29/10 (pedido do usuário: "Assistente para mais de um vendedor"): o seletor "Atendendo" e, no cadastro, os outros vendedores */
.atendendo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; margin: 0 0 12px; background: var(--sup);
  border: 1px solid var(--borda); border-left: 4px solid var(--azul); border-radius: 10px; }
.atendendo label { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.atendendo select { font-weight: 700; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--borda); background: var(--sup); color: var(--tinta); }
.assist-outros summary { cursor: pointer; font-weight: 600; }
.assist-outros .opcoes { margin: 6px 0; }
/* 29/10 (pedido do usuário): Carteira a vencer — os filtros pelo prazo, em cima da tabela */
.carteira-filtros { padding: 4px 16px 10px; }
/* 29/10 (achado da análise das páginas do vendedor): com os ícones novos, o topo pedia 424 px — no celular de 360 a 412 px o "Sair" e o
   botão de ocultar o menu ficavam fora da tela e a página corria para o lado. No celular: sem o logo, ícones e espaços menores e o mês
   encolhe (o nome curto, "out/2026", vem do app.js) */
@media (max-width: 440px) {
  .topo-logo { display: none; }
  .topo-linha { gap: 3px; padding: 8px 8px; }
  .topo .icone-btn { width: 30px; height: 30px; flex: none; }
  .topo .usuario-chip { flex: none; }
  .topo select { flex: 0 1 auto; min-width: 0; max-width: 104px; padding: 6px 2px; font-size: 13px; }
}
/* 21/10 (pedido do usuário): o item que veio de outro container — a faixa roxa no item, o selo e a nota no pedido de origem */
:root { --outro: #6A4CB5; --outro-sup: #F3EFFB; }
:root[data-theme="dark"] { --outro: #B3A1EE; --outro-sup: #221B38; }
.ci-item.ci-outro { border-color: color-mix(in srgb, var(--outro) 45%, var(--linha)); border-left: 5px solid var(--outro); background: var(--outro-sup); }
.ci-outro-faixa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 8px; padding: 0 0 6px; border-bottom: 1px dashed color-mix(in srgb, var(--outro) 40%, transparent);
  color: var(--outro); font-size: 13px; }
.ci-outro-faixa small { color: var(--tinta2); font-size: 12px; }
.ci-outro-ic { font-weight: 800; font-size: 15px; }
.chip.outro { background: var(--outro); border-color: var(--outro); color: #fff; } :root[data-theme="dark"] .chip.outro { color: #160F2B; }
.ci-pago { display: inline-flex; align-items: center; gap: 6px; padding-top: 6px; font-size: 13px; cursor: pointer; }
.ci-campo .ci-pago input { width: auto; margin: 0; }
.ci-transf { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; border-left: 3px solid var(--outro); background: var(--outro-sup); color: var(--tinta); font-size: 12.5px; }
.ci-transf b { color: var(--outro); }
/* 22/10 (pedido do usuário): "Faltou embarcar" — a nota do item e a do campo "Embarca neste container" */
.ci-faltou { border-left-color: var(--alerta, #b45309); }
.ci-faltou b { color: var(--alerta, #b45309); }
.ci-falta-nota { display: block; min-height: 0; margin-top: 2px; font-size: 11.5px; color: var(--alerta, #b45309); }
.ci-falta-nota:empty { display: none; }
.faltas-tab td .link-btn { font-weight: 600; }
.ci-total-outro b { color: var(--outro); }
.ci-add { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.btn.ci-btn-outro { border-color: var(--outro); color: var(--outro); }
.outro-itens { margin-top: 10px; }
/* 21/10: Orçamentos › Painéis já vendidos (o quadro do orçamento, fora dele) */
.parecidos-form { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 2fr) 110px minmax(160px, 1.4fr); gap: 10px 14px; align-items: end; }
.parecidos-dims { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 10px; }
.parecidos-form input, .parecidos-form select { width: 100%; box-sizing: border-box; }
.parecidos-tam { display: block; margin-top: 6px; }
.parecidos-pagina { background: var(--sup); }
.parecidos-tit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 16px; }
@media (max-width: 760px) { .parecidos-form { grid-template-columns: 1fr; } }
/* 22/10 (pedido do usuário): no item do pedido de compra, a linha de baixo — Preço ($), % da PI e logo depois o "+ Lote" (ou o lote) */
/* 22/10 (pedido do usuário): o pagamento ao fornecedor — o resumo e as listas (a previsão e os feitos) */
.pag-resumo { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 12px; padding: 8px 12px; border-radius: var(--raio-m); background: var(--sup3); }
.pag-resumo small { flex-basis: 100%; }
.pag-bloco { margin: 0 0 12px; }
.pag-bloco h5 { margin: 0 0 6px; font-size: 13px; }
.pag-linha { display: flex; flex-wrap: wrap; align-items: end; gap: 6px 10px; padding: 6px 0; border-top: 1px dashed var(--borda); }
.pag-linha .campo { margin: 0; flex: 0 1 150px; }
.pag-linha .campo.pag-larga { flex: 1 1 200px; }
.pag-linha .chip { margin-bottom: 6px; }
.pag-linha .ci-tirar { margin-bottom: 4px; }
@media (max-width: 560px) { .pag-linha .campo { flex: 1 1 130px; } }
.ci-linha2 { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; margin-top: 8px; }
.ci-linha2 > .ci-campo { flex: 0 1 150px; }
.ci-linha2 > .ci-campo.ci-lote-fim { flex: 0 1 320px; }
@media (max-width: 560px) { .ci-linha2 > .ci-campo { flex: 1 1 130px; } .ci-linha2 > .ci-campo.ci-lote-fim { flex: 1 1 100%; } }
/* 22/10: o vídeo que acabou de ser salvo fica marcado */
.video-card.video-salvo { outline: 3px solid var(--ok); outline-offset: 2px; transition: outline-color 2s; }

/* 22/10 (pedido do usuário: "os usuários são jovens"): o "Passo a passo 3" — 22/10 (pedido do usuário: "ficou muito escuro, faça em cor mais
   clara"): o bloco claro com pontinhos de luz azul no fundo, os passos como uma barra de segmentos (feitos em verde-limão e ciano, o atual em
   rosa), campos com brilho ciano e o botão verde-limão; a barra de baixo branca (não fixa). No tema escuro do portal, o bloco segue o escuro. */
.orc-visual-4 { --v4-fundo: #0B1530; --v4-lima: #B6FF3B; --v4-lima-esc: #5E9E00; --v4-ciano: #00B8E6; --v4-ciano-tx: #00739A; --v4-rosa: #FF4FA3; --v4-rosa-tx: #D6006F;
  --v4-bloco: #FFFFFF; --v4-campo: #F4FAFF; --v4-borda: #A9CBE8; --v4-tinta: #0B1530; --v4-pontos: rgba(0, 150, 210, .09); }
:root[data-theme="dark"] .orc-visual-4 { --v4-rosa-tx: #FF6FB5; --v4-ciano-tx: #5BD6F7; --v4-lima-esc: #B6FF3B;
  --v4-bloco: var(--sup); --v4-campo: var(--sup2); --v4-borda: var(--borda); --v4-tinta: var(--tinta); --v4-pontos: rgba(61, 224, 255, .07); }
.orc-visual-2.orc-visual-4 .orc-passos { gap: 6px; margin: 8px 0 22px; }
.orc-visual-2.orc-visual-4 .orc-passos li + li::before { display: none; }
.orc-visual-2.orc-visual-4 .orc-passos li button, .orc-visual-2.orc-visual-4 .orc-passos li.feito button, .orc-visual-2.orc-visual-4 .orc-passos li.atual button {
  flex-direction: column; align-items: stretch; gap: 8px; padding: 0; text-align: left; }
.orc-visual-2.orc-visual-4 .orc-passos .orc-num { width: 100%; height: 12px; border-radius: 99px; border: 0; font-size: 0; color: transparent; box-shadow: none; background: var(--trilho); }
.orc-visual-2.orc-visual-4 .orc-passos .orc-num svg { display: none; }
.orc-visual-2.orc-visual-4 .orc-passos li button:hover .orc-num { background: color-mix(in srgb, var(--v4-ciano) 45%, var(--trilho)); }
.orc-visual-2.orc-visual-4 .orc-passos li.feito .orc-num { background: linear-gradient(90deg, var(--v4-lima), var(--v4-ciano)); }
.orc-visual-2.orc-visual-4 .orc-passos li.atual .orc-num { background: linear-gradient(90deg, var(--v4-rosa), #FF8A3D); box-shadow: 0 0 12px color-mix(in srgb, var(--v4-rosa) 45%, transparent); }
.orc-visual-2.orc-visual-4 .orc-passo-txt { justify-items: start; }
.orc-visual-2.orc-visual-4 .orc-passo-txt b { font-size: 15px; font-weight: 900; }
.orc-visual-2.orc-visual-4 .orc-passos li.atual .orc-passo-txt b { color: var(--v4-rosa-tx); }
.orc-visual-4 .orc-bloco, .orc-visual-4 .orc-bloco.orc-resumo {
  border: 2px solid color-mix(in srgb, var(--v4-ciano) 35%, transparent); border-radius: 26px; box-shadow: 0 14px 34px rgba(0, 120, 190, .12);
  background-color: var(--v4-bloco); background-image: radial-gradient(circle, var(--v4-pontos) 1.2px, transparent 1.6px); background-size: 14px 14px; }
.orc-visual-4 .orc-bloco:not([hidden]) { animation: orc-v4-entra .35s ease-out; }
@keyframes orc-v4-entra { from { opacity: .35; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .orc-visual-4 .orc-bloco:not([hidden]) { animation: none; } }
.orc-visual-2.orc-visual-4 .orc-bloco > .cartao-cab { background: none; padding: 24px 28px 6px; }
.orc-visual-4 .orc-bloco > .cartao-cab h2 { color: var(--v4-tinta); font-size: 30px; font-weight: 900; }
.orc-visual-4 .orc-bloco > .cartao-cab[data-etapa]::before { color: var(--v4-rosa-tx); }
.orc-visual-4 .orc-bloco .campo label { color: var(--v4-ciano-tx); }
.orc-visual-4 .orc-bloco .campo input, .orc-visual-4 .orc-bloco .campo select, .orc-visual-4 .orc-bloco .campo textarea {
  background: var(--v4-campo); border: 2px solid var(--v4-borda); color: var(--v4-tinta); border-radius: 16px; }
.orc-visual-4 .orc-bloco .campo input:focus, .orc-visual-4 .orc-bloco .campo select:focus, .orc-visual-4 .orc-bloco .campo textarea:focus {
  border-color: var(--v4-ciano); box-shadow: 0 0 0 4px color-mix(in srgb, var(--v4-ciano) 22%, transparent), 0 0 16px color-mix(in srgb, var(--v4-ciano) 28%, transparent); }
.orc-visual-4 .btn.primario, .orc-visual-4 .orc-bloco .btn.primario { background: var(--v4-lima); border-color: var(--v4-lima-esc); color: var(--v4-fundo); font-weight: 900; }
.orc-visual-4 .orc-pp-rodape { position: static; margin-top: 14px; border-radius: 22px; background: var(--v4-bloco); border: 2px solid color-mix(in srgb, var(--v4-ciano) 30%, transparent);
  padding-block: 12px; box-shadow: 0 10px 26px rgba(0, 120, 190, .10); }
.orc-visual-4.orc-pagina.orc-modo-passos { padding-bottom: 24px; }
@media (max-width: 860px) { .orc-visual-4.orc-pagina.orc-modo-passos { padding-bottom: 24px; } .orc-visual-4 .orc-bloco > .cartao-cab h2 { font-size: 24px; } }
.orc-visual-4 .orc-pp-total { color: var(--v4-rosa-tx); font-size: 30px; }
.orc-visual-4 .orc-pp-sobre { color: var(--tinta2); }
.orc-visual-4 .orc-pp-sobre .chip.alerta { background: color-mix(in srgb, var(--v4-rosa) 16%, transparent); color: var(--v4-rosa-tx); }
.orc-visual-4 .orc-pp-sobre .chip.ok { background: color-mix(in srgb, var(--v4-lima) 40%, transparent); color: var(--tinta); }
.orc-visual-4 .orc-pp-rodape .btn { border-radius: 999px; border: 2px solid var(--v4-borda); color: var(--v4-tinta); background: transparent; }
.orc-visual-4 .orc-pp-rodape .btn:hover:not([disabled]) { border-color: var(--v4-ciano); }
.orc-visual-4 .orc-pp-rodape .btn.primario { background: var(--v4-lima); border-color: var(--v4-lima-esc); color: var(--v4-fundo); font-size: 17px; box-shadow: 0 6px 18px color-mix(in srgb, var(--v4-lima) 55%, transparent); }
/* 22/10 (pedido do usuário: "compacte para caber tudo na mesma página"): o Passo a passo mais baixo — os cartões dos passos, a barra de
   andamento, o título e os campos do bloco */
.orc-passos-classico .orc-modo { margin-bottom: 6px; }
.orc-passos-classico .orc-passos { margin-bottom: 10px; gap: 6px; }
.orc-passos-classico .orc-passos li button { padding: 6px 10px; gap: 8px; border-radius: 12px; }
.orc-passos-classico .orc-passos .orc-num { width: 26px; height: 26px; font-size: 13px; }
.orc-passos-classico .orc-pp-barra { height: 5px; margin: -4px 0 10px; }
.orc-passos-classico .orc-bloco > .cartao-cab { padding: 12px 20px 0; }
.orc-passos-classico .orc-bloco > .cartao-cab h2 { font-size: 20px; }
.orc-passos-classico .orc-bloco > .cartao-cab[data-etapa]::before { font-size: 11px; }
.orc-passos-classico .orc-bloco .cartao-corpo { padding: 6px 20px 14px; }
.orc-passos-classico .orc-bloco .campo { margin-bottom: 8px; gap: 4px; }
.orc-passos-classico .orc-bloco .campo input, .orc-passos-classico .orc-bloco .campo select, .orc-passos-classico .orc-bloco .campo textarea { min-height: 42px; font-size: 15px; padding-top: 7px; padding-bottom: 7px; }
.orc-passos-classico .orc-pp-rodape { padding-block: 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
.orc-passos-classico .btn.btn-grande { min-height: 42px; }
/* 22/10: no Passo a passo (computador), a página termina junto com a barra de baixo — sem o espaço sobrando nem o rodapé da página */
@media (min-width: 861px) {
  .orc-passos-classico.orc-pagina.orc-modo-passos { padding-bottom: 66px; }
  main:has(.orc-passos-classico) { padding-bottom: 0; }
  body:has(.orc-passos-classico) .rodape { display: none; }
}

/* 22/10 (pedido do usuário: "no Passo a passo 3, a barra não acompanha"): os passos antes do atual ficam cheios */
.orc-visual-2.orc-visual-4 .orc-passos li.antes .orc-num { background: linear-gradient(90deg, var(--v4-lima), var(--v4-ciano)); }
/* 22/10 (pedido do usuário): a paleta de cores no canto direito do topo (Passo a passo 3) */
.orc-paleta { margin-left: auto; position: relative; }
.orc-paleta > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--borda); background: var(--sup); font-weight: 800; font-size: 14px; }
.orc-paleta > summary::-webkit-details-marker { display: none; }
.orc-paleta > summary:focus-visible { outline: 3px solid var(--v4-ciano, var(--acento)); outline-offset: 2px; }
.orc-paleta-amostra, .orc-paleta-cores { display: inline-flex; }
.orc-paleta-amostra i, .orc-paleta-cores i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--sup); margin-left: -4px; }
.orc-paleta-amostra i:first-child, .orc-paleta-cores i:first-child { margin-left: 0; }
.orc-paleta-amostra i:nth-child(1) { background: var(--v4-rosa); } .orc-paleta-amostra i:nth-child(2) { background: var(--v4-lima); } .orc-paleta-amostra i:nth-child(3) { background: var(--v4-ciano); }
.orc-paleta-caixa { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 220px; display: grid; gap: 4px; padding: 8px;
  background: var(--sup); border: 1px solid var(--linha); border-radius: 16px; box-shadow: var(--sombra); }
.orc-paleta-op { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 2px solid transparent; border-radius: 12px; background: none; color: var(--tinta);
  font: 700 14px var(--fonte); cursor: pointer; text-align: left; }
.orc-paleta-op:hover { background: var(--sup3); }
.orc-paleta-op[aria-pressed="true"] { border-color: var(--v4-rosa); }
.orc-paleta-op .orc-paleta-cores i { width: 18px; height: 18px; }
/* 22/10 (pedido do usuário): no Passo a passo 2, a barra azul de baixo não fica fixa — vem logo depois do bloco */
.orc-visual-3 .orc-pp-rodape { position: static; margin-top: 14px; border-radius: 20px; padding-block: 12px; }
.orc-visual-3.orc-pagina.orc-modo-passos { padding-bottom: 24px; }
@media (max-width: 860px) { .orc-visual-3.orc-pagina.orc-modo-passos { padding-bottom: 24px; } }
@media (max-width: 860px) {
  .orc-modo .segmentos { flex-wrap: wrap; max-width: 100%; }
  .orc-visual-2.orc-visual-4 .orc-passos li:not(.atual) .orc-passo-txt { visibility: hidden; height: 0; }
  .orc-visual-2.orc-visual-4 .orc-passo-txt b { font-size: 12px; white-space: nowrap; }
}
/* 22/10 (pedido do usuário: "no Passo a passo 2, outro modelo de barra"): os passos em setas encaixadas — o número e o nome dentro de cada
   seta. 22/10 (pedido do usuário: "muitas cores, diminua"): só o azul — a atual em azul forte, as de antes e as feitas em azul-claro e as que
   faltam em cinza-claro */
.orc-visual-2.orc-visual-3 .orc-passos { gap: 4px; margin: 6px 0 18px; }
.orc-visual-2.orc-visual-3 .orc-passos li + li::before { display: none; }
.orc-visual-2.orc-visual-3 .orc-passos li button, .orc-visual-2.orc-visual-3 .orc-passos li.feito button, .orc-visual-2.orc-visual-3 .orc-passos li.atual button {
  flex-direction: row; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 6px 22px 6px 28px; border: 0; border-radius: 0;
  background: var(--sup3); color: var(--v3-tinta); text-align: left; transition: background .25s;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%); }
.orc-visual-2.orc-visual-3 .orc-passos li:first-child button { padding-left: 16px; border-radius: 12px 0 0 12px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); }
.orc-visual-2.orc-visual-3 .orc-passos li:last-child button { padding-right: 16px; border-radius: 0 12px 12px 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%); }
.orc-visual-2.orc-visual-3 .orc-passos li:not(.atual) button:hover { background: color-mix(in srgb, var(--v3-azul) 16%, var(--sup3)); }
.orc-visual-2.orc-visual-3 .orc-passos .orc-num { width: 26px; height: 26px; flex: 0 0 26px; font-size: 13px; border: 0; box-shadow: none; background: var(--sup); color: var(--v3-tinta); }
.orc-visual-2.orc-visual-3 .orc-passos .orc-num svg { width: 15px; height: 15px; }
.orc-visual-2.orc-visual-3 .orc-passos li.antes button, .orc-visual-2.orc-visual-3 .orc-passos li.feito button { background: color-mix(in srgb, var(--v3-azul) 16%, var(--sup)); color: var(--v3-tinta); }
.orc-visual-2.orc-visual-3 .orc-passos li.feito .orc-num { background: var(--v3-azul); color: #FFFFFF; }
.orc-visual-2.orc-visual-3 .orc-passos li.atual button { background: var(--v3-azul); color: #FFFFFF; }
.orc-visual-2.orc-visual-3 .orc-passos li.atual .orc-num { background: #FFFFFF; color: var(--v3-azul-esc); box-shadow: none; }
.orc-visual-2.orc-visual-3 .orc-passo-txt { justify-items: start; }
.orc-visual-2.orc-visual-3 .orc-passo-txt small { display: none; }
.orc-visual-2.orc-visual-3 .orc-passo-txt b, .orc-visual-2.orc-visual-3 .orc-passos li.atual .orc-passo-txt b { font-size: 14px; font-weight: 900; color: inherit; white-space: nowrap; }
@media (max-width: 860px) {
  .orc-visual-2.orc-visual-3 .orc-passos li button, .orc-visual-2.orc-visual-3 .orc-passos li.feito button, .orc-visual-2.orc-visual-3 .orc-passos li.atual button { padding: 4px 14px 4px 20px; min-height: 40px; }
  .orc-visual-2.orc-visual-3 .orc-passos li:first-child button { padding-left: 8px; }
  .orc-visual-2.orc-visual-3 .orc-passos li:last-child button { padding-right: 8px; }
  .orc-visual-2.orc-visual-3 .orc-passos li:not(.atual) .orc-passo-txt { display: none; }
  .orc-visual-2.orc-visual-3 .orc-passos li.atual { grid-column: span 1; }
  .orc-visual-2.orc-visual-3 .orc-passos li.atual .orc-num { display: none; }
  .orc-visual-2.orc-visual-3 .orc-passos li.atual .orc-passo-txt b { font-size: 12px; }
}

/* 22/10 (pedido do usuário): "Itens da proposta" no padrão do Passo a passo 3 e 4 — a tabela em linhas arredondadas (sem as grades), o
   cabeçalho em letras coloridas, o tipo do item em rosa e o total com a linha colorida */
.orc-visual-4 .orc-itens.planilha table { border: 0; border-collapse: separate; border-spacing: 0 6px; }
.orc-visual-4 .orc-itens.planilha thead th { background: none; color: var(--v4-ciano-tx); border: 0; font-size: 11px; letter-spacing: .08em; padding: 4px 12px; }
.orc-visual-4 .orc-itens.planilha tbody td { background: var(--v4-campo); border: 0; padding: 10px 12px; }
.orc-visual-4 .orc-itens.planilha tbody td:first-child { border-radius: 14px 0 0 14px; }
.orc-visual-4 .orc-itens.planilha tbody td:last-child { border-radius: 0 14px 14px 0; }
.orc-visual-4 .orc-itens.planilha tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--v4-ciano) 9%, var(--v4-bloco)); }
.orc-visual-4 .orc-itens.planilha tbody tr:hover td { background: color-mix(in srgb, var(--v4-rosa) 9%, var(--v4-bloco)); }
.orc-visual-4 .orc-itens.planilha .orc-item-tipo { color: var(--v4-rosa-tx); }
.orc-visual-4 .orc-itens.planilha td input, .orc-visual-4 .orc-itens.planilha td select { border-radius: 12px; border: 2px solid var(--v4-borda); background: var(--v4-bloco); }
.orc-visual-4 .orc-itens.planilha tfoot td { background: none; border: 0; border-top: 3px solid var(--v4-rosa); color: var(--v4-rosa-tx); font-size: 18px; }
@media (max-width: 860px) { .orc-visual-4 .orc-itens.planilha tbody td, .orc-visual-4 .orc-itens.planilha tbody td:first-child, .orc-visual-4 .orc-itens.planilha tbody td:last-child { border-radius: 0; } }
/* 22/10 (pedido do usuário: "no Passo a passo 3, a barra vai preenchendo a cor sempre que passar de uma etapa para a outra"): cada segmento
   tem o trilho e a cor por cima, que enche da esquerda para a direita ao avançar (e esvazia ao voltar); os passos de antes ficam cheios, o
   atual enche logo depois, e o passo já preenchido mais adiante aparece clarinho */
.orc-visual-2.orc-visual-4 .orc-passos .orc-num, .orc-visual-2.orc-visual-4 .orc-passos li.feito .orc-num, .orc-visual-2.orc-visual-4 .orc-passos li.antes .orc-num,
.orc-visual-2.orc-visual-4 .orc-passos li.atual .orc-num { position: relative; overflow: hidden; background: var(--trilho); box-shadow: none; }
.orc-visual-2.orc-visual-4 .orc-passos .orc-num::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--v4-lima), var(--v4-ciano));
  transform: scaleX(0); transform-origin: left center; transition: transform .6s cubic-bezier(.4, 0, .2, 1), opacity .3s; }
.orc-visual-2.orc-visual-4 .orc-passos li.antes .orc-num::after { transform: scaleX(1); opacity: 1; }
.orc-visual-2.orc-visual-4 .orc-passos li.atual .orc-num::after { transform: scaleX(1); opacity: 1; background: linear-gradient(90deg, var(--v4-rosa), color-mix(in srgb, var(--v4-rosa) 55%, var(--v4-ciano))); transition-delay: .2s; }
.orc-visual-2.orc-visual-4 .orc-passos li.feito:not(.antes):not(.atual) .orc-num::after { transform: scaleX(1); opacity: .3; }
@media (prefers-reduced-motion: reduce) { .orc-visual-2.orc-visual-4 .orc-passos .orc-num::after { transition: none; } }
/* 22/10 (pedido do usuário: "duplique o Passo a passo 3 como Passo a passo 4, mudando a forma como as cores da barra mudam"; depois: "está
   muito colorido, use as cores da Mundo de LED"): no Passo a passo 4, cada passo tem a sua cor, do azul-marinho ao verde da marca (marinho,
   azul, ciano, verde-água e verde); o segmento atual enche e pulsa, e o contorno do bloco, o "PASSO N DE 5", os nomes dos campos, a tabela, o
   total e o botão Avançar mudam para a cor do passo atual. Sem a paleta "Cores" (as cores são as da marca). */
.orc-visual-5 { --v4-rosa: var(--azul); --v4-rosa-tx: var(--azul); --v4-lima: var(--verde); --v4-lima-esc: #009E45; --v4-ciano: var(--ciano); --v4-ciano-tx: #006E94;
  --v4-pontos: rgba(0, 96, 174, .07);
  --v5-c1: var(--marinho); --v5-c2: var(--azul); --v5-c3: var(--ciano); --v5-c4: color-mix(in srgb, var(--ciano) 45%, var(--verde)); --v5-c5: var(--verde);
  --v5-c6: color-mix(in srgb, var(--verde) 70%, var(--marinho)); --v5-atual: var(--v5-c1); --v5-sobre: #FFFFFF;
  --v5-atual-tx: color-mix(in srgb, var(--v5-atual) 60%, #0B1530); }
.orc-visual-5[data-passo-n="2"] { --v5-atual: var(--v5-c2); }
.orc-visual-5[data-passo-n="3"] { --v5-atual: var(--v5-c3); }
.orc-visual-5[data-passo-n="4"] { --v5-atual: var(--v5-c4); --v5-sobre: #04210F; }
.orc-visual-5[data-passo-n="5"] { --v5-atual: var(--v5-c5); --v5-sobre: #04210F; }
.orc-visual-5[data-passo-n="6"] { --v5-atual: var(--v5-c6); }
:root[data-theme="dark"] .orc-visual-5 { --v4-rosa-tx: #6CB4F0; --v4-ciano-tx: #5BC6EA; --v4-lima-esc: var(--verde); --v4-pontos: rgba(108, 180, 240, .06);
  --v5-c1: #3D7FB8; --v5-atual-tx: color-mix(in srgb, var(--v5-atual) 70%, #FFFFFF); }
.orc-visual-2.orc-visual-5 .orc-passos li:nth-child(1) { --seg: var(--v5-c1); }
.orc-visual-2.orc-visual-5 .orc-passos li:nth-child(2) { --seg: var(--v5-c2); }
.orc-visual-2.orc-visual-5 .orc-passos li:nth-child(3) { --seg: var(--v5-c3); }
.orc-visual-2.orc-visual-5 .orc-passos li:nth-child(4) { --seg: var(--v5-c4); }
.orc-visual-2.orc-visual-5 .orc-passos li:nth-child(5) { --seg: var(--v5-c5); }
.orc-visual-2.orc-visual-5 .orc-passos li:nth-child(6) { --seg: var(--v5-c6); }
.orc-visual-2.orc-visual-5 .orc-passos .orc-num::after, .orc-visual-2.orc-visual-5 .orc-passos li.atual .orc-num::after { background: var(--seg); }
.orc-visual-2.orc-visual-5 .orc-passos li.atual .orc-num { box-shadow: 0 0 10px color-mix(in srgb, var(--seg) 50%, transparent); animation: orc-v5-pulsa 1.6s ease-in-out .8s infinite; }
@keyframes orc-v5-pulsa { 50% { transform: scaleY(1.45); } }
@media (prefers-reduced-motion: reduce) { .orc-visual-2.orc-visual-5 .orc-passos li.atual .orc-num { animation: none; } }
.orc-visual-2.orc-visual-5 .orc-passos li.atual .orc-passo-txt b { color: var(--v5-atual-tx); }
.orc-visual-5 .orc-bloco, .orc-visual-5 .orc-bloco.orc-resumo { border-color: color-mix(in srgb, var(--v5-atual) 45%, transparent); box-shadow: 0 14px 34px color-mix(in srgb, var(--v5-atual) 16%, transparent);
  transition: border-color .3s, box-shadow .3s; }
.orc-visual-5 .orc-bloco > .cartao-cab[data-etapa]::before { color: var(--v5-atual-tx); }
.orc-visual-5 .orc-bloco .campo label { color: var(--v5-atual-tx); }
.orc-visual-5 .orc-bloco .campo input:focus, .orc-visual-5 .orc-bloco .campo select:focus, .orc-visual-5 .orc-bloco .campo textarea:focus {
  border-color: var(--v5-atual); box-shadow: 0 0 0 4px color-mix(in srgb, var(--v5-atual) 22%, transparent); }
.orc-visual-5 .orc-itens.planilha thead th, .orc-visual-5 .orc-itens.planilha .orc-item-tipo { color: var(--v5-atual-tx); }
.orc-visual-5 .orc-itens.planilha tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--v5-atual) 8%, var(--v4-bloco)); }
.orc-visual-5 .orc-itens.planilha tbody tr:hover td { background: color-mix(in srgb, var(--v5-atual) 14%, var(--v4-bloco)); }
.orc-visual-5 .orc-itens.planilha tfoot td { border-top-color: var(--v5-atual); color: var(--v5-atual-tx); }
.orc-visual-5 .orc-pp-total { color: var(--v5-atual-tx); }
.orc-visual-5 .orc-pp-rodape { border-color: color-mix(in srgb, var(--v5-atual) 40%, transparent); box-shadow: 0 10px 26px rgba(18, 57, 85, .10); }
.orc-visual-5 .orc-pp-rodape .btn.primario { background: var(--v5-atual); border-color: var(--v5-atual); color: var(--v5-sobre); box-shadow: 0 6px 18px color-mix(in srgb, var(--v5-atual) 40%, transparent); }
@media (prefers-reduced-motion: reduce) { .orc-visual-5 .orc-bloco { transition: none; } }
/* 22/10 (pedido do usuário: "no Passo a passo, na tabela dos Itens da proposta, coloque bordas"): a tabela com as linhas de grade em volta
   de cada célula (nas cores do Passo a passo), o cabeçalho com um fundo clarinho e o total com a linha colorida */
.orc-visual-4 .orc-itens.planilha table { border-collapse: collapse; border-spacing: 0; border: 1px solid var(--v4-borda); }
.orc-visual-4 .orc-itens.planilha thead th { border: 1px solid var(--v4-borda); background: color-mix(in srgb, var(--v4-ciano) 8%, var(--v4-bloco)); padding: 8px 12px; }
.orc-visual-4 .orc-itens.planilha tbody td, .orc-visual-4 .orc-itens.planilha tbody td:first-child, .orc-visual-4 .orc-itens.planilha tbody td:last-child {
  border: 1px solid var(--v4-borda); border-radius: 0; }
.orc-visual-4 .orc-itens.planilha tfoot td { border: 1px solid var(--v4-borda); border-top: 3px solid var(--v4-rosa); }


/* 22/10 (pedido do usuário: "nas Seções do pedido de compra, mais nítido, bordas um pouco mais escuras"): os blocos, os grupos e as tabelas
   com as bordas mais escuras */
.compra-pagina .compra-secao { border-color: var(--borda-nitida); border-left-color: var(--acento); }
.compra-pagina .compra-grupo { border-color: var(--borda-nitida); }
.compra-pagina .compra-grupo h4 { border-bottom-color: var(--borda-nitida); }
.compra-pagina .compra-itens th, .compra-pagina .compra-itens td { border-color: var(--borda-nitida); }
.compra-pagina .campo input, .compra-pagina .campo select, .compra-pagina .campo textarea { border-color: var(--borda-nitida); }
.compra-pagina .compra-status { border-color: var(--borda-nitida); }

/* 22/10 (pedido do usuário: "as Seções ficaram muito boas; aplique nos outros lugares"): o mesmo visual nítido em todas as seções que abrem e
   fecham com a faixa azul (a edição do produto na Tabela de preços, os Embarques e o pedido de compra) — as bordas, os campos e as tabelas
   dentro delas mais escuros */
:root { --borda-nitida: color-mix(in srgb, var(--tinta2) 42%, var(--borda)); }
.prod-secao { border-color: var(--borda-nitida); border-left-color: var(--acento); }
.prod-secao .campo input, .prod-secao .campo select, .prod-secao .campo textarea { border-color: var(--borda-nitida); }
.prod-secao th, .prod-secao td { border-color: var(--borda-nitida); }

.compra-bling-reune { display: block; flex-basis: 100%; color: var(--tinta2); font-weight: 600; }  /* 23/10: o pedido 1 leva os itens do container */

/* 23/10 (pedido do usuário: "uma paleta derivada do Oceano, com a tabela dos Itens e os textos mais nítidos"): com a paleta "Oceano nítido",
   a tabela dos Itens da proposta com as linhas e o cabeçalho mais escuros e o texto das células na cor escura (a paleta põe --v4-borda e --v4-tinta) */
.orc-visual-4 .orc-itens.planilha td { color: var(--v4-tinta); }
.orc-visual-4 .orc-itens.planilha thead th { color: var(--v4-ciano-tx); font-weight: 800; }

/* 23/10 (pedido do usuário): o Passo a passo / Passo a passo 2 na faixa do topo, à direita do Vendedor */
.cabeca.orc-cabeca .orc-cab-modo { margin: 0 0 0 auto; }  /* 23/10: à direita, ao lado esquerdo das Cores */
.cabeca.orc-cabeca .orc-cab-modo + .orc-paleta { margin-left: 0; }
@media (max-width: 860px) { .cabeca.orc-cabeca .orc-cab-modo { margin-left: 0; } }

/* 23/10 (pedido do usuário: "nos Relatos, deixe nítido"): os relatos (a página e o quadro das Aprovações) com as bordas mais escuras, o texto
   escuro e os nomes e as datas menos apagados */
.relato-item { border-color: var(--borda-nitida); border-left: 4px solid var(--acento); box-shadow: 0 1px 2px rgba(18, 57, 85, .06); }
.relato-item .relato-texto { color: var(--tinta); font-size: 14.5px; }
.relato-item .muda, .relato-ctx summary { color: var(--tinta2); }
.relato-item .relato-linha > b { color: var(--tinta); }
.relato-mini, .relato-previa img { border-color: var(--borda-nitida); }
.relato-resposta { color: var(--tinta); }
.dialogo-relato .campo input, .dialogo-relato .campo select, .dialogo-relato .campo textarea { border-color: var(--borda-nitida); }

.prod-acoes { display: inline-flex; gap: 6px; white-space: nowrap; }  /* 23/10: o Editar e o Duplicar na lista dos produtos */
/* 23/10 (pedido do usuário, Tabela de preços › Produtos: "sem barra de rolagem na largura e cada grupo de produtos mais em destaque"): a
   tabela cabe na largura (títulos em duas linhas, células mais justas, o Editar e o Duplicar um embaixo do outro); cada categoria com a faixa
   azul-marinho em cima e a borda em volta (no celular, a tabela ainda rola dentro dela) */
@media (min-width: 861px) {
  .cartao-produtos .tabela-wrap { overflow-x: visible; }
  .cartao-produtos table { table-layout: auto; }
  .cartao-produtos th { white-space: normal; padding: 8px 8px; line-height: 1.25; }
  .cartao-produtos td { padding: 6px 8px; }
  .cartao-produtos td:nth-child(3) { white-space: normal; min-width: 220px; }
  .cartao-produtos .prod-acoes { gap: 4px; }
  .cartao-produtos .prod-acoes .btn, .cartao-produtos td .btn.pequeno { padding: 3px 9px; }
}
.cartao-produtos tbody.grupo-bloco > tr.grupo-sep > td { background: var(--marinho) !important; color: #FFFFFF; font-size: 13.5px; letter-spacing: .06em; padding: 10px 14px;
  border-radius: 12px 12px 0 0; border: 0; }
.cartao-produtos tbody.grupo-bloco > tr.grupo-sep small { color: rgba(255, 255, 255, .78); }
.cartao-produtos tbody.grupo-bloco > tr:not(.grupo-sep):not(.grupo-fim) > td { border-top-color: var(--borda-nitida); }
.cartao-produtos tbody.grupo-bloco > tr:not(.grupo-sep):not(.grupo-fim) > td:first-child { border-left: 2px solid var(--marinho); }
.cartao-produtos tbody.grupo-bloco > tr:not(.grupo-sep):not(.grupo-fim) > td:last-child { border-right: 2px solid var(--marinho); }
.cartao-produtos tbody.grupo-bloco > tr.grupo-fim > td { height: 22px; border-top: 2px solid var(--marinho); }
.cartao-produtos tbody.grupo-bloco > tr:not(.grupo-sep):not(.grupo-fim):nth-child(odd) > td { background: color-mix(in srgb, var(--marinho) 4%, var(--sup)); }
:root[data-theme="dark"] .cartao-produtos tbody.grupo-bloco > tr.grupo-sep > td { background: #1E4A6E !important; }
@media (min-width: 861px) and (max-width: 1240px) { .cartao-produtos .prod-acoes { flex-direction: column; } .cartao-produtos td:nth-child(3) { min-width: 180px; } }  /* 23/10: tela menor: o Editar e o Duplicar um embaixo do outro */
@media (max-width: 1080px) { .cartao-produtos .tabela-wrap { overflow-x: auto; } }  /* 23/10: tela bem estreita: a tabela rola dentro dela (a página não) */

.orc-pp-totais { display: grid; line-height: 1.1; }  /* 23/10: o total e, embaixo, pequeno, o do primeiro item */
.orc-pp-item1 { font-size: 12px; font-weight: 700; color: var(--tinta2); }

/* 23/10 (pedido do usuário, Orçamentos: "as abas mais evidentes"; depois: "aplique nas outras páginas"): em todas as barras de abas
   (.submenu, também a do grupo do menu), as abas maiores, com a borda, e a aberta em azul-marinho com o texto branco */
.submenu > .segmentos { background: var(--sup); border: 1px solid var(--borda-nitida); border-radius: 14px; padding: 4px; gap: 4px; box-shadow: var(--sombra); }
.submenu > .segmentos button { font-size: 14.5px; font-weight: 700; padding: 9px 16px; border-radius: 10px; color: var(--tinta); }
.submenu > .segmentos button:hover:not([aria-pressed="true"]) { background: color-mix(in srgb, var(--marinho) 8%, var(--sup)); }
.submenu > .segmentos button[aria-pressed="true"] { background: var(--marinho); color: #FFFFFF; box-shadow: 0 4px 12px color-mix(in srgb, var(--marinho) 35%, transparent); }
:root[data-theme="dark"] .submenu > .segmentos button[aria-pressed="true"] { background: #1E4A6E; }
/* 23/10 (pedido do usuário, Orçamentos › Preços e estoque: "os grupos bem destacados, como na Tabela de preços; e veja um desenho para o
   topo"): cada categoria num bloco com a faixa azul-marinho no título e a borda em volta; o topo (o pagamento e os filtros) numa barra com
   os campos maiores e as opções "Só com estoque" e "A caminho" como botões que ficam azul-marinho quando marcados */
/* 23/10 (pedido do usuário: "não precisa mostrar cada categoria; o bloco azul-marinho direto em cada família"): a categoria com famílias
   some da lista (os atalhos do topo continuam levando a ela); cada família num bloco com a borda azul-marinho e o título numa faixa
   azul-marinho com o texto branco. A categoria sem famílias (as controladoras, em blocos pequenos) fica com o mesmo bloco */
.cartao-catalogo .cat-categoria:has(.cat-bloco) > h3 { display: none; }
.cartao-catalogo .cat-categoria:has(.cat-bloco) { margin-top: 0; }
.cartao-catalogo .cat-bloco { border: 2px solid var(--marinho); border-radius: 14px; }
.cartao-catalogo .cat-bloco-cab { background: var(--marinho); color: #FFFFFF; border-bottom: 0; font-size: 13.5px; padding: 10px 16px; }
.cartao-catalogo .cat-bloco-cab small { color: rgba(255, 255, 255, .78); }
.cartao-catalogo .cat-categoria:not(:has(.cat-bloco)) { border: 2px solid var(--marinho); border-radius: 14px; overflow: hidden; background: var(--sup); padding-bottom: 12px; margin-bottom: 14px; }
.cartao-catalogo .cat-categoria:not(:has(.cat-bloco)) > h3 { margin: 0 0 12px; padding: 10px 16px; background: var(--marinho); color: #FFFFFF; font-size: 14px; }
.cartao-catalogo .cat-categoria:not(:has(.cat-bloco)) > h3 small { color: rgba(255, 255, 255, .78); }
.cartao-catalogo .cat-categoria:not(:has(.cat-bloco)) > h3 svg { color: #FFFFFF; }
.cartao-catalogo .cat-categoria:not(:has(.cat-bloco)) > :not(h3) { margin-left: 12px; margin-right: 12px; }
:root[data-theme="dark"] .cartao-catalogo .cat-bloco, :root[data-theme="dark"] .cartao-catalogo .cat-categoria:not(:has(.cat-bloco)) { border-color: #2B5C85; }
:root[data-theme="dark"] .cartao-catalogo .cat-bloco-cab, :root[data-theme="dark"] .cartao-catalogo .cat-categoria:not(:has(.cat-bloco)) > h3 { background: #1E4A6E; }
.cartao-catalogo .catalogo-pag { background: color-mix(in srgb, var(--marinho) 7%, var(--sup)); border-bottom: 1px solid var(--borda-nitida); padding: 12px 16px; }
.cartao-catalogo .catalogo-pag label { color: var(--marinho); font-weight: 800; }
:root[data-theme="dark"] .cartao-catalogo .catalogo-pag label { color: var(--tinta); }
.cartao-catalogo .catalogo-pag select, .cartao-catalogo .catalogo-pag input[type=number], .cartao-catalogo .catalogo-filtros select, .cartao-catalogo .catalogo-filtros .tabela-busca {
  min-height: 40px; border: 1px solid var(--borda-nitida); border-radius: 10px; background: var(--sup); color: var(--tinta); }
.cartao-catalogo .catalogo-filtros { gap: 10px 12px; border-bottom-color: var(--borda-nitida); }
.cartao-catalogo .catalogo-filtros .tabela-busca { max-width: 280px; }  /* 25/10 (pedido do usuário): a busca e as categorias um pouco menores */
.cartao-catalogo .catalogo-filtros select { max-width: 210px; }
.cartao-catalogo .cat-so-estoque { border: 1px solid var(--borda-nitida); border-radius: 999px; padding: 7px 14px; background: var(--sup); font-weight: 700; cursor: pointer; }
.cartao-catalogo .cat-so-estoque:has(input:checked) { background: var(--marinho); border-color: var(--marinho); color: #FFFFFF; }
.cartao-catalogo .cat-so-estoque input { accent-color: var(--verde); }
.cartao-catalogo .cat-chegando { border-color: var(--borda-nitida); }

/* 23/10 (pedido do usuário): no topo de Preços e estoque, as condições numa linha só */
.catalogo-cond { flex-wrap: wrap; gap: 8px 16px; }
.catalogo-cond label { white-space: nowrap; }
.catalogo-cond input[type=number] { width: 72px; }
.catalogo-cond .segmentos.mini button { padding: 4px 8px; font-size: 12.5px; }
.cartao-catalogo .catalogo-cond { flex-wrap: nowrap; gap: 6px 12px; padding: 10px 14px; overflow-x: auto; scrollbar-width: none; }
.cartao-catalogo .catalogo-cond label { gap: 6px; font-size: 13px; }
.cartao-catalogo .catalogo-cond input[type=number] { width: 58px; min-height: 36px; padding: 5px 8px; }
.cartao-catalogo .catalogo-cond select { min-height: 36px; padding: 5px 8px; }
@media (max-width: 860px) { .cartao-catalogo .catalogo-cond { flex-wrap: wrap; } }

/* 23/10: o "Custo no Bling" do item (o custo médio) */
.ci-custo-bling { margin-left: 6px; }
.dialogo-custo-medio .cm-conta { font-size: 15px; margin: 8px 0 2px; }
.dialogo-custo-medio .cm-conta b { font-size: 17px; color: var(--marinho); }

/* 23/10 (pedido do usuário): o "Custo no Bling" com a marca do Bling, o "fazendo" (o círculo girando, o corpo da janela pulsando) e o "feito"
   (o ✓ grande que aparece crescendo; o botão do item fica verde com o valor) */
.ci-custo-bling { display: inline-flex; align-items: center; gap: 6px; }
.ci-custo-bling .marca-bling { color: #00A86B; }
.ci-custo-bling.ci-custo-feito { background: var(--ok-sup); border-color: var(--ok); color: var(--ok); font-weight: 800; }
.dialogo-custo-medio h2 { display: flex; align-items: center; gap: 8px; }
.dialogo-custo-medio h2 .marca-bling { color: #00A86B; }
.dialogo-custo-medio .cm-enviando { animation: piscar 1.2s ease-in-out infinite; pointer-events: none; }
.cm-feito { display: grid; justify-items: center; gap: 6px; padding: 18px 8px 8px; text-align: center; }
.cm-feito-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #FFFFFF; font-size: 34px; font-weight: 900;
  animation: cm-aparece .45s cubic-bezier(.2, 1.4, .4, 1) both; box-shadow: 0 8px 22px color-mix(in srgb, var(--ok) 40%, transparent); }
.cm-feito b { font-size: 17px; }
.cm-feito p { margin: 0; }
@keyframes cm-aparece { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cm-feito-ic, .dialogo-custo-medio .cm-enviando { animation: none; } }
.cm-erro { display: flex; gap: 12px; align-items: flex-start; margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--perigo-sup); color: var(--perigo);
  animation: cm-tremer .4s ease-in-out; }
.cm-erro-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--perigo); color: #FFFFFF; font-weight: 900; font-size: 18px; }
.cm-erro p { margin: 2px 0; color: var(--tinta); }
@keyframes cm-tremer { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .cm-erro { animation: none; } }

/* 23/10 (pedido do usuário: "os vendedores sempre incluam a URL do Kommo"): sem o lead, o campo vermelho e o aviso; com ele, verde e o nº */
.campo-lead-c .campo-lead-situ { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; }
.campo-lead-c.lead-falta input { border-color: var(--perigo) !important; background: color-mix(in srgb, var(--perigo) 6%, var(--sup)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--perigo) 14%, transparent); }
.campo-lead-c.lead-falta .campo-lead-situ, .campo-lead-c.lead-falta label { color: var(--perigo) !important; }
.campo-lead-c.lead-ok input { border-color: var(--ok) !important; background: color-mix(in srgb, var(--ok) 6%, var(--sup)) !important; }
.campo-lead-c.lead-ok .campo-lead-situ, .campo-lead-c.lead-ok label { color: var(--ok) !important; }

/* 23/10 (pedido do usuário: "um efeito satisfatório ao inserir"; depois: "não consigo ver o brilho"): a URL certa → por 1,6 s o campo fica
   verde-claro com o anel verde forte e cresce um pouco (o pulso); o "✓ Lead nº …" vira um selo verde que aparece crescendo. Com as animações
   desligadas no Windows, fica o destaque verde fixo pelo mesmo tempo */
.campo-lead-c.lead-pop input { background: #D7FBE6 !important; border-color: #00A651 !important; box-shadow: 0 0 0 5px rgba(0, 199, 86, .45) !important; }
.campo-lead-c.lead-pop .campo-lead-situ { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #00A651; color: #FFFFFF !important; }
@media (prefers-reduced-motion: no-preference) {
  .campo-lead-c.lead-pop input { animation: lead-brilho 2.4s ease-in-out; }  /* 23/10: mais devagar (pedido do usuário) */
  .campo-lead-c.lead-pop .campo-lead-situ { animation: lead-ok .9s cubic-bezier(.2, 1.5, .4, 1); }
  .campo-lead-c.lead-pop .campo-lead-situ .marca-kommo { animation: lead-gira 1.2s ease-in-out; }
}
@keyframes lead-brilho { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 199, 86, .8); } 20% { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(0, 199, 86, .45); }
  45% { transform: scale(1); box-shadow: 0 0 0 4px rgba(0, 199, 86, .5); } 65% { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(0, 199, 86, .35); } 100% { transform: scale(1); box-shadow: 0 0 0 5px rgba(0, 199, 86, .45); } }
@keyframes lead-gira { 0% { transform: rotate(-30deg) scale(.5); } 60% { transform: rotate(10deg) scale(1.25); } 100% { transform: none; } }
@keyframes lead-ok { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* 23/10 (pedido do usuário): fora da tabela Representante, a "Comissão represent." pálida (dá para ver que não precisa preencher) */
.campo:has(> input[data-campo="comissao"]:disabled) { opacity: .42; filter: grayscale(1); }
.campo:has(> input[data-campo="comissao"]:disabled) input { background: var(--sup3) !important; border-style: dashed !important; cursor: not-allowed; }

/* 23/10: a marca do Kommo no nome do campo e no selo do lead */
.campo-lead-c label { display: inline-flex; align-items: center; gap: 5px; }
.campo-lead-c .marca-kommo { color: #5B5FC7; vertical-align: -3px; }
.campo-lead-c.lead-pop .campo-lead-situ .marca-kommo { color: #FFFFFF; }
.campo-lead-c.lead-pop-segue input { animation: none !important; }  /* o campo redesenhado: o destaque fixo (sem repetir o pulso) */
/* 23/10 (pedido do usuário): o total do primeiro item com ~70% do tamanho do total de cima (a cor não muda) */
.orc-pp-totais { gap: 2px; }
.orc-pp-item1 { font-size: 17px; line-height: 1.15; }
.orc-visual-4 .orc-pp-item1 { font-size: 21px; }
@media (max-width: 860px) { .orc-pp-item1, .orc-visual-4 .orc-pp-item1 { font-size: 16px; } }
.orc-visual-3 .orc-pp-item1 { font-size: 21px; }  /* o total do Layout 2 é 30px */

/* 23/10 (pedido do usuário: "essa exibição final pode ser melhorada?"): o resumo do orçamento num quadro — as linhas sem a listra, os nomes
   em cinza e os valores escuros; o Total da proposta em destaque (a faixa azul-marinho com o valor grande); as NFs mais discretas; o
   pagamento com a opção 1 e a opção 2 em caixinhas; a empresa sugerida e o lucro no fim */
.orc-totais { border: 1px solid var(--borda-nitida); border-radius: 16px; overflow: hidden; background: var(--sup); }
.orc-totais > li, .orc-totais > li:nth-child(even) { background: transparent; padding: 11px 18px; border-top: 1px solid var(--linha); align-items: center; font-variant-numeric: tabular-nums; }
.orc-totais > li:first-child { border-top: 0; }
.orc-totais > li > span:first-child { color: var(--tinta2); font-weight: 600; }
.orc-totais > li > span:last-child, .orc-totais > li > b { color: var(--tinta); font-weight: 700; text-align: right; }
/* 23/10 (pedido do usuário: "a faixa azul-escuro não gostei; siga o modelo do Layout"): o total sem a faixa — o fundo clarinho da cor
   principal, a linha grossa embaixo e o valor grande na cor do total da barra de baixo; a tabela embaixo do nome */
.orc-totais > li.orc-tot-total { background: color-mix(in srgb, var(--acento) 7%, var(--sup)); border-top: 0; border-bottom: 3px solid var(--acento); padding: 16px 18px; }
.orc-totais > li.orc-tot-total > span:first-child { color: var(--acento); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; font-weight: 800; }
.orc-totais > li.orc-tot-total > b { color: var(--acento); font: 900 30px var(--fonte-tit); font-variant-numeric: tabular-nums; white-space: nowrap; }
.orc-totais .orc-tot-tab { display: block; margin-top: 3px; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--tinta2); }
.orc-totais > li.orc-tot-total + li { border-top: 0; }
.orc-visual-4 .orc-totais { border: 2px solid var(--v4-borda); border-radius: 18px; background: var(--v4-bloco); }
.orc-visual-4 .orc-totais > li.orc-tot-total { background: color-mix(in srgb, var(--v4-rosa) 7%, var(--v4-bloco)); border-bottom-color: var(--v4-rosa); }
.orc-visual-4 .orc-totais > li.orc-tot-total > span:first-child, .orc-visual-4 .orc-totais > li.orc-tot-total > b { color: var(--v4-rosa-tx); }
.orc-visual-4 .orc-totais .orc-tot-op2 { background: color-mix(in srgb, var(--v4-rosa) 9%, var(--v4-bloco)); border-color: color-mix(in srgb, var(--v4-rosa) 40%, transparent); color: var(--v4-rosa-tx); }
.orc-totais > li.orc-nf-alternar { background: var(--sup2); padding: 8px 18px; }
.orc-totais > li.orc-tot-nf { padding: 7px 18px 7px 30px; font-size: 13.5px; background: color-mix(in srgb, var(--sup2) 60%, transparent); }
.orc-totais > li.orc-tot-nf > span:first-child { font-weight: 500; }
.orc-totais > li.orc-tot-pag { align-items: flex-start; }
.orc-totais > li.orc-tot-pag > span:last-child { display: grid; gap: 6px; justify-items: end; }
.orc-totais .orc-tot-op { display: inline-block; padding: 6px 12px; border-radius: 10px; background: var(--sup2); border: 1px solid var(--linha); font-weight: 600; text-align: right; }
.orc-totais .orc-tot-op2 { background: var(--acento-sup); border-color: color-mix(in srgb, var(--acento) 35%, transparent); color: var(--acento); font-weight: 800; }
.orc-totais > li.orc-tot-miudo { font-size: 13px; }
.orc-totais > li.orc-tot-miudo > span:last-child { font-weight: 600; color: var(--tinta2); }
.orc-totais > li.orc-lucro-det { background: color-mix(in srgb, var(--ok) 6%, var(--sup)); }
@media (max-width: 860px) { .orc-totais > li { flex-wrap: wrap; } .orc-totais > li.orc-tot-pag > span:last-child { justify-items: start; } .orc-totais .orc-tot-op { text-align: left; } }

/* 23/10 (pedido do usuário: "as 5 barras têm três cores; use só a cor principal, a mais escura, e a bem clara"): no Layout 1, os passos até
   o atual na cor principal da paleta e os outros clarinhos (o trilho); o passo já preenchido mais adiante também fica clarinho */
.orc-visual-2.orc-visual-4 .orc-passos li.antes .orc-num::after, .orc-visual-2.orc-visual-4 .orc-passos li.atual .orc-num::after { background: var(--v4-rosa); }
.orc-visual-2.orc-visual-4 .orc-passos li.feito:not(.antes):not(.atual) .orc-num::after { transform: scaleX(0); opacity: 0; }
.orc-visual-2.orc-visual-4 .orc-passos li button:hover .orc-num { background: color-mix(in srgb, var(--v4-rosa) 22%, var(--trilho)); }
/* 23/10: no Resumo, a barra de baixo some (ou fica só o Avançar, no pedido) */
.orc-pp-rodape[hidden], .orc-pp-resumo[hidden] { display: none !important; }

/* 23/10 (pedido do usuário): Preços e estoque — os atalhos das categorias no mesmo bloco da busca (o bloco inteiro fica preso no topo ao
   rolar, no computador; no celular, rola junto) */
.cartao-catalogo .catalogo-busca-bloco { background: var(--sup); border-bottom: 1px solid var(--borda-nitida); }
.cartao-catalogo .catalogo-busca-bloco .catalogo-filtros { border-bottom: 0; padding-bottom: 8px; }
.cartao-catalogo .catalogo-busca-bloco .cat-atalhos { position: static; border-bottom: 0; padding: 2px 16px 12px; background: transparent; }
@media (min-width: 861px) { .cartao-catalogo .catalogo-busca-bloco.com-atalhos { position: sticky; top: var(--topo-alt, 96px); z-index: 3; box-shadow: 0 6px 14px rgba(18, 57, 85, .06); } }
/* 23/10 (pedido do usuário: "o bloco da Tabela de preço e dos outros campos mais em destaque"; depois: "gostei do desenho, mas quero que
   seja no bloco em que ele está"): o próprio bloco com a borda azul e, na parte de cima (as condições, a busca e os atalhos), o fundo
   azul-clarinho de ponta a ponta, com os campos brancos; a linha azul separa a lista */
.cartao-catalogo { border: 2px solid var(--azul); }
.cartao-catalogo .catalogo-pag.catalogo-cond { margin: 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--azul) 28%, transparent); padding: 14px 16px;
  border-radius: calc(var(--raio) - 2px) calc(var(--raio) - 2px) 0 0; background: color-mix(in srgb, var(--azul) 9%, var(--sup)); box-shadow: none; }
.cartao-catalogo .catalogo-busca-bloco { background: color-mix(in srgb, var(--azul) 9%, var(--sup)); border-bottom: 2px solid var(--azul); }
.cartao-catalogo .catalogo-filtros .tabela-busca, .cartao-catalogo .catalogo-filtros select { background: var(--sup); border: 2px solid color-mix(in srgb, var(--azul) 45%, var(--borda)); }
.cartao-catalogo .catalogo-busca-bloco .cat-atalhos button:not(.cat-topo) { background: var(--sup); }
.cartao-catalogo .catalogo-filtros .cat-pedir { margin-left: 0; border: 2px solid var(--azul); border-radius: 999px; padding: 6px 14px; background: var(--sup); color: var(--azul);
  font-weight: 800; text-decoration: none; }
.cartao-catalogo .catalogo-filtros .cat-pedir:hover, .cartao-catalogo .catalogo-filtros .cat-pedir:focus-visible { background: var(--azul); color: #FFFFFF; }
.cartao-catalogo .catalogo-cond label { font-size: 13.5px; color: var(--marinho); }
.cartao-catalogo .catalogo-cond select, .cartao-catalogo .catalogo-cond input[type=number] { background: var(--sup); border: 2px solid color-mix(in srgb, var(--azul) 45%, var(--borda)); font-weight: 700; color: var(--tinta); }
.cartao-catalogo .catalogo-cond select:focus, .cartao-catalogo .catalogo-cond input[type=number]:focus { border-color: var(--azul); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 22%, transparent); }
:root[data-theme="dark"] .cartao-catalogo .catalogo-cond label { color: var(--tinta); }
@media (max-width: 860px) {
  .cartao-catalogo .catalogo-cond label { white-space: normal; flex-wrap: wrap; max-width: 100%; } }  /* no celular, o Desconto/Acréscimo não passa da borda */

/* 23/10 (pedido do usuário: "o DIFAL ficou distante de 'não se aplica'; os outros campos da mesma forma"): no resumo, o nome e o valor lado
   a lado — duas colunas (o nome numa coluna de até 320px e o valor logo depois, alinhado à esquerda); no celular, um embaixo do outro */
.orc-totais > li:not(.orc-lucro-det):not(.orc-nf-alternar), .orc-totais > li.orc-lucro-det summary {
  display: grid; grid-template-columns: minmax(150px, 320px) minmax(0, 1fr); gap: 4px 28px; justify-content: stretch; align-items: center; }
.orc-totais > li.orc-tot-nf:not(.orc-lucro-det):not(.orc-nf-alternar) { grid-template-columns: minmax(138px, 308px) minmax(0, 1fr); }  /* recuada 12px: o valor fica na mesma coluna */
.orc-totais > li > span:last-child, .orc-totais > li > b, .orc-totais > li.orc-lucro-det summary > b { text-align: left; }
.orc-totais > li.orc-tot-pag > span:last-child { justify-items: start; }
.orc-totais .orc-tot-op { text-align: left; }
@media (max-width: 600px) { .orc-totais > li:not(.orc-lucro-det):not(.orc-nf-alternar), .orc-totais > li.orc-lucro-det summary, .orc-totais > li.orc-tot-nf:not(.orc-lucro-det):not(.orc-nf-alternar) { grid-template-columns: minmax(0, 1fr); } }

/* 23/10 (pedido do usuário: "o À vista no mesmo desenho da Opção 2; os outros textos desse bloco no mesmo padrão; o Total da proposta não
   muda"): no resumo, todos os valores em caixinhas azul-clarinho com o texto azul em negrito (o desenho da Opção 2), e todos os nomes no mesmo
   tamanho (as NFs e a empresa sugerida deixam de ser menores) */
.orc-totais { --chip-fundo: var(--acento-sup); --chip-borda: color-mix(in srgb, var(--acento) 35%, transparent); --chip-tx: var(--acento); }
.orc-visual-4 .orc-totais { --chip-fundo: color-mix(in srgb, var(--v4-rosa) 9%, var(--v4-bloco)); --chip-borda: color-mix(in srgb, var(--v4-rosa) 40%, transparent); --chip-tx: var(--v4-rosa-tx); }
.orc-totais > li:not(.orc-tot-total):not(.orc-tot-pag):not(.orc-nf-alternar):not(.orc-lucro-det):not(.orc-custos-tit):not(.orc-custo-alerta):not(.orc-custo-ok) > :last-child,
.orc-totais .orc-tot-op, .orc-totais .orc-tot-op2, .orc-totais > li.orc-lucro-det summary > b {
  justify-self: start; display: inline-block; padding: 6px 12px; border-radius: 10px; background: var(--chip-fundo); border: 1px solid var(--chip-borda);
  color: var(--chip-tx); font-size: 16px; font-weight: 800; text-align: left; text-decoration: none; }
.orc-totais > li.orc-tot-nf:not(.orc-lucro-det):not(.orc-nf-alternar) { padding: 11px 18px; font-size: inherit; background: transparent; grid-template-columns: minmax(150px, 320px) minmax(0, 1fr); }
.orc-totais > li.orc-tot-nf > span:first-child, .orc-totais > li.orc-tot-miudo > span:first-child { font-weight: 600; }
.orc-totais > li.orc-tot-miudo { font-size: inherit; }
@media (max-width: 600px) { .orc-totais > li.orc-tot-nf:not(.orc-lucro-det):not(.orc-nf-alternar) { grid-template-columns: minmax(0, 1fr); } }

/* 23/10 (pedido do usuário: "na barra dos passos, a cor #2563EB em degradê"): no Layout 1, o preenchido vai do tom escuro da cor principal
   até ela, num degradê só que corre pela barra inteira (cada passo mostra o seu pedaço) */
.orc-visual-2.orc-visual-4 .orc-passos li.antes .orc-num::after, .orc-visual-2.orc-visual-4 .orc-passos li.atual .orc-num::after {
  background: linear-gradient(90deg, var(--v4-rosa-tx), var(--v4-rosa) 70%, color-mix(in srgb, var(--v4-rosa) 75%, #FFFFFF));
  background-size: calc(var(--n, 5) * 100%) 100%; background-position: calc(var(--i, 0) / max(1, var(--n, 5) - 1) * 100%) 0; }

/* 23/10 (pedido do usuário: "no 'case do site', a cor azul por baixo do texto em degradê com as cores da Mundo de LED"): o fundo do case sem
   foto vai do azul-marinho ao verde da marca (marinho, azul, ciano, verde) */
.video-thumb.case, .video-card > .video-thumb.case { background: linear-gradient(135deg, var(--marinho) 0%, var(--azul) 40%, var(--ciano) 70%, var(--verde) 100%); }

/* 23/10 (pedido do usuário: "remova a moldura grande, em volta de tudo; mantenha a do topo, que envolve a Tabela de preço e os filtros"):
   a lista dos grupos sai do cartão (sem a borda e o fundo); a moldura azul fica só em volta do topo (as condições, a busca e os atalhos) */
.cartao-catalogo { border: 0; background: transparent; box-shadow: none; }
.cartao-catalogo .catalogo-pag.catalogo-cond { border: 2px solid var(--azul); border-bottom: 1px solid color-mix(in srgb, var(--azul) 28%, transparent); border-radius: var(--raio) var(--raio) 0 0; }
.cartao-catalogo .catalogo-busca-bloco { border: 2px solid var(--azul); border-top: 0; border-radius: 0 0 var(--raio) var(--raio); }
.cartao-catalogo .cat-lista { padding: 4px 0 10px; }

/* 23/10 (pedido do usuário: "ao rolar, só a linha dos atalhos fica congelada"; "arrastar para o lado como a barra de rolar"): a busca rola
   junto com a página; a linha dos atalhos (ainda dentro da moldura azul do topo) fica presa; com o mouse, a mãozinha arrasta a linha */
@media (min-width: 861px) { .cartao-catalogo .catalogo-busca-bloco.com-atalhos { position: static; box-shadow: none; } }
.cartao-catalogo .catalogo-busca-bloco.com-atalhos { border-bottom: 0; border-radius: 0; }
.cartao-catalogo .catalogo-busca-bloco.com-atalhos .catalogo-filtros { padding-bottom: 4px; }
.cartao-catalogo > .cat-atalhos { position: sticky; top: var(--topo-alt, 96px); z-index: 3; padding: 8px 16px 12px; background: color-mix(in srgb, var(--azul) 9%, var(--sup));
  border: 2px solid var(--azul); border-top: 0; border-radius: 0 0 var(--raio) var(--raio); }
.cartao-catalogo > .cat-atalhos button:not(.cat-topo) { background: var(--sup); }
.cat-atalhos { cursor: grab; user-select: none; -webkit-user-select: none; }
.cat-atalhos.arrastando, .cat-atalhos.arrastando button { cursor: grabbing; }

/* 23/10 (pedido do usuário: "o desenho e o formato de Preços e estoque também em Estoque do sistema e Estoque do Bling"): a moldura azul em
   volta do topo (a visão, a busca e a linha dos grupos, presa ao rolar), sem o cartão em volta da lista, e a lista em blocos com a faixa
   azul-marinho (sem a contagem) */
.est-catalogo .est-topo { flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.est-catalogo .est-topo .est-visao { margin: 0; }
.est-catalogo .est-topo .est-lido { font-size: 12.5px; }
.cat-atalhos button[aria-pressed="true"] { background: var(--marinho) !important; border-color: var(--marinho); color: #FFFFFF; }
.cat-atalhos button[aria-pressed="true"] small { color: rgba(255, 255, 255, .8); }
.est-catalogo .est-nota { margin: 10px 2px 0; }
.est-grupos { margin-top: 14px; }
.est-grupos table { border-collapse: separate; border-spacing: 0; }
.est-grupos thead th { background: transparent; border-bottom: 0; }
.est-grupos tbody.grupo-bloco > tr.grupo-sep > td { background: var(--marinho) !important; color: #FFFFFF; font-size: 13.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 14px; border-radius: 12px 12px 0 0; border: 0; }
.est-grupos tbody.grupo-bloco > tr.grupo-sep small { display: none; }
.est-grupos tbody.grupo-bloco > tr:not(.grupo-sep):not(.grupo-fim) > td { background: var(--sup); border-top-color: var(--borda-nitida); }
.est-grupos tbody.grupo-bloco > tr:not(.grupo-sep):not(.grupo-fim):nth-child(odd) > td { background: color-mix(in srgb, var(--marinho) 4%, var(--sup)); }
.est-grupos tbody.grupo-bloco > tr:not(.grupo-sep):not(.grupo-fim) > td:first-child { border-left: 2px solid var(--marinho); }
.est-grupos tbody.grupo-bloco > tr:not(.grupo-sep):not(.grupo-fim) > td:last-child { border-right: 2px solid var(--marinho); }
.est-grupos tbody.grupo-bloco > tr.grupo-fim > td { height: 18px; padding: 0; border: 0; border-top: 2px solid var(--marinho); background: transparent !important; }
.est-grupos tbody.grupo-bloco > tr:hover > td { background: var(--zebra-foco); }
:root[data-theme="dark"] .est-grupos tbody.grupo-bloco > tr.grupo-sep > td { background: #1E4A6E !important; }
@media (max-width: 600px) {
  .est-grupos tbody.grupo-bloco > tr.grupo-sep { padding: 0; border: 0; }
  .est-grupos tbody.grupo-bloco > tr.grupo-sep > td { display: block; }
  .est-grupos tbody.grupo-bloco > tr:not(.grupo-sep):not(.grupo-fim) { background: var(--sup); border-left: 2px solid var(--marinho); border-right: 2px solid var(--marinho); }
  .est-grupos tbody.grupo-bloco > tr:not(.grupo-sep):not(.grupo-fim) > td:first-child, .est-grupos tbody.grupo-bloco > tr:not(.grupo-sep):not(.grupo-fim) > td:last-child { border-left: 0; border-right: 0; }
  .est-grupos tbody.grupo-bloco > tr.grupo-fim { padding: 0; border-top: 2px solid var(--marinho); height: 14px; }
  .est-grupos tbody.grupo-bloco > tr.grupo-fim > td { display: none; }
}
.est-catalogo .catalogo-filtros .segmentos { max-width: 100%; overflow-x: auto; scrollbar-width: none; }  /* no celular, os filtros rolam dentro da moldura */

/* 23/10 (pedido do usuário: "o menu do sistema com a opção de ocultar, para ganhar espaço"): recolhido, o topo vira uma faixa fina (clicar
   ou a tecla M volta) */
.topo-mini { display: none; }
.topo.topo-oculto > .topo-linha, .topo.topo-oculto > .abas { display: none; }
.topo.topo-oculto > .topo-mini { display: block; width: 100%; border: 0; background: transparent; color: #FFFFFF; font: inherit; font-size: 12.5px; font-weight: 700;
  letter-spacing: .02em; padding: 4px 16px; cursor: pointer; text-align: center; }
.topo.topo-oculto > .topo-mini small { font-weight: 600; opacity: .75; }
.topo.topo-oculto > .topo-mini:hover, .topo.topo-oculto > .topo-mini:focus-visible { background: rgba(255, 255, 255, .10); }

/* 23/10 (pedido do usuário: "os textos da coluna do resumo com a formatação normal"): os valores sem o negrito (o Total da proposta não muda) */
.orc-totais > li:not(.orc-tot-total):not(.orc-tot-pag):not(.orc-nf-alternar):not(.orc-lucro-det):not(.orc-custos-tit):not(.orc-custo-alerta):not(.orc-custo-ok) > :last-child,
.orc-totais .orc-tot-op, .orc-totais .orc-tot-op2, .orc-totais > li.orc-lucro-det summary > b { font-weight: 400; }
/* 23/10 (pedido do usuário: "os textos da segunda coluna ainda estão com bordas"): a formatação normal — o texto simples, sem a caixinha
   (sem borda, sem fundo) e na cor do texto; o Total da proposta não muda */
.orc-pagina .orc-totais > li:not(.orc-tot-total):not(.orc-tot-pag):not(.orc-nf-alternar):not(.orc-lucro-det):not(.orc-custos-tit):not(.orc-custo-alerta):not(.orc-custo-ok) > :last-child,
.orc-pagina .orc-totais .orc-tot-op, .orc-pagina .orc-totais .orc-tot-op2, .orc-pagina .orc-totais > li.orc-lucro-det summary > b {
  padding: 0; border: 0; border-radius: 0; background: none; color: var(--tinta); font-weight: 400; }
.orc-pagina .orc-totais > li.orc-tot-pag > span:last-child { gap: 4px; }

/* 23/10 (pedido do usuário): no orçamento, o ícone da lista ao lado do Código, o "Ver todos os produtos" no fim das sugestões e a janela
   com os produtos no desenho de Preços e estoque */
.orc-cod-linha { display: flex; gap: 6px; align-items: stretch; }
.orc-cod-linha > input { flex: 1; min-width: 0; }
.orc-cod-linha > .orc-cod-lista { flex: none; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; }
.orc-cod-linha > .orc-cod-lista svg { width: 20px; height: 20px; }
.sugestoes li.sug-todos { position: sticky; bottom: -4px; border-top: 1px solid var(--linha); margin-top: 4px; padding: 9px 10px; color: var(--azul); background: var(--sup); }  /* sempre à vista no fim da lista */
.sugestoes li.sug-todos b { display: inline-flex; align-items: center; gap: 6px; }
.sugestoes li.sug-todos svg { width: 16px; height: 16px; }
dialog.dlg-produtos { width: min(1100px, calc(100vw - 24px)); height: calc(100vh - 40px); max-height: calc(100vh - 40px); }
dialog.dlg-produtos[open] { display: flex; flex-direction: column; overflow: hidden; }
.dlg-prod-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; }
.dlg-prod-cab h2 { margin: 0; }
.dlg-prod-x { color: var(--tinta); background: var(--sup2); border: 1px solid var(--linha); }
.dlg-prod-topo { margin: 0 20px; border: 2px solid var(--azul); border-radius: var(--raio); background: color-mix(in srgb, var(--azul) 9%, var(--sup)); padding: 12px 14px 4px; display: grid; gap: 8px; }
.dlg-prod-topo .tabela-busca { max-width: 420px; background: var(--sup); border: 2px solid color-mix(in srgb, var(--azul) 45%, var(--borda)); }
.dlg-prod-topo .cat-atalhos { position: static; padding: 2px 0 8px; background: transparent; border: 0; }
.dlg-prod-topo .cat-atalhos button { background: var(--sup); }
.dlg-prod-lista { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 20px 20px; }
.dlg-prod-lista > .dlg-prod-bloco + .dlg-prod-bloco { margin-top: 14px; }
.dlg-prod-bloco { border: 2px solid var(--marinho); border-radius: 14px; overflow: hidden; background: var(--sup); scroll-margin-top: 4px; }
.dlg-prod-bloco .cat-bloco-cab { display: flex; align-items: center; gap: 8px; background: var(--marinho); color: #FFFFFF; font-size: 13.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 10px 16px; }
.dlg-prod-bloco .cat-bloco-cab svg { width: 16px; height: 16px; }
.dlg-prod-bloco ul { list-style: none; margin: 0; padding: 0; }
.dlg-prod-bloco li + li { border-top: 1px solid var(--borda-nitida); }
.dlg-prod-bloco li:nth-child(even) { background: color-mix(in srgb, var(--marinho) 4%, var(--sup)); }
.dlg-prod-item { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 16px; border: 0; background: transparent;
  color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.dlg-prod-item:hover, .dlg-prod-item:focus-visible { background: var(--acento-sup); outline: none; }
.dlg-prod-nome { display: grid; gap: 2px; min-width: 0; }
.dlg-prod-nome small { color: var(--tinta2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlg-prod-preco { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
:root[data-theme="dark"] .dlg-prod-bloco .cat-bloco-cab { background: #1E4A6E; }
:root[data-theme="dark"] .dlg-prod-bloco { border-color: #2B5C85; }
@media (max-width: 600px) { .dlg-prod-topo { margin: 0 10px; } .dlg-prod-lista { padding: 10px; } .dlg-prod-item { gap: 10px; padding: 8px 10px; } }
.dlg-prod-topo { grid-template-columns: minmax(0, 1fr); }  /* a linha dos atalhos rola dentro da moldura (não alarga a janela) */
.dlg-prod-atalhos { min-width: 0; }
.dlg-prod-topo .tabela-busca { width: 100%; min-width: 0; box-sizing: border-box; }

/* 23/10 (pedido do usuário: "na barra dos passos tinha um brilho por baixo; coloque algo para ficar mais moderno"): no Layout 1, o brilho
   azul por baixo dos passos preenchidos (mais forte no passo atual); o reflexo de luz que corria pela barra saiu (pedido do usuário) */
.orc-visual-2.orc-visual-4 .orc-passos li .orc-num { transition: box-shadow .5s ease; }
.orc-visual-2.orc-visual-4 .orc-passos li.antes .orc-num { box-shadow: 0 6px 14px -5px color-mix(in srgb, var(--v4-rosa) 55%, transparent); }
.orc-visual-2.orc-visual-4 .orc-passos li.atual .orc-num { box-shadow: 0 7px 18px -4px color-mix(in srgb, var(--v4-rosa) 75%, transparent),
  0 0 10px color-mix(in srgb, var(--v4-rosa) 30%, transparent); }

/* 23/10 (pedido do usuário: "crie um novo a partir do Layout 1, para quem gosta de tema escuro"): o Layout 2 (escuro) — o mesmo Layout 1 com
   as cores do tema escuro do portal só na página do orçamento (o resto do portal continua como a pessoa escolheu); a página vira um painel
   escuro de cantos arredondados */
.orc-pagina.orc-escuro {
  color-scheme: dark;
  --fundo: #08131D; --sup: #0F1E2C; --sup2: #132536; --sup3: #172C40;
  --zebra: #172D42; --zebra-foco: #203B57;
  --tinta: #E9EFF5; --tinta2: #A9B8C7; --muda: #7F91A3;
  --linha: #1C3247; --borda: #24405A; --trilho: #1E3448; --borda-nitida: #2F5070;
  --acento: #3D9BE9; --acento-sup: #12304A; --link: #6CB4F0;
  --ok: #3DDC84; --ok-sup: #0F3324; --alerta: #F5A94A; --alerta-sup: #3A2810; --perigo: #FF7A6E; --perigo-sup: #3D1714;
  --info: #5CC3EC; --info-sup: #0F2E3D; --marinho: #1E4A6E;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  --v4-bloco: #0F1E2C; --v4-campo: #132536; --v4-borda: #2F5070; --v4-tinta: #E9EFF5; --v4-pontos: rgba(108, 180, 240, .06);
  background: var(--fundo); color: var(--tinta); border-radius: 22px; padding: 16px 18px 20px; margin-top: 4px;
  box-shadow: 0 18px 40px rgba(5, 15, 28, .35);
}
.orc-pagina.orc-escuro .cabeca, .orc-pagina.orc-escuro .orc-cabeca { background: var(--sup); color: var(--tinta); border-color: var(--borda); }
.orc-pagina.orc-escuro .cabeca h1, .orc-pagina.orc-escuro h2, .orc-pagina.orc-escuro h3 { color: var(--tinta); }
.orc-pagina.orc-escuro input, .orc-pagina.orc-escuro select, .orc-pagina.orc-escuro textarea { background: var(--sup2); color: var(--tinta); border-color: var(--borda); }
.orc-pagina.orc-escuro input::placeholder, .orc-pagina.orc-escuro textarea::placeholder { color: var(--muda); }
.orc-pagina.orc-escuro .btn:not(.primario):not(.btn-gravar):not(.btn-venda):not(.acao-perigo) { background: var(--sup2); color: var(--tinta); border-color: var(--borda); }
.orc-pagina.orc-escuro .segmentos { background: var(--sup2); }
.orc-pagina.orc-escuro .segmentos button { color: var(--tinta2); }
.orc-pagina.orc-escuro .segmentos button[aria-pressed="true"] { background: var(--sup3); color: var(--tinta); }
@media (max-width: 860px) { .orc-pagina.orc-escuro { padding: 10px 8px 14px; border-radius: 16px; } }

/* 23/10 (pedido do usuário): os comprovantes de pagamento — o bloco no Resumo do orçamento, a janela de conferir e a lista do Financeiro */
.orc-comprov { margin-top: 18px; border-top: 1px dashed var(--borda); padding-top: 14px; display: grid; gap: 10px; }
.orc-comprov-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.orc-comprov-cab h3 { margin: 0 0 2px; font-size: 16px; }
.orc-comprov-ler { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--tinta2); }
.orc-comprov-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.orc-comprov-item { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) auto; gap: 10px 16px; align-items: start; padding: 10px 14px;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--sup); }
.orc-comprov-valor { display: grid; gap: 2px; }
.orc-comprov-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.comprov-conf { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.comprov-conf-erro { color: var(--perigo); font-weight: 700; } .comprov-conf-alerta { color: var(--alerta); } .comprov-conf-ok { color: var(--ok); }
.chip.comprov-sit-aguardando { background: var(--info-sup); color: var(--info); } .chip.comprov-sit-conferido { background: var(--ok-sup); color: var(--ok); }
.chip.comprov-sit-recusado { background: var(--perigo-sup); color: var(--perigo); } .chip.comprov-sit-rascunho { background: var(--alerta-sup); color: var(--alerta); }
.comprov-chips { display: flex; flex-wrap: wrap; gap: 4px; } .comprov-chips .chip { white-space: normal; text-align: left; }
dialog.dlg-comprov { width: min(980px, calc(100vw - 24px)); }
.dlg-comprov-corpo { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.dlg-comprov-arq img { width: 100%; max-height: 62vh; object-fit: contain; border: 1px solid var(--borda); border-radius: 10px; background: var(--sup2); }
.dlg-comprov-campos { display: grid; gap: 10px; min-width: 0; }
.dlg-comprov-campos .formulario { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.fin-contas { display: grid; gap: 16px; } .fin-conta { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--linha); }
.fin-conta h3 { margin: 0; font-size: 15px; } .fin-conta textarea { width: 100%; box-sizing: border-box; font: inherit; }
@media (max-width: 760px) { .orc-comprov-item { grid-template-columns: minmax(0, 1fr); } .orc-comprov-acoes { justify-content: flex-start; } .dlg-comprov-corpo { grid-template-columns: minmax(0, 1fr); } }

/* 23/10 (pedido do usuário): os dois campos do terceiro (pago direto · cobrado pelo) lado a lado; o "Pedir inclusão" na linha do Técnico,
   à direita; a coluna Quantidade dos Itens da proposta com os números no centro */
.orc-terc-valores { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.orc-tec-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; width: 100%; }
.orc-tec-linha .orc-pedir-tec { margin-left: auto; }
.orc-itens.planilha table > thead > tr > th:nth-child(3), .orc-itens.planilha table > tbody > tr > td:nth-child(3) { text-align: center; }
.orc-itens.planilha table > tbody > tr > td:nth-child(3) .orc-qtd { display: inline-flex; justify-content: center; align-items: center; gap: 4px; }
.orc-itens.planilha table > tbody > tr > td:nth-child(3) input[type=number] { text-align: center; }

/* 23/10 (pedido do usuário): as contas da empresa em campos — uma linha por conta (banco, agência, conta, tipo, observação, tirar), colar
   os dados para o Claude separar e a chave PIX */
.fin-conta-linha { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(90px, .7fr) minmax(120px, 1fr) minmax(140px, 1fr) minmax(160px, 1.4fr) auto; gap: 8px 10px; align-items: end; }
.fin-conta-linha .campo { margin: 0; } .fin-conta-tirar { margin-bottom: 4px; }
.fin-conta-acoes { display: flex; gap: 8px; }
.fin-conta-colar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.fin-conta-colar textarea { width: 100%; box-sizing: border-box; font: inherit; }
.fin-conta-pix { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 360px); gap: 8px 10px; }
.fin-conta-antigo { background: var(--sup2); border: 1px dashed var(--borda); border-radius: 10px; padding: 8px 12px; display: grid; gap: 6px; justify-items: start; }
.fin-conta-antigo pre { margin: 0; font: inherit; white-space: pre-wrap; }
@media (max-width: 860px) { .fin-conta-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fin-conta-colar, .fin-conta-pix { grid-template-columns: minmax(0, 1fr); } }

/* 23/10 (pedido do usuário): o texto do Painel de LED editável nos Itens da proposta */
.orc-itens.planilha textarea.orc-desc-painel { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; line-height: 1.45; resize: vertical; min-height: 64px; }

/* 23/10 (pedido do usuário: "na Análise de crédito, deixe o desenho mais nítido"): a lista e a análise aberta com as bordas mais escuras, os
   títulos dos passos com a faixa azul à esquerda, o texto escuro, os nomes dos campos menos apagados e as linhas bem separadas */
:is(.aba-credito, .aba-financeiro, .nitido) .cartao { border: 1px solid var(--borda-nitida); box-shadow: 0 1px 2px rgba(18, 57, 85, .06), 0 6px 18px rgba(18, 57, 85, .06); }
:is(.aba-credito, .aba-financeiro, .nitido) .cartao-cab { border-bottom: 1px solid var(--borda-nitida); background: color-mix(in srgb, var(--azul) 5%, var(--sup)); border-left: 4px solid var(--azul);
  border-radius: var(--raio) var(--raio) 0 0; }
:is(.aba-credito, .aba-financeiro, .nitido) .cartao-cab h2 { color: var(--tinta); font-weight: 800; }
:is(.aba-credito, .aba-financeiro, .nitido) .cartao-cab .sub, :is(.aba-credito, .aba-financeiro, .nitido) .muda, :is(.aba-credito, .aba-financeiro, .nitido) .nota { color: var(--tinta2); }
:is(.aba-credito, .aba-financeiro, .nitido) .lista-param li { border-top-color: var(--borda-nitida); color: var(--tinta); }
:is(.aba-credito, .aba-financeiro, .nitido) .lista-param li > span:first-child { color: var(--tinta2); font-weight: 600; }
:is(.aba-credito, .aba-financeiro, .nitido) .lista-param li > b, :is(.aba-credito, .aba-financeiro, .nitido) .lista-param li > span:last-child { color: var(--tinta); }
:is(.aba-credito, .aba-financeiro, .nitido) .campo label, :is(.aba-credito, .aba-financeiro, .nitido) .campo > span { color: var(--tinta); font-weight: 700; }
:is(.aba-credito, .aba-financeiro, .nitido) input, :is(.aba-credito, .aba-financeiro, .nitido) select, :is(.aba-credito, .aba-financeiro, .nitido) textarea { border-color: var(--borda-nitida); color: var(--tinta); }
:is(.aba-credito, .aba-financeiro, .nitido) input:focus, :is(.aba-credito, .aba-financeiro, .nitido) select:focus, :is(.aba-credito, .aba-financeiro, .nitido) textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 18%, transparent); outline: none; }
:is(.aba-credito, .aba-financeiro, .nitido) table th { color: var(--tinta); border-bottom: 2px solid var(--borda-nitida); }
:is(.aba-credito, .aba-financeiro, .nitido) table td { border-top-color: var(--borda-nitida); color: var(--tinta); }
.aba-credito .credito-resumo { border: 1px solid var(--borda-nitida); color: var(--tinta); }
.aba-credito .credito-msg:empty { display: none; }
:is(.aba-credito, .aba-financeiro, .nitido) :is(.faixa-aviso, .aviso-barra) { border-color: var(--borda-nitida); color: var(--tinta); }
/* 29/10 (pedido do usuário: "deixe mais nítido" em Vendas): os quadros de número (tiles) também com a borda e o texto mais fortes */
:is(.aba-credito, .aba-financeiro, .nitido) .tile:not(.destaque) { border-color: var(--borda-nitida); }
:is(.aba-credito, .aba-financeiro, .nitido) .tile:not(.destaque) .tile-rot { color: var(--tinta2); font-weight: 700; }
:is(.aba-credito, .aba-financeiro, .nitido) .tile:not(.destaque) .tile-sub { color: var(--tinta2); }
/* 24/10 (pedido do usuário): o mesmo desenho nítido em Recebimentos (as três partes), em Operação, no ICMS por estado e nas Simulações de composição (a classe nitido) */
.aba-financeiro .fin-conta { border-bottom-color: var(--borda-nitida); }
.aba-financeiro .fin-conta h3 { color: var(--tinta); font-weight: 800; }
.aba-financeiro .fin-conta-antigo { border-color: var(--borda-nitida); }
.aba-financeiro .orc-comprov-item { border-color: var(--borda-nitida); }
.aba-financeiro table tbody tr:hover td { background: color-mix(in srgb, var(--azul) 4%, transparent); }
/* 24/10: o bloco_azul (cabeçalho azul-marinho, como "Impostos na venda") continua azul-marinho dentro do desenho nítido */
:is(.aba-credito, .aba-financeiro, .nitido) :is(.cartao.escuro, .blocos-azuis .cartao) > .cartao-cab { background: var(--marinho); border-left: 0; border-bottom-color: var(--marinho); }
:is(.aba-credito, .aba-financeiro, .nitido) :is(.cartao.escuro, .blocos-azuis .cartao) > .cartao-cab h2 { color: #fff; }
:is(.aba-credito, .aba-financeiro, .nitido) :is(.cartao.escuro, .blocos-azuis .cartao) > .cartao-cab .sub { color: rgba(255, 255, 255, .8); }
/* 24/10: Orçamentos › Projeto (o painel montado na parede): a lista, o editor de 3 colunas e o desenho (o SVG tem as cores escritas, para o PDF) */
.pj-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.pj-novo { display: flex; align-items: center; gap: 14px; text-align: left; padding: 18px; border-radius: var(--raio); cursor: pointer;
  border: 2px dashed color-mix(in srgb, var(--azul) 45%, var(--borda)); background: color-mix(in srgb, var(--azul) 5%, var(--sup)); color: var(--tinta); }
.pj-novo:hover { border-color: var(--azul); background: color-mix(in srgb, var(--azul) 9%, var(--sup)); }
.pj-novo-mais { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--azul), var(--ciano)); box-shadow: 0 4px 12px rgba(0, 96, 174, .3); }
.pj-novo b { display: block; font-size: 16px; }
.pj-novo small { color: var(--tinta2); }
.pj-cartao { display: grid; gap: 6px; padding: 16px; border-radius: var(--raio); background: var(--sup); border: 1px solid var(--borda); box-shadow: var(--sombra); }
.pj-cartao-tit { display: grid; }
.pj-cartao-tit b { font-size: 15.5px; }
.pj-cartao-tit span, .pj-cartao-res { color: var(--tinta2); margin: 0; }
.pj-cartao .nota { margin: 0; }
.pj-cartao-acoes { display: flex; gap: 8px; margin-top: 4px; }
.pj-editor { margin-top: 14px; display: grid; gap: 12px; }
.pj-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.pj-topo-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-corpo { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 12px; align-items: start; }
/* 24/10 (pedido do usuário): o Projeto aberto usa a largura toda do monitor; o projeto e o painel numa faixa em cima do desenho */
main:has(.pj-editor) { max-width: none; }
.pj-faixa { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end;
  background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; box-shadow: var(--sombra); }
.pj-faixa .campo { margin: 0; gap: 3px; min-width: 0; flex: 1 1 130px; }
.pj-faixa > .campo:nth-child(2), .pj-faixa > .campo:nth-child(3) { flex: 0 1 92px; }
.pj-faixa-mod { flex: 2 1 230px; min-width: 0; display: flex; }
.pj-faixa-mod .campo { flex: 1; }
.pj-faixa .campo > span { font-weight: 600; font-size: 12.5px; }
.pj-faixa .campo small { display: none; }
.pj-faixa input, .pj-faixa select { width: 100%; padding: 6px 8px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--sup); min-width: 0; }
.pj-faixa-qtd { display: grid; gap: 2px; }
.pj-faixa-qtd .pj-qtd { margin: 0; grid-template-columns: 52px 26px 34px 26px; font-size: 12px; }
.pj-faixa-qtd .pj-passo { width: 26px; height: 26px; font-size: 15px; }
.pj-faixa .pj-real { margin: 0; display: grid; gap: 1px; padding: 6px 10px; white-space: nowrap; }
.pj-faixa .pj-real small { color: var(--muda); font-size: 11.5px; }

.pj-painel { background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 14px 16px; min-width: 0; }
.pj-painel h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muda); margin: 14px 0 8px; }
.pj-painel h3:first-child { margin-top: 0; }
.pj-painel .campo { margin-bottom: 10px; gap: 4px; }
.pj-painel .campo > span { font-weight: 600; font-size: 13px; }
.pj-painel .campo input, .pj-painel .campo select { width: 100%; padding: 7px 9px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--sup); }
.pj-painel .campo input:focus, .pj-painel .campo select:focus { outline: 2px solid color-mix(in srgb, var(--azul) 35%, transparent); border-color: var(--azul); }
.pj-painel .campo small { font-size: 12px; }
.pj-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pj-qtd { display: grid; grid-template-columns: 1fr 30px 46px 30px; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.pj-qtd b { text-align: center; font-size: 15px; }
.pj-passo { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--borda); background: var(--sup2); cursor: pointer; font-size: 17px; line-height: 1; }
.pj-passo:hover { border-color: var(--azul); color: var(--azul); }
.pj-real { margin: 6px 0 0; padding: 8px 10px; border-radius: var(--raio-p); background: var(--acento-sup); font-size: 13px; }
.pj-meio { display: grid; gap: 8px; min-width: 0; }
.pj-barra { display: grid; gap: 8px; background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px 10px; box-shadow: var(--sombra); }
.pj-barra-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pj-botoes { display: flex; gap: 4px; margin-left: auto; }
.pj-bt { width: 34px; height: 32px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--sup2); cursor: pointer; font-size: 16px; }
.pj-bt:hover:not(:disabled) { border-color: var(--azul); color: var(--azul); }
.pj-bt:disabled { opacity: .4; cursor: default; }
.pj-legenda { gap: 6px; }
.pj-chip { --cor: var(--azul); display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--cor) 45%, var(--borda)); background: color-mix(in srgb, var(--cor) 10%, var(--sup)); color: var(--tinta); }
.pj-chip::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--cor); }
.pj-chip.ativo { background: var(--cor); color: #fff; border-color: var(--cor); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor) 25%, transparent); }
.pj-chip.ativo::before { background: #fff; }
.pj-chip-novo { border-style: dashed; }
.pj-chip-novo::before { display: none; }
.pj-area { position: relative; height: max(560px, calc(100vh - 120px)); border-radius: var(--raio); border: 1px solid var(--borda); overflow: hidden;
  background: #F8FAFC radial-gradient(circle, #DCE3EA 1px, transparent 1.2px) 0 0 / 18px 18px; box-shadow: inset 0 1px 3px rgba(15, 23, 42, .06); }
.pj-svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; }
.pj-svg.ferr-mao { cursor: grab; }
.pj-svg.ferr-mao:active { cursor: grabbing; }
.pj-svg.ferr-mao .pj-icone { cursor: move; }
.pj-svg.ferr-pincel { cursor: crosshair; }
.pj-svg.ferr-recorte { cursor: cell; }
.pj-icone:hover rect:first-child { filter: drop-shadow(0 2px 4px rgba(15, 23, 42, .35)); }
.pj-dica { position: absolute; pointer-events: none; padding: 5px 9px; border-radius: 8px; background: rgba(15, 23, 42, .9); color: #fff; font-size: 12.5px; white-space: nowrap; z-index: 2; }
.pj-info { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.pj-info dt { color: var(--muda); }
.pj-info dd { margin: 0; font-weight: 600; }
.pj-avisos { margin-top: 10px; padding: 8px 10px; border-radius: var(--raio-p); background: var(--alerta-sup); color: var(--alerta); font-size: 12.5px; }
.pj-avisos p { margin: 3px 0; }
.pj-ok { margin: 10px 0 0; padding: 7px 10px; border-radius: var(--raio-p); background: var(--ok-sup); color: var(--ok); font-size: 13px; font-weight: 600; }
.pj-pecas { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.pj-pecas td { padding: 7px 0; border-top: 0; border-bottom: 1px solid var(--linha); vertical-align: top; }
.pj-item { display: grid; gap: 1px; padding-right: 6px; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.pj-item span { color: var(--tinta2); }
.pj-item small { color: var(--muda); }
.pj-q { white-space: nowrap; width: 100px; }
.pj-q input { width: 54px; padding: 4px 5px; border: 1px solid var(--borda); border-radius: 6px; background: var(--sup); text-align: right; }
.pj-q small { margin: 0 4px; color: var(--muda); }
.pj-v { text-align: right; white-space: nowrap; padding-left: 6px !important; font-weight: 600; width: 84px; }
.pj-total { margin: 10px 0 4px; text-align: right; font-size: 14px; }
/* 24/10 (pedido do usuário): as controladoras em blocos para clicar; a troca automática acende a luz (âmbar) */
.pj-ctrls { display: grid; gap: 6px; margin-bottom: 12px; }
.pj-ctrls-tit { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.pj-ctrls-tit > :last-child { margin-left: auto; font-size: 12px; font-weight: 600; }
.pj-ctrls-tit small { color: var(--muda); }
.pj-ctrl { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; text-align: left; padding: 7px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--sup); color: var(--tinta); }
.pj-ctrl:hover { border-color: color-mix(in srgb, var(--azul) 55%, var(--borda)); }
.pj-ctrl.ativo { border-color: var(--azul); background: color-mix(in srgb, var(--azul) 7%, var(--sup)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--azul) 25%, transparent); }
.pj-ctrl-nome { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.pj-ctrl-nome em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--ok-sup); color: var(--ok); }
.pj-ctrl-det { grid-column: 1; font-size: 11.5px; color: var(--muda); }
.pj-ctrl-preco { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 12px; font-weight: 600; color: var(--tinta2); }
.pj-ctrl.trocou { animation: pj-luz-bloco 1.1s ease-in-out 5; }
@keyframes pj-luz-bloco { 0%, 100% { box-shadow: 0 0 0 2px rgba(245, 158, 11, .3); } 50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, .55), 0 0 16px rgba(245, 158, 11, .7); } }
.pj-luz { width: 10px; height: 10px; border-radius: 50%; background: #F59E0B; opacity: .45; }
.pj-luz.acesa { opacity: 1; box-shadow: 0 0 8px 2px rgba(245, 158, 11, .8); animation: pj-pisca 1s ease-in-out infinite; }
@keyframes pj-pisca { 50% { opacity: .35; box-shadow: none; } }
.pj-troca { display: flex; align-items: flex-start; gap: 6px; padding: 6px 8px; border-radius: 8px; font-size: 12px; background: var(--alerta-sup); color: var(--alerta); }
.pj-troca .link-btn { margin-left: auto; text-decoration: none; color: inherit; }
/* 24/10 (pedido do usuário): o resumo, a elétrica e as peças embaixo do desenho, em 3 blocos lado a lado */
.pj-dir { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; background: transparent; border: 0; box-shadow: none; padding: 0; }
.pj-bloco { min-width: 0; background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; display: flex; flex-direction: column; }
.pj-circ { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 12.5px; color: var(--tinta2); }
.pj-circ b { color: var(--tinta); }
.pj-check { display: flex; align-items: flex-start; gap: 6px; margin: 4px 0 8px; font-size: 13px; }
.pj-check input { margin-top: 3px; }
@media (max-width: 1100px) { .pj-dir { grid-template-columns: 1fr 1fr; } .pj-bloco-pecas, .pj-bloco-rec { grid-column: 1 / -1; } }
@media (max-width: 800px) { .pj-corpo, .pj-dir { grid-template-columns: minmax(0, 1fr); } .pj-area { height: 60vh; } }
/* 24/10: o pós-venda elétrico (Instalações › Elétrica): a fila, o atendimento aberto e o WhatsApp com os modelos */
.pv-filtros { display: grid; gap: 10px; margin-bottom: 12px; }
.pv-filtros .segmentos { flex-wrap: wrap; }
.pv-filtros-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pv-busca { flex: 1 1 260px; min-width: 0; padding: 7px 10px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--sup); }
.pv-filtros-linha select { padding: 6px 8px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--sup); }
.pv-venc { color: var(--perigo); font-weight: 600; }
.pv-acoes-topo { display: flex; gap: 6px; margin-left: auto; }
.pv-lista { display: grid; gap: 8px; }
.pv-linha { display: grid; grid-template-columns: 110px minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1.4fr) auto; gap: 12px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--borda); border-radius: var(--raio-m); background: var(--sup); }
.pv-linha.vencido { border-left: 4px solid var(--perigo); }
.pv-num, .pv-cli, .pv-sit-c { display: grid; gap: 2px; min-width: 0; }
.pv-num small, .pv-cli span, .pv-cli small, .pv-sit-c small { color: var(--muda); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-cli b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-bling { color: var(--info) !important; }
.pv-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pv-sit { padding: 5px 8px; border-radius: 999px; border: 1px solid var(--borda); background: var(--sup2); font-weight: 600; font-size: 12.5px; max-width: 100%; }
.pv-sit.ok { background: var(--ok-sup); color: var(--ok); }
.pv-sit.alerta { background: var(--alerta-sup); color: var(--alerta); }
.pv-sit.perigo { background: var(--perigo-sup); color: var(--perigo); }
.pv-sit.info { background: var(--info-sup); color: var(--info); }
.pv-botoes { display: flex; gap: 6px; }
.btn-wa { display: inline-flex; align-items: center; gap: 6px; }
.btn-wa.desativado { opacity: .45; pointer-events: none; }
dialog.pv-dlg { width: min(980px, calc(100vw - 24px)); }
.pv-dlg-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pv-dlg-corpo { display: grid; gap: 14px; max-height: calc(100vh - 220px); overflow: auto; }
.pv-sec h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muda); margin: 0 0 8px; }
/* 25/10 (pedido do usuário: "o desenho mais nítido"): o atendimento (e o pedido) em blocos com a faixa azul-marinho (como "Impostos na
   venda"), mais largo, com o fundo dos blocos destacado e os rótulos mais fortes */
dialog.pv-dlg { width: min(1120px, calc(100vw - 24px)); }
.pv-dlg .pv-dlg-corpo { background: var(--sup2); padding-top: 14px; padding-bottom: 14px; }
.pv-dlg .pv-sec, .inst-dlg .ped-bling-cx .pv-sec { background: var(--sup); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; padding: 0 14px 14px; box-shadow: var(--sombra); }
.pv-dlg .pv-sec > h3, .inst-dlg .ped-bling-cx .pv-sec > h3, .pv-sec.pv-bling > summary { margin: 0 -14px 12px; padding: 9px 14px; background: var(--marinho); color: #FFFFFF;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pv-sec.pv-bling { padding: 0 14px 14px; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--sup); }
.pv-sec.pv-bling > summary { cursor: pointer; list-style: revert; }
.pv-sec.pv-bling:not([open]) > summary { margin-bottom: -14px; }
.pv-dlg .campo > span, .pv-dlg .campo > label { color: var(--tinta); font-weight: 600; }
.pv-dlg .ped-dado span { color: var(--tinta2); font-weight: 600; }
.ped-bling-cx { display: grid; gap: 12px; }
.ped-bling-cx > .pv-sec { box-shadow: none; }
a.ped-bling { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a.ped-bling:hover { color: var(--azul); }
.ped-parcelas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ped-parcelas li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.ped-projeto, .ped-projeto-pv { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.ped-itens-cx { overflow-x: auto; }
dialog.inst-dlg { width: min(1000px, calc(100vw - 24px)); }
.inst-dlg .pv-sec.pv-bling { margin-top: 12px; }
.inst-dlg a.ped-bling { font-size: 15px; font-weight: 700; color: var(--marinho); }
/* 25/10: a referência do módulo (ordem de produção) ao lado do número do pedido */
.ped-ref { display: block; font-size: 11px; font-weight: 600; color: var(--tinta2); letter-spacing: .02em; overflow-wrap: anywhere; }
.pv-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; }
.pv-grade .campo, .pv-rede .campo { margin: 0; }
.pv-largo { grid-column: span 2; }
.pv-paineis { display: grid; gap: 6px; }
.pv-painel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pv-painel input, .pv-painel select { padding: 5px 7px; border: 1px solid var(--borda); border-radius: 6px; background: var(--sup); }
.pv-painel .nota { flex-basis: 100%; }
.pv-rede { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 12px; align-items: end; margin-bottom: 10px; }
.pv-calc { padding: 10px 12px; border-radius: var(--raio-p); background: var(--sup2); border: 1px solid var(--linha); }
.pv-calc h4 { margin: 0 0 6px; font-size: 13px; }
.pv-check { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; margin-bottom: 8px; }
.pv-anexos-cab { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; }
.pv-anexos { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.pv-hist { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.pv-hist li { display: grid; gap: 1px; padding: 6px 8px; border-radius: 8px; background: var(--sup2); font-size: 13px; }
.pv-hist small { color: var(--muda); }
.pv-nota { display: flex; gap: 8px; }
.pv-nota input { flex: 1; min-width: 0; padding: 6px 9px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--sup); }
.pv-wa-modelos { flex-wrap: wrap; margin-bottom: 8px; }
.pv-wa-texto { width: 100%; padding: 10px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--sup); font: 14px/1.45 var(--fonte); }
@media (max-width: 900px) { .pv-linha { grid-template-columns: 1fr; } .pv-largo { grid-column: auto; } }
/* 24/10: a Perspectiva do Projeto (no lugar do 3D): duas camadas do desenho num palco 3D; as peças levantadas com sombra */
.pj-persp { position: absolute; inset: 0; perspective: 1700px; perspective-origin: 50% 40%; cursor: grab; touch-action: none; user-select: none; overflow: hidden; }
.pj-persp:active { cursor: grabbing; }
.pj-persp-cena { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .25s ease-out; }
.pj-persp-cena.arrastando { transition: none; }
.pj-persp-base, .pj-persp-ico { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }  /* 24/10: o zoom não corta o desenho na borda do SVG */
.pj-persp-base { filter: drop-shadow(0 28px 26px rgba(15, 23, 42, .28)); }
.pj-persp-ico { transform: translateZ(40px); filter: drop-shadow(0 16px 10px rgba(15, 23, 42, .45)); pointer-events: none; }
.pj-3d-bts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* 24/10 (pedido do usuário): o desenho sempre em perspectiva (os ícones da camada de cima se arrastam); Desenhar cabos com a cruz;
   o nome do projeto no topo (pedido antes de entrar) */
.pj-persp-ico .pj-icone { pointer-events: all; cursor: move; }
.pj-persp.ferr-cabo { cursor: crosshair; }
.pj-persp.ferr-cabo .pj-persp-ico .pj-icone { cursor: pointer; }
.pj-topo-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.pj-topo-nome b { font-size: 16px; overflow-wrap: anywhere; }
.pj-topo-nome span { color: var(--muda); font-size: 13px; }
.pj-sep { width: 1px; align-self: stretch; background: var(--borda); margin: 0 4px; }
.pj-atalhos { margin: 0; font-size: 12px; color: var(--muda); }
.pj-botoes { flex-wrap: wrap; }
dialog.pj-dlg-nome { width: min(460px, calc(100vw - 24px)); }
dialog.pj-dlg-nome .campo { display: grid; gap: 4px; margin-bottom: 12px; }
dialog.pj-dlg-nome input { padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--sup); font: inherit; }
dialog.pj-dlg-nome select { padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--sup); font: inherit; }
/* 25/10 (pedido do usuário): várias telas no projeto (lado a lado, na mesma controladora) */
.pj-faixa > .pj-telas-campo { flex: 3 1 420px; }
.pj-faixa:has(.pj-telas-campo) > .campo:nth-child(3) { flex: 1 1 170px; }
.pj-telas { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-tela { display: flex; align-items: center; gap: 4px; padding: 3px 4px 3px 8px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--sup2); font-size: 12.5px; }
.pj-tela b { white-space: nowrap; }
.pj-faixa .pj-tela input { width: 68px; padding: 4px 6px; }
.pj-tela-dist { display: flex; align-items: center; gap: 3px; color: #B45309; font-weight: 600; }
.pj-faixa .pj-tela-dist input { width: 60px; }
.pj-tela-x { border: 0; background: none; color: var(--perigo); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.pj-tela-mais { align-self: flex-end; white-space: nowrap; }
.pj-dlg-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inst-pj { margin-left: 6px; font-size: 12px; white-space: nowrap; }
/* 25/10 (pedido do usuário): o orçamento que veio do Projeto (a nota e a autorização) e a autorização no topo do Projeto */
.orc-projeto { display: grid; gap: 6px; padding: 10px 12px; margin: 4px 0 10px; border: 1px solid var(--borda); border-left: 4px solid var(--azul); border-radius: var(--raio-p); background: var(--sup2); }
.orc-projeto small { line-height: 1.45; }
.formulario > .orc-projeto { grid-column: 1 / -1; }
/* 25/10 (pedido do usuário): o produto do orçamento — "Painel com gabinetes" ou "Peças avulsas" (o módulo e o tamanho, como no Projeto) */
.orc-modo { margin: 0 0 14px; }
.orc-pecas { display: grid; gap: 10px; margin-bottom: 12px; }
.orc-pecas-campos { align-items: end; }
/* 30/10: "Não mostrar detalhado", as páginas do projeto fora da proposta e o título sugerido do Ambiente */
.orc-pecas-kit { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.orc-pecas-kit input { margin-top: 3px; }
.orc-pj-paginas { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 13px; }
.orc-pj-paginas > span { font-weight: 600; }
.orc-pj-paginas label { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.orc-ambiente .orc-amb-sug { display: block; margin-top: 4px; font-size: 13px; text-align: left; }
.orc-ambiente .orc-amb-sug[hidden] { display: none; }
.orc-pecas-lista { max-height: 340px; overflow: auto; border: 1px solid var(--borda); border-radius: var(--raio-p); }
.orc-pecas-lista .pj-pecas { width: 100%; }
.orc-pecas-lista th, .orc-pecas-lista td { padding: 6px 12px; }
.orc-pecas .orc-projeto-bts { align-items: center; }
/* 25/10 (pedido do usuário): o arquivo do fornecedor no Projeto */
.pj-forn { display: grid; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--borda); }
.pj-forn-arq { display: grid; gap: 2px; font-size: 13px; }
.pj-forn-aviso { margin: 0; font-size: 12.5px; color: #B45309; }
.orc-projeto-bts { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-autoriza { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* 25/10 (pedido do usuário): "Precisa de atenção" sem a barra de rolagem na largura */
.orc-atencao table { table-layout: fixed; width: 100%; }
.orc-atencao th, .orc-atencao td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.orc-atencao th:nth-child(1), .orc-atencao td:nth-child(1) { width: 42%; }
.orc-atencao th:nth-child(2), .orc-atencao td:nth-child(2) { width: 10%; }
.orc-atencao th:last-child, .orc-atencao td:last-child { width: 12%; }
/* 24/10: o Suporte técnico (Limites das peças e Arquivos NovaStar) */
.sup-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 8px; }
.sup-topo .segmentos { flex-wrap: wrap; }
.sup-tabela-cx { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--sup); }
.sup-tabela { border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
.sup-tabela th { position: sticky; top: 0; background: var(--sup2); font-size: 11.5px; text-transform: none; vertical-align: bottom; white-space: nowrap; padding: 8px 6px; }
.sup-tabela th small { display: block; color: var(--muda); font-weight: 500; }
.sup-tabela td { padding: 6px; vertical-align: top; white-space: nowrap; border-top: 1px solid var(--linha); }
.sup-tabela tr.a-conferir td:first-child { box-shadow: inset 4px 0 0 var(--alerta); }
.sup-peca { min-width: 210px; max-width: 280px; white-space: normal !important; position: sticky; left: 0; background: var(--sup); z-index: 1; }
.sup-peca > b, .sup-peca > span, .sup-peca > small { display: block; margin-bottom: 2px; }
.sup-peca span { color: var(--tinta2); font-size: 12px; }
.sup-peca details { font-size: 11.5px; color: var(--tinta2); }
.sup-peca details p { margin: 4px 0 0; white-space: pre-wrap; }
.sup-ok { color: var(--ok); font-weight: 600; }
.sup-conf { color: var(--alerta); font-weight: 700; }
.sup-in { padding: 4px 6px; border: 1px solid var(--borda); border-radius: 6px; background: var(--sup); font: inherit; }
.sup-in.mudou { border-color: var(--azul); background: color-mix(in srgb, var(--azul) 8%, var(--sup)); font-weight: 700; }
.sup-acoes { white-space: normal !important; min-width: 180px; }
.sup-acoes > * { margin: 0 4px 4px 0; }
dialog.sup-dlg { width: min(760px, calc(100vw - 24px)); }
.sup-sug { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sup-sug li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 8px; }
.sup-sug li small { display: block; color: var(--tinta2); margin-top: 2px; }
.ns-envio { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 4px 16px 16px; }
.ns-envio input[type=text] { flex: 1 1 260px; padding: 7px 9px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--sup); }
.ns-lista { display: grid; gap: 12px; padding: 4px 16px 16px; }
.ns-arq { border: 1px solid var(--borda); border-radius: var(--raio-m); padding: 12px 14px; background: var(--sup); display: grid; gap: 10px; }
.ns-arq.em-uso { border-color: var(--ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 20%, transparent); }
.ns-arq-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.ns-arq-cab > div:first-child { display: grid; gap: 2px; min-width: 0; }
.ns-arq-cab b { overflow-wrap: anywhere; }
.ns-arq-cab small { color: var(--muda); }
.ns-arq-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ns-liga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.ns-liga select { flex: 1 1 280px; max-width: 520px; padding: 5px 8px; border: 1px solid var(--borda); border-radius: 6px; background: var(--sup); }
.ns-dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; }
.ns-dado { display: grid; gap: 1px; padding: 6px 8px; border-radius: 8px; background: var(--sup2); }
.ns-dado span { font-size: 11.5px; color: var(--muda); }
.ns-dado b { font-size: 13px; overflow-wrap: anywhere; }
.ns-comp summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.ns-comp ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; display: grid; gap: 3px; }
.ns-sug { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.ns-ia { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--outro) 8%, var(--sup)); border: 1px solid color-mix(in srgb, var(--outro) 30%, var(--borda)); display: grid; gap: 6px; }
.ns-ia p, .ns-ia ul { margin: 0; font-size: 13px; }
.ns-ia ul { padding-left: 18px; }
.ns-obs { margin: 0; }
.ns-obs input { padding: 6px 8px; border: 1px solid var(--borda); border-radius: 6px; background: var(--sup); }
.ns-fw { width: calc(100% - 32px); margin: 0 16px 16px; font-size: 13px; }
.ns-arq > .btn { justify-self: start; }
.sup-prog { min-height: 1.2em; }
/* 24/10 (pedido do usuário): Pedidos para instalar na largura de sempre, tudo à vista sem a rolagem de lado (as colunas quebram a linha);
   clicar no pedido abre as informações */
.ped-inst th, .ped-inst td { white-space: normal; }
.ped-inst td.quebra { min-width: 0; max-width: none; }
.ped-inst td .btn, .ped-inst td .chip, .ped-inst td:first-child, .ped-inst td.ped-num, .ped-inst td.ped-num .link-btn { white-space: nowrap; }
.ped-inst-abrir { font-weight: 700; text-align: left; }
dialog.ped-dlg { width: min(1100px, calc(100vw - 24px)); }
.ped-dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 14px; }
.ped-dado { display: grid; gap: 2px; min-width: 0; }
.ped-dado span { font-size: 12px; color: var(--muda); }
.ped-dado b { overflow-wrap: anywhere; }
.ped-itens { width: 100%; border-collapse: collapse; font-size: 13px; }
.ped-itens th { text-align: left; font-size: 12px; color: var(--muda); padding: 6px; border-bottom: 1px solid var(--linha); }
.ped-itens td { padding: 6px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.ped-itens td.num { text-align: right; white-space: nowrap; }
.ped-conf { display: grid; gap: 3px; font-size: 12.5px; }
/* 24/10 (pedido do usuário): mostrar ou esconder as camadas do desenho do Projeto */
.pj-camadas { gap: 6px; font-size: 12.5px; }
.pj-camadas > span { color: var(--muda); font-weight: 600; }
.pj-camada { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--borda); background: var(--sup); color: var(--muda); cursor: pointer; font-size: 12.5px; text-decoration: line-through; }
.pj-camada[aria-pressed="true"] { background: color-mix(in srgb, var(--azul) 10%, var(--sup)); border-color: color-mix(in srgb, var(--azul) 45%, var(--borda)); color: var(--tinta); text-decoration: none; font-weight: 600; }
/* 24/10 (pedidos do usuário): o Projeto — a folha das receptoras, comparar módulos */
.pj-folha { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.pj-folha th, .pj-folha td { padding: 4px 6px; border-top: 1px solid var(--linha); white-space: nowrap; }
.pj-folha th { color: var(--muda); font-weight: 600; text-align: left; }
dialog.pj-comp-dlg { width: min(900px, calc(100vw - 24px)); }
.pj-comp { overflow-x: auto; }
.pj-comp-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.pj-comp-tab th, .pj-comp-tab td { padding: 7px 8px; border-top: 1px solid var(--linha); text-align: left; white-space: normal; }
.pj-comp-tab thead th { border-top: 0; }
.pj-comp-tab select { width: 100%; padding: 5px 6px; border: 1px solid var(--borda); border-radius: 6px; background: var(--sup); }
.pj-comp-tab tbody th { color: var(--muda); font-weight: 600; width: 22%; }
.pj-topo-acoes { align-items: center; }
/* 24/10 (pedidos do usuário): os metros dos cabos clicáveis e as cores dos cabos */
.pj-persp-base .pj-trecho { cursor: pointer; }
.pj-persp-base .pj-trecho:hover rect { stroke-width: 3; }
.pj-cores { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 2px 0 10px; font-size: 13px; }
.pj-cores > span { flex-basis: 100%; font-weight: 600; }
.pj-cores label { display: inline-flex; align-items: center; gap: 6px; }
.pj-cores input[type=color] { width: 30px; height: 26px; padding: 0; border: 1px solid var(--borda); border-radius: 6px; background: var(--sup); }
/* 24/10 (pedidos do usuário): o cabo que se arrasta (a dobra) e o projeto pela foto */
.pj-persp-base .pj-cabo-alvo { pointer-events: stroke; cursor: grab; }
.pj-persp-base circle.pj-cabo-alvo { pointer-events: all; }
.pj-foto { display: grid; gap: 6px; padding: 10px; border: 1px dashed var(--borda); border-radius: var(--raio-p); margin-top: 4px; }
.pj-foto > span { font-weight: 600; font-size: 13px; }
.pj-foto input[type=text] { padding: 7px 9px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--sup); font: inherit; }
.pj-foto .btn { justify-self: start; }
.pj-foto-res:empty { display: none; }
/* 25/10: a foto colada e a referência do módulo (ordem de produção) */
.pj-foto-bts { display: flex; flex-wrap: wrap; gap: 8px; }
.ped-prod { display: grid; gap: 8px; }
.pv-prod { flex-basis: 100%; padding: 8px 10px; border-radius: 8px; background: var(--sup2); }
/* 25/10 (pedidos do usuário): o fim da página do Projeto em blocos com o cabeçalho azul-marinho; as ligações e as ferramentas destacadas */
.pj-dir .pj-bloco h3.pj-bloco-cab { margin: 0; padding: 10px 16px; background: var(--marinho); color: #FFFFFF; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.pj-bloco-corpo { padding: 14px 16px; display: grid; gap: 12px; align-content: start; }
.pj-bloco-pecas { grid-column: span 2; }
.pj-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.pj-num { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--azul) 7%, var(--sup)); border: 1px solid color-mix(in srgb, var(--azul) 18%, var(--borda)); }
.pj-num span { font-size: 11.5px; color: var(--muda); text-transform: uppercase; letter-spacing: .04em; }
.pj-num b { font-size: 17px; color: var(--tinta); }
.pj-num small { font-size: 11.5px; color: var(--tinta2); }
.pj-caixas { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pj-caixas li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 8px; background: var(--sup2); font-size: 13px; }
.pj-caixas small { color: var(--muda); }
.pj-pecas-cx { overflow-x: auto; }
.pj-dir .pj-pecas { table-layout: auto; }
.pj-dir .pj-pecas th { text-align: left; font-size: 11.5px; color: var(--muda); text-transform: uppercase; letter-spacing: .04em; padding: 6px 4px; border-bottom: 2px solid var(--linha); }
.pj-dir .pj-pecas td { padding: 8px 4px; }
.pj-dir .pj-pecas tbody tr:nth-child(even) td { background: var(--zebra, color-mix(in srgb, var(--azul) 3%, var(--sup))); }
.pj-dir .pj-pecas tr.pj-peca-bk td { background: color-mix(in srgb, var(--alerta) 7%, var(--sup)); }
.pj-dir .pj-pecas tfoot td { padding: 10px 4px; border-top: 2px solid var(--marinho); font-weight: 700; font-size: 15px; }
.pj-dir .pj-pecas th.pj-v, .pj-dir .pj-pecas td.pj-v { text-align: right; width: 110px; }
.pj-unit { color: var(--tinta2); font-weight: 500 !important; }
.pj-pecas-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pj-arq { margin: 0; font-size: 13px; }
.pj-rec-tag { --cor: var(--azul); display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--cor); color: #FFFFFF; }
.pj-barra .segmentos.pj-seg-vistas, .pj-barra .segmentos.pj-seg-ferr { padding: 4px; border: 1px solid color-mix(in srgb, var(--marinho) 25%, var(--borda)); background: color-mix(in srgb, var(--marinho) 6%, var(--sup)); }
.pj-barra .segmentos.pj-seg-vistas button, .pj-barra .segmentos.pj-seg-ferr button { font-size: 14px; font-weight: 700; padding: 8px 14px; }
.pj-barra .segmentos.pj-seg-vistas button[aria-pressed="true"] { background: var(--marinho); color: #FFFFFF; box-shadow: 0 2px 6px rgba(18, 57, 85, .35); }
.pj-barra .segmentos.pj-seg-ferr button[aria-pressed="true"] { background: var(--azul); color: #FFFFFF; box-shadow: 0 2px 6px rgba(0, 96, 174, .35); }
@media (max-width: 800px) { .pj-bloco-pecas { grid-column: auto; } }
/* 25/10: a lista de separação da Expedição (as peças que vão junto com o painel), na largura toda, em colunas */
.pj-bloco-exp, .pj-dir .pj-bloco-largo { grid-column: 1 / -1; }
/* 26/10: o número do projeto (PJ-2026-0001) e a busca da lista */
.chip.pj-numero { background: var(--marinho); color: #FFFFFF; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.chip.pj-numero.sem { background: var(--sup2); color: var(--muda); font-weight: 500; }
.pj-lista-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; grid-column: 1 / -1; }
.pj-lista-topo .pj-filtro { grid-column: auto; }
.pj-busca { flex: 1 1 280px; max-width: 460px; padding: 10px 12px; border-radius: var(--raio-p); border: 1px solid var(--borda); background: var(--sup); color: var(--tinta); font: inherit; }
.pj-lista .pj-cartao[hidden] { display: none; }
.pj-cartao-tit .chip.pj-numero { justify-self: start; margin-bottom: 2px; }
.pj-exp { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.pj-exp-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--sup2); border: 1px solid var(--borda); }
.pj-exp-item.pj-exp-bk { background: color-mix(in srgb, var(--alerta) 7%, var(--sup)); }
.pj-exp-q { display: flex; align-items: center; gap: 2px; }
.pj-exp-q input { width: 64px; text-align: right; font-weight: 700; }
.pj-exp-txt { display: grid; gap: 1px; min-width: 0; }
.pj-exp-txt b { font-size: 13.5px; color: var(--tinta); }
.pj-exp-txt small { font-size: 11.5px; color: var(--tinta2); }
/* 25/10: o canto em 3D (Visão geral) e a vista "Na foto" (o painel em perspectiva em cima da foto do lugar) */
.pj-canto3d > span, .pj-foto-barra > span { font-weight: 600; color: var(--tinta2); }
.pj-persp-base.pj-face { overflow: hidden; }  /* cada face mostra só a sua parte do desenho */
.pj-nafoto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #0F172A; }
.pj-nafoto[hidden] { display: none; }
.pj-nafoto-svg { display: block; touch-action: none; user-select: none; }
.pj-nafoto-face { cursor: move; }
.pj-nafoto-ponto { cursor: grab; }
.pj-nafoto-ponto:hover { fill: #FBBF24; }
.pj-nafoto-vazio { max-width: 460px; padding: 28px; border-radius: 14px; background: var(--sup); color: var(--tinta); display: grid; gap: 10px; text-align: center; }
.pj-nafoto-vazio p { margin: 0; color: var(--tinta2); }
.pj-nafoto-vazio .pj-foto-bts { justify-content: center; }
.pj-foto-msg { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--tinta2); }
/* 25/10: as controladoras só com o modelo (em botões que quebram a linha), o modo do cabo flat e o efeito enquanto o Claude olha a foto */
.pj-ctrl-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-ctrl-lista .pj-ctrl { display: inline-flex; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.pj-cabo-modo > span { font-weight: 600; color: var(--tinta2); }
.pj-prod { display: grid; gap: 6px; margin: 4px 0 10px; }
.pj-ia-olhando { position: relative; padding: 8px 12px 8px 34px !important; border-radius: 10px; font-weight: 600; color: #4C1D95 !important;
  background: linear-gradient(100deg, #EDE9FE 0%, #E0F2FE 35%, #FCE7F3 65%, #EDE9FE 100%); background-size: 300% 100%; animation: pj-ia-brilho 2.2s linear infinite; }
.pj-ia-olhando::before { content: ""; position: absolute; left: 11px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
  border: 2.5px solid #C4B5FD; border-top-color: #7C3AED; animation: pj-ia-gira .8s linear infinite; }
@keyframes pj-ia-brilho { from { background-position: 0% 0; } to { background-position: 300% 0; } }
@keyframes pj-ia-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pj-ia-olhando, .pj-ia-olhando::before { animation: none; } }
/* 25/10: a foto no Novo projeto (marcar o lugar e os objetos de referência), o filtro dos projetos e o "Marcar o lugar" no editor */
dialog.pj-dlg-nome:has(.pj-foto-prev:not([hidden])) { width: min(780px, calc(100vw - 24px)); }
.pj-foto-prev { border-radius: var(--raio-p); overflow: hidden; background: #0F172A; display: flex; justify-content: center; }
.pj-foto-prev[hidden] { display: none; }
.pj-foto-prev-svg { display: block; width: 100%; max-height: 380px; cursor: crosshair; touch-action: none; user-select: none; }
.pj-foto-obj { cursor: pointer; }
.pj-foto-obj:hover rect { fill: rgba(34, 211, 238, .28); }
.pj-nafoto-svg.marcando, .pj-nafoto-svg.marcando * { cursor: crosshair !important; }
.pj-filtro { display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; font-size: 13px; font-weight: 600; }
.pj-filtro select { padding: 6px 10px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--sup); font: inherit; font-weight: 500; }
/* 25/10: o ✕ da receptora desenhada à mão e o cabo de rede que se tira (no "🔗 Cabo de rede") */
.pj-chip-x { margin-left: -4px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--borda); background: var(--sup); color: var(--perigo, #C0281C); font-size: 11px; line-height: 1; cursor: pointer; }
.pj-chip-x:hover { background: var(--perigo-sup, #FCEBE9); }
.pj-persp.ferr-rede .pj-persp-base .pj-cabo-alvo { cursor: pointer; }
.pj-persp.ferr-rede .pj-persp-base .pj-cabo-alvo:hover { stroke: rgba(192, 40, 28, .35); }
/* 25/10: o desenho de cada controladora, as de fora do catálogo e a alavanca dos módulos */
.pj-ctrl-lista .pj-ctrl { align-items: center; gap: 6px; padding: 4px 10px 4px 6px; }
.pj-ctrl-ic { flex: none; }
.pj-ctrl-lista .pj-ctrl.fora { border-style: dashed; }
.pj-ctrl-aviso { margin: 0; color: var(--alerta, #A84B05); }
.pj-esc { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--tinta2); }
.pj-esc input[type=range] { width: 110px; accent-color: var(--azul); }
.pj-esc b { min-width: 38px; font-variant-numeric: tabular-nums; }
/* 25/10: "Na foto" em passos (1: onde fica o painel; 2: as medidas pela foto) */
.pj-foto-passo { padding: 6px 10px; border-radius: 10px; background: var(--sup2); }
.pj-foto-passo.marcando { background: #FEF3C7; color: #78350F; }
.pj-foto-num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--azul); color: #fff; font-size: 11.5px; font-weight: 700; }
.pj-foto-passo > span:not(.pj-foto-num):not(.pj-foto-est) { font-weight: 600; }
.pj-foto-ref-ed { flex: 1 1 260px; min-width: 0; padding: 6px 9px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--sup); font: inherit; font-size: 13px; }
/* 25/10: os custos informados pelo estoque, recolhidos */
.custos-recolhe > summary { cursor: pointer; font-weight: 600; color: var(--azul); padding: 4px 0; }
.custos-recolhe[open] > summary { margin-bottom: 8px; }
/* 25/10: as referências do Claude na Montagem rápida */
.mont-ia-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 0; font-size: 13px; }
.mont-ia-tit { font-weight: 600; }
.chip-ref { padding: 3px 10px; border-radius: 999px; border: 1px solid #22D3EE; background: color-mix(in srgb, #22D3EE 12%, var(--sup)); color: var(--tinta); font: inherit; font-size: 12.5px; cursor: pointer; }
.chip-ref.ativo { background: #0E7490; border-color: #0E7490; color: #fff; }
.mont-ia-sug { color: var(--tinta2); }
/* 25/10: as camadas (nomes curtos) ao lado das ligações; as ferramentas e os botões numa linha só */
.pj-barra-linha > .pj-camadas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pj-barra-linha > .pj-camadas > span { font-size: 12.5px; font-weight: 600; color: var(--tinta2); margin-right: 2px; }
.pj-barra-linha > .pj-camadas .pj-camada { padding: 3px 9px; font-size: 12.5px; }
.pj-barra-ferr { flex-wrap: nowrap; }
.pj-barra-ferr .pj-botoes { flex-wrap: nowrap; }
@media (max-width: 1250px) { .pj-barra-ferr, .pj-barra-ferr .pj-botoes { flex-wrap: wrap; } }
/* 25/10: os anúncios prontos da Montagem rápida */
.mont-anuncios { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; font-size: 13px; }
.mont-anuncios > span { font-weight: 600; }
.mont-anuncio { padding: 2px; border: 2px solid transparent; border-radius: 8px; background: var(--sup2); cursor: pointer; line-height: 0; }
.mont-anuncio img { height: 46px; width: auto; border-radius: 5px; }
.mont-anuncio:hover { border-color: var(--borda); }
.mont-anuncio.ativo { border-color: var(--azul); }

/* 25/10 (pedido do usuário: "dentro do projeto, mais nítidos os botões de seleção, os campos e as bordas das seções"): as bordas da faixa de
   cima, da barra das vistas, da coluna da esquerda e dos blocos de baixo com a borda nítida; os campos, as listas, os botões de escolher
   (segmentos, controladoras, + e −) com a borda nítida e o texto escuro; o foco em azul */
.pj-editor { --pj-borda: color-mix(in srgb, var(--tinta2) 62%, var(--borda)); }
.pj-editor .pj-faixa, .pj-editor .pj-barra, .pj-editor .pj-painel:not(.pj-dir), .pj-editor .pj-bloco { border: 2px solid var(--pj-borda); }
.pj-editor .pj-faixa input, .pj-editor .pj-faixa select, .pj-editor .pj-painel .campo input, .pj-editor .pj-painel .campo select,
.pj-editor .pj-barra input[type=text], .pj-editor .pj-barra input[type=number], .pj-editor .pj-barra select {
  border: 1.5px solid var(--pj-borda); background: var(--sup); color: var(--tinta); font-weight: 600; }
.pj-editor .pj-faixa input:focus, .pj-editor .pj-faixa select:focus, .pj-editor .pj-painel .campo input:focus, .pj-editor .pj-painel .campo select:focus,
.pj-editor .pj-barra input:focus, .pj-editor .pj-barra select:focus { outline: 2px solid color-mix(in srgb, var(--azul) 35%, transparent); border-color: var(--azul); }
.pj-editor .pj-faixa .campo > span, .pj-editor .pj-painel .campo > span { color: var(--tinta); font-weight: 700; }
.pj-editor .pj-painel h3 { color: var(--tinta2); font-weight: 700; }
.pj-editor .segmentos { border: 1.5px solid var(--pj-borda); }
.pj-editor .segmentos button { color: var(--tinta); font-weight: 600; }
.pj-editor .pj-barra .segmentos.pj-seg-vistas, .pj-editor .pj-barra .segmentos.pj-seg-ferr { border: 1.5px solid var(--pj-borda); }
.pj-editor .pj-ctrl { border: 1.5px solid var(--pj-borda); }
.pj-editor .pj-ctrl.ativo { border-color: var(--azul); }
.pj-editor .pj-ctrl-det { color: var(--tinta2); }
.pj-editor .pj-passo, .pj-editor .pj-bt { border: 1.5px solid var(--pj-borda); background: var(--sup); color: var(--tinta); font-weight: 700; }
.pj-editor .pj-passo:hover, .pj-editor .pj-bt:hover:not(:disabled) { border-color: var(--azul); color: var(--azul); }
.pj-editor .pj-barra .btn, .pj-editor .pj-topo .btn:not(.primario) { border: 1.5px solid var(--pj-borda); color: var(--tinta); }
.pj-editor .pj-barra .btn.primario { border-color: transparent; color: #FFFFFF; }
.pj-editor .pj-real { border: 1.5px solid color-mix(in srgb, var(--acento) 45%, var(--pj-borda)); }

/* 25/10 (pedido do usuário): o Novo projeto pergunta primeiro — Gabinetes ou Peças (dois cartões grandes para clicar) */
dialog.pj-dlg-tipo { width: min(560px, calc(100vw - 24px)); }
.pj-tipo-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pj-tipo-op { display: grid; justify-items: start; align-content: start; gap: 6px; text-align: left; padding: 16px; border-radius: var(--raio); cursor: pointer;
  border: 2px solid var(--borda-nitida); background: var(--sup); color: var(--tinta); font: inherit; }
.pj-tipo-op:hover:not(:disabled), .pj-tipo-op:focus-visible { border-color: var(--azul); background: color-mix(in srgb, var(--azul) 6%, var(--sup)); }
.pj-tipo-op:disabled { opacity: .5; cursor: default; }
.pj-tipo-op b { font-size: 17px; }
.pj-tipo-op small { color: var(--tinta2); line-height: 1.4; }
.pj-tipo-ic { font-size: 30px; line-height: 1; color: var(--azul); }
@media (max-width: 520px) { .pj-tipo-ops { grid-template-columns: 1fr; } }

/* 25/10 (pedido do usuário): incluir uma análise de crédito (o Financeiro) */
dialog.dlg-credito-incluir { width: min(520px, calc(100vw - 24px)); }
.credito-incluir .campo { display: grid; gap: 4px; margin-bottom: 10px; }
.credito-incluir input, .credito-incluir textarea { padding: 8px 10px; border: 1.5px solid var(--borda-nitida); border-radius: var(--raio-p); background: var(--sup); color: var(--tinta); font: inherit; }
.credito-incluir-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aba-credito .filtros-orc { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }

/* 26/10: Administração › Vendedores (o cadastro que era o Cadastro.xlsx) */
.vc-nome { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.vc-bling { display: flex; flex-direction: column; gap: 2px; }
.vc-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.vc-barra .btn.primario { margin-left: auto; }
.vc-check { display: inline-flex; align-items: center; gap: 6px; }
.vc-kommo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; margin-bottom: 10px; border-radius: 10px; background: var(--sup2); }
.vc-soltos { margin-top: 12px; }
.vc-soltos-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-dlg .vc-form { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.vc-dlg .campo small { display: block; margin-top: 4px; }
/* 26/10–27/10 (pedidos do usuário): o Orçamento rápido — ficam o Layout 11 (três colunas) e o 12 (dados | preço); saíram o 8, o 9, o 10,
   o 13 e o 14. Na largura toda da tela, com as cores do Layout 1; só os campos essenciais (orc-rp-ess) e "Mostrar todos os campos". */
main:has(.orc-rapido) { max-width: none; padding-top: 10px; }
.orc-rapido .cabeca.orc-cabeca { padding: 8px 14px; margin-bottom: 10px; }
.orc-rapido .orc-passos { display: none; }
.orc-rp-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 10px; }
.orc-rp-barra b { font-family: var(--fonte-tit); font-size: 18px; font-weight: 900; }
.orc-rp-barra span { color: var(--tinta2); font-size: 13px; }
.orc-rp-barra .btn { margin-left: auto; }
.orc-rapido .orc-bloco { margin: 0 !important; }
.orc-visual-2.orc-visual-4.orc-rapido .orc-bloco > .cartao-cab { padding: 10px 16px 2px; }
.orc-visual-4.orc-rapido .orc-bloco > .cartao-cab h2 { font-size: 16px; }
.orc-visual-2.orc-rapido .orc-bloco > .cartao-cab[data-etapa]::before { display: none; }
.orc-visual-2.orc-rapido .orc-bloco .cartao-corpo { padding: 0 16px 12px; }
.orc-visual-4.orc-rapido .orc-itens.planilha { padding: 0 16px 10px; }
.orc-rapido .orc-bloco .formulario { gap: 2px 10px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.orc-rapido .orc-bloco .campo { gap: 3px; margin-bottom: 6px; }
.orc-rapido .orc-bloco .campo:has(.cli-doc) { grid-column: span 2; }
.orc-visual-4.orc-rapido .orc-bloco .campo input, .orc-visual-4.orc-rapido .orc-bloco .campo select { min-height: 0; height: 38px; padding-top: 0; padding-bottom: 0; border-radius: 12px; }
.orc-rapido.orc-rp-tudo .orc-bloco .formulario { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.orc-rapido > #orc-itens, .orc-rapido > #orc-venda, .orc-rapido > #orc-lucro-real, .orc-rapido > #orc-resumo { margin-top: 10px; }
.orc-rapido:not(.orc-rp-tudo) .orc-bloco .campo:not(.orc-rp-ess),
.orc-rapido:not(.orc-rp-tudo) #orc-cliente :is(.cli-perfil, .cli-mais, .cli-servico),
.orc-rapido:not(.orc-rp-tudo) #orc-produto :is(.orc-painel, .orc-parecidos),
.orc-rapido:not(.orc-rp-tudo) #orc-condicoes :is(.esp-bloco, .orc-sim, .cond-raros, .campo-suframa),
.orc-rapido:not(.orc-rp-tudo) :is(#orc-itens, #orc-lucro-real),
.orc-rapido:not(.orc-rp-tudo) #orc-resumo :is(.orc-comprov, .orc-totais > li:not(.orc-tot-total):not(.orc-tot-pag)) { display: none; }
.orc-rapido #orc-resumo .orc-totais > li, .orc-rapido #orc-resumo .orc-totais > li:nth-child(even) { padding: 6px 12px; }
.orc-rapido #orc-resumo .orc-totais > li:not(.orc-lucro-det):not(.orc-nf-alternar) { grid-template-columns: minmax(80px, 34%) minmax(0, 1fr); gap: 2px 10px; }
.orc-rapido #orc-resumo .orc-totais > li.orc-tot-total > b { font-size: 24px; }
.orc-rapido #orc-resumo .orc-acoes, .orc-rapido #orc-resumo .orc-acoes-sec { margin-top: 6px; padding-top: 6px; gap: 6px; }
.orc-rapido #orc-resumo .orc-acoes .btn, .orc-rapido #orc-resumo .orc-acoes-sec .btn { min-height: 32px; padding-block: 0; }
/* Layout 11 (três colunas): Cliente | Produto | Condições em pé; o total deitado (o total e o pagamento à esquerda, os botões à direita),
   fixo no pé da tela */
.orc-rp-col3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.orc-rpv-colunas:not(.orc-rp-tudo) .orc-rp-col3 .orc-bloco .formulario { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.orc-rpv-colunas > #orc-resumo { position: sticky; bottom: 8px; z-index: 6; box-shadow: 0 -6px 24px rgba(18, 57, 85, .16); }
.orc-rpv-colunas #orc-resumo .cartao-corpo > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.orc-rpv-colunas #orc-resumo .orc-totais { flex: 1 1 460px; min-width: 0; }
.orc-rpv-colunas #orc-resumo .orc-acoes, .orc-rpv-colunas #orc-resumo .orc-acoes-sec { margin: 0; padding: 0; border: 0; }
.orc-rpv-colunas #orc-resumo > .cartao-cab { display: none; }
.orc-visual-2.orc-rpv-colunas #orc-resumo .cartao-corpo { padding: 12px 16px; }
/* Layout 12 (dados | preço): os campos à esquerda; o resumo grande à direita, fixo ao rolar */
.orc-rp-dp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 32%); gap: 12px; align-items: start; }
.orc-rp-dp-esq { display: grid; gap: 10px; min-width: 0; }
.orc-rp-dp-dir { position: sticky; top: calc(var(--topo-alt, 0px) + 10px); min-width: 0; }
.orc-rpv-dadospreco #orc-resumo .orc-totais > li.orc-tot-total > b { font-size: 32px; }
@media (max-width: 1099px) {
  .orc-rp-col3, .orc-rp-dp { grid-template-columns: minmax(0, 1fr); }
  .orc-rp-dp-dir { position: static; }
}
/* 27/10 (pedido do usuário): os botões dos layouts só com o número, depois da palavra "Layout"; quebram de linha inteiros */
.cabeca.orc-cabeca .orc-cab-modo { display: flex; align-items: center; gap: 8px; }
.orc-cab-modo-rot { color: var(--tinta2); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cabeca.orc-cabeca .orc-cab-modo .segmentos { flex-wrap: wrap; }
.cabeca.orc-cabeca .orc-cab-modo .segmentos button { min-width: 34px; padding-inline: 10px; font-weight: 800; white-space: nowrap; }
/* 27/10 (pedidos do usuário, das ideias de layout): "Comparar pitch" no bloco 2 (em todos os layouts) e os Layouts 15 (sanfona), 17 (três
   passos) e 18 (painel com gavetas); o 16 (fila de leads) e o 18 saíram */
.orc-comparar { margin-top: 12px; border: 1px solid var(--linha); border-radius: 14px; background: var(--sup2); }
.orc-comparar > summary { cursor: pointer; padding: 10px 14px; font-weight: 800; color: var(--azul); }
.orc-comparar[open] > summary { border-bottom: 1px solid var(--linha); }
.orc-comparar-corpo { padding: 10px 14px 12px; }
.orc-comparar-corpo .tabela-rolagem { overflow-x: auto; }
.orc-comparar-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.orc-comparar-tab th, .orc-comparar-tab td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--linha); white-space: nowrap; vertical-align: middle; }
.orc-comparar-tab th { color: var(--tinta2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.orc-comparar-tab .num { text-align: right; }
.orc-comparar-tab td small { display: block; color: var(--muda); font-size: 11.5px; font-weight: 400; white-space: normal; max-width: 260px; }
.orc-comparar-tab tr.atual td { background: color-mix(in srgb, var(--verde) 12%, transparent); }
.orc-comparar-nota { margin: 8px 0 0; font-size: 12.5px; }
/* comum aos Layouts 15, 17 e 18: sem a barra dos 5 passos e sem o "PASSO 2 DE 5" */
:is(.orc-sanfona, .orc-tres) .orc-passos { display: none; }
.orc-visual-2:is(.orc-sanfona, .orc-tres) .orc-bloco > .cartao-cab[data-etapa]::before { display: none; }
.orc-visual-4 .orc-pp-rodape.orc-sf-pe { position: sticky; bottom: 8px; z-index: 20; margin-top: 12px; }
.orc-sf-tot { display: grid; line-height: 1.1; }
.orc-sf-tot small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.orc-sf-total { font-family: var(--fonte-tit); font-size: 26px; font-weight: 900; }
/* Layout 15 (sanfona): só uma seção aberta; as fechadas mostram o que já está preenchido numa linha */
.orc-sanfona .orc-bloco { margin-bottom: 10px; }
.orc-sanfona .orc-bloco > .cartao-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; cursor: pointer; }
.orc-sanfona .orc-bloco > .cartao-cab::after { content: "▾"; order: 2; margin-left: auto; color: var(--tinta2); font-size: 18px; }
.orc-sanfona .orc-bloco.orc-sf-fechado > .cartao-cab::after { content: "Abrir ▸"; font-size: 13px; font-weight: 800; color: var(--azul); }
.orc-sanfona .orc-bloco.orc-sf-fechado > :not(.cartao-cab) { display: none !important; }
.orc-sf-resumo { order: 3; flex: 1 1 100%; min-width: 0; color: var(--tinta2); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orc-sf-resumo.ok::before { content: "✓ "; color: var(--ok); font-weight: 800; }
.orc-sanfona .orc-bloco:not(.orc-sf-fechado) .orc-sf-resumo { display: none; }
.orc-sanfona .orc-bloco.orc-sf-fechado > .cartao-cab:hover { background: color-mix(in srgb, var(--azul) 6%, transparent); }
/* Layout 17 (três passos): Cliente → Produto e condições (lado a lado na tela larga) → Revisar e enviar */
.orc-tres-passos { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.orc-tres-passos button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; border: 2px solid var(--linha);
  background: var(--sup); color: var(--tinta); cursor: pointer; text-align: left; font: inherit; }
.orc-tres-passos .orc-num { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: var(--trilho); color: var(--tinta); }
.orc-tres-txt { display: grid; min-width: 0; }
.orc-tres-txt b { font-size: 15px; }
.orc-tres-txt small { color: var(--muda); font-size: 12px; }
.orc-tres-passos li.feito .orc-num { background: #FFFFFF; color: var(--ok); box-shadow: inset 0 0 0 2px var(--verde); }  /* 30/10 (pedido do usuário): o ✓ em fundo branco */
.orc-tres-passos li.atual button { border-color: var(--azul); box-shadow: 0 4px 14px color-mix(in srgb, var(--azul) 25%, transparent); }
.orc-tres-passos li.atual .orc-num { background: var(--azul); color: #fff; }
.orc-tres-corpo { display: grid; gap: 12px; }
.orc-tres-corpo .orc-bloco { margin: 0 !important; min-width: 0; }
@media (min-width: 1100px) { .orc-tres-corpo[data-grupo="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (max-width: 640px) { .orc-tres-txt small { display: none; } .orc-tres-passos button { padding: 8px; gap: 6px; } }
/* 27/10 (pedido do usuário: "nos Layouts 15 e 17, os botões, textos etc. pequenos"): o desenho compacto, como o dos Layouts 11 e 12 —
   títulos, campos, botões, os passos, o resumo e a barra de baixo menores */
:is(.orc-sanfona, .orc-tres) .cabeca.orc-cabeca { padding: 8px 14px; margin-bottom: 10px; }
.orc-visual-2.orc-visual-4.orc-sanfona .orc-bloco { margin: 0 0 8px; }
.orc-visual-2.orc-visual-4:is(.orc-sanfona, .orc-tres) .orc-bloco, .orc-visual-2.orc-visual-4:is(.orc-sanfona, .orc-tres) .orc-bloco.orc-resumo { border-radius: 16px; }
.orc-visual-2.orc-visual-4:is(.orc-sanfona, .orc-tres) .orc-bloco > .cartao-cab { padding: 10px 16px 4px; }
.orc-visual-2.orc-visual-4.orc-sanfona .orc-bloco.orc-sf-fechado > .cartao-cab { padding-bottom: 10px; }
.orc-visual-2.orc-visual-4:is(.orc-sanfona, .orc-tres) .orc-bloco > .cartao-cab h2 { font-size: 16px; font-weight: 800; }
.orc-visual-2.orc-visual-4:is(.orc-sanfona, .orc-tres) .orc-bloco .cartao-corpo { padding: 0 16px 12px; font-size: 13.5px; }
.orc-visual-2.orc-visual-4:is(.orc-sanfona, .orc-tres) .orc-itens.planilha { padding: 0 16px 10px; }
.orc-visual-2.orc-visual-4:is(.orc-sanfona, .orc-tres) .orc-bloco .formulario { gap: 2px 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.orc-visual-2.orc-visual-4:is(.orc-sanfona, .orc-tres) .orc-bloco .campo { gap: 3px; margin-bottom: 6px; }
.orc-visual-2.orc-visual-4:is(.orc-sanfona, .orc-tres) .orc-bloco .campo label { font-size: 10.5px; }
.orc-visual-2.orc-visual-4:is(.orc-sanfona, .orc-tres) .orc-bloco .campo :is(input, select) { min-height: 0; height: 34px; padding-top: 0; padding-bottom: 0;
  border-radius: 10px; font-size: 13.5px; }
.orc-visual-2.orc-visual-4:is(.orc-sanfona, .orc-tres) .orc-bloco .campo textarea { border-radius: 10px; font-size: 13.5px; }
.orc-visual-2.orc-visual-4:is(.orc-sanfona, .orc-tres) .btn { min-height: 30px; padding: 0 12px; font-size: 13px; }
.orc-visual-2.orc-visual-4:is(.orc-sanfona, .orc-tres) .segmentos button { padding: 4px 10px; font-size: 12.5px; }
.orc-visual-2.orc-visual-4:is(.orc-sanfona, .orc-tres) .orc-sf-resumo { font-size: 12.5px; }
.orc-visual-2.orc-visual-4.orc-sanfona .orc-bloco > .cartao-cab::after { font-size: 14px; }
.orc-visual-2.orc-visual-4.orc-sanfona .orc-bloco.orc-sf-fechado > .cartao-cab::after { font-size: 12px; }
/* o resumo */
:is(.orc-sanfona, .orc-tres) #orc-resumo .orc-totais > li, :is(.orc-sanfona, .orc-tres) #orc-resumo .orc-totais > li:nth-child(even) { padding: 6px 12px; }
:is(.orc-sanfona, .orc-tres) #orc-resumo .orc-totais > li.orc-tot-total > b { font-size: 24px; }
:is(.orc-sanfona, .orc-tres) #orc-resumo .orc-acoes, :is(.orc-sanfona, .orc-tres) #orc-resumo .orc-acoes-sec { margin-top: 6px; padding-top: 6px; gap: 6px; }
/* a barra de baixo */
.orc-visual-4:is(.orc-sanfona, .orc-tres) .orc-pp-rodape.orc-sf-pe { padding-block: 6px; border-radius: 14px; }
.orc-visual-4:is(.orc-sanfona, .orc-tres) .orc-pp-rodape .btn, .orc-visual-4:is(.orc-sanfona, .orc-tres) .orc-pp-rodape .btn.btn-grande,
.orc-visual-4:is(.orc-sanfona, .orc-tres) .orc-pp-rodape .btn.primario { min-height: 32px; padding: 0 14px; font-size: 13.5px; box-shadow: none; }
:is(.orc-sanfona, .orc-tres) .orc-sf-total { font-size: 19px; }
:is(.orc-sanfona, .orc-tres) .orc-sf-tot small { font-size: 10px; }
:is(.orc-sanfona, .orc-tres) .orc-sf-falta .chip { font-size: 11.5px; }
/* os três passos */
.orc-tres .orc-tres-passos { gap: 6px; margin-bottom: 10px; }
.orc-tres .orc-tres-passos button { gap: 8px; padding: 6px 10px; border-radius: 12px; border-width: 1.5px; }
.orc-tres .orc-tres-passos .orc-num { width: 24px; height: 24px; font-size: 12px; }
.orc-tres .orc-tres-txt b { font-size: 13.5px; }
.orc-tres .orc-tres-txt small { font-size: 11px; }
.orc-tres .orc-tres-corpo { gap: 10px; }
/* 27/10 (pedido do usuário: "no Layout 17, os dados do topo usam muito espaço"): os três passos na barra de baixo, entre o Voltar e o
   Avançar, só com o nome */
.orc-tres .orc-sf-pe .orc-tres-passos { flex: 1 1 auto; display: flex; justify-content: center; gap: 4px; margin: 0; min-width: 0; }
.orc-tres .orc-sf-pe .orc-tres-passos li { min-width: 0; }
.orc-visual-4.orc-tres .orc-sf-pe .orc-tres-passos button { min-height: 32px; padding: 0 10px; gap: 6px; border-radius: 999px; border-width: 1.5px; background: transparent;
  box-shadow: none; white-space: nowrap; }
.orc-tres .orc-sf-pe .orc-tres-passos li.atual button { background: color-mix(in srgb, var(--azul) 12%, transparent); }
.orc-tres .orc-sf-pe .orc-tres-passos .orc-num { width: 20px; height: 20px; font-size: 11px; }
.orc-tres .orc-sf-pe .orc-tres-txt small { display: none; }
.orc-tres .orc-sf-pe .orc-tres-txt b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) { .orc-tres .orc-sf-pe .orc-tres-passos { order: -1; flex-basis: 100%; } }
/* 27/10 (pedido do usuário: "no Layout 17, o Voltar, o título, a Versão, o Vendedor, os Layouts e as Cores em 1 linha"): a faixa do topo
   compacta — o título menor, a Versão ao lado dele, o Vendedor estreito, os botões dos layouts sem quebrar e as Cores só com as bolinhas */
.orc-tres .cabeca.orc-cabeca { gap: 8px 12px; padding: 6px 10px; }
.orc-tres .cabeca.orc-cabeca .orc-cab-volta { min-height: 32px; padding: 0 12px; font-size: 13px; }
.orc-tres .orc-cab-tit { gap: 8px; padding-left: 12px; }
.orc-tres .orc-cab-tit h1 { font-size: 17px; }
.orc-tres .orc-cab-tit .sub { padding: 2px 9px; font-size: 11.5px; }
.orc-tres .cabeca.orc-cabeca .orc-versoes { margin: 0; min-width: 0; flex: 0 1 230px; font-size: 12px; }
.orc-tres .cabeca.orc-cabeca .orc-versoes label { flex-wrap: nowrap; white-space: nowrap; }
.orc-tres .cabeca.orc-cabeca .orc-versoes select { min-width: 0; width: 100%; padding: 3px 6px; font-size: 12.5px; text-overflow: ellipsis; }
.orc-tres .cabeca.orc-cabeca .orc-cab-vend { flex: 0 1 220px; padding-left: 12px; }
.orc-tres .cabeca.orc-cabeca .orc-cab-vend .campo { gap: 6px; }
.orc-tres .cabeca.orc-cabeca .orc-cab-vend .campo label { font-size: 10.5px; }
.orc-tres .cabeca.orc-cabeca .orc-cab-vend .campo input { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.orc-tres .cabeca.orc-cabeca .orc-cab-modo { gap: 6px; }
.orc-tres .orc-cab-modo-rot { font-size: 10.5px; }
.orc-tres .cabeca.orc-cabeca .orc-cab-modo .segmentos { flex-wrap: nowrap; }
.orc-tres .cabeca.orc-cabeca .orc-cab-modo .segmentos button { min-width: 28px; padding: 3px 6px; font-size: 12px; }
.orc-tres .orc-paleta > summary { gap: 0; padding: 7px 9px; font-size: 0; }
.orc-tres .cabeca.orc-cabeca > :is(.orc-cab-volta, .orc-cab-tit, .orc-cab-modo, .orc-paleta) { flex-shrink: 0; }
@media (min-width: 1240px) { .orc-tres .cabeca.orc-cabeca { flex-wrap: nowrap; } .orc-tres .cabeca.orc-cabeca > :is(.orc-versoes, .orc-cab-vend) { min-width: 0; } }
/* 27/10 (pedido do usuário: "no Layout 17, a barra no final: seria interessante ter uma cor"): a barra de baixo em azul-marinho, com o
   total em verde, os passos em pílulas claras (o atual em verde) e o Avançar em verde */
.orc-visual-4.orc-tres .orc-pp-rodape.orc-sf-pe { background: var(--marinho); border: 0; color: #fff; box-shadow: 0 -6px 22px rgba(18, 57, 85, .28); }
.orc-tres .orc-sf-pe .orc-sf-tot small { color: rgba(255, 255, 255, .75); opacity: 1; }
.orc-tres .orc-sf-pe .orc-sf-total { color: var(--verde); }
.orc-visual-4.orc-tres .orc-sf-pe .orc-tres-passos button { border-color: rgba(255, 255, 255, .28); color: #fff; }
.orc-visual-4.orc-tres .orc-sf-pe .orc-tres-passos button:hover { border-color: #fff; }
.orc-tres .orc-sf-pe .orc-tres-passos .orc-num { background: rgba(255, 255, 255, .18); color: #fff; }
.orc-tres .orc-sf-pe .orc-tres-passos li.feito .orc-num { background: #FFFFFF; color: var(--ok); box-shadow: none; }
.orc-visual-4.orc-tres .orc-sf-pe .orc-tres-passos li.atual button { background: var(--verde); border-color: var(--verde); color: var(--marinho); }
.orc-tres .orc-sf-pe .orc-tres-passos li.atual .orc-num { background: var(--marinho); color: #fff; }
.orc-visual-4.orc-tres .orc-pp-rodape .btn { border-color: rgba(255, 255, 255, .4); color: #fff; background: transparent; }
.orc-visual-4.orc-tres .orc-pp-rodape .btn:hover:not([disabled]) { border-color: #fff; }
.orc-visual-4.orc-tres .orc-pp-rodape .btn[disabled] { opacity: .45; }
.orc-visual-4.orc-tres .orc-pp-rodape .btn.primario { background: var(--verde); border-color: var(--verde); color: var(--marinho); }
/* 27/10 (pedido do usuário): Layout 12 — a URL (Kommo) na linha do CNPJ e da Razão social, com 2 colunas */
.orc-rpv-dadospreco:not(.orc-rp-tudo) .cli-linha1 .campo-lead-c, .orc-rpv-dadospreco:not(.orc-rp-tudo) .cli-linha1 .campo:has(+ .campo-lead-c) { grid-column: span 2; }  /* e a Razão social */
/* 27/10 (pedido do usuário): o projeto novo começa sem módulos — a mensagem no lugar do desenho */
.pj-vazio { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center; color: var(--tinta2); pointer-events: none; }
.pj-vazio b { font-family: var(--fonte-tit); font-size: 20px; color: var(--tinta); }
.pj-vazio[hidden] { display: none; }  /* 30/10: o display: flex mostrava o aviso por cima do desenho com módulos */
/* 27/10 (pedido do usuário): Layouts 11 e 12 — o "Painel com gabinetes | Peças avulsas" à vista (antes, só em "Mostrar todos os campos").
   Layout 17 — o botão dos atalhos do teclado (⌨) na barra de baixo e a lista */
.orc-visual-4.orc-tres .orc-pp-rodape .btn.orc-tres-tecl { min-width: 0; padding: 0 10px; font-size: 18px; line-height: 1; }
.orc-atalhos { border-collapse: collapse; width: 100%; }
.orc-atalhos td { padding: 6px 8px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.orc-atalhos td:first-child { white-space: nowrap; width: 1%; }
.orc-atalhos kbd { display: inline-block; min-width: 26px; padding: 2px 7px; border: 1px solid var(--linha); border-bottom-width: 3px; border-radius: 6px; background: var(--sup2);
  font-weight: 700; font-size: 12.5px; line-height: 1.4; text-align: center; color: var(--tinta); }
/* 28/10 (pedido do usuário): Tabela de preços › Produtos — a caixinha para selecionar e exportar */
.cartao-produtos .prod-sel { width: 18px; height: 18px; cursor: pointer; accent-color: var(--azul, #0B5FD3); }
/* 29/10 (pedido do usuário): a instalação no campo (técnico e Pós-venda) e os Repasses de instalação (Financeiro) */
.erro-texto { color: var(--perigo); font-size: 12.5px; }
.campo-topo { display: grid; gap: 8px; justify-items: start; margin: 4px 0 10px; }
.campo-topo .nota { margin: 0; }
.campo-meio { display: grid; gap: 12px; margin: 6px 0 12px; }
.campo-bloco { border: 1px solid var(--linha); border-radius: var(--raio-m); padding: 10px 12px; background: var(--sup2); display: grid; gap: 8px; }
.campo-bloco h3, .inst-campo h3, .rep-tit { margin: 0; font-size: 14px; font-weight: 700; color: var(--tinta); }
.inst-campo h3, .rep-tit { margin-top: 12px; }
.inst-campo h3:first-child { margin-top: 0; }
.custos-lista, .oc-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.custo-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--linha); border-radius: var(--raio-p); background: var(--sup); }
.custo-item .custo-info { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.custo-item .acoes-linha { margin-left: auto; }
.oc-lista li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 10px;
  border-left: 4px solid var(--alerta); border-radius: var(--raio-p); background: var(--alerta-sup); overflow-wrap: anywhere; }
.oc-lista li > div { flex: 1 1 220px; min-width: 0; }
.oc-lista li.resolvida { border-left-color: var(--ok); background: var(--sup); }
.campo-repasse { font-size: 14px; font-weight: 600; margin: 4px 0 0; }
.custo-ia { display: flex; align-items: center; gap: 6px; }
.inst-sit { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.inst-etapas .formulario, .inst-campo-sec .inst-campo { margin-top: 8px; }
.etapa-info b { color: var(--tinta); }
.rep-dlg .dialogo-corpo { display: grid; gap: 10px; }
.rep-tabela { width: 100%; max-width: 520px; border-collapse: collapse; font-size: 13.5px; }
.rep-tabela th { text-align: left; font-weight: 500; color: var(--tinta2); padding: 4px 8px 4px 0; }
.rep-tabela td { text-align: right; padding: 4px 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-tabela tr.forte th, .rep-tabela tr.forte td { font-weight: 700; color: var(--tinta); border-top: 1px solid var(--linha); }
.rep-tabela tr.parte th { padding-left: 14px; }
.rep-tecs { display: grid; gap: 6px; }
.rep-tec { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rep-tec input:first-child { flex: 1 1 180px; min-width: 0; }
.rep-tec input[type=number] { width: 86px; }
.rep-tec input { padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio-p); background: var(--sup2); color: var(--tinta); font: inherit; }
.rep-tecs .acoes-linha { justify-content: flex-start; }
.rep-pagar { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* 30/10: a foto do produto com IA (material, internet, melhorar, criar) e a legenda "Imagem ilustrativa" — na página, nunca dentro da foto */
.foto-ia-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin: 6px 0; }
.foto-ia-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; border: 2px solid var(--linha); border-radius: var(--raio-p); background: #fff; cursor: pointer; }
.foto-ia-item img { width: 100%; height: 112px; object-fit: contain; }
.foto-ia-item small { font-size: 11px; color: var(--muda); }
.foto-ia-item[aria-pressed="true"] { border-color: var(--azul); box-shadow: 0 0 0 2px var(--azul); }
.foto-ia-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.foto-ia-ilustr { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.foto-legenda { margin: 0; }
.foto-legenda figcaption { font-size: 11px; color: var(--muda); text-align: center; margin-top: 3px; }
figure.cat-foto-grande img { width: 100%; height: auto; display: block; }
.ficha-legenda, .orc-legenda { flex: none; }

/* 30/10: o Fiscal (o Sistema Luana convertido) */
.selo { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--sup3); color: var(--tinta2); white-space: nowrap; }
.selo-alerta { background: var(--alerta-sup); color: var(--alerta); }
.selo-perigo { background: var(--perigo-sup); color: var(--perigo); }
.aviso-texto { color: var(--alerta); }
.fis-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.fis-nums { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 8px; }
.fis-num { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 112px; padding: 8px 12px; border: 1px solid var(--borda);
  border-radius: 10px; background: var(--sup2); color: var(--tinta2); font: inherit; font-size: 12px; text-align: left; }
button.fis-num { cursor: pointer; }
button.fis-num:hover { border-color: var(--info); }
.fis-num b { font-size: 20px; color: var(--tinta); }
.fis-num.alerta b { color: var(--alerta); }
.fis-nums.pequenos .fis-num { min-width: 96px; padding: 6px 10px; }
.fis-nums.pequenos .fis-num b { font-size: 16px; }
.fis-filtros { flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.fis-filtros input[type=search] { min-width: 220px; }
.fis-mes { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta2); }
.fis-acoes { justify-content: flex-start; flex-wrap: wrap; margin: 4px 0 12px; }
.fis-massa { justify-content: flex-start; flex-wrap: wrap; margin: -4px 0 12px; }
.fis-comp.fechada { border-color: var(--ok); }
.fis-dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; margin: 4px 0 12px; }
.fis-dado small { display: block; color: var(--muda); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.fis-dado div { overflow-wrap: anywhere; }
.fis-avisos { margin: 6px 0 12px; padding-left: 18px; color: var(--alerta); }
.fis-sug { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 10px; }
.fis-sug small { color: var(--muda); }
.fis-bloco { border: 1px solid var(--borda); border-radius: 12px; padding: 10px 14px; margin: 10px 0 14px; background: var(--sup2); }
.fis-bloco h3 { margin: 0 0 6px; font-size: 15px; }
.fis-nota .aviso { color: var(--alerta); margin: 4px 0 8px; }
/* 30/10 (pedido do usuário: "mais nítido"): os números, os dados e os blocos do Fiscal no desenho nítido */
.nitido .fis-num { border-color: var(--borda-nitida); color: var(--tinta2); font-weight: 600; background: var(--sup); }
.nitido .fis-num b { color: var(--tinta); font-weight: 800; }
.nitido .fis-num.alerta { border-color: color-mix(in srgb, var(--alerta) 45%, var(--borda-nitida)); background: var(--alerta-sup); }
.nitido .fis-num.alerta b { color: var(--alerta); }
.nitido .fis-dado small { color: var(--tinta2); font-weight: 700; }
.nitido .fis-dado div { color: var(--tinta); }
.nitido .fis-bloco { border-color: var(--borda-nitida); background: var(--sup); }
.nitido .fis-bloco h3, .nitido.fis-nota h3, .nitido.fis-imp h3 { color: var(--tinta); font-weight: 800; }
.nitido .fis-sug small { color: var(--tinta2); }
.nitido .selo { background: color-mix(in srgb, var(--azul) 10%, var(--sup)); color: var(--tinta); font-weight: 700; }
.nitido .selo-alerta { background: var(--alerta-sup); color: var(--alerta); }
.nitido .selo-perigo { background: var(--perigo-sup); color: var(--perigo); }
.nitido .fis-avisos { color: var(--alerta); font-weight: 600; }