/* CASCO — base — GERADO por ferramentas/gerar-casco.js a partir do lab (não editar à mão) */
html[data-tema] :is(.k-trilho,.k-topo,.k-barra-cel,.k-mais,.k-fundo,.k-visao,.k-entrar,.k-vitrine){--fonte: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fonte-tit: var(--fonte);
  --fonte-num: var(--fonte-tit);
  --peso-tit: 700;
  --bg: #f4f4f6; --fundo: var(--bg);
  --sup: #fff; --sup-2: #f7f7f9; --sup-borda: var(--borda); --sup-sombra: 0 1px 3px rgba(16,16,18,.08); --sup-blur: none;
  --dest-bg: var(--acc); --dest-txt: #fff; --dest-sub: rgba(255,255,255,.75);
  --txt: #16161a; --txt-2: #54545e; --txt-3: #8e8e99;
  --borda: #e2e2e7; --borda-forte: #c9c9d1;
  --acc: #d50d1c; --acc-txt: #fff;
  --acc-suave: color-mix(in srgb, var(--acc) 13%, transparent);
  
  --acc-texto: var(--acc);
  --ok-texto: color-mix(in oklab, var(--ok), var(--txt) 45%); --perigo-texto: color-mix(in oklab, var(--perigo), var(--txt) 42%); --alerta-texto: color-mix(in oklab, var(--alerta), var(--txt) 52%);
  --ok: #137a33; --ok-suave: color-mix(in srgb, var(--ok) 14%, transparent);
  --alerta: #b45309; --alerta-suave: color-mix(in srgb, var(--alerta) 16%, transparent);
  --perigo: #c8102e; --perigo-suave: color-mix(in srgb, var(--perigo) 14%, transparent);
  --raio: 12px; --raio-s: 8px; --raio-btn: 8px;
  --topo-bg: var(--sup); --topo-txt: var(--txt); --topo-txt-2: var(--txt-2); --topo-borda: var(--borda);
  --nav-on-bg: var(--acc); --nav-on-txt: var(--acc-txt);
  --chip-bg: var(--sup-2);
  --campo-bg: var(--sup);
  --st-novo: #e8a33d; --st-preparo: #e2683c; --st-pronto: #1f9d63; --st-entregue: #8e8e99;
  --st-cartao: var(--sup); --st-cartao-txt: var(--txt);
  --g1: var(--acc); --g2: #2f6fdb; --g3: #e8a33d; --g4: #1f9d63;
  --cat-0: #c69a6d; --cat-1: #e3b04b; --cat-2: #e58b8b; --cat-3: #6fb3d6; --cat-4: #86b97a;
  --gap: 16px; --pad: 20px;
  --ease: cubic-bezier(.22,1,.36,1);
  color-scheme: light;}
html[data-tema][data-modo="escuro"] :is(.k-trilho,.k-topo,.k-barra-cel,.k-mais,.k-fundo,.k-visao,.k-entrar,.k-vitrine){color-scheme: dark;}
.k-fundo{position: fixed; inset: 0; z-index: -1; background: var(--fundo); pointer-events: none;}
.k-ic{width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none;}
.k-topo{position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px; padding: 12px 24px;
  background: var(--topo-bg); color: var(--topo-txt); border-bottom: 1px solid var(--topo-borda);}
.k-marca{display: flex; align-items: center; gap: 10px; flex: none;}
.k-marca b{display: block; font-family: var(--fonte-tit); font-size: 15px; letter-spacing: -.01em;}
.k-marca small{display: block; font-size: 11.5px; color: var(--topo-txt-2); margin-top: -2px;}
.k-logo{width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--acc); color: var(--acc-txt);
  font-family: var(--fonte-tit); font-weight: 800; font-size: 16px; flex: none;}
.k-abas{display: flex; gap: 4px; align-items: center;}
.k-abas a{position: relative; display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; color: var(--topo-txt-2);
  font-weight: 600; font-size: 14px; transition: background .2s, color .2s; white-space: nowrap;}
.k-abas a:hover{color: var(--topo-txt);}
.k-abas a.atual{background: var(--nav-on-bg); color: var(--nav-on-txt);}
.k-abas em,.k-trilho-nav em,.k-barra-cel em{font-style: normal; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  display: inline-grid; place-items: center; background: var(--acc); color: var(--acc-txt);}
.k-abas em.alerta,.k-trilho-nav em.alerta{background: var(--alerta); color: #fff;}
.k-abas a.atual em{background: var(--nav-on-txt); color: var(--nav-on-bg);}
.k-acoes{margin-left: auto; display: flex; align-items: center; gap: 8px;}
.k-ao-vivo{display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 99px; background: var(--chip-bg);
  border: 1px solid var(--borda); font-size: 13px; color: var(--topo-txt-2); white-space: nowrap;}
.k-ao-vivo b{color: var(--topo-txt); font-family: var(--fonte-num);}
.k-ao-vivo i,.k-visao .ponto-vivo{position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; display: inline-block;}
.k-ao-vivo i::after,.k-visao .ponto-vivo::after{content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: respira 2.2s ease-out infinite; will-change: transform, opacity;}
.k-busca{display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 99px; background: var(--campo-bg);
  border: 1px solid var(--borda); color: var(--txt-3); min-width: 0;}
.k-busca svg{width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; flex: none;}
.k-busca input{border: 0; background: none; outline: none; font: inherit; font-size: 13.5px; color: var(--txt); width: 210px; min-width: 0;}
.k-busca kbd{white-space: nowrap; font: 600 10.5px var(--fonte); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--borda); color: var(--txt-3);}
.k-icone-btn{position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--borda); background: var(--sup);
  display: grid; place-items: center; cursor: pointer; color: var(--txt-2); transition: transform .15s, background .2s; flex: none;}
.k-icone-btn:hover{color: var(--txt); transform: translateY(-1px);}
.k-icone-btn svg{width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;}
.k-sino em{position: absolute; top: -3px; right: -3px; font-style: normal; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 99px;
  background: var(--perigo); color: #fff; display: grid; place-items: center; border: 2px solid var(--topo-bg);}
.k-avatar{width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: linear-gradient(135deg, var(--cat-0), var(--cat-2)); color: #fff; flex: none;}
.k-trilho{display: none;}
.k-trilho-nav a{position: relative; display: flex; align-items: center; gap: 12px;}
.k-trilho-nav .k-rotulo{white-space: nowrap;}
body.k-casco>main{max-width: 1320px; margin: 0 auto; padding: 26px 24px 120px; outline: none;}
.k-visao .cabeca-tela{display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px;}
.k-visao .cabeca-tela h1{font-size: 34px;}
.k-visao .sobretitulo{display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-3); margin-bottom: 4px;}
.k-visao .cabeca-tela .sub{color: var(--txt-2); margin: 6px 0 0; max-width: 560px;}
.k-visao .cabeca-acoes{display: flex; gap: 10px; align-items: center; flex-wrap: wrap;}
.k-visao .bento{display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap);}
.k-visao .s3{grid-column: span 3;}
.k-visao .s4{grid-column: span 4;}
.k-visao .s8{grid-column: span 8;}
.k-visao .s12{grid-column: span 12;}
.k-visao .card{background: var(--sup); border: 1px solid var(--sup-borda); border-radius: var(--raio); padding: var(--pad); box-shadow: var(--sup-sombra);
  -webkit-backdrop-filter: var(--sup-blur); backdrop-filter: var(--sup-blur); min-width: 0; position: relative;}
.k-visao .card-topo{display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px;}
.k-visao .card-topo h3{font-size: 16.5px;}
.k-visao .sub{color: var(--txt-3); font-size: 13px; margin: 3px 0 0;}
.k-visao .sub b{color: var(--txt); font-family: var(--fonte-num);}
.k-visao .btn{display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: var(--raio-btn);
  border: 1px solid var(--borda-forte); background: var(--sup); color: var(--txt); font-weight: 600; font-size: 14px; cursor: pointer;
  transition: transform .15s var(--ease), background .2s, box-shadow .2s; white-space: nowrap;}
.k-visao .btn:hover{transform: translateY(-1px);}
.k-visao .btn:active{transform: translateY(0) scale(.98);}
.k-visao .btn.primario{box-shadow: 0 6px 18px -8px var(--acc);background:linear-gradient(100deg,var(--vermelho),var(--vermelho-esc,var(--vermelho)));color:var(--sobre-primaria,#fff);border-color:transparent}
.k-visao .chip{display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 12px; font-weight: 700;
  background: var(--chip-bg); color: var(--txt-2); white-space: nowrap;}
.chip .k-ic{width: 13px; height: 13px;}
.k-visao .btn svg{width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none;}
.k-visao .chip.sobe{background: var(--ok-suave); color: var(--ok-texto);}
.k-visao .chip.desce{background: var(--perigo-suave); color: var(--perigo-texto);}
.k-visao .txt-alerta{color: var(--perigo); font-weight: 600;}
.k-visao .hero{display: flex; flex-direction: column; gap: 12px; overflow: hidden;}
.k-visao .chip.data{align-self: flex-start; height: 28px; padding: 0 12px; gap: 8px; text-transform: capitalize; font-weight: 600;}
.k-visao .saudacao{font-size: 32px; letter-spacing: -.03em;}
.k-visao .frase{margin: 0; color: var(--txt-2); font-size: 15.5px; max-width: 640px;}
.k-visao .frase b{color: var(--txt);}
.k-visao .hero-acoes{display: flex; gap: 10px; flex-wrap: wrap;}
.k-trilho-dia{position: absolute; left: 0; right: 0; top: 18px; height: 3px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--borda-forte) 0 4px, transparent 4px 8px);}
.k-trilho-dia .feito{display: block; height: 100%; border-radius: 3px; background: var(--acc);}
.k-visao .pendencias ul{list-style: none; margin: 0; padding: 0;}
.k-visao .pendencias li a{display: flex; align-items: center; gap: 11px; padding: 9px 8px; margin: 0 -8px; border-radius: 10px; font-size: 14px; transition: background .15s;}
.k-visao .pendencias li a:hover{background: var(--chip-bg);}
.pendencias li .k-ic{color: var(--txt-3);}
.k-visao .pendencias li em{margin-left: auto; font-style: normal; font-weight: 700; font-size: 13px; font-family: var(--fonte-num); color: var(--txt);}
.k-visao .contador{font-family: var(--fonte-num); font-weight: 800; font-size: 13px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 99px;
  display: grid; place-items: center; background: var(--acc-suave); color: var(--acc);}
.k-visao .kpi{display: flex; flex-direction: column; gap: 10px;}
.k-visao .kpi-topo{display: flex; justify-content: space-between; align-items: center;}
.k-visao .kpi-rotulo{font-size: 13.5px; color: var(--txt-2); font-weight: 600;}
.k-visao .kpi-ic{width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--chip-bg); color: var(--txt-2);}
.k-visao .kpi-meio{display: flex; justify-content: space-between; align-items: flex-end; gap: 10px;}
.k-visao .kpi-valor{display: block; font-family: var(--fonte-num); font-size: 29px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap;}
.k-visao .kpi-delta{display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--txt-3);}
.k-visao .kpi-graf{width: 92px; flex: none;}
.k-visao .kpi-link{font-size: 13px; color: var(--txt-2); font-weight: 600; border-top: 1px solid var(--borda); padding-top: 10px; margin-top: auto;}
.k-visao .kpi-link:hover{color: var(--acc);}
.k-visao .kpi.destaque{background: var(--dest-bg); color: var(--dest-txt); border-color: transparent;}
.k-visao .kpi.destaque .kpi-rotulo,.k-visao .kpi.destaque .kpi-delta,.k-visao .kpi.destaque .kpi-link{color: var(--dest-sub);}
.k-visao .kpi.destaque .kpi-link{border-color: color-mix(in srgb, var(--dest-txt) 16%, transparent);}
.k-visao .kpi.destaque .kpi-ic{background: color-mix(in srgb, var(--dest-txt) 14%, transparent); color: var(--dest-txt);}
.k-visao .kpi.destaque .chip.sobe{background: color-mix(in srgb, var(--dest-txt) 16%, transparent); color: var(--dest-txt);}
.k-visao .spark{width: 100%; height: 40px; display: block; overflow: visible;}
.k-visao .spark.linha .traco{fill: none; stroke: var(--acc); stroke-width: 2.2; vector-effect: non-scaling-stroke;}
.k-visao .spark.linha .area{fill: var(--acc-suave);}
.k-visao .spark.linha circle{fill: var(--acc);}
.k-visao .spark.barras rect,.k-visao .spark.codigo rect{fill: color-mix(in srgb, currentColor 22%, transparent);}
.k-visao .spark.barras rect.ult,.k-visao .spark.codigo rect.ult{fill: currentColor;}
.k-visao .kpi .spark.barras,.k-visao .kpi .spark.codigo{color: var(--acc);}
.k-visao .kpi.destaque .spark{color: var(--dest-txt);}
.k-visao .anel{width: 52px; height: 52px; display: block; margin-left: auto;}
.k-visao .anel .trilha{fill: none; stroke: var(--borda); stroke-width: 5;}
.k-visao .anel .valor{fill: none; stroke: var(--acc); stroke-width: 5; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 24px 24px; animation: anel 1.1s var(--ease) both;}
.k-visao .anel text{font: 700 10px var(--fonte-num); fill: var(--txt);}
.k-visao .grande .card-topo .sub b{font-size: 22px; letter-spacing: -.02em;}
.k-visao .legenda{display: flex; gap: 14px; font-size: 12.5px; color: var(--txt-3); flex-wrap: wrap;}
.k-visao .legenda span{display: inline-flex; align-items: center; gap: 6px;}
.k-visao .leg{display: inline-block; width: 16px; height: 0; border-top: 2.5px solid var(--acc);}
.k-visao .leg.anterior{border-top: 2px dashed var(--txt-3);}
.k-visao .grafico-area{position: relative;}
.k-visao .grafico-area svg{width: 100%; height: 230px; display: block; overflow: visible;}
.k-visao .grafico-area .grade{stroke: var(--borda); stroke-dasharray: 3 5;}
.k-visao .grafico-area .eixo{font: 11px var(--fonte); fill: var(--txt-3);}
.k-visao .grafico-area .g0{stop-color: var(--acc); stop-opacity: .28;}
.k-visao .grafico-area .g1{stop-color: var(--acc); stop-opacity: 0;}
.k-visao .grafico-area .atual{fill: none; stroke: var(--acc); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: desenha 1.4s .2s var(--ease) forwards;}
.k-visao .grafico-area .anterior{fill: none; stroke: var(--txt-3); stroke-width: 1.6; stroke-dasharray: 5 6; opacity: .8;}
.k-visao .grafico-area .area{opacity: 0; animation: aparece .8s .7s forwards;}
.k-visao .grafico-area .cursor{stroke: var(--txt-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0;}
.k-visao .grafico-area .ponto{fill: var(--sup); stroke: var(--acc); stroke-width: 3; opacity: 0;}
.k-visao .grafico-area .alvo{fill: transparent; cursor: crosshair;}
.k-visao .dica-grafico{position: absolute; top: 4px; width: 170px; padding: 10px 12px; border-radius: 12px; background: #121214; color: #fff; font-size: 12.5px;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); pointer-events: none; display: grid; gap: 3px; z-index: 5;}
.k-visao .dica-grafico[hidden]{display: none;}
.k-visao .dica-grafico span{display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.7);}
.k-visao .dica-grafico em{margin-left: auto; font-style: normal; color: #fff; font-weight: 700;}
.k-visao .dica-grafico small{font-weight: 700;}
.k-visao .dica-grafico .sobe{color: #4ade80;}
.k-visao .dica-grafico .desce{color: #fb7185;}
.k-visao .dica-grafico .leg{width: 10px;}
.k-visao .medidor-caixa{position: relative; max-width: 260px; margin: 0 auto;}
.k-visao .medidor{width: 100%; display: block;}
.k-visao .medidor line{stroke: var(--borda-forte); stroke-width: 3.2; stroke-linecap: round; transition: stroke .3s;}
.k-visao .medidor line.on{stroke: var(--acc); animation: tick .5s calc(var(--i) * 18ms) var(--ease) both;}
.k-visao .medidor .cabeca{fill: var(--sup); stroke: var(--acc); stroke-width: 4;}
.k-visao .medidor-num{position: absolute; left: 0; right: 0; bottom: 4px; text-align: center;}
.k-visao .medidor-num strong{display: block; font-family: var(--fonte-num); font-size: 34px; letter-spacing: -.03em; line-height: 1;}
.k-visao .medidor-num span{font-size: 12.5px; color: var(--txt-3);}
.k-visao .meta-frase{margin: 12px 0 0; font-size: 13.5px; color: var(--txt-2); text-align: center;}
.k-visao .meta-frase b{color: var(--txt);}
.k-visao .horas{display: flex; gap: 6px; height: 150px; align-items: stretch;}
.k-visao .horas .col{flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;}
.k-visao .horas .col span{display: block; border-radius: 999px; background: color-mix(in srgb, var(--acc) 30%, transparent); transition: height .8s var(--ease); min-height: 8px;}
.k-visao .horas .col.agora span{background: var(--acc);}
.k-visao .horas .col.fut span{background: repeating-linear-gradient(-45deg, var(--borda) 0 3px, transparent 3px 7px); border: 1px dashed var(--borda-forte);}
.k-visao .horas em{font-style: normal; font-size: 10.5px; color: var(--txt-3); text-align: center;}
.assist-marca .k-ic{width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--pinta-ic, var(--acc)); color: var(--pinta-ic-txt, var(--acc-txt)); fill: currentColor; stroke: none;}
.assist-pe .k-icone-btn{background: color-mix(in srgb, currentColor 7%, transparent); border-color: transparent; color: inherit;}
.assist-mic .k-ic{width: 20px; height: 20px;}
.k-visao .saudacao em{font-style: normal;}
.fluxo-lista li.k-novo{animation: chega-linha .5s var(--suave, var(--ease));}
.k-busca.campo{min-width: 240px;}
.k-busca.campo input{width: 100%;}
.k-busca.campo .k-ic{width: 16px; height: 16px;}
.pedido.k-arrastando{opacity: .45; transform: rotate(-2deg) scale(.98);}
.pedido h4 .k-ic{opacity: .7;}
.pago .k-ic{width: 14px; height: 14px;}
.foto .k-ic.grande{width: 58px; height: 58px; stroke-width: 1.4; filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); transition: transform .4s var(--ease);}
.produto:hover .foto .k-ic.grande{transform: scale(1.08) rotate(-4deg);}
.k-barra-cel{display: none;}
.k-visao .entra{animation: entra .55s calc(var(--i, 0) * 45ms) var(--ease) both;}
@media (prefers-reduced-motion: reduce){.k-visao .grafico-area .atual{stroke-dashoffset: 0;}
.k-visao .grafico-area .area{opacity: 1;}
}
@media (max-width: 1180px){.k-visao .s3{grid-column: span 6;}
.k-visao .s4{grid-column: span 6;}
.k-visao .s8{grid-column: span 12;}
.k-busca:not(.campo){display: none;}
}
@media (max-width: 860px){.k-topo{padding: 10px 16px; gap: 10px; flex-wrap: wrap;}
.k-abas{order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; margin: 2px -16px 0; padding: 0 16px;}
.k-abas::-webkit-scrollbar{display: none;}
.k-so-largo,.k-acoes .k-novo span,.k-ao-vivo{display: none;}
.k-acoes .k-novo{width: 38px; padding: 0; border-radius: 50%;}
body.k-casco>main{padding: 18px 16px 120px;}
.k-visao .cabeca-tela h1{font-size: 28px;}
.k-visao .saudacao{font-size: 26px;}
.k-visao .s3,.k-visao .s4,.k-visao .s8,.k-visao .s12{grid-column: span 12;}
.k-barra-cel{display: flex; position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 40; justify-content: space-around;
    padding: 8px; border-radius: 22px; background: var(--topo-bg); border: 1px solid var(--topo-borda); box-shadow: 0 16px 40px -16px rgba(0,0,0,.45);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);}
.k-barra-cel a{position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; border-radius: 16px; font-size: 11px; font-weight: 600; color: var(--topo-txt-2);}
.k-barra-cel a .k-ic{width: 21px; height: 21px;}
.k-barra-cel a.atual{color: var(--nav-on-txt); background: var(--nav-on-bg);}
.k-barra-cel em{position: absolute; top: 0; right: 4px; font-size: 10px; min-width: 16px; height: 16px;}
}
@media (max-width: 520px){.k-visao .kpi-valor{font-size: 26px;}
}
@media (max-width: 1600px){.k-topo .k-busca:not(.campo){padding: 0 11px;}
.k-topo .k-busca:not(.campo) input{width: 0; transition: width .3s var(--ease);}
.k-topo .k-busca:not(.campo):focus-within input{width: 200px;}
.k-topo .k-busca:not(.campo) kbd,.k-ao-vivo .k-so-largo{display: none;}
}
@keyframes respira{ 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(3); opacity: 0; } }
@keyframes anel{ from { stroke-dashoffset: var(--c); } }
@keyframes desenha{ to { stroke-dashoffset: 0; } }
@keyframes aparece{ to { opacity: 1; } }
@keyframes tick{ from { stroke: var(--borda-forte); } }
@keyframes chega-linha{ from { opacity: 0; transform: translateX(-14px) scale(.97); filter: blur(4px); } }
@keyframes entra{ from { opacity: 0; transform: translateY(14px); } }
/* CASCO — movimento — GERADO por ferramentas/gerar-casco.js a partir do lab (não editar à mão) */
html[data-tema] :is(.k-trilho,.k-topo,.k-barra-cel,.k-mais,.k-fundo,.k-visao,.k-entrar,.k-vitrine){--rapido: 180ms; --medio: 300ms;
  --saida: cubic-bezier(.2, .8, .2, 1);      
  --suave: cubic-bezier(.22, 1, .36, 1);     
  --mola: cubic-bezier(.34, 1.25, .64, 1);}
.k-tem-pilula{position: relative; isolation: isolate;}
.k-tem-pilula > :not(.k-pilula):not(.k-pilula-hover){position: relative; z-index: 1;}
.k-tem-pilula > .atual,.k-tem-pilula > .on{background: transparent !important; box-shadow: none !important; border-color: transparent !important;}
.k-pilula,.k-pilula-hover{position: absolute; z-index: 0; border-radius: 999px; pointer-events: none;}
.k-pilula{background: var(--nav-on-bg); opacity: 0; transition: opacity .2s;}
.k-pilula.pronta{opacity: 1;}
.k-pilula-hover{background: var(--pilula-hover, color-mix(in srgb, var(--txt) 7%, transparent)); opacity: 0;
  transition: left .28s var(--suave), right .28s var(--suave), top .28s var(--suave), bottom .28s var(--suave), opacity .2s;}
.k-pilula-hover.on{opacity: 1;}
.seg .k-pilula{background: var(--sup); box-shadow: 0 1px 4px rgba(0,0,0,.14);}
.k-trilho-nav .k-pilula{background: var(--trilho-on-bg, var(--nav-on-bg)); border-radius: var(--trilho-on-raio, 999px); box-shadow: var(--trilho-on-sombra, none);}
.k-trilho-nav .k-pilula-hover{border-radius: var(--trilho-on-raio, 999px);}
.barra-filtros.k-tem-pilula > .filtro:not(.on){background: transparent;}
.k-topo .k-pilula-hover{background: var(--pilula-hover-topo, var(--pilula-hover, color-mix(in srgb, var(--topo-txt) 8%, transparent)));}
.k-abas a,.k-trilho-nav a{transition: color var(--rapido) var(--saida) .06s, transform var(--rapido) var(--saida);}
.k-abas a:active,.k-trilho-nav a:active{transform: scale(.94);}
.k-visao .btn,.k-icone-btn{position: relative; overflow: hidden;}
.k-visao .btn{transition: transform var(--medio) var(--mola), background var(--rapido) var(--saida), box-shadow var(--rapido) var(--saida), border-color var(--rapido) var(--saida);}
.k-visao .btn:hover{transform: translateY(-2px);}
.k-visao .btn:active{transform: translateY(0) scale(.96); transition-duration: 90ms;}
.k-visao .btn.primario:hover{box-shadow: 0 12px 26px -10px var(--acc);}
.k-visao .btn.primario::after{content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform: translateX(-110%); pointer-events: none;}
.k-visao .btn.primario:hover::after{transform: translateX(110%); transition: transform .75s var(--suave);}
.k-onda{position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .22; transform: scale(0); animation: onda .6s var(--suave) forwards;}
.k-icone-btn{transition: transform var(--medio) var(--mola), background var(--rapido) var(--saida), color var(--rapido) var(--saida);}
.k-icone-btn:active{transform: scale(.88);}
.k-sino:hover svg{animation: balanca .7s var(--suave); transform-origin: 50% 10%;}
.k-visao .btn:hover svg use[href="#i-mais"],.k-novo:hover svg{transition: transform .4s var(--mola);}
.k-novo:hover svg{transform: rotate(90deg);}
.k-visao .btn svg,.btn .k-ic{transition: transform .35s var(--mola);}
.btn:hover .k-ic{transform: translateX(1px) scale(1.08);}
.k-alterna-modo svg{transition: transform .6s var(--mola);}
.k-alterna-modo:hover svg{transform: rotate(40deg);}
.k-visao .kpi,.k-visao .card.pendencias li a{transition: transform var(--medio) var(--suave), box-shadow var(--medio) var(--suave);}
.k-visao .kpi:hover{transform: translateY(-3px); box-shadow: 0 22px 40px -26px rgba(0,0,0,.45);}
.k-visao .kpi:hover .spark.linha .traco{stroke-dasharray: 300; animation: redesenha .9s var(--suave);}
.k-visao .pendencias li a:hover em{transform: scale(1.15);}
.k-visao .pendencias li em{transition: transform .3s var(--mola);}
.k-visao .contador,.k-abas em,.k-trilho-nav em{transition: transform .3s var(--mola);}
@media (max-width: 860px){.k-barra-cel{background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    isolation: isolate; overflow: visible; padding: 10px 8px 8px; transition: --nx .5s var(--suave);}
.k-barra-cel::before{content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--barra-bg, var(--topo-bg));
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: inset 0 0 0 1px var(--barra-borda, color-mix(in srgb, var(--txt) 10%, transparent));
    -webkit-mask: radial-gradient(circle 34px at var(--nx) 0, transparent 33px, #000 34px); mask: radial-gradient(circle 34px at var(--nx) 0, transparent 33px, #000 34px);}
.k-barra-cel::after{content: ""; position: absolute; left: -20px; right: -20px; top: -10px; bottom: -40px; z-index: -2; pointer-events: none;
    background: radial-gradient(140px 70px at calc(var(--nx) + 20px) 100%, color-mix(in srgb, var(--acc) 38%, transparent), transparent 70%); filter: blur(8px);}
.k-barra-cel .k-conta{position: absolute; top: -24px; left: var(--nx); translate: -50% 0; width: 54px; height: 54px; border-radius: 50%; z-index: 0;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--acc) 70%, #fff), var(--acc) 60%);
    box-shadow: 0 10px 22px -8px var(--acc), inset 0 -5px 10px rgba(0,0,0,.14); transition: background .45s;}
.k-barra-cel .k-conta.pulando{animation: pulo .5s var(--suave);}
.k-barra-cel.k-liquida{transition: none; padding-left: 16px; padding-right: 16px;}
.k-barra-cel.k-liquida::before{-webkit-mask: none; mask: none; clip-path: var(--forma); box-shadow: none;}
.k-barra-cel .k-fio{position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0;}
.k-barra-cel .k-fio path{fill: none; stroke: color-mix(in srgb, var(--topo-txt, #fff) 16%, transparent); stroke-width: 1;}
.k-barra-cel.k-liquida .k-conta{cursor: grab; touch-action: none; transform: scale(var(--estica, 1), var(--achata, 1)); transition: background .45s, box-shadow .3s;}
.k-barra-cel.k-liquida.k-arrastando .k-conta{cursor: grabbing; box-shadow: 0 16px 30px -8px var(--acc), inset 0 -5px 10px rgba(0,0,0,.14);}
.k-barra-cel.k-liquida.k-arrastando a .k-ic{transition-duration: .2s;}
.k-barra-cel a{z-index: 1; background: transparent !important; color: var(--topo-txt-2) !important; transition: color .3s;}
.k-barra-cel a .k-ic{transition: translate .5s var(--mola), color .3s;}
.k-barra-cel a span{opacity: .75; transition: opacity .3s, translate .4s var(--mola);}
.k-barra-cel a.atual .k-ic{translate: 0 -27px; color: var(--acc-txt);}
.k-barra-cel a.atual span{opacity: 1; color: var(--acc-texto); font-weight: 700; translate: 0 -6px;}
.k-barra-cel a.atual em{opacity: 0;}
.k-barra-cel a:active .k-ic{scale: .85;}
}
@media (prefers-reduced-motion: reduce){.k-pilula,.k-pilula-hover,.k-barra-cel,.k-barra-cel .k-conta{transition: none !important; animation: none !important;}
}
.k-recolher-menu{display: none;}
@media (min-width: 1181px){html.menu-largo:not(.tela-cheia) .k-recolher-menu{display: grid; place-items: center; position: fixed; z-index: 40; width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--borda-forte); background: var(--sup); color: var(--txt); box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); transition: transform .2s var(--mola-real, ease);}
.k-recolher-menu:hover{transform: scale(1.12);}
.k-recolher-menu svg{width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .46s var(--mola-real, ease);}
html.menu-recolhido .k-recolher-menu svg{transform: rotate(180deg);}
html.menu-largo .k-trilho{transition: width .46s cubic-bezier(.65,0,.35,1); overflow-x: hidden;}
html.menu-largo .k-topo,html.menu-largo body.k-casco>main{transition: padding-left .46s cubic-bezier(.65,0,.35,1);}
html.menu-largo .k-trilho .k-rotulo,html.menu-largo .k-trilho-promo,html.menu-largo .k-trilho-nav em{transition: opacity .3s .16s, filter .3s .16s, visibility 0s;}
html.menu-largo .k-trilho-nav > .k-pilula,html.menu-largo .k-trilho-nav > .k-pilula-hover{left: 0 !important; width: 100% !important;}
html.menu-largo .k-trilho-nav a,html.menu-largo .k-trilho-marca{white-space: nowrap;}
html.menu-recolhido[data-tema] .k-trilho{width: 76px;}
html.menu-recolhido[data-tema] .k-trilho .k-rotulo,html.menu-recolhido[data-tema] .k-trilho-promo,html.menu-recolhido[data-tema] .k-trilho-nav em{opacity: 0; filter: blur(5px); visibility: hidden; transition: opacity .18s, filter .18s, visibility 0s .18s;}
html.menu-recolhido[data-tema] .k-trilho-nav a{overflow: hidden;}
html.menu-recolhido[data-tema] .k-trilho-grupo{position: relative; color: transparent !important; overflow: hidden; white-space: nowrap;}
html.menu-recolhido[data-tema] .k-trilho-grupo::after{content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; translate: -50% 0; border-radius: 2px; background: var(--txt-2); opacity: .35;}
html.menu-largo .k-trilho-grupo{transition: color .25s .12s;}
html.menu-recolhido[data-tema="rose"] .k-topo,html.menu-recolhido[data-tema="rose"] body.k-casco>main,html.menu-recolhido[data-tema="areia"] .k-topo,html.menu-recolhido[data-tema="areia"] body.k-casco>main,html.menu-recolhido[data-tema="cone"] .k-topo,html.menu-recolhido[data-tema="cone"] body.k-casco>main{padding-left: 104px;}
html.menu-recolhido[data-tema="ametista"] .k-topo,html.menu-recolhido[data-tema="ametista"] body.k-casco>main,html.menu-recolhido[data-tema="mel"] .k-topo,html.menu-recolhido[data-tema="mel"] body.k-casco>main,html.menu-recolhido[data-tema="palco"] .k-topo,html.menu-recolhido[data-tema="palco"] body.k-casco>main{padding-left: 108px;}
html.menu-recolhido[data-tema="salvia"] .k-topo,html.menu-recolhido[data-tema="salvia"] body.k-casco>main{padding-left: 118px;}
}
@media (prefers-reduced-motion: reduce){html.menu-largo .k-trilho,html.menu-largo .k-topo,html.menu-largo body.k-casco>main{transition: none !important;}
}
@keyframes onda{ to { transform: scale(1); opacity: 0; } }
@keyframes balanca{ 20% { transform: rotate(14deg); } 40% { transform: rotate(-11deg); } 60% { transform: rotate(7deg); } 80% { transform: rotate(-3deg); } }
@keyframes redesenha{ from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
@keyframes pulo{ 45% { transform: translateY(16px) scale(.72); } }
html[data-tema] :is(.k-trilho,.k-topo,.k-barra-cel,.k-mais,.k-fundo,.k-visao,.k-entrar,.k-vitrine){--acc:var(--vermelho);--acc-txt:var(--sobre-primaria,#fff);--nav-on-bg:var(--vermelho);--nav-on-txt:var(--sobre-primaria,#fff);--acc-texto:var(--vermelho-claro,var(--vermelho))}

body.k-casco .barra-equipe,body.k-casco>footer{display:none}
/* dentro do quadro de prévia da tela de Temas: só a tela, sem os botões flutuantes */
html.k-quadro :is(.cp-liga,#chat-bolha,#chat-caixa,.nm-bolha,.neg-mini,[class*="negocio-mini"]){display:none!important}
.k-visao{font-family:var(--fonte);color:var(--txt);font-size:15px;line-height:1.5}
.k-visao :is(h1,h2,h3,h4){font-family:var(--fonte-tit);font-weight:var(--peso-tit);letter-spacing:-.02em;margin:0;line-height:1.15}
.k-visao .card{margin:0}
.k-visao a{text-decoration:none}
.k-ic{width:18px;height:18px;flex:none}
.k-logo{overflow:hidden}.k-logo img{width:100%;height:100%;object-fit:contain;display:block}
.k-logo.com-foto{background:#fff;padding:3px}
.k-trilho{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;max-height:calc(100vh - 24px)}
.k-novo{white-space:nowrap;flex:none}
/* o campo de busca do topo é só texto dentro da pílula: zera o estilo de caixa que o molde dá a todo input (saía um bloco branco por cima) */
.k-topo .k-busca input,.k-topo .k-busca input:focus{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin:0!important;outline:none!important;height:auto!important}
/* TOPO AO ROLAR (Richard, 29/10: "quando rola a página as palavras lá em cima ficam confusas"): vários temas deixam o topo transparente
   e o conteúdo passava POR TRÁS das palavras. Ao rolar, o topo ganha fundo de vidro fosco opaco o bastante para ler. */
.k-topo{transition:background-color .25s,box-shadow .25s}
html.k-rolou .k-topo{background-color:color-mix(in srgb,var(--bg,#fff) 86%,transparent)!important;-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 14px 34px -24px rgba(0,0,0,.55),inset 0 -1px 0 color-mix(in srgb,var(--txt,#000) 9%,transparent)}
/* o nome da loja nunca fica por baixo das abas: corta com reticências */
.k-marca{min-width:0;flex:0 1 auto;max-width:min(300px,26vw)}
.k-marca>span:last-child{min-width:0;display:block}
.k-marca b,.k-marca small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* MENU LATERAL sem barra de rolagem: mostra o que cabe, o resto vai para "Mais" (casco.js · ajustaDock) */
.k-trilho{scrollbar-width:none;-ms-overflow-style:none}
.k-trilho::-webkit-scrollbar{display:none}
.k-dock-mais{cursor:pointer}
.k-dock-pop{position:fixed;z-index:9500;width:250px;max-height:min(70vh,560px);overflow:auto;padding:6px;border-radius:18px;background:var(--sup,#fff);color:var(--txt,#111);border:1px solid var(--sup-borda,rgba(0,0,0,.12));box-shadow:0 24px 60px -22px rgba(0,0,0,.6);scrollbar-width:thin}
.k-dock-pop[hidden]{display:none}
.k-dock-pop a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:12px;color:inherit;text-decoration:none;font-size:14px;font-weight:600}
.k-dock-pop a:hover{background:var(--chip-bg,rgba(0,0,0,.06))}
.k-dock-pop .k-ic{width:18px;height:18px;flex:none;opacity:.8}
/* faixa de DEMONSTRAÇÃO: menu lateral e topo começam abaixo dela */
body.k-com-faixa .k-trilho{top:calc(var(--k-faixa,0px) + 12px)!important;bottom:12px!important;transform:none!important;height:auto!important;max-height:none!important}
body.k-com-faixa .k-topo{top:var(--k-faixa,0px)}
/* "Mais" das abas do topo */
.k-aba-mais{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:5px;flex:none;padding:7px 14px;border-radius:999px;font:inherit;font-size:14px;font-weight:600;color:var(--topo-txt-2);white-space:nowrap}
.k-aba-mais:hover{color:var(--topo-txt)}.k-aba-mais:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.k-aba-pop{position:fixed;z-index:9500;width:240px;max-height:min(70vh,520px);overflow:auto;padding:6px;border-radius:16px;background:var(--sup,#fff);color:var(--txt,#111);border:1px solid var(--sup-borda,rgba(0,0,0,.12));box-shadow:0 24px 60px -24px rgba(0,0,0,.55)}
.k-aba-pop[hidden]{display:none}
.k-aba-pop a{display:block;padding:9px 12px;border-radius:10px;color:inherit;text-decoration:none;font-size:14px;font-weight:600}
.k-aba-pop a:hover{background:var(--chip-bg,rgba(0,0,0,.06))}
/* botões de status DENTRO das colunas: o molde pinta cada um com a cor do status (azul, roxo, verde, preto) e isso briga com a
   paleta do tema (Richard: "ele não herdou a personalização das cores"). Aqui todos viram da paleta do tema; só o PRÓXIMO PASSO
   (o primeiro botão) leva a cor da marca. A bolinha da coluna e a borda do cartão continuam mostrando a etapa. */
.k-coluna .os-card .btn.mini[style*="background"],.k-coluna .os-card summary.btn.mini[style*="background"]{background:var(--surface-2)!important;color:var(--texto)!important;border:1px solid var(--borda-forte,var(--borda))!important;box-shadow:none!important}
.k-coluna .os-card .os-acoes>*:first-child .btn.mini[style*="background"],.k-coluna .os-card .os-acoes>.btn.mini[style*="background"]:first-child,.k-coluna .os-card .os-acoes>details:first-child>summary.btn.mini[style*="background"]{background:var(--vermelho)!important;color:var(--sobre-primaria,#fff)!important;border-color:var(--vermelho)!important}
.k-coluna .os-card .os-acoes .btn.mini:not([style*="background"]):not(.ghost):not(.perigo):not(.escuro){background:var(--surface-2);color:var(--texto);border:1px solid var(--borda-forte,var(--borda))}
.k-trilho-nav a{min-width:0}.k-trilho-nav .k-rotulo{overflow:hidden;text-overflow:ellipsis}
.k-abas{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap;min-width:0}.k-abas::-webkit-scrollbar{display:none}
.k-abas a{white-space:nowrap;flex:none}
.k-topo{min-width:0}
.k-sair{font-size:12.5px;font-weight:600;color:var(--topo-txt);padding:6px 8px;border-radius:8px}
/* AUDITORIA 28/10 (axe): a moldura herdava a cor de LINK do molde (a{color:--vermelho-claro}) — o nome da loja no topo
   escuro do Meia-noite saiu vermelho-escuro sobre azul (2,6). Dentro da moldura, link herda a cor da peça. */
:where(.k-trilho,.k-topo,.k-barra-cel,.k-mais) a{color:inherit;text-decoration:none}
.k-marca{color:var(--topo-txt)}
/* texto sobre o cartão de DESTAQUE e sobre os cartões coloridos do Início, sempre legível */
html[data-tema] .k-visao .kpi.destaque .chip:not(.sobe):not(.desce){color:var(--dest-txt);background:color-mix(in srgb,var(--dest-txt) 16%,transparent)}
html[data-tema] .k-visao .kpi:not(.destaque) .kpi-delta>span{color:var(--txt-2)}
html[data-tema] .k-visao .kpi:not(.destaque) .kpi-delta .chip{color:var(--txt)}
.k-sair:hover{color:var(--topo-txt)}
.k-busca{position:relative}
.k-achados{position:absolute;top:calc(100% + 6px);right:0;width:280px;max-height:60vh;overflow:auto;z-index:60;padding:6px;border-radius:14px;
  background:var(--sup);border:1px solid var(--sup-borda);box-shadow:0 20px 50px -20px rgba(0,0,0,.45)}
.k-achados a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:var(--txt);font-size:14px}
.k-achados a:hover,.k-achados a.foco{background:var(--chip-bg)}
.k-mais{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;background:rgba(0,0,0,.45)}
.k-mais[hidden]{display:none}
.k-mais>div{width:100%;max-height:78vh;overflow:auto;padding:18px 16px max(18px,env(safe-area-inset-bottom));border-radius:22px 22px 0 0;
  background:var(--sup);color:var(--txt);box-shadow:0 -20px 60px -20px rgba(0,0,0,.5)}
.k-mais h2{font:700 15px var(--fonte-tit,inherit);margin:0 0 12px;display:flex;justify-content:space-between;align-items:center}
.k-mais nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.k-mais nav a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:14px;background:var(--chip-bg);font-size:12px;font-weight:600;text-align:center;color:var(--txt)}
.k-mais nav a.atual{background:var(--nav-on-bg);color:var(--nav-on-txt)}
.k-mais .k-ic{width:22px;height:22px}
.k-barra-cel button{all:unset;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border-radius:16px;font-size:11px;font-weight:600;color:var(--topo-txt-2)}
@media (max-width:860px){
  body.k-casco .cp-liga{bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}
  .k-busca{display:none}
}
@media (min-width:861px){.k-barra-cel,.k-mais{display:none!important}}

/* ═══ CONTEÚDO DE TODAS AS ÁREAS COM A CARA DO LAB (Caixa, OS, Estoque, Balanço, Clientes…) ═══
   Os componentes que se repetem em toda tela — título, cartão, bloco de número (.tot-box) e tabela (.tab) —
   ganham o desenho do lab: título grande, cartões macios, números grandes, destaque na cor da MARCA e tabela
   em lista arejada. Tudo em :where() (prioridade baixa): a personalidade de cada tema (bordas duras do Brutal,
   papel do Jornal) continua vencendo, e as regras de contraste do molde também. */
:where(body.k-casco>main) h1{font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;line-height:1.05}
:where(body.k-casco>main) .card{border-radius:22px;padding:22px 24px;box-shadow:0 18px 40px -30px rgba(0,0,0,.5)}
:where(body.k-casco>main) .tot-box{border-radius:18px;padding:16px 18px;background:var(--surface);box-shadow:0 10px 26px -22px rgba(0,0,0,.45);border-left-width:1px}
:where(body.k-casco>main) .tot-box span{font-size:12.5px;font-weight:600}
:where(body.k-casco>main) .tot-box b{display:block;font-size:clamp(22px,2.2vw,28px);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:2px}
:where(body.k-casco>main) .tot-box.destaque{background:linear-gradient(145deg,var(--vermelho),var(--vermelho-esc,var(--vermelho)));border-color:transparent;box-shadow:0 18px 34px -20px rgba(var(--marca-rgb,0,0,0),.65)}
:where(body.k-casco>main) .tot-box.destaque :is(span,b,small){color:var(--sobre-primaria,#fff)}
/* só o PRIMEIRO destaque de cada grupo é cheio (no Caixa, "Entrou" e "Sobrou" eram dois blocos vermelhos) */
:where(body.k-casco>main) .tot-box.destaque~.tot-box.destaque{background:var(--surface);border-color:var(--borda);box-shadow:0 10px 26px -22px rgba(0,0,0,.45)}
:where(body.k-casco>main) .tot-box.destaque~.tot-box.destaque span{color:var(--texto-sec)}
:where(body.k-casco>main) .tot-box.destaque~.tot-box.destaque b{color:var(--vermelho-claro)}
:where(body.k-casco>main) .tab{border-collapse:separate;border-spacing:0}
:where(body.k-casco>main) .tab th{padding:10px 12px;font-size:11px;letter-spacing:.09em}
:where(body.k-casco>main) .tab td{padding:13px 12px}
:where(body.k-casco>main) .tab tbody tr{transition:background .15s}
:where(body.k-casco>main) .tab tbody tr:hover{background:color-mix(in srgb,var(--texto) 5%,transparent)}
:where(body.k-casco>main) .tab tbody tr:last-child td{border-bottom:0}
:where(body.k-casco>main) :is(input,select,textarea){border-radius:12px}
:where(body.k-casco>main) .btn{border-radius:12px}

/* ═══ TELAS DO LAB SOBRE O HTML QUE JÁ EXISTE (29/10, 2ª rodada — Richard: "layout do laboratório em Caixa, Agenda, Mesas e Estoque") ═══
   Nada de HTML novo nas telas: cada uma ganha o desenho do lab por CSS (e, na agenda, uma faixa de dias montada pelo casco.js a
   partir dos links que a própria tela já tem). Os botões, links e campos são os de sempre — a operação não muda, só a cara.
   Escrito como constante 'TELAS_LAB' e anexado ao casco-base.css. */

/* MESAS (Salão): cada mesa vira um círculo-mesa com a cor do estado, sobre um piso pontilhado */
body.k-casco .mesas{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:16px;padding:22px;margin:14px 0;border-radius:24px;border:1px solid var(--borda);
  background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--texto) 16%,transparent) 1px,transparent 1.6px) 0 0/22px 22px,var(--surface-2)}
body.k-casco .mesa{position:relative;aspect-ratio:1;min-height:0;padding:6px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;text-decoration:none;
  background:var(--surface);border:2px solid var(--borda);color:var(--texto);box-shadow:0 12px 26px -18px rgba(0,0,0,.55);transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s}
body.k-casco .mesa:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 18px 30px -16px rgba(0,0,0,.6)}
body.k-casco .mesa .mesa-n{font:800 30px/1 var(--fonte-num,inherit);letter-spacing:-.03em;color:var(--texto)}
body.k-casco .mesa .mesa-st{font-size:11.5px;font-weight:700;color:var(--texto-sec);letter-spacing:.02em}
body.k-casco .mesa .mesa-total{font-size:12.5px;color:var(--texto);font-variant-numeric:tabular-nums}
body.k-casco .mesa.livre{background:color-mix(in srgb,var(--surface) 70%,transparent);border-style:dashed}
body.k-casco .mesa.ocupada{background:color-mix(in srgb,#1F9D63 18%,var(--surface));border-color:#1F9D63}
body.k-casco .mesa.st-novo{background:color-mix(in srgb,#E8A33D 22%,var(--surface));border-color:#E8A33D}
body.k-casco .mesa.st-preparo{background:color-mix(in srgb,#E2683C 20%,var(--surface));border-color:#E2683C}
body.k-casco .mesa.st-pronto{background:color-mix(in srgb,#1F9D63 22%,var(--surface));border-color:#1F9D63}
body.k-casco .mesa:is(.ocupada,.st-novo,.st-preparo,.st-pronto) :is(.mesa-n,.mesa-st,.mesa-total){color:var(--texto)}

/* AGENDA DO DIA: resumo em cartões coloridos, navegação de dias em pílulas, reservas em cartões por dia */
body.k-casco .ag-resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:6px 0 16px}
body.k-casco .ag-resumo>div{padding:18px 20px;border-radius:22px;border:0;background:var(--surface);box-shadow:0 14px 30px -24px rgba(0,0,0,.5)}
body.k-casco .ag-resumo>div:nth-child(1){background:color-mix(in srgb,#1F9D63 16%,var(--surface))}
body.k-casco .ag-resumo>div:nth-child(2){background:color-mix(in srgb,#E2683C 15%,var(--surface))}
body.k-casco .ag-resumo>div:nth-child(3){background:color-mix(in srgb,#2F6FDB 15%,var(--surface))}
body.k-casco .ag-resumo>div:nth-child(4){background:color-mix(in srgb,#E8A33D 20%,var(--surface))}
body.k-casco .ag-resumo b{display:block;font-size:clamp(20px,2vw,28px);letter-spacing:-.03em;line-height:1.1;color:var(--texto)}
body.k-casco .ag-resumo small{display:block;margin-top:4px;color:var(--texto-sec);font-size:12.5px}
body.k-casco .ag-nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
body.k-casco .ag-nav .btn{border-radius:999px}
body.k-casco .ag-proximas{border-radius:22px;border:1px solid var(--borda);background:var(--surface);padding:14px 16px;box-shadow:0 14px 30px -26px rgba(0,0,0,.45)}
body.k-casco .ag-proximas>summary{cursor:pointer;font-size:15px}
body.k-casco .ag-px-dia{margin-top:14px;padding-top:12px;border-top:1px dashed var(--borda)}
body.k-casco .ag-px-cab{display:inline-flex;align-items:baseline;gap:6px;margin-bottom:8px;font-weight:700;color:var(--texto);text-decoration:none;text-transform:capitalize}
body.k-casco .ag-px{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:4px 0;border-radius:14px;background:var(--surface-2);text-decoration:none;color:var(--texto);transition:transform .18s,background .18s}
body.k-casco .ag-px:hover{transform:translateX(3px);background:color-mix(in srgb,var(--vermelho) 10%,var(--surface-2))}
body.k-casco .ag-px b{flex:none;min-width:58px;text-align:center;padding:4px 10px;border-radius:999px;background:var(--vermelho);color:var(--sobre-primaria,#fff);font-variant-numeric:tabular-nums;font-size:13px}
body.k-casco .ag-px span{color:var(--texto-sec);font-size:13.5px}
.k-dias{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:6px;margin:0 0 16px;border-radius:22px;background:var(--surface);border:1px solid var(--borda);box-shadow:0 14px 30px -26px rgba(0,0,0,.45)}
.k-dias::-webkit-scrollbar{display:none}
.k-dia{flex:1 0 96px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 8px;border-radius:16px;text-decoration:none;color:var(--texto);transition:background .2s,transform .2s}
.k-dia:hover{background:var(--surface-2);transform:translateY(-2px)}
.k-dia small{font-size:11.5px;color:var(--texto-sec);text-transform:capitalize}
.k-dia b{font-size:24px;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.k-dia em{font-style:normal;font-size:11.5px;color:var(--texto-sec)}
.k-dia.hoje{background:var(--vermelho);color:var(--sobre-primaria,#fff);box-shadow:0 12px 24px -14px var(--vermelho)}
.k-dia.hoje small,.k-dia.hoje em{color:inherit;opacity:.85}

/* CATÁLOGO / ESTOQUE: a tabela vira uma GRADE DE CARTÕES (o molde já tinha o modo cartão no celular; aqui vale em toda largura) */
body.k-casco .card .tab.cartoes:not(.pdv-tab){display:block;overflow:visible}
body.k-casco .card .tab.cartoes:not(.pdv-tab) thead{display:none}
body.k-casco .card .tab.cartoes:not(.pdv-tab) tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;min-width:0}
body.k-casco .card .tab.cartoes:not(.pdv-tab) tr{display:flex;flex-direction:column;gap:2px;margin:0;padding:14px 16px;border-radius:22px;border:1px solid var(--borda);background:var(--surface);box-shadow:0 14px 30px -26px rgba(0,0,0,.5);transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s}
body.k-casco .card .tab.cartoes:not(.pdv-tab) tr:hover{transform:translateY(-3px);box-shadow:0 26px 40px -28px rgba(0,0,0,.55)}
body.k-casco .card .tab.cartoes:not(.pdv-tab) td{display:flex;justify-content:space-between;align-items:center;gap:10px;border:0;padding:6px 2px;text-align:left}
body.k-casco .card .tab.cartoes:not(.pdv-tab) td::before{content:attr(data-label);color:var(--texto-fraco);font-size:12px;letter-spacing:.02em}
body.k-casco .card .tab.cartoes:not(.pdv-tab) td:first-child{font-size:15.5px;font-weight:700}
body.k-casco .card .tab.cartoes:not(.pdv-tab) td:has(input,select,textarea){display:block}
body.k-casco .card .tab.cartoes:not(.pdv-tab) td:has(input,select,textarea)::before{display:block;margin-bottom:5px}
body.k-casco .card .tab.cartoes:not(.pdv-tab) td .nome-inline,body.k-casco .card .tab.cartoes:not(.pdv-tab) td .desc-inline{display:block;width:100%;margin-top:5px}
body.k-casco .card .tab.cartoes:not(.pdv-tab) td.r{text-align:right}
body.k-casco .card .tab.cartoes:not(.pdv-tab) tr.baixo,body.k-casco .card .tab.cartoes:not(.pdv-tab) tr.zerado{border-color:color-mix(in srgb,#C81E1E 55%,var(--borda))}

/* PDV (Vendas): painel da venda e lista com a cara do lab, sem mudar o teclado (Enter, F2, F7, F8, F9) */
body.k-casco .pdv{border-radius:26px;overflow:hidden;border:1px solid var(--borda);background:var(--surface);box-shadow:0 22px 50px -34px rgba(0,0,0,.55)}
body.k-casco .pdv-topo{padding:12px 18px;gap:10px 14px;border-bottom:1px solid var(--borda);background:var(--surface-2)}
body.k-casco .pdv-lado{background:color-mix(in srgb,var(--surface-2) 80%,var(--surface));border-left:1px solid var(--borda)}
body.k-casco .pdv-lado .btn.primario{border-radius:999px}
body.k-casco .pdv-tab th{font-size:11px;letter-spacing:.09em}
body.k-casco .pdv-tab tbody tr{transition:background .15s}
body.k-casco .pdv-tab tbody tr:hover{background:color-mix(in srgb,var(--texto) 5%,transparent)}


/* ═══ OFICINA EM COLUNAS (quadro do lab) — os cartões de OS são os mesmos, arrumados por etapa ═══ */
body.k-casco>main:has(.k-com-colunas){max-width:none}
body.k-casco .kanban-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
body.k-casco .kanban-head h1{font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;margin:0}
body.k-casco .kanban-head h1 .cont{display:none}
.k-kpis{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.k-kpis span{display:flex;align-items:baseline;gap:7px;padding:9px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--borda);font-size:12.5px;color:var(--texto-sec)}
.k-kpis b{font-size:22px;color:var(--texto);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.k-kpis .ok b{color:var(--verde-texto)}.k-kpis .alerta b{color:var(--aviso)}
body.k-casco .os-grid.k-com-colunas{display:block}
.k-colunas{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:16px;overflow-x:auto;align-items:start;padding:2px 2px 14px;scroll-snap-type:x proximity}
.k-coluna{scroll-snap-align:start;background:color-mix(in srgb,var(--surface) 60%,transparent);border:1px solid var(--borda);border-radius:22px;padding:12px 12px 4px;min-height:140px}
.k-coluna-topo{display:flex;align-items:center;gap:9px;padding:4px 6px 12px;font-size:14.5px}
.k-coluna-topo i{width:9px;height:9px;border-radius:50%;background:var(--st,var(--texto-fraco));box-shadow:0 0 0 4px color-mix(in srgb,var(--st,#888) 22%,transparent)}
.k-coluna-topo b{color:var(--texto)}
.k-coluna-topo em{font-style:normal;font-size:12px;font-weight:700;min-width:22px;text-align:center;padding:2px 8px;border-radius:99px;background:var(--surface-2);color:var(--texto-sec)}
.k-coluna.vazia .k-coluna-corpo::after{content:"Nada aqui agora";display:block;padding:18px 8px 22px;text-align:center;font-size:13px;color:var(--texto-fraco);border:1.5px dashed var(--borda);border-radius:16px;margin-bottom:8px}
.k-coluna .os-card{border-left:0!important;border-top:3px solid var(--st,var(--borda))!important;border-radius:18px;margin:0 0 12px;background:var(--surface);box-shadow:0 10px 26px -18px rgba(0,0,0,.45);transition:transform .18s,box-shadow .18s;animation:tema-entra-leve .35s both}
.k-coluna .os-card:hover{transform:translateY(-2px);box-shadow:0 18px 34px -20px rgba(0,0,0,.5)}
.k-coluna .os-head .badge{display:none}
.k-coluna .os-head .cod{font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--surface-2);color:var(--texto-sec)}
.k-coluna .os-body{line-height:1.55}
.k-coluna .os-body>b{font-size:16px;letter-spacing:-.01em}
.k-coluna .os-acoes{gap:6px}
.k-coluna .os-acoes>.btn.ghost,.k-coluna .os-acoes>details>summary.perigo{font-size:11.5px;padding:5px 10px}
@media (min-width:861px){body.k-casco .kanban-head>.btn.primario{display:none}}
@media (max-width:860px){.k-colunas{grid-auto-columns:84vw;margin:0 -16px;padding:2px 16px 14px;scroll-snap-type:x mandatory}.k-kpis{margin-left:0}}