/* Quadro deitado - o que é novo. Complementa styles.css (tokens vêm de lá).
   Nada aqui altera nenhum outro mockup. */

/* `hidden` tem que vencer o display: as sheets e o coach nascem escondidos */
[hidden] { display: none !important; }

:root {
  --late-ink: #8C2B1F;
  --amber-ink: #7A5600;
  --ok-ink: #256B41;

  /* Tinta de ação sobre branco. O --brand-strong (#0C9488) dá 3,75:1, que
     REPROVA AA em texto de 12,5px/700 - e o controle mais importante do card
     é exatamente esse tamanho. Este tom dá 6,2:1. */
  --go-ink: #0B6D64;
  /* Cinza de apoio sobre o fundo da faixa. O --muted (#587570) dá 4,41:1 ali,
     logo abaixo do mínimo; este dá 5,3:1. */
  --fx-muted: #4C6863;
  /* Tinta do quadradinho apagado do mapa. O #9BB2AC dava 2,0:1 contra o fundo
     off - e ali não é só grafismo: o número e o nome da etapa também são
     desenhados nessa cor. Este dá 4,89:1 (texto passa AA, gráfico sobra). */
  --off-ink: #566E69;

  --faixa-bg: #E6EEEB;
  --faixa-line: #D3E0DC;
}

/* ==========================================================================
   BARRA DO QUADRO: o que está APERTANDO + a troca de vista
   Antes esta barra dizia "6 etapas - 26 fornadas": um número que quase nunca
   muda e que ninguém consulta entre uma fornada e outra. Agora ela diz o que
   decide o próximo passo - quanto está atrasado e quanto é pra hoje - e o
   "atrasadas" é botão: pula pra primeira etapa com atraso.
   ========================================================================== */
.seg-view { margin-bottom: 12px; }
.seg-view button {
  font-size: 12.5px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 0 4px;
}
.seg-view button i { font-size: 16px; }

.quadro-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 10px;
}

.qb-urg { display: flex; align-items: center; min-width: 0; }
.urg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 99px;
  padding: 7px 10px;
  white-space: nowrap;
  min-width: 0;
}
.urg i { font-size: 14px; flex: 0 0 auto; }
.urg em { font-style: normal; font-weight: 600; opacity: .75; }
button.urg { border: none; cursor: pointer; font-family: var(--font-body); }
.urg-late { background: var(--danger-soft); color: var(--late-ink); }
.urg-zero { background: var(--ok-soft); color: var(--ok-ink); }

/* Duas opções COM RÓTULO. Glifo pelado obriga a decorar - e a única aula que
   a pessoa recebe é uma tarja que some pra sempre. Texto custa uma linha. */
