/* BLYO · Rastro: a trilha do "o" e os avisos que ele deixa pelo caminho.
   Cada improviso do dia (planilha, grupo, comanda, e-mail, caderno) é riscado quando o "o" passa
   e vira o aviso de um sistema diferente: captação, salão do restaurante, compras e chamados. */

.fr-medida { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }

.fr-palco { position: relative; }
/* o quadro é a referência das medidas: posição e letra dos avisos seguem a largura do desenho */
.fr-quadro { position: relative; container: fr / inline-size; }
.fr-trilha { display: block; width: 100%; height: auto; overflow: visible; }
/* cada contorno tem fundo petróleo: o seguinte cobre o anterior, como na estampa */
.fr-passo { fill: var(--petroleo); stroke-linejoin: round; }
.fr-passo--tinta { stroke: var(--marfim); }
.fr-passo--menta { stroke: var(--menta); }
.fr-passo:nth-child(1) { stroke-width: 1.3; }
.fr-passo:nth-child(2), .fr-passo:nth-child(3) { stroke-width: 1.55; }
.fr-passo:nth-child(4), .fr-passo:nth-child(5) { stroke-width: 1.8; }
.fr-passo:nth-child(6), .fr-passo:nth-child(7) { stroke-width: 2.1; }
.fr-o { fill: var(--menta); }

/* computador: o texto fica mais estreito e o desenho ganha a coluna da direita, na altura da tela */
@media (min-width: 900px) {
  .rastro__grade { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 4.5vw, 72px); }
  /* nunca abaixo de 24px: as palavras ainda apagadas contam como texto grande (3:1) */
  .rastro__texto { font-size: clamp(24px, 2.4vw, 36px); }
  .rastro__desenho {
    width: min(100%, (100vh - var(--topo-altura) - 72px) / 1.1);
    max-width: none;
  }
}

/* ---------- Pegadas: onde cada aviso pousa ---------- */

/* Cada pegada encosta no contorno do seu passo e cresce para longe da trilha: as da esquerda ficam
   presas pela borda direita e pela de baixo (--dir, --b), as da direita pela esquerda e pela de cima
   (--esq, --y). --passo é o contorno em que o improviso vira aviso; o JS lê esse valor. */
.fr-pegada {
  position: absolute;
  z-index: 1;
  top: var(--y, auto);
  right: var(--dir, auto);
  bottom: var(--b, auto);
  left: var(--esq, auto);
  font-size: 14px;
  font-size: clamp(13px, 2.5cqw, 14px);
  line-height: 1.3;
  white-space: nowrap;
}

/* desenho estreito (até 599px de largura): quatro avisos, dois de cada lado da trilha. A comanda,
   mais estreita, fica no meio à direita, e o pedido desce para o canto de baixo, onde sobra espaço */
.fr-pegada--visita   { --dir: 41.5%; --b: 77.3%; --passo: 7; --origem: 100% 50%; }
.fr-pegada--mensagem { --dir: 55.5%; --b: 59.5%; --passo: 5; --origem: 100% 50%; display: none; }
.fr-pegada--chamado  { --dir: 61.6%; --b: 56.3%; --passo: 4; --origem: 100% 50%; }
.fr-pegada--comanda  { --esq: 56%;   --y: 62.7%; --passo: 2; --origem: 0 50%; }
.fr-pegada--pedido   { --esq: 40%;   --y: 85%;   --passo: 1; --origem: 0 50%; }

/* desenho largo: entra a mensagem da Mariana, e a letra acompanha o desenho, então a composição
   fica igual de 600px para cima */
@container fr (min-width: 600px) {
  .fr-pegada { font-size: clamp(13px, 2.2157cqw, 15px); }
  .fr-pegada--mensagem { display: block; }
  .fr-pegada--chamado  { --dir: 70.5%; --b: 41.8%; --passo: 3; }
  .fr-pegada--pedido   { --esq: 58.5%; --y: 59.1%; --passo: 2; }
  .fr-pegada--comanda  { --esq: 45%;   --y: 72.7%; --passo: 1; }
}

/* ---------- O aviso organizado, com a sombra dura de impressão ---------- */

.fr-aviso {
  position: relative;
  z-index: 2;
  display: grid;
  gap: .34em;
  padding: .74em .94em .8em;
  border-radius: 6px;
  background: var(--papel);
  color: var(--petroleo);
  box-shadow: 5px 6px 0 rgba(3, 16, 13, .6);
}
.fr-aviso--escuro { border: 1px solid rgba(244, 240, 216, .16); background: var(--musgo); color: var(--marfim); }
.fr-aviso b { font-weight: 650; letter-spacing: -.012em; }
.fr-aviso__app { display: flex; align-items: center; gap: .5em; font-size: max(13px, .867em); font-weight: 600; color: var(--suave-claro); }
.fr-aviso__app svg { flex: none; width: 1.45em; height: auto; fill: var(--positivo); }
.fr-aviso__app i { margin-left: auto; padding-left: 1.5em; font-style: normal; font-weight: 500; }
.fr-aviso__balao { justify-self: start; margin-top: .2em; padding: .5em .78em; border-radius: 3px 10px 10px 10px; background: #ECE7C9; font-size: max(13px, .933em); }
.fr-aviso__linha { display: flex; align-items: center; justify-content: space-between; gap: 1.2em; font-size: max(13px, .867em); color: var(--suave-escuro); }
.fr-estado, .fr-troca { display: inline-grid; }
.fr-estado > span, .fr-troca > span { grid-area: 1 / 1; }
.fr-estado > span { padding: .22em .6em; border-radius: 3px; font-weight: 650; text-align: center; }
.fr-estado .fr-de { background: var(--alerta-fundo); color: var(--alerta); }
.fr-estado .fr-para { background: var(--ok-fundo); color: var(--positivo); }
.fr-aviso__resp { font-size: max(13px, .933em); font-weight: 600; }
.fr-troca > span { display: inline-flex; align-items: center; gap: .5em; }
.fr-troca .fr-de { color: var(--alerta); }
.fr-avatar {
  flex: none;
  width: 1.75em;
  height: 1.75em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--musgo);
  color: var(--marfim);
  font-size: max(13px, .867em);
  font-style: normal;
  font-weight: 650;
}
.fr-aviso--visita { grid-template-columns: auto auto; align-items: center; column-gap: .8em; }
.fr-aviso__hora { padding: .42em .58em; border-radius: 4px; background: var(--menta); color: var(--petroleo); font-size: max(13px, .933em); font-weight: 600; }
.fr-aviso__texto { display: grid; }
.fr-aviso__texto span { font-size: max(13px, .867em); color: var(--suave-escuro); }

/* o pedido da mesa na tela da cozinha: faixa menta com a mesa e a hora, o prato e o aviso de envio */
.fr-aviso--comanda { gap: .42em; padding: 0 0 .78em; overflow: hidden; }
.fr-aviso__mesa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.6em;
  padding: .48em .94em .44em;
  background: var(--menta);
  color: var(--petroleo);
}
.fr-aviso .fr-aviso__mesa b { font-weight: 700; }
.fr-aviso__mesa time { font-size: max(13px, .867em); font-weight: 600; }
.fr-aviso__item { display: flex; align-items: center; gap: .6em; padding: .28em .94em 0; font-weight: 650; letter-spacing: -.01em; }
.fr-aviso__item i {
  flex: none;
  min-width: 1.7em;
  height: 1.7em;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: #ECE7C9;
  font-size: max(13px, .867em);
  font-style: normal;
  font-weight: 600;
}
.fr-aviso__cozinha { display: flex; align-items: center; gap: .42em; padding: 0 .94em; font-size: max(13px, .867em); font-weight: 600; color: var(--positivo); }
.fr-aviso__cozinha svg {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* sem script ou sem movimento, cada aviso já aparece resolvido */
.fr-de { opacity: 0; }

/* ---------- O improviso de antes, no mesmo canto do aviso: só aparece com movimento ---------- */

/* preso no mesmo canto que a pegada: calc(var() * 0) vira 0 quando a medida existe e auto quando não existe */
.fr-bruto {
  position: absolute;
  z-index: 1;
  top: calc(var(--y) * 0);
  right: calc(var(--dir) * 0);
  bottom: calc(var(--b) * 0);
  left: calc(var(--esq) * 0);
  display: none;
}
.fr-bruto__entra > * { box-shadow: 5px 6px 0 rgba(3, 16, 13, .58); }

/* a célula da planilha com a visita "combinada" */
.fr-planilha {
  display: grid;
  grid-template-columns: 2em auto auto auto;
  overflow: hidden;
  border-radius: 3px;
  background: var(--papel);
  color: var(--petroleo);
  font-size: max(13px, .867em);
  transform: rotate(-2.2deg);
}
.fr-planilha > span {
  display: flex;
  align-items: center;
  height: 2.1em;
  padding: 0 .75em;
  border-right: 1px solid rgba(16, 46, 40, .12);
  border-bottom: 1px solid rgba(16, 46, 40, .12);
}
.fr-planilha > :nth-child(-n + 4) { justify-content: center; height: 1.75em; background: #F1ECD0; color: var(--suave-claro); }
.fr-planilha > :nth-child(5) { justify-content: center; padding: 0; background: #F1ECD0; color: var(--suave-claro); }
.fr-planilha__sel { position: relative; background: var(--alerta-fundo); color: var(--alerta); font-weight: 600; box-shadow: inset 0 0 0 2px var(--positivo); }

/* a mensagem perdida no grupo da equipe */
.fr-zap { padding: .6em .66em .7em; border-radius: 10px; background: var(--musgo); color: var(--marfim); font-size: max(13px, .867em); transform: rotate(2.2deg); }
.fr-zap__grupo { display: flex; align-items: center; gap: .6em; padding: 0 .15em .55em; font-weight: 650; }
.fr-zap__grupo i { flex: none; width: 1.8em; height: 1.8em; display: grid; place-items: center; border-radius: 50%; background: #2C5A4B; font-style: normal; }
.fr-zap__msg { display: block; padding: .45em .75em .55em; border-radius: 3px 10px 10px 10px; background: #2C5A4B; line-height: 1.35; }
.fr-zap__msg b { display: block; font-weight: 650; color: var(--menta); }
.fr-zap__msg time { margin-left: .9em; color: rgba(244, 240, 216, .82); }

/* o e-mail sem resposta */
.fr-email {
  display: grid;
  grid-template-columns: 8px auto auto;
  align-items: start;
  gap: .1em .75em;
  padding: .75em 1em .8em .85em;
  border-radius: 6px;
  background: var(--papel);
  color: var(--petroleo);
  font-size: max(13px, .867em);
  transform: rotate(1.8deg);
}
.fr-email__ponto { width: 8px; height: 8px; margin-top: .45em; border-radius: 50%; background: var(--positivo); }
.fr-email__texto { display: grid; }
.fr-email__texto b { font-size: max(13px, .933em); font-weight: 650; }
.fr-email__texto > span { color: var(--suave-claro); }
.fr-email time { font-weight: 650; color: var(--positivo); }

/* a página do caderno do balcão */
.fr-caderno { position: relative; padding: .3em 1.05em .45em 2.5em; background: var(--papel); color: var(--petroleo); transform: rotate(-2.6deg); }
.fr-caderno::before { content: ""; position: absolute; left: 1.8em; top: 0; bottom: 0; width: 1.5px; background: rgba(138, 83, 0, .45); }
.fr-caderno p { display: flex; align-items: flex-end; height: 2em; padding-bottom: .25em; border-bottom: 1px solid rgba(16, 46, 40, .16); white-space: nowrap; }
.fr-caderno p > span { display: inline-block; font-weight: 560; letter-spacing: -.01em; transform: skewX(-8deg); }

/* a comanda de papel do garçom, destacada do bloco: a sombra dura segue o picote de cima */
.fr-bruto__entra > .fr-comanda { box-shadow: none; }
.fr-comanda { transform: rotate(3deg); filter: drop-shadow(5px 6px 0 rgba(3, 16, 13, .58)); }
.fr-comanda__papel {
  min-width: 11em;
  padding: 1.1em 1.05em .5em;
  background: var(--papel);
  color: var(--petroleo);
  clip-path: polygon(0 5px, 4% 0, 8% 5px, 12% 0, 16% 5px, 20% 0, 24% 5px, 28% 0, 32% 5px, 36% 0, 40% 5px, 44% 0, 48% 5px, 52% 0, 56% 5px, 60% 0, 64% 5px, 68% 0, 72% 5px, 76% 0, 80% 5px, 84% 0, 88% 5px, 92% 0, 96% 5px, 100% 0, 100% 100%, 0 100%);
}
.fr-comanda__cab {
  display: flex;
  justify-content: space-between;
  gap: 1.4em;
  padding-bottom: .4em;
  border-bottom: 1.5px dashed rgba(16, 46, 40, .32);
  font-size: max(13px, .8em);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--suave-claro);
}
.fr-comanda p { display: flex; align-items: flex-end; height: 2em; padding-bottom: .22em; border-bottom: 1px solid rgba(16, 46, 40, .16); white-space: nowrap; }
.fr-comanda p:last-child { border-bottom: 0; }
.fr-comanda p > span { display: inline-block; font-weight: 560; letter-spacing: -.01em; transform: skewX(-8deg); }
.fr-comanda__mesa > span { font-weight: 700; }

/* o risco feito à mão quando o improviso vira aviso */
.fr-riscavel { position: relative; }
.fr-risco {
  position: absolute;
  left: -.3em;
  top: 50%;
  width: calc(100% + .6em);
  height: 12px;
  margin-top: -6px;
  overflow: visible;
  fill: none;
  stroke: var(--petroleo);
  stroke-width: 2.2;
  stroke-linecap: round;
  pointer-events: none;
}
.fr-planilha__sel .fr-risco { left: .4em; width: calc(100% - .8em); stroke: var(--alerta); }
.fr-zap .fr-risco { stroke: var(--menta); }
/* o traço mais longo que o vão evita o pontinho que a ponta redonda deixaria antes do risco */
.fr-risco path { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; }

/* ---------- Celular e tablet: a seção não fica presa e o desenho vem depois do texto ---------- */

@media (max-width: 899px) {
  .rastro__texto { font-size: 24px; }
  .rastro__desenho { order: 0; justify-self: start; width: min(100%, 560px); max-width: none; }
}

/* celular: a trilha fica mais à esquerda (o JS troca a geometria) e ficam três avisos de sistemas
   diferentes: a visita no alto, a comanda e o pedido empilhados à direita, onde a trilha abre espaço */
@media (max-width: 599px) {
  .rastro__desenho { width: 100%; }
  .fr-palco { padding-bottom: 54px; }
  .fr-pegada { font-size: 14px; font-size: clamp(13px, 4cqw, 14px); }
  .fr-pegada--visita  { --esq: 0%;   --dir: auto; --y: .5%;  --b: auto; --origem: 0 50%; }
  .fr-pegada--comanda { --esq: auto; --dir: 0%;   --y: 64%;  --passo: 4; --origem: 100% 50%; }
  .fr-pegada--pedido  { --esq: auto; --dir: 0%;   --y: 95.5%; --origem: 100% 50%; }
  .fr-pegada--mensagem, .fr-pegada--chamado { display: none; }
  /* a comanda fica um pouco mais estreita para não encostar na trilha nos celulares menores */
  .fr-aviso__mesa, .fr-aviso__item, .fr-aviso__cozinha { padding-inline: .8em; }
  .fr-aviso--visita { grid-template-columns: auto; justify-items: start; row-gap: .5em; }
  .fr-planilha { grid-template-columns: 2em auto auto; }
  .fr-planilha > .fr-planilha__curso { display: none; }
}

/* ---------- Com movimento: o improviso é riscado e o aviso cai no lugar dele ---------- */

@media (prefers-reduced-motion: no-preference) {
  .fr-vivo .fr-bruto {
    display: block;
    transition: opacity .3s var(--ease) .15s, transform .45s var(--entra) .15s;
  }
  .fr-vivo .fr-feita .fr-bruto {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(.95);
    transition: opacity .3s var(--ease) .3s, transform .45s var(--ease) .3s;
  }
  .fr-vivo .fr-feita .fr-risco path { stroke-dashoffset: 0; transition: stroke-dashoffset .3s var(--ease); }

  .fr-vivo .fr-aviso {
    opacity: 0;
    transform: translate3d(0, -10px, 0) scale(1.07) rotate(-2deg);
    transform-origin: var(--origem, 50% 50%);
    transition: opacity .2s var(--ease), transform .3s var(--ease);
  }
  .fr-vivo .fr-feita .fr-aviso {
    opacity: 1;
    transform: none;
    transition: opacity .35s var(--ease) .32s, transform .7s var(--entra) .32s;
  }

  /* dentro do aviso, o estado muda depois que ele pousa: aguardando vira aprovado, sem responsável
     vira o Bruno, e o visto do envio para a cozinha é desenhado */
  .fr-vivo .fr-de, .fr-vivo .fr-para { transition: opacity .25s ease, transform .35s var(--entra); }
  .fr-vivo .fr-pegada:not(.fr-feita) .fr-de { opacity: 1; }
  .fr-vivo .fr-pegada:not(.fr-feita) .fr-para { opacity: 0; transform: translate3d(0, 5px, 0); }
  .fr-vivo .fr-feita .fr-de { transform: translate3d(0, -5px, 0); transition-delay: 1s; }
  .fr-vivo .fr-feita .fr-para { transition-delay: 1.05s; }
  .fr-vivo .fr-pegada:not(.fr-feita) .fr-aviso__cozinha path { stroke-dashoffset: 1; }
  .fr-vivo .fr-feita .fr-aviso__cozinha path { transition: stroke-dashoffset .45s var(--ease) 1s; }

  /* na primeira vez que o desenho aparece, os improvisos caem na mesa, um depois do outro */
  .fr-vivo .fr-bruto__entra {
    opacity: 0;
    transform: translate3d(0, -30px, 0) rotate(4deg) scale(1.06);
    transition: opacity .45s var(--ease) var(--d), transform 1s var(--entra) var(--d);
  }
  .fr-vivo.fr-chegou .fr-bruto__entra { opacity: 1; transform: none; }
}