/* ==========================================================================
   Caelio — demonstração interativa
   Depende de caelio.css (tokens, marca, cabeçalho, botões).
   ========================================================================== */

:root {
  /* Andamento da OS. Monocromático de propósito: o manual reserva o dourado
     para um único acento por tela, e aqui ele é do atraso. */
  --etapa-parada:   #C0C6D4;
  --etapa-inicio:   var(--nevoa);
  --etapa-meio:     var(--secundario);
  --etapa-pronta:   var(--azul-noite);
}

@media (prefers-color-scheme: dark) {
  :root {
    --etapa-parada: #3A4058;
    --etapa-pronta: #F5F6FA;
  }
}

/* --------------------------------------------------------------------------
   Cabeça da página
   -------------------------------------------------------------------------- */
.demo-cabeca {
  padding-block: clamp(2.75rem, 6vw, 4rem) 1.75rem;
  max-width: 52rem;
}

/* Na HOME o mesmo bloco não abre a página: ele cai logo abaixo da fileira de
   atalhos, que já termina com respiro próprio. Os dois somados davam 117px de
   branco entre o último cartão e o olho "DEMONSTRAÇÃO INTERATIVA" — a
   demonstração ficava boiando, sem pertencer nem ao que vem antes nem ao que
   vem depois. Sem o respiro de cima ficam 53px, e a fileira de atalhos passa a
   apresentar o quadro, que é o que ela faz.

   Em /demonstracao o padding fica: lá o bloco é a primeira coisa sob o
   cabeçalho, e sem ele o título encostaria na barra. */
.demo-cabeca--embutida { padding-top: 0; }

/* <h1> em /demonstracao, <h2> na home — lá o <h1> é o do banner, e duas <h1>
   na mesma página é defeito de leitor de tela e de busca. O tamanho é o
   mesmo nas duas: quem manda no peso do título é o lugar dele, não a tag. */
.demo-cabeca h1,
.demo-cabeca h2 { font-size: clamp(2rem, 4.5vw, 3rem); }

.demo-cabeca p {
  margin-top: 1.15rem;
  font-size: 1.06rem;
  color: var(--secundario);
}

/* --------------------------------------------------------------------------
   Barra de controles
   -------------------------------------------------------------------------- */
/* O PAINEL — 13/09/2026, a pedido: a barra de controles e o quadro passaram a
   ser a mesma peça, cabeçalho e corpo.

   ⚠️ A COR DELE NÃO É ESCOLHA DE GOSTO. A coluna do quadro é `--fundo-alt`,
   a mesma cor da barra; painel em `--fundo-alt` faria as colunas
   DESAPARECEREM dentro dele — contraste 1,000, só a borda denunciando, que é
   exatamente o defeito que o cartão do modo escuro teve e está contado em
   `caelio.css`. Por isso o painel é `--superficie` e a barra guarda o
   `--fundo-alt` dela.

   A regra que importa não é "a escada sempre sobe" — ela não sobe —, e sim
   que DUAS SUPERFÍCIES VIZINHAS NUNCA COMPARTILHEM O MESMO VALOR. No claro a
   escada sobe de fato (página #FFF → painel #FFF → coluna #F1F1EC → cartão
   #FFF, com a borda separando painel e página). No escuro ela sobe e desce:
   página #141724 → painel #232839 → coluna #1A1E2E → cartão #232839 — a
   coluna AFUNDA no painel, como um poço, e o cartão volta a subir. Cartão e
   painel têm o mesmo valor nos dois modos, e isso é inofensivo justamente
   porque a coluna sempre fica entre os dois.

   `overflow: hidden` só para o canto arredondado cortar o quadro junto; quem
   rola é o `.quadro-demo`, que tem overflow próprio. */
.demo-painel {
  /* A CALHA DO PAINEL, em um lugar só.

     Ela vale para as três faixas — a barra, a dica e o quadro — e é o que
     faz a primeira coluna nascer debaixo da palavra "SEGMENTO". Nasceu como
     três números escritos separados (1,1rem na barra e 1,15rem nas outras
     duas) e a diferença de 0,8px já aparecia na medida: rótulo em x=259,
     primeira coluna em x=260. Ninguém veria — e era exatamente por isso que
     ia continuar crescendo. */
  --demo-calha: 1.1rem;

  /* SEM LARGURA PRÓPRIA, e isso é a decisão, não a ausência dela.

     O painel ocupa a largura do `.container`, que em 13/09/2026 passou de
     1120px para 1600px justamente para o site inteiro usar a tela. Escrever
     uma largura aqui criaria uma segunda régua para manter de acordo com a
     de `caelio.css` — e no dia em que uma mudasse, o quadro ficaria mais
     largo ou mais estreito que a seção logo acima dele, sem erro nenhum
     acusando. Se um dia o quadro precisar sangrar para fora do texto, o
     lugar de dizer isso é aqui, com a conta do container repetida de
     propósito e um comentário explicando por quê. */

  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  /* O respiro de baixo da seção inteira era do `.quadro-demo` e veio para cá
     junto com ele — ver o comentário da seção na home. */
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.demo-barra {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .9rem var(--demo-calha);
  background: var(--fundo-alt);
  /* Sem borda nem raio próprios: quem os tem é o painel. Fica só o fio de
     baixo, que separa o cabeçalho do quadro. */
  border-bottom: 1px solid var(--borda);
}

.demo-barra__rotulo {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nevoa);
}

.segmento { display: flex; gap: .4rem; flex-wrap: wrap; }

.chip {
  font-family: var(--fonte-texto);
  font-size: .86rem;
  font-weight: 600;
  padding: .5rem .9rem;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--secundario);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.chip:hover:not(:disabled) { color: var(--texto); border-color: var(--texto); }
.chip[aria-pressed='true'] {
  background: var(--azul-noite);
  border-color: var(--azul-noite);
  color: var(--fundo);
}
@media (prefers-color-scheme: dark) {
  .chip[aria-pressed='true'] { background: #F5F6FA; border-color: #F5F6FA; color: #141724; }
}
.chip:disabled { opacity: .45; cursor: default; }

/* ---- as setas do quadro ----
   Substituem a barra de rolagem nativa, escondida logo abaixo em
   `.quadro-demo`. Ficam ENTRE as fichas de segmento e o "Reiniciar": o
   `margin-left: auto` que empurrava o Reiniciar para a direita passou para
   cá, e os dois viajam juntos no fim da barra.

   Quadrado de 34px e não chevron solto: alvo de clique que a mão acha sem
   mirar, e a mesma borda arredondada do resto da barra. */
.demo-rolagem {
  margin-left: auto;
  display: flex;
  gap: .35rem;
}

.seta {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--secundario);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, opacity .16s ease;
}
.seta svg { width: 18px; height: 18px; }
.seta:hover:not(:disabled) { color: var(--texto); border-color: var(--texto); }

/* Ponta da rolagem: a seta APAGA em vez de sumir. Sumir mexeria o "Reiniciar"
   de lugar a cada rolada — alvo que foge da mão. */
.seta:disabled { opacity: .3; cursor: default; }

.reiniciar {
  font-family: var(--fonte-texto);
  font-size: .86rem;
  font-weight: 600;
  padding: .5rem .9rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--secundario);
  cursor: pointer;
}
.reiniciar:hover { color: var(--texto); border-color: var(--borda-forte); }

.dica {
  margin: .9rem var(--demo-calha) .1rem;
  font-size: .88rem;
  color: var(--nevoa);
}

kbd {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .8em;
  padding: .1rem .4rem;
  border: 1px solid var(--borda-forte);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--fundo-alt);
  color: var(--texto);
}

/* --------------------------------------------------------------------------
   Quadro
   -------------------------------------------------------------------------- */
/* ⚠️ Era `repeat(4, minmax(0, 1fr))`, e o 4 era o numero de colunas
   INVENTADAS que a demo tinha. Com as colunas de verdade — 8 na oficina, 9 na
   retifica e no lava-jato — aquele grid quebraria em tres fileiras, que e
   exatamente o que um quadro de OS nao e.

   `grid-auto-flow: column` deixa o numero de colunas ser o que a definicao
   disser, e a rolagem horizontal passa a valer em QUALQUER largura, nao so no
   celular. Isso nao e concessao: um quadro de nove colunas rola no produto
   real tambem, e a demo promete ser "exatamente como a sua equipe faria". */
.quadro-demo {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: 1rem;
  align-items: start;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: .5rem;

  /* A BARRA DE ROLAGEM NATIVA SAI DE CENA — 13/09/2026, a pedido.

     Ela desenhava uma faixa cinza e grossa sob o quadro, com a cara do
     sistema operacional e não a do site. A ROLAGEM CONTINUA INTEIRA: roda do
     mouse, trackpad, toque, teclado, e as setas da barra de cima, que existem
     justamente porque esconder a barra sem pôr nada no lugar tiraria a única
     pista de que o quadro anda para o lado.

     Duas declarações porque nenhuma serve aos dois lados: `scrollbar-width` é
     o padrão (Firefox, e os baseados em Chromium recentes) e o
     `::-webkit-scrollbar` atende os Safari e Chromium antigos. Quem não
     entender nenhuma das duas continua com a barra — e com o quadro
     funcionando, que é o que importa. */
  scrollbar-width: none;

  /* DENTRO DO PAINEL desde 13/09/2026, e por isso a calha aqui é só uma
     medida, não uma conta.

     Até aqui o quadro vivia FORA do `.container` e ocupava a largura da
     página, e estas três linhas eram um
     `calc(var(--gutter) + max(0px, (100% - var(--largura)) / 2))` que repetia
     a conta do container para a primeira coluna nascer alinhada com o título.
     Com o quadro dentro do painel quem alinha é o próprio painel, e a conta
     virou a `--demo-calha` declarada nele — a mesma da barra e da dica, para
     que a primeira coluna nasça debaixo da palavra "SEGMENTO".

     `scroll-padding-inline-start` repete o valor para o encaixe parar no
     mesmo lugar; sem ele o primeiro cartão encosta na borda ao voltar. */
  padding-inline: var(--demo-calha);
  scroll-padding-inline-start: var(--demo-calha);
}

.quadro-demo::-webkit-scrollbar { width: 0; height: 0; }

.coluna-demo { scroll-snap-align: start; }

.coluna-demo {
  background: var(--fundo-alt);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  display: flex;
  flex-direction: column;
  min-height: 220px;
}

.coluna-demo .topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--borda);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--secundario);
}

.coluna-demo .contagem {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 0 .45rem;
  color: var(--secundario);
}

.coluna-demo .corpo {
  padding: .8rem;
  flex-grow: 1;
  transition: background .14s ease;
  border-radius: 0 0 var(--raio) var(--raio);
}
.coluna-demo .corpo.alvo {
  background: color-mix(in srgb, var(--dourado) 12%, transparent);
  outline: 2px dashed color-mix(in srgb, var(--dourado) 55%, transparent);
  outline-offset: -6px;
}

.coluna-demo .vazio {
  font-size: .82rem;
  color: var(--nevoa);
  text-align: center;
  padding: 1.5rem .5rem;
}

/* --------------------------------------------------------------------------
   Cartão de OS
   -------------------------------------------------------------------------- */
.os {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: .8rem .85rem;
  margin-bottom: .7rem;
  cursor: grab;
  box-shadow: var(--sombra);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.os:last-child { margin-bottom: 0; }
.os:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: var(--borda-forte); }
.os:active { cursor: grabbing; }
.os.arrastando { opacity: .4; transform: rotate(1.5deg); }

.os__numero {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--nevoa);
  font-variant-numeric: tabular-nums;
}

.os .titulo {
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.32;
  margin-top: .2rem;
  color: var(--texto);
}

.os .cliente {
  font-size: .78rem;
  color: var(--secundario);
  margin-top: .3rem;
}

.barra-info {
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  color: var(--nevoa);
  margin-top: .8rem;
  font-variant-numeric: tabular-nums;
}

.barra {
  height: 4px;
  background: var(--fundo-alt);
  border-radius: 999px;
  overflow: hidden;
  margin-top: .3rem;
}
.barra span { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; }

.etiquetas { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .7rem; }

.tag {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: .14rem .45rem;
  border-radius: 5px;
  background: color-mix(in srgb, var(--nevoa) 16%, transparent);
  color: var(--secundario);
}
.tag-alta {
  background: color-mix(in srgb, var(--dourado) 22%, transparent);
  color: color-mix(in srgb, var(--dourado) 78%, var(--texto));
}
.tag-media { background: color-mix(in srgb, var(--nevoa) 24%, transparent); }
.tag-baixa { background: color-mix(in srgb, var(--nevoa) 12%, transparent); }
.tag-tipo  { background: transparent; border: 1px solid var(--borda-forte); }

.os__rodape {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .7rem;
  padding-top: .6rem;
  border-top: 1px solid var(--borda);
  font-size: .7rem;
  color: var(--nevoa);
}
.os .prazo.atrasado { color: var(--dourado); font-weight: 600; }

/* --------------------------------------------------------------------------
   Aviso de movimentação
   `aviso-demo`, e não `aviso`: `caelio.css` já tem um `.aviso` (a caixa de
   nota das páginas de produto) e as duas folhas carregam juntas aqui. Do
   nome repetido vazavam para este balão um `border-left: 2px solid` e um
   `margin-top: 1.75rem` que ninguém pediu — o que a folha da demonstração
   não redeclarava, ela herdava.
   -------------------------------------------------------------------------- */
.aviso-demo {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 150%);
  z-index: 80;
  max-width: min(30rem, calc(100vw - 2rem));
  background: var(--azul-noite);
  color: #F5F6FA;
  padding: .8rem 1.15rem;
  border-radius: 10px;
  box-shadow: var(--sombra-alta);
  font-size: .88rem;
  transition: transform .28s cubic-bezier(.2, .8, .3, 1), opacity .28s ease;
  opacity: 0;
}
@media (prefers-color-scheme: dark) {
  .aviso-demo { background: #F5F6FA; color: #141724; }
}
.aviso-demo.show { transform: translate(-50%, 0); opacity: 1; }
.aviso-demo strong { display: block; font-weight: 600; }
.aviso-demo span { opacity: .78; }

/* --------------------------------------------------------------------------
   Modal da OS
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(20, 23, 36, .55);
  backdrop-filter: blur(3px);
}
.modal.show { display: flex; }

.modal .caixa {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  width: min(46rem, 100%);
  max-height: min(88vh, 52rem);
  display: flex;
  flex-direction: column;
  animation: modal-entra .22s ease both;
}

@keyframes modal-entra {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

.modal .cabeca {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.6rem 1.1rem;
  border-bottom: 1px solid var(--borda);
}
.modal .cabeca h2 { font-size: 1.22rem; }
.modal .cabeca p { margin-top: .3rem; font-size: .9rem; color: var(--secundario); }

.modal .fechar {
  flex: none;
  width: 34px; height: 34px;
  font-size: 1.4rem;
  line-height: 1;
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
  background: transparent;
  color: var(--secundario);
  cursor: pointer;
}
.modal .fechar:hover { color: var(--texto); border-color: var(--texto); }

.modal .conteudo { padding: 1.4rem 1.6rem 1.6rem; overflow-y: auto; }
.modal .conteudo h4 {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nevoa);
  margin: 1.6rem 0 .7rem;
}
.modal .conteudo h4:first-of-type { margin-top: 1.2rem; }
.modal .descricao { color: var(--secundario); font-size: .95rem; }

.modal .linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1.1rem 0;
  border-block: 1px solid var(--borda);
}
.modal .campo .rotulo {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nevoa);
}
.modal .campo .valor { margin-top: .25rem; font-size: .95rem; font-weight: 600; }

.modal .opcoes { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Histórico */
.hist ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  max-height: 14rem;
  overflow-y: auto;
  display: grid;
  gap: .6rem;
}
.hist li {
  background: var(--fundo-alt);
  border: 1px solid var(--borda);
  border-radius: 9px;
  padding: .65rem .8rem;
}
.hist li.vazio { color: var(--nevoa); font-size: .86rem; text-align: center; }
.hist .meta {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  font-size: .72rem;
  color: var(--nevoa);
}
.hist .autor { font-weight: 600; color: var(--secundario); }
.hist .texto { margin-top: .3rem; font-size: .89rem; }
.hist .apagar {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--nevoa);
  text-decoration: underline;
  cursor: pointer;
}
.hist .apagar:hover { color: var(--texto); }

.hist form { display: flex; gap: .5rem; flex-wrap: wrap; }
.hist input {
  flex: 1 1 14rem;
  font-family: var(--fonte-texto);
  font-size: .92rem;
  padding: .65rem .85rem;
  border: 1px solid var(--borda-forte);
  border-radius: 9px;
  background: var(--superficie);
  color: var(--texto);
}
.hist input::placeholder { color: var(--nevoa); }
.hist input:focus-visible { outline: 2px solid var(--dourado); outline-offset: 1px; }

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .quadro-demo {
    grid-auto-columns: 74vw;
    scroll-snap-type: x mandatory;
  }
  /* Na barra estreita tudo quebra em linhas; o `margin-left: auto` das setas
     empurraria as duas sozinhas para a direita, longe do que elas rolam. */
  .demo-rolagem { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .os:hover { transform: none; }
  .modal .caixa { animation: none; }
}