.vista-seg {
  display: flex;
  flex: 0 0 auto;
  background: #E1EAE7;
  border-radius: 12px;
  padding: 3px;
  gap: 3px;
}
.vista-seg button {
  min-height: 44px;
  padding: 0 9px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--fx-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.vista-seg button i { font-size: 16px; }
.vista-seg button.on {
  background: var(--surface);
  color: var(--go-ink);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(12, 29, 27, .08);
}

/* Coach de estreia. A versão anterior dizia "toque aqui pra voltar pras
   colunas" e tocar ali só fechava a tarja - a única aula que a pessoa recebe
   ensinava errado. Agora a tarja TEM o botão que ela promete, e a seta nasce
   na ponta direita, embaixo do seletor de verdade. */
.coach {
  position: relative;
  background: var(--brand-soft);
  border: 1px solid #BFE8E2;
  color: #0B6D64;
  border-radius: var(--r-card);
  padding: 9px 12px 8px;
  margin-bottom: 12px;
  font-size: 12.5px;
  line-height: 1.42;
}
.coach-txt { padding-right: 22px; }
.coach-acoes { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.coach-go, .coach-x {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.coach-go {
  border: 1px solid var(--go-ink);
  background: var(--surface);
  color: var(--go-ink);
}
.coach-x {
  border: none;
  background: transparent;
  color: var(--go-ink);
  opacity: .75;
}
.coach-seta {
  position: absolute;
  top: -14px; right: 14px;
  font-size: 20px;
  color: var(--brand);
}

/* ==========================================================================
   MAPA DAS ETAPAS
   O que a vista deitada perderia (ver o fluxo inteiro de uma vez) volta aqui,
   e de quebra vira atalho. COM NOME: seis quadradinhos de ícone + número se
   liam "4 12 3 2 0 5" e obrigavam a decorar a ordem. E em GRADE, não em
   trilho: com 10 etapas ele transbordava 514px numa tela de 362 e cortava as
   3 últimas sem pista nenhuma - o antídoto quebrava na dose pra que existe.
   ========================================================================== */
.mapa {
  display: grid;
  gap: 5px;
  padding: 2px 0 10px;
}

.mapa-i {
  position: relative;
  min-height: 48px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: pointer;
  padding: 4px 3px;
  overflow: hidden;
}
.mapa-i i { font-size: 15px; color: var(--go-ink); line-height: 1; }
.mapa-i b { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.mapa-lbl {
  max-width: 100%;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--fx-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}
.mapa-i.off { background: #EEF3F1; border-color: #E4EBE8; }
.mapa-i.off i { color: var(--off-ink); }
.mapa-i.off b, .mapa-i.off .mapa-lbl { color: var(--off-ink); }
.mapa-late {
  position: absolute;
  top: 4px; right: 5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--danger);
}

/* ==========================================================================
   O QUADRO DEITADO - FAIXAS
   ========================================================================== */
.quadro-deitado { display: block; }

.quadro-deitado .faixa {
  position: relative;
  flex: none;
  background: var(--faixa-bg);
  border: 1px solid var(--faixa-line);
  border-radius: var(--r-card);
  padding: 0;
  overflow: hidden;
  transition: background .16s ease, border-color .16s ease;
}
/* Dois níveis de hierarquia precisam de dois espaços: 18px entre ETAPAS,
   8px entre cards da MESMA etapa (antes eram 10 e 10). */
.quadro-deitado .faixa + .faixa { margin-top: 16px; }

/* O cabeçalho INTEIRO é o botão que abre a lista de todas.
   Antes a saída do excesso era o último cartão do trilho: pra chegar na tela
   que existe pra dar conta de 12 fornadas era preciso varrer as 12. */
.faixa-h {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 12px 6px;
  min-height: 46px;
  border: none;
  background: transparent;
  text-align: left;
  font-family: var(--font-body);
  color: inherit;
}
button.faixa-h { cursor: pointer; }
button.faixa-h:active { background: rgba(255, 255, 255, .5); }
.fh-ic {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--surface);
  color: var(--go-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.fh-txt { flex: 1 1 auto; min-width: 0; display: block; }
.fh-nome {
  display: block;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* O número que mais importa é QUANTAS FORNADAS, e ele vem rotulado, colado no
   nome. Antes eram dois números pelados ("Preparo 934 un" e uma pílula "12"
   longe, na direita) e a leitura rápida pegava 934 como a contagem. */
.fh-nome em {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  color: var(--fx-muted);
  margin-left: 6px;
}
.fh-sub {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--fx-muted);
  min-width: 0;
}
.fh-un { white-space: nowrap; }
.fh-late {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--late-ink);
  background: var(--danger-soft);
  border-radius: 99px;
  padding: 2px 7px;
  white-space: nowrap;
}
/* O "+N fora da tela" mora AQUI, junto da contagem. Antes era um chip pousado
   na borda direita do trilho, em cima da linha do pedido do card (o "+10"
   comia "#1037 Cláud[ia]"). Continua MEDIDO a cada rolagem. */
.fh-fora {
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fh-fora:empty { display: none; }
.fh-mais { flex: 0 0 auto; font-size: 18px; color: var(--fx-muted); }

/* CARGA: a altura da faixa é sempre a mesma, então a fila entupida sumia do
   olho (em colunas, a coluna mais alta era um alarme de graça). Esta barrinha
   devolve o alarme: comprimento = tamanho da fila contra a etapa mais cheia,
   e a cabeça vermelha é a parte atrasada. */
.faixa-carga {
  display: flex;
  gap: 2px;
  height: 4px;
  margin: 0 12px 6px;
}
/* a barra carrega informação sozinha, então ela mesma precisa passar 1.4.11:
   4,71:1 do segmento teal e 4,13:1 do vermelho contra o trilho (o --brand puro
   dava 1,95:1 e não valia como sinal). */
.faixa-carga i { display: block; height: 100%; border-radius: 99px; }
.faixa-carga .c-late { background: var(--danger); }
.faixa-carga .c-ok { background: var(--go-ink); }
.faixa-carga .c-tr { background: #D7E3DF; flex: 1 1 auto; }

/* TRILHO: os cards correndo de lado.
   `overscroll-behavior-x: contain` impede que a rolagem da faixa "vaze" pro
   pai (e vire voltar-página no iOS). `touch-action` fica no automático DE
   PROPÓSITO em toda esta folha: é ele que deixa o dedo escolher o eixo - de
   lado rola o trilho, pra baixo rola a página, sem nenhum código nosso no
   meio. (Não existe nenhuma regra de touch-action aqui: a versão anterior
   dizia isso no comentário e aplicava `touch-action: manipulation` nos cards
   trinta linhas depois.) */
.trilho-wrap { position: relative; }
.trilho {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 12px;
  padding: 0 12px 12px;
  scrollbar-width: none;
}
.trilho::-webkit-scrollbar { display: none; }
/* o snap engole o auto-scroll de borda durante o arraste. O app já paga esse
   preço no quadro (`body.is-dragging [data-drag-board]`), mas a regra de lá
   não pega no trilho, porque o trilho não é o board. Esta é a irmã dela. */
body.is-dragging [data-trilho] { scroll-snap-type: none; }

/* Pista de borda: só o desbotado, sem badge. O número do que ficou fora vive
   no cabeçalho. Ancorada no trilho (`inset` de verdade), não num `top: 44px`
   chutado que caía 1px dentro do cabeçalho. */
.faixa-fade {
  position: absolute;
  right: 0; top: 0; bottom: 12px;
  width: 26px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  background: linear-gradient(90deg, rgba(230, 238, 235, 0) 0%, rgba(230, 238, 235, .85) 60%, var(--faixa-bg) 100%);
}
.faixa.tem-mais .faixa-fade { opacity: 1; }

.faixa-vazia {
  padding: 0 14px 16px;
  font-size: 12.5px;
  color: var(--fx-muted);
}

/* ==========================================================================
   CARD DE FORNADA
   ========================================================================== */
.fcard {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid #CBD9D5;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 9px 10px 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.fcard.r-late, .fcard.r-today { border-left-color: var(--danger); }
.fcard.r-soon { border-left-color: var(--amber); }
.fcard.r-ok { border-left-color: var(--ok); }

/* DOIS cards inteiros por faixa, mais um pedaço do terceiro como pista.
   Antes era um card de 200px num trilho de 360: o segundo aparecia 69% e 58px
   dele ficavam debaixo da tarja - dava UM card legível por etapa. */
.fc-deitado {
  flex: 0 0 calc((100% - 42px) / 2);
  width: calc((100% - 42px) / 2);
  min-height: 148px;
  scroll-snap-align: start;
}

.fc-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 6px;
  margin-bottom: 3px;
}
.fc-data {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.kchip {
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 99px;
  padding: 2px 7px;
  white-space: nowrap;
  background: #EEF3F1;
  color: var(--fx-muted);
}
.kchip.r-late, .kchip.r-today { background: var(--danger-soft); color: var(--late-ink); }
.kchip.r-soon { background: var(--amber-soft); color: var(--amber-ink); }
.kchip.r-ok { background: var(--ok-soft); color: var(--ok-ink); }

.fc-nome {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.fc-qtd { font-size: 12px; color: var(--fx-muted); margin-top: 2px; }
.fc-qtd b { font-family: var(--font-display); font-weight: 700; color: var(--ink); }

/* A linha de meta só existe quando TEM meta. Antes ela reservava 22px em toda
   fornada e ficava vazia em 11 das 26 - num card em que o rodapé já come 44. */
.fc-meta { margin-top: 4px; }
.fc-vinc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  font-size: 11px;
  color: var(--fx-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-vinc i { font-size: 13px; flex: 0 0 auto; }

.fcard .timer-chip {
  margin-top: 0;
  color: var(--amber-ink);
  font-size: 11px;
  padding: 3px 7px;
}
.fcard .timer-chip i { font-size: 12px; }

/* AVANÇAR - a saída de UM TOQUE. Vive dentro do card e não briga com o
   arraste: o motor ignora pointerdown que nasce em button/a/input. */
.fc-go, .fc-fim {
  margin-top: auto;
  margin-left: -10px;
  margin-right: -10px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-top: 1px solid #EDF3F0;
  border-radius: 0 0 10px 10px;
  background: transparent;
  color: var(--go-ink);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.fc-go i, .fc-fim i { font-size: 16px; flex: 0 0 auto; }
.fc-go span, .fc-fim span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-go:active, .fc-fim:active { background: var(--brand-soft); }
/* Última etapa: era um selo estático "pronta" ocupando os mesmos 44px de alvo
   sem fazer nada. Agora é a ação que faltava - a mesma "Concluir fornada" que
   o app já tem no detalhe. */
.fc-fim { color: var(--ok-ink); }
.fc-fim:active { background: var(--ok-soft); }

/* CARD CORTADO PELA BORDA: o controle morre junto.
   Medido na versão anterior: o "-> Geladeira" de um card que aparecia 134px de
   195 continuava VIVO, e é exatamente onde o polegar encosta pra começar a
   varrer. Três toques a 8, 20 e 40px da borda avançavam uma fornada cujo nome
   não dava pra ler. Agora o botão do card cortado é inerte e parece inerte -
   tocar ali abre o detalhe, que é seguro. */
.fcard.corte .fc-go, .fcard.corte .fc-fim { pointer-events: none; opacity: .3; }

/* Cartão-final do trilho: saída SECUNDÁRIA pro excesso (a principal é o
   cabeçalho da faixa). Fica menor de propósito. */
.fc-mais {
  flex: 0 0 112px;
  min-height: 148px;
  scroll-snap-align: start;
  border: 1.5px dashed #C7D8D3;
  background: #F4F9F7;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  color: var(--go-ink);
  font-family: var(--font-body);
  padding: 8px;
  text-align: center;
}
.fc-mais i { font-size: 19px; margin-bottom: 3px; }
.fc-mais b { font-size: 12.5px; font-weight: 700; }
.fc-mais span { font-size: 11px; color: var(--fx-muted); }

/* ==========================================================================
   ARRASTE
   ========================================================================== */
.kdrag-ghost {
  box-shadow: var(--shadow-pop);
  opacity: .97;
  border-color: var(--brand);
  transform-origin: 50% 50%;
}
.kcard.kdrag-src { opacity: .34; filter: saturate(.4); }
.kcard.kdrag-landing { opacity: 0; }

body.is-dragging { cursor: grabbing; }
body.is-dragging .fc-go, body.is-dragging .fc-fim, body.is-dragging .fc-mais { pointer-events: none; }

/* Faixa alvo: o quadro deitado ganha aqui. A área de soltar é a LARGURA
   INTEIRA da tela, não uma coluna de 200px - é muito mais difícil errar.
   CRÍTICO: a área de soltar é uma CAMADA POR CIMA (position:absolute), não um
   bloco no fluxo. Na versão anterior ela entrava no fluxo e a faixa crescia
   57px ao acender, empurrando pra baixo a faixa seguinte - justamente a que a
   pessoa estava mirando. O alvo fugia do dedo. */
.quadro-deitado .faixa.drop-target {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.quadro-deitado .faixa.drop-target .fh-ic { background: var(--brand); color: #fff; }
/* `:not(.faixa-fica)` é obrigatório: a camada de origem herda `.faixa-drop`
   pra reaproveitar o desenho, então sem isso a faixa ALVO acendia com o texto
   da faixa de origem ("arraste pra baixo") no lugar de "solte aqui". */
.quadro-deitado .faixa.drop-target > .faixa-drop:not(.faixa-fica) { display: flex; }
.quadro-deitado .faixa.drop-origem > .faixa-fica { display: flex; }

.faixa-drop {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  padding: 13px 14px;
  text-align: center;
  border: 2px dashed var(--brand);
  border-radius: var(--r-card);
  background: rgba(226, 245, 242, .93);
  color: #0B6D64;
  font-size: 12.5px;
  font-weight: 600;
}
.faixa-drop i { font-size: 17px; flex: 0 0 auto; }
/* A faixa de ORIGEM não é destino: ela é o lugar onde a pessoa faz o gesto
   antigo (segurar e varrer pro lado) e não acontece nada. Em vez de beco sem
   saída, ela ensina o gesto certo no exato momento da dúvida. */
.faixa-fica {
  border-style: solid;
  border-color: var(--line);
  background: rgba(255, 255, 255, .93);
  color: var(--fx-muted);
}
.faixa-fica b { color: var(--ink); }

/* Faixa vazia: continua sendo destino de soltar, e NÃO muda de tamanho quando
   o arraste começa (antes ela crescia de 76px pra 104px só por o dedo ter
   levantado um card, empurrando a faixa de baixo). */
.quadro-deitado .faixa.vazia .faixa-vazia { min-height: 22px; }

.quadro-colunas .kcol.drop-target { background: var(--brand-soft); outline: 2px dashed var(--brand); outline-offset: -3px; }
.quadro-colunas .kcol.drop-origem { outline: 2px solid var(--line); outline-offset: -3px; }

.faixa.piscou { box-shadow: 0 0 0 3px rgba(15, 181, 166, .35); }

/* ==========================================================================
   VISTA DE COLUNAS (a de hoje) - só pra comparação lado a lado
   O piso e o respiro são os DO APP (.kanban7: minmax(222px,1fr), gap 16px).
   Antes aqui era 244px com gap 10, o que inflava a coluna em ~8% e fazia a
   comparação nascer torta a favor da proposta.
   ========================================================================== */
.quadro-colunas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(222px, 1fr);
  gap: 16px;
  align-items: start;
  overflow-x: auto;
  padding: 2px 2px 14px;
  scroll-snap-type: x proximity;
}
.quadro-colunas > .kcol { scroll-snap-align: start; }
.quadro-colunas .coluna {
  background: var(--faixa-bg);
  border: 1px solid var(--faixa-line);
  border-radius: var(--r-card);
  padding: 10px;
}
.quadro-colunas .kcol-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 10px; }
.quadro-colunas .kcol-head h3 { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 14px; font-weight: 700; }
.quadro-colunas .kcol-head h3 i { color: var(--go-ink); font-size: 16px; }
.quadro-colunas .kcol-head .n { white-space: nowrap; font-size: 11.5px; font-weight: 600; color: var(--fx-muted); }
.col-body { display: flex; flex-direction: column; gap: 8px; }
.col-vazia { padding: 18px 6px; text-align: center; font-size: 12.5px; color: var(--fx-muted); }
.fc-coluna { width: 100%; min-height: 0; }

.colunas-nota, .rodape-nota {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 12px;
}
.rodape-nota { margin-top: 14px; }
.colunas-nota { display: flex; align-items: flex-start; gap: 7px; }
.colunas-nota i { font-size: 15px; margin-top: 1px; flex: 0 0 auto; }

/* ==========================================================================
   TOAST COM DESFAZER
   ========================================================================== */
.toast { white-space: normal; max-width: 88%; text-align: center; }
.toast-acao {
  margin-left: 10px;
  border: none;
  background: transparent;
  color: #7FE7DC;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

/* ==========================================================================
   SHEETS
   ========================================================================== */
.sheet-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }

.lin {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #EDF3F0;
}
.lin:last-child { border-bottom: none; }
.lin-risco { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: #C7D8D3; }
.lin-risco.r-late, .lin-risco.r-today { background: var(--danger); }
.lin-risco.r-soon { background: var(--amber); }
.lin-risco.r-ok { background: var(--ok); }
.lin-txt { flex: 1; min-width: 0; }
.lin-txt b { font-size: 13.5px; font-weight: 600; display: block; }
.lin-txt small { font-size: 11.5px; color: var(--fx-muted); }
/* O botão de avançar DIZ PRA ONDE, igual ao do card. Era uma seta pelada -
   e esta é a tela mais densa do lote, a mais fácil de errar o toque. */
.lin-go {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--go-ink);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer;
  max-width: 46%;
}
.lin-go i { font-size: 16px; flex: 0 0 auto; }
.lin-go span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lin-vazio { padding: 22px 4px; text-align: center; font-size: 13px; color: var(--fx-muted); }

.kv { padding: 9px 0; border-bottom: 1px solid #EDF3F0; justify-content: space-between; }
.kv .v { display: inline-flex; align-items: center; gap: 5px; }
.det-nota { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 12px; }

/* ==========================================================================
   TELAS ESTREITAS DE VERDADE (360px)
   ========================================================================== */
@media (max-width: 400px) {
  .seg-view button { font-size: 11.5px; gap: 4px; }
  .vista-seg button { padding: 0 8px; }
  .urg { padding: 7px 9px; }
}

/* ==========================================================================
   COMPUTADOR (desktop.html)
   As duas vistas na mesma página, saindo dos mesmos dados. O veredito está
   escrito na tela e no README: no computador quem ganha é COLUNAS.
   ========================================================================== */
body.desk .sheet-bg { position: fixed; border-radius: 0; }
body.desk .sheet {
  position: fixed;
  left: 50%; right: auto; bottom: 34px;
  transform: translateX(-50%);
  width: min(560px, 94vw);
  max-height: 76vh;
  border-radius: 20px;
}
body.desk .sheet-grab { display: none; }

/* Esta página é uma COMPARAÇÃO, não uma tela: a casca cresce com o conteúdo
   em vez de virar uma janelinha com rolagem própria dentro do print. */
body.desk .app-shell { height: auto; min-height: 720px; }
body.desk .dmain { overflow: visible; }

.desk-sec { margin-bottom: 26px; }
.desk-sec:last-of-type { margin-bottom: 0; }

.desk-sec-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.desk-sec-h h2 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.desk-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 3px 9px;
}
.desk-tag.ganha { background: var(--ok-soft); color: var(--ok-ink); }
.desk-tag.perde { background: var(--amber-soft); color: var(--amber-ink); }
.desk-sec-p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 780px;
  margin-bottom: 12px;
}
.desk-sec-p b { color: var(--ink); font-weight: 600; }

/* Vista de colunas no computador: o mesmo desenho do app (.kanban7). O teto
   de altura com rolagem interna que existia aqui (max-height:460px) NÃO
   existe no app fora do modo TV, e ele espremia 3 das 6 colunas - a
   comparação nascia torta contra as colunas justamente no aparelho em que
   elas ganham. */
body.desk .quadro-colunas.kanban-desk {
  grid-template-columns: none;      /* mata o repeat(4) do desktop.css */
  padding: 0 0 10px;
}
body.desk .quadro-colunas .coluna { min-height: 300px; }
body.desk .quadro-colunas .col-body > * { flex: 0 0 auto; }
body.desk .fc-coluna { min-height: 0; }

/* Janela de notebook de verdade (1440), não a moldura estreita padrão -
   senão a medida do quadro sai mentindo pro lado errado. */
body.desk .browser { max-width: 1400px; }
body.desk .stage-desk .frame-meta { max-width: 1400px; }

/* Vista deitada no computador: mesma faixa do celular, largura de monitor.
   Cabe mais card por faixa - e sobra vazio à direita nas etapas magras. */
body.desk .quadro-deitado { max-width: 100%; }
body.desk .fc-deitado { flex: 0 0 208px; width: 208px; }

.desk-medida {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 12px;
}
.desk-medida i { font-size: 16px; color: var(--go-ink); flex: 0 0 auto; margin-top: 1px; }
.desk-medida b { color: var(--ink); font-weight: 600; }

/* Veredito */
.veredito {
  border: 1px solid #CFE0DA;
  background: linear-gradient(180deg, #FFFFFF, #F4FAF8);
  border-radius: var(--r-card);
  padding: 16px 18px;
  margin-bottom: 22px;
}
.veredito h2 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.veredito h2 i { color: var(--go-ink); font-size: 19px; }
.veredito p { font-size: 13.5px; line-height: 1.65; color: var(--muted); max-width: 820px; }
.veredito p + p { margin-top: 8px; }
.veredito b { color: var(--ink); font-weight: 600; }

/* Onde o botão mora, no computador (ilustração - não troca nada aqui) */
.vista-seg.mostra { pointer-events: none; }
.onde-fica {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px dashed #C7D8D3;
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--paper);
  margin-top: 12px;
}
.onde-fica p { font-size: 12.5px; line-height: 1.55; color: var(--muted); flex: 1 1 320px; }
.onde-fica b { color: var(--ink); font-weight: 600; }