/* Gerado por comercial/vitrines/_modelo/gerar.mjs a partir do <style> de comercial/demos/industria/index.html: edite lá. */
  /* ---------- base ---------- */
  body { min-height: 100vh; }
  [hidden] { display: none !important; }
  .ic { width: 20px; height: 20px; flex: none; }
  .mono { font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
  .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
  .a-botao[disabled] { cursor: default; }

  /* cromo: faixa da demonstração e abas do celular, sempre escuros (moldura, não sistema) */
  .cromo { --bg: var(--grafite); --ink: var(--texto-claro); --ink-muted: var(--aco-claro); background: var(--bg); color: var(--ink); }
  [data-theme="dark"] .cromo { --bg: var(--superficie-escura); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cromo { --bg: var(--superficie-escura); } }

  /* setas das telas, na barra da moldura */
  .passo { display: flex; align-items: center; gap: 2px; }
  .passo button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 4px; }
  .passo button:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
  .passo .ic { width: 16px; height: 16px; }
  .passo .volta .ic { rotate: 180deg; }
  .passo .a-indice { min-width: 20ch; text-align: center; color: var(--ink); }
  .passo .a-indice em { font-style: normal; color: var(--ink-muted); }
  @media (max-width: 1399px) { .passo .a-indice { min-width: 8ch; } .passo .a-indice em { display: none; } }

  /* ---------- sistema ---------- */
  .app { display: grid; grid-template-columns: 256px minmax(0, 1fr); align-items: start; }
  .lado { position: sticky; top: var(--dm-altura, 64px); display: grid; gap: 40px; padding: 40px 16px 40px var(--a-margem); }
  .empresa b { display: block; font: 500 19px/1.2 var(--font-sans); letter-spacing: -0.015em; }
  .empresa .mono { display: block; margin-top: 8px; }
  .menu { display: grid; gap: 2px; }
  .menu a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; margin-left: -12px; border-radius: 4px; color: var(--ink-muted); text-decoration: none; font: 500 15px/1.2 var(--font-sans); }
  .menu a:hover, .abas a:hover { color: var(--ink); }
  .menu a[aria-current="page"] { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
  .menu .n { margin-left: auto; font: 500 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
  .lado .nota { display: flex; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--ink-muted); max-width: 22em; }
  .lado .nota .ic { width: 18px; height: 18px; }

  .conteudo { min-width: 0; padding: 48px var(--a-margem) 96px 32px; }
  .tela { display: none; }
  .tela.ativa { display: block; }
  .cab { display: grid; justify-items: start; gap: 16px; margin-bottom: 48px; }
  .a-rotulo a { color: var(--ink); text-decoration: none; }
  .titulo { font: 500 clamp(34px, 3.6vw, 52px)/1.02 var(--font-sans); letter-spacing: -0.035em; text-wrap: balance; max-width: 17em; }
  .cab .a-lead { max-width: 40ch; }
  .grupo + .grupo { margin-top: 48px; }
  .grupo > .mono:first-child { margin-bottom: 12px; }
  .depois { margin-top: 40px; }

  /* listas sem fio: linha de 64 px, a ativa com 6% de tinta */
  .linhas { list-style: none; margin: 0; padding: 0; display: grid; }
  .linha { display: grid; align-items: center; gap: 4px 20px; min-height: 64px; padding: 12px; margin: 0 -12px; border-radius: 4px; color: inherit; text-decoration: none; }
  a.linha:hover, .linha.ativa { background: color-mix(in srgb, var(--ink) 6%, transparent); }
  a.linha b::after { content: "→"; display: inline-block; margin-left: .45em; color: var(--ink-muted); transition: translate var(--a-estado, 180ms) var(--a-assentar); }
  a.linha:hover b::after { translate: 3px 0; color: var(--ink); }
  .linha b { font-weight: 500; }
  .linha small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--ink-muted); }
  .linha > .ic { color: var(--ink-muted); }

  .etq { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 6px 8px; border-radius: 2px; font: 500 12px/1.1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
  .etq--cheia { background: var(--ink); color: var(--bg); }
  .etq--sinal { background: var(--signal); color: var(--on-signal); }
  .barra { display: block; height: 6px; background: var(--line); }
  .barra i { display: block; height: 100%; background: var(--ink); }
  .barra i.sinal { background: var(--signal); }
  .prog { display: grid; gap: 8px; justify-items: end; font-size: 14px; }
  .prog .barra { width: 100%; }

  /* painel da linguagem C: bloco invertido, raio 8, sem borda */
  .painel.a-bloco { border-radius: 8px; padding: clamp(20px, 2.2vw, 32px); }
  .com-ajuda { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
  .com-ajuda .dm-ajuda { margin: -10px; }
  .rodape-p { margin-top: 20px; max-width: 34em; font-size: 14px; color: var(--ink-muted); }

  /* ---------- início: as quatro células do S viram os números do dia ---------- */
  .g-inicio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 48px 72px; align-items: start; }
  .s { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; }
  .s .c.a-bloco { position: absolute; display: flex; flex-direction: column; justify-content: space-between; width: 47.92%; padding: 4.6cqw; overflow: hidden; color: var(--ink); text-decoration: none; }
  .s .tl { left: 0; top: 0; height: 47.92%; border-radius: 23.96cqw 0 0 23.96cqw; align-items: flex-end; text-align: right; }
  .s .c.a-bloco.tr { left: 52.08%; top: 0; height: 23.96%; background: var(--signal); color: var(--on-signal); }
  .s .bl { left: 0; top: 76.04%; height: 23.96%; }
  .s .br { left: 52.08%; top: 52.08%; height: 47.92%; border-radius: 0 23.96cqw 23.96cqw 0; }
  .s .rot { font: 500 max(12px, 2.5cqw)/1.25 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
  .s .tr .rot { color: var(--on-signal); }
  .s .grande { display: block; white-space: nowrap; font: 500 19cqw/.8 var(--font-sans); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
  .s .br .grande { font-size: 11.5cqw; }
  .s .br .apoio { display: block; margin-top: 2.4cqw; font-size: max(12px, 3.3cqw); line-height: 1.3; color: var(--ink-muted); }
  .s .medio { display: flex; align-items: center; gap: .4em; font: 500 4.7cqw/1.05 var(--font-sans); letter-spacing: -0.02em; white-space: nowrap; }
  .s .medio .ic { width: .7em; height: .7em; transition: translate var(--a-estado, 180ms) var(--a-assentar); }
  .s a:hover .medio .ic { translate: 3px 0; }
  .l-obra { grid-template-columns: minmax(0, 1fr) 132px; }
  .l-item { grid-template-columns: 20px minmax(0, 1fr) auto; }
  .l-item .hora { display: grid; justify-items: end; gap: 6px; font-size: 13px; color: var(--ink-muted); }

  /* ---------- pedidos, estoque e expedição: a lista e o painel ao lado ---------- */
  .g-ler { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 40px 48px; align-items: start; }
  .msg { max-width: 92%; padding: 10px 14px 8px; border-radius: 8px; font-size: 15px; line-height: 1.45; white-space: pre-line; }
  .msg.dele { justify-self: start; background: color-mix(in srgb, var(--ink) 10%, transparent); }
  .msg.meu { justify-self: end; background: var(--ink); color: var(--bg); }
  .msg .hora { display: block; margin-top: 6px; text-align: right; font: 500 12px/1 var(--font-mono); opacity: .75; white-space: normal; }
  .msg .quem { display: block; margin-bottom: 4px; font-weight: 500; }
  .conversa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 16px 0 8px; }
  .campos { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 0 16px; margin: 16px 0 0; }
  .campos dt { padding: 12px 0; font: 500 12px/1.75 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
  .campos dd { margin: 0; padding: 12px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 500; }
  .ler-painel .com-ajuda { margin: 16px 0 24px; }
  .ler-painel .f-grande { margin-top: 12px; }

  /* ---------- margem ---------- */
  .nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 56px; }
  .nums p { display: grid; gap: 10px; }
  .nums b { font: 500 clamp(40px, 5vw, 64px)/.9 var(--font-sans); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
  .g-painel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px 72px; align-items: start; }
  .l-etapa { grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 52px; grid-template-areas: "n b p"; }
  .l-etapa > span:first-child { grid-area: n; }
  .l-etapa .barra { grid-area: b; }
  .l-etapa > .num { grid-area: p; text-align: right; font-size: 14px; }
  .l-motivo { grid-template-columns: minmax(0, 1fr) auto; min-height: 48px; }
  .l-motivo .num { font-size: 14px; }

  /* ---------- apontamento e cliente: o celular ---------- */
  .g-fone { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px 80px; align-items: start; }
  .pontos { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; max-width: 30em; }
  .pontos li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; color: var(--ink-muted); }
  .pontos .ic { color: var(--ink); }
  .fone { width: 380px; padding: 10px; border-radius: 46px; background: var(--grafite); box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--grafite) 55%, transparent); }
  [data-theme="dark"] .fone { background: var(--fio-escuro); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fone { background: var(--fio-escuro); } }
  .fone-tela { padding: 32px 22px 24px; border-radius: 36px; background: var(--bg); }
  .f-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .f-nome { margin-top: 6px; font: 500 17px/1.3 var(--font-sans); }
  .f-grande { margin-top: 20px; font: 500 34px/1 var(--font-sans); letter-spacing: -0.035em; text-wrap: balance; }
  .f-sub { margin-top: 10px; font-size: 15px; color: var(--ink-muted); }
  .dia { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
  .dia li { display: grid; gap: 4px; font-size: 15px; line-height: 1.4; }
  .caixa { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .caixa p { display: grid; gap: 6px; padding: 14px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .caixa b { font: 500 32px/1.3 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .envio { margin-top: 24px; display: grid; gap: 16px; }
  .envio .a-botao { width: 100%; justify-content: center; }
  .estado { min-height: 24px; font-size: 14px; color: var(--ink-muted); }
  .estado .etq { white-space: normal; }

  /* cliente: as etapas do pedido, cada uma com a sua célula */
  .etapas { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 4px; }
  .etapa { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 48px; }
  .etapa .cel { width: 22px; height: 22px; background: var(--line); }
  .etapa.feita .cel { background: var(--ink); }
  .etapa.agora .cel { background: var(--signal); }
  .etapa b { font-weight: 500; }
  .etapa.pendente b { color: var(--ink-muted); }
  .etapa small { display: block; font-size: 13px; color: var(--ink-muted); }
  .etapa .h { font: 500 12px/1 var(--font-mono); color: var(--ink-muted); }
  .contas { margin-top: 28px; display: grid; gap: 10px; }
  .contas p:not(.mono) { font-size: 15px; }
  .contas .linhas { margin-top: 4px; }
  .contas .l-motivo { min-height: 44px; padding: 8px 10px; margin: 0 -10px; font-size: 14px; }
  .contas .a-link { justify-self: start; min-height: 44px; }

  /* ---------- produção: a fila de cada linha ---------- */
  .g-crono { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px 72px; align-items: start; }
  .l-crono { grid-template-columns: minmax(0, 1fr) 120px 148px; }
  .l-crono .etq { justify-self: end; }
  .feito-lista { list-style: none; margin: 16px 0 24px; padding: 0; display: grid; gap: 12px; font-size: 15px; }
  .feito-lista li { display: flex; align-items: flex-start; gap: 10px; }
  .marca-item { display: grid; place-items: center; width: 20px; height: 20px; flex: none; margin-top: 2px; background: var(--ink); color: var(--bg); }
  .marca-item .ic { width: 13px; height: 13px; }
  .marca-item.pendente { background: var(--line); }
  .crono-painel .a-botao { width: 100%; justify-content: center; }
  .crono-painel .f-grande { font-size: clamp(26px, 2.4vw, 32px); }

  /* ---------- fecho: moldura escura embaixo de toda tela, canto reto, sem vermelho ---------- */
  .fecho { display: grid; justify-items: start; gap: 16px; margin-top: 72px; padding: clamp(28px, 4vw, 48px); }
  .fecho-t { font: 500 clamp(26px, 2.6vw, 36px)/1.1 var(--font-sans); letter-spacing: -0.025em; text-wrap: balance; }
  .fecho p { max-width: 40em; font-size: 16px; line-height: 1.5; color: var(--ink-muted); text-wrap: pretty; }
  .fecho .a-botao { margin-top: 8px; }

  .abas { display: none; }

  /* ---------- entrada ---------- */
  @media (prefers-reduced-motion: no-preference) {
    .tela.ativa > * { animation: sobe 600ms var(--a-tipo) both; }
    .tela.ativa > :nth-child(2) { animation-delay: 50ms; }
    .tela.ativa > :nth-child(3) { animation-delay: 100ms; }
    .tela.ativa .s .c { animation: nasce 900ms cubic-bezier(.77, 0, .18, 1) both; }
    .tela.ativa .s .bl { animation-delay: 80ms; }
    .tela.ativa .s .br { animation-delay: 160ms; }
    .tela.ativa .s .tr { animation: acende 500ms cubic-bezier(.77, 0, .18, 1) 700ms both; }
    .novo { animation: sobe 600ms var(--a-tipo) both; }
  }
  @keyframes sobe { from { opacity: 0; translate: 0 12px; } }
  @keyframes nasce { from { transform: scale(.06); } }
  @keyframes acende { from { clip-path: inset(0 100% 0 0); } }

  /* ---------- tablet e celular ---------- */
  @media (max-width: 1279px) {
    .g-inicio, .g-ler, .g-fone, .g-crono, .g-painel { grid-template-columns: minmax(0, 1fr); }
    .g-inicio .s { order: -1; max-width: 460px; }
    .g-ler .ler-painel, .g-crono .crono-painel { order: -1; }
    .g-fone > div:first-child { display: contents; }
    .g-fone .pontos { order: 2; }
    .g-fone .cab { margin-bottom: 0; }
    .fone { width: auto; max-width: 420px; }
  }
  @media (max-width: 1023px) {
    .app { grid-template-columns: minmax(0, 1fr); }
    .lado { display: none; }
    .conteudo { padding: 32px var(--a-margem) 120px; }
    .abas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
    .abas a { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 52px; border-radius: 4px; color: var(--ink-muted); text-decoration: none; font: 500 12px/1.1 var(--font-sans); }
    .abas a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); }
    .abas .ic { width: 22px; height: 22px; }
  }
  @media (max-width: 767px) {
    .cab { margin-bottom: 36px; }
    .grupo + .grupo { margin-top: 40px; }
    .l-obra { grid-template-columns: minmax(0, 1fr) 84px; gap: 4px 14px; }
    .campos { grid-template-columns: 104px minmax(0, 1fr); }
    .nums { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 40px; }
    .nums p { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 14px; }
    .l-etapa { grid-template-columns: minmax(0, 1fr) 48px; grid-template-areas: "n p" "b b"; gap: 10px 12px; }
    .l-crono { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; }
    .l-crono .prog { grid-column: 1 / -1; grid-row: 2; justify-items: start; }
    .fone { max-width: none; padding: 8px; border-radius: 40px; }
    .fone-tela { padding: 28px 18px 24px; border-radius: 32px; }
  }

/* no site: as barras levam a largura em data-w (a CSP não aceita style= no HTML) */
.fecho .a-acoes { margin-top: 8px; }
.fecho .a-acoes .a-botao { margin-top: 0; }
[data-w="100"] { width: 100%; }
[data-w="96"] { width: 96%; }
[data-w="71"] { width: 71%; }
[data-w="92"] { width: 92%; }
[data-w="0"] { width: 0%; }
[data-w="62"] { width: 62%; }
[data-w="72"] { width: 72%; }
[data-w="68"] { width: 68%; }
[data-w="58"] { width: 58%; }
[data-w="28"] { width: 28%; }