/* ============================================================
   PAINEL DE AEROPORTO (FIDS) — modo TV · IDENTIDADE SANTA CLARA
   Referencia de forma: flight information display system.
   Uma linha por caminhao, sem moldura, sem cartao, sem sombra.

   PALETA: usa os hex oficiais da marca (ver :root de style.css)
     --navy    #0D1461   azul padrao Santa Clara  -> fundo
     --teal    #00AF8D   verde Santa Clara        -> liberado
     --turquesa#3AD9BC   tint do verde            -> acentos
     --magenta #EE2B79   magenta Santa Clara      -> faixa/marca

   EXCECAO DELIBERADA: o vermelho de bloqueio NAO e cor de marca.
   A marca nao tem vermelho, e magenta sozinho nao le como "pare"
   numa TV de operacao. Seguranca vence identidade no sinal de
   perigo -- mesma regra ja aplicada em style.css ("semanticas
   operacionais NAO seguem a marca, seguem seguranca").
   ============================================================ */

.fids{
  /* --- fundo: navy da marca, escurecido para contraste de TV --- */
  --f-bg:#070A2E;         /* navy #0D1461 rebaixado p/ fundo de TV */
  --f-bg2:#0B1044;        /* faixa/superficie */
  --f-row:#0A0E3A;        /* zebra */
  --f-line:#1A2170;       /* divisorias */

  --f-txt:#FFFFFF;
  --f-dim:#8E9BD6;        /* texto secundario: azul claro da familia navy */

  --f-crit:#FF3B4E;       /* bloqueado — seguranca, nao marca */
  --f-warn:#FFA828;       /* transferir — seguranca, nao marca */
  --f-fisc:#EE2B79;       /* fiscal — MAGENTA SANTA CLARA */
  --f-ok:#00E0A8;         /* liberado — verde Santa Clara realcado p/ TV */
  --f-done:#3AD9BC;       /* finalizado — TURQUESA SANTA CLARA */

  /* inset:0 e mais moderno que top/right/bottom/left -- TV Samsung antiga
     (Tizen velho) nao reconhecia, o painel ficava sem altura fixa e
     sobrava fundo cru abaixo do conteudo (bug relatado 25/09). Formas
     escritas por extenso tem suporte muito mais antigo, ficam as duas
     por seguranca (navegador que entende inset usa a mais nova por
     cascata, os que nao entendem usam a de baixo). */
  position:fixed; top:0; right:0; bottom:0; left:0; inset:0; z-index:400;
  background:var(--f-bg); color:var(--f-txt);
  /* font-family definida mais abaixo, junto com os @font-face da
     Source Sans Pro -- nao duplicar a regra aqui. */
  display:flex; flex-direction:column;
}

/* ---------- cabecalho ---------- */
.f-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:2.2vh 2.4vw 1.6vh;
  background:var(--f-bg2);
  position:relative;
}
/* faixa da marca: verde -> magenta, a mesma assinatura do painel atual */
.f-top::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg,var(--f-ok) 0%,#3AD9BC 45%,#EE2B79 100%);
}
.f-brand{display:flex; align-items:center; gap:1.4vw}
/* fallback pra "SANTA CLARA" colar em "CARREGAMENTOS": TV Samsung antiga
   (Tizen velho) reconhece display:flex mas ignora gap em flex (feature
   mais nova) -- sem isso os itens ficam grudados, sem o respiro do gap
   (bug relatado 25/09). margin-left cobre o mesmo espaco em qualquer
   motor, inclusive nos que ja aplicam gap (ai fica so uma folga extra
   pequena, imperceptivel). */
.f-brand > *:not(:first-child){margin-left:1.4vw}
.f-brand .logo svg{height:4.6vh; width:auto; display:block}
.f-ttl{
  font-size:3.4vh; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; line-height:1;
}
.f-sub{font-size:1.5vh; color:var(--f-dim); letter-spacing:.2em; margin-top:.5vh}

.f-right{display:flex; align-items:center; gap:2.2vw}
/* mesmo fallback do .f-brand acima -- sem isso "NO PATIO" cola em
   "sexta-feira, 25 de setembro" (bug relatado 25/09, mesma causa). */
.f-right > *:not(:first-child){margin-left:2.2vw}
.f-kpi{text-align:center; line-height:1}
.f-kpi b{font-size:5.4vh; font-weight:800; font-variant-numeric:tabular-nums; display:block}
.f-kpi span{font-size:1.3vh; color:var(--f-dim); letter-spacing:.16em; text-transform:uppercase}
.f-kpi.ok b{color:var(--f-ok)}

/* BLOQUEADOS com bloco vermelho solido -- pedido explicito: tem que
   saltar aos olhos de longe, nao so o numero colorido. Numero e rotulo
   viram brancos sobre o vermelho para manter contraste. */
.f-kpi.crit{
  background:var(--f-crit); border-radius:10px;
  padding:1vh 1.4vw; box-shadow:0 0 0 3px rgba(255,59,78,.25);
}
.f-kpi.crit b,
.f-kpi.crit span{color:#fff}

/* Zero bloqueadas nao e alerta: sem carga travada, o bloco vermelho
   vira neutro para nao gritar a toa numa TV que fica ligada o dia todo.
   A classe .zero e posta pelo JS (fids.js) conforme o contador. */
.f-kpi.crit.zero{
  background:transparent; box-shadow:none;
  padding:0;
}
.f-kpi.crit.zero b{color:var(--f-txt)}
.f-kpi.crit.zero span{color:var(--f-dim)}
.f-clock{text-align:right}
.f-clock .hh{font-size:6.4vh; font-weight:800; font-variant-numeric:tabular-nums; line-height:1}
.f-clock .dd{font-size:1.5vh; color:var(--f-dim); letter-spacing:.1em; margin-top:.4vh}

/* ---------- corpo ---------- */
.f-body{flex:1; display:grid; grid-template-columns:1fr 26vw; min-height:0}
.f-main{display:flex; flex-direction:column; min-height:0; overflow:hidden}

/* 6 colunas, todas com a mesma largura -- pedido explicito: espacamento
   visual igual entre Placa/Cliente/Tempo/Deposito/Situacao/Pendencia,
   mesmo que Tempo e Deposito (valores curtos e fixos) sobrem espaco. */
.f-head{
  display:grid; grid-template-columns:repeat(6, 1fr);
  padding:1.2vh 2.4vw .9vh;
  font-size:1.35vh; color:var(--f-dim);
  letter-spacing:.22em; text-transform:uppercase; font-weight:700;
  border-bottom:1px solid var(--f-line);
}
/* Em tela muito estreita (bem abaixo do que qualquer TV real usa, mas
   testado por seguranca) os titulos coladavam um no outro, tipo
   "LOCALIZAÇÃOSITUAÇÃO" -- cada span precisa cortar dentro da sua
   propria coluna em vez de vazar pra vizinha. */
.f-head span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
/* "TEMPO" (3a coluna) e "DEPÓSITO" (4a) sao valores curtos e fixos,
   centralizados na linha (ver .f-tempo/.f-loc) -- o titulo precisa
   alinhar com eles, senao o titulo fica a esquerda e o valor no meio,
   sem formar uma coluna reta. */
.f-head span:nth-child(3), .f-head span:nth-child(4){text-align:center}

/* ---------- a linha ---------- */
.f-row{
  display:grid; grid-template-columns:repeat(6, 1fr);
  align-items:center;
  padding:.6vh 2.4vw; min-height:6.6vh;
  border-bottom:1px solid var(--f-line);
}
.f-row:nth-child(odd){background:var(--f-row)}

/* Placa e cliente no MESMO tamanho (2.5vh) -- pedido explicito: antes a
   placa era 3vh e destoava. Cliente tem padrao de ~16 caracteres, entao
   as duas colunas ficam com a mesma largura (19%) e o mesmo peso visual. */
.f-placa{
  display:flex; align-items:center; gap:.7vw;
  font-size:2.5vh; font-weight:700; letter-spacing:.06em;
  min-width:0; padding-right:.8vw;
}
/* fallback pra TV Samsung antiga sem suporte a gap em flex -- ver
   comentario em .f-brand acima (mesma causa/bug, 25/09). */
.f-placa > *:not(:first-child){margin-left:.7vw}
/* placa real vem suja ("QTQ4B22 - DIEGO", "QUJ3C77 // TCA 1C00"): o corte
   fica no span, nao no flex container, senao o ellipsis nao funciona. */
.f-placa span{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
/* Icone do caminhao: herda a cor do texto da linha (currentColor no SVG),
   entao fica vermelho nas bloqueadas e normal nas demais, sem regra extra. */
.f-truck{flex:none; display:flex; align-items:center}
.f-truck svg{width:3.4vh; height:auto; display:block}

.f-cli{
  font-size:2.5vh; font-weight:600; color:#DCE3FF;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Pendencia pode ter texto longo (ex "Gerar guia — cliente nao
   contribuinte ICMS", 47 caracteres): em tela mais estreita ou com vh
   proporcionalmente maior que 1920x1080, ela pode nao caber numa linha
   so. Trava em no maximo 2 linhas -- com min-height na .f-row (abaixo),
   a linha cresce ate 2 linhas de pendencia sem vazar nem desalinhar as
   vizinhas, e nunca cresce alem disso. */
.f-pend{
  font-size:2.1vh; font-weight:600; color:var(--f-dim); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* nowrap SEM overflow vazava sobre a coluna PENDENCIA numa TV grande:
   com vh maior o texto passa da largura da coluna. min-width:0 e
   obrigatorio em filho de grid, senao ele se recusa a encolher. */
.f-st{display:flex; align-items:center; gap:.8vw; font-size:1.75vh; font-weight:800;
      letter-spacing:.03em; text-transform:uppercase;
      min-width:0}
/* fonte reduzida de 2.2vh pra 1.75vh (01/10): "EM CARREGAMENTO" (sem a
   bolinha, que foi removida 01/10) e mais longo que os outros rotulos de
   status e vazava pra cima da coluna PENDENCIA -- o overflow:hidden do
   .f-st span nao estava contendo (grid+flex aninhado nesse navegador de
   TV). Aplicado a TODOS os status (nao so "Em carregamento") pra manter
   tamanho consistente na coluna -- antes so esse status era menor e
   destoava visualmente de "Finalizada" ao lado. */
/* fallback pra TV Samsung antiga sem suporte a gap em flex -- ver
   comentario em .f-brand acima (mesma causa/bug, 25/09). */
.f-st > *:not(:first-child){margin-left:.8vw}
/* text-overflow:ellipsis nao funciona direto num container flex com
   varios filhos (o .f-dot + o texto) -- precisa de um span dedicado,
   so com o texto, pra cortar limpo com "..." em vez de truncar no meio
   da palavra ("TRANSFERIR P/" sem indicar que continua). */
.f-st span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.f-dot{width:1.5vh; height:1.5vh; border-radius:50%; flex:none; background:currentColor}

/* so o que exige acao pisca */
.f-st.crit{color:var(--f-crit)}
.f-st.crit .f-dot{animation:fpulse 1.1s ease-in-out infinite}
.f-st.warn{color:var(--f-warn)}
.f-st.warn .f-dot{animation:fpulse 1.8s ease-in-out infinite}
.f-st.ok{color:var(--f-ok)}
.f-st.null{color:var(--f-dim)}
/* temas 'fisc' e 'done' nao sao mais atribuidos por nenhum status em
   F_TEMA (fids.js) -- guia ICMS virou 'crit' (bloqueio = vermelho) e
   finalizada virou 'ok' (mesmo verde de liberada). Regras mantidas
   aqui, sem uso ativo, caso um status futuro precise de um tema
   proprio de novo. */
.f-st.fisc{color:var(--f-fisc)}
.f-st.done{color:var(--f-done)}
@keyframes fpulse{0%,100%{opacity:1}50%{opacity:.15}}

/* bloco de bloqueadas: lavagem vermelha sobre o navy */
.f-row.is-crit{background:rgba(255,59,78,.1)}
.f-row.is-crit:nth-child(odd){background:rgba(255,59,78,.14)}

/* ---------- amanha ---------- */
.f-next{border-left:1px solid var(--f-line); display:flex; flex-direction:column; min-height:0}
.f-next h3{
  font-size:1.35vh; color:var(--f-dim); letter-spacing:.22em; text-transform:uppercase;
  padding:1.2vh 1.6vw .9vh; font-weight:700; border-bottom:1px solid var(--f-line);
  text-align:center;
}
.f-nrow{
  display:flex; align-items:baseline; gap:.9vw; flex-wrap:wrap;
  padding:1.5vh 1.6vw; border-bottom:1px solid var(--f-line);
}
/* fallback pra TV Samsung antiga sem suporte a gap em flex -- ver
   comentario em .f-brand acima (mesma causa/bug, 25/09). margin-right
   em vez de margin-left:not(:first-child) porque este container tem
   flex-wrap:wrap -- com wrap, "not(:first-child)" erraria a margem do
   primeiro item de cada linha quebrada. margin-right em todos (inclusive
   o ultimo) sobra invisivel no fim da linha, sem esse problema. */
.f-nrow > *{margin-right:.9vw}
/* Zebra igual a tabela principal (.f-row:nth-child(odd)) -- "Proximos
   dias" tinha fundo solido unico, destoando do resto do painel que
   sempre alterna branco/cinza. :nth-of-type conta so entre .f-nrow
   irmãos, ignorando os .f-ndia (cabecalho de cada dia) no meio. */
.f-nrow:nth-of-type(odd){background:var(--f-row)}
.f-nrow .p{font-size:2.1vh; font-weight:700; flex:none}
.f-nrow .h{font-size:2vh; font-weight:700; color:var(--f-dim); margin-left:auto; flex:none}
.f-nrow .c{
  font-size:1.7vh; color:var(--f-dim); flex-basis:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- estados ---------- */
.f-vazio{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.4vh; color:var(--f-dim);
}
.f-vazio b{font-size:4.4vh; font-weight:800; color:#2B3585; letter-spacing:.04em}
.f-vazio span{font-size:2vh}
/* Estado vazio da coluna lateral: mesmo tamanho do conteudo que ela
   normalmente mostra (.f-nrow .h = 2vh), so um pouco mais apagado --
   e ausencia de informacao, nao um alerta. Antes estava 2.3vh/700 e
   ficava maior que os proprios dados da coluna, fugindo do padrao. */
.f-next .f-vazio span{font-size:2vh; font-weight:600; color:var(--f-dim); line-height:1.5}

.f-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1vh 2.4vw; background:var(--f-bg2);
  font-size:1.4vh; color:var(--f-dim); letter-spacing:.12em; text-transform:uppercase;
}
.f-live{display:flex; align-items:center; gap:.6vw}
/* fallback pra TV Samsung antiga sem suporte a gap em flex -- ver
   comentario em .f-brand acima (mesma causa/bug, 25/09). */
.f-live > *:not(:first-child){margin-left:.6vw}
.f-live i{width:1vh;height:1vh;border-radius:50%;background:var(--f-ok);display:block;
          animation:fpulse 2s ease-in-out infinite}

/* ---------- convivencia com a faixa de teste ----------
   O painel e position:fixed e cobriria os controles. Enquanto a faixa
   estiver visivel (fora de tela cheia), o painel desce a altura dela.
   Em tela cheia a faixa some e o painel ocupa a tela inteira. */
body:not(.fullscreen-tv) .fids{top:34px}
#testebar{position:relative; z-index:500}
#modebar{z-index:500}


/* ---------- TIPOGRAFIA ----------
   Source Sans Pro: a fonte padrao de toda a Intranet Santa Clara (115
   dos ~120 modulos do sistema usam ela, incluindo o proprio andon/,
   o modulo mais parecido com este painel -- ver INTRANET/andon/index.php).
   Pedido explicito: padrao em TUDO, sem excecao nem pra placa.

   Servida LOCALMENTE (css/fonts/), nao pelo CDN do Google: a TV nao
   pode depender de internet/DNS externo -- se a rede do galpao cair,
   o painel continua com a tipografia certa. 4 arquivos (os mesmos
   pesos/estilo que a Intranet carrega: 300, 400, 400 italico, 700),
   cada um em latin + latin-ext (acentuacao PT-BR fica no latin-ext). */
@font-face{
  font-family:'Source Sans Pro'; font-weight:300; font-style:normal; font-display:swap;
  src:url('fonts/ssp-300-n-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
                U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Source Sans Pro'; font-weight:300; font-style:normal; font-display:swap;
  src:url('fonts/ssp-300-n-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Source Sans Pro'; font-weight:400; font-style:normal; font-display:swap;
  src:url('fonts/ssp-400-n-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
                U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Source Sans Pro'; font-weight:400; font-style:normal; font-display:swap;
  src:url('fonts/ssp-400-n-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Source Sans Pro'; font-weight:400; font-style:italic; font-display:swap;
  src:url('fonts/ssp-400-i-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
                U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Source Sans Pro'; font-weight:400; font-style:italic; font-display:swap;
  src:url('fonts/ssp-400-i-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Source Sans Pro'; font-weight:700; font-style:normal; font-display:swap;
  src:url('fonts/ssp-700-n-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
                U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Source Sans Pro'; font-weight:700; font-style:normal; font-display:swap;
  src:url('fonts/ssp-700-n-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Padrao em TUDO: mesma cadeia de fallback que a Intranet usa (ver
   INTRANET/andon/index.php), sem excecao pra placa -- pedido explicito. */
.fids{
  font-family:"Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",
              Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji",
              "Segoe UI Emoji","Segoe UI Symbol";
}

/* ---------- alinhamento cabecalho x linha ----------
   O cabecalho e a linha sao dois grids irmaos, nao a mesma tabela: se o
   padding lateral das celulas divergir, o titulo nao fica em cima do
   conteudo. Abaixo, ambos recebem o MESMO respiro interno por coluna. */
.f-head > *, .f-row > *{padding-right:1.2vw; min-width:0}
.f-head > *:last-child, .f-row > *:last-child{padding-right:0}
/* .f-placa tinha padding proprio, o que a desalinhava do titulo PLACA */
.f-placa{padding-right:0}

/* Localizacao: so o deposito (EXP/FAB). Centralizado -- e um valor curto
   e fixo, igual um "selo"; alinhado a esquerda sobrava vazio a direita
   e parecia deslocado, sobretudo depois que a posicao (P01, G8...) saiu
   do texto e o conteudo ficou bem mais curto. */
.f-loc{
  font-size:2.2vh; font-weight:700; color:var(--f-dim);
  white-space:nowrap; text-align:center;
}

/* Tempo no patio (chegada ate saida, ou ate agora se ainda nao saiu).
   Mesmo tratamento visual do Deposito: valor curto e fixo, centralizado.
   Sem cor de alerta -- pedido explicito, so o numero. O texto e
   recalculado a cada segundo por atualizarTemposNaTela() (fids.js), sem
   re-renderizar a linha inteira. */
.f-tempo{
  font-size:2.2vh; font-weight:700; color:var(--f-dim);
  white-space:nowrap; text-align:center; font-variant-numeric:tabular-nums;
}

/* cabecalho de dia dentro da coluna lateral */
.f-ndia{
  display:flex; align-items:center; justify-content:space-between;
  padding:1vh 1.6vw .6vh;
  font-size:1.5vh; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--f-dim); background:rgba(255,255,255,.03);
  border-top:1px solid var(--f-line); border-bottom:1px solid var(--f-line);
}
.f-ndia b{font-size:1.7vh; color:var(--f-txt); font-variant-numeric:tabular-nums}
.f-ndia:first-child{border-top:none}

/* ---------- rolagem continua da coluna "Proximos dias" ----------
   Letreiro vertical: a lista sobe devagar e sem parar, como painel de
   aeroporto/rodoviaria profissional. O truque do loop sem costura: o JS
   duplica o conteudo (lista + lista de novo) e a animacao percorre so
   METADE da altura total -- quando a copia 2 chega onde a copia 1 comecou,
   ela e visualmente identica, entao o corte da volta ao inicio e invisivel. */
.f-next-viewport{
  flex:1; overflow:hidden; position:relative;
  /* esmaece o topo/fundo da lista -- sinaliza "tem mais rolando" sem
     precisar de scrollbar, que numa TV ninguem usa mesmo */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 94%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 94%,transparent 100%);
}
.f-scroll-track{
  display:flex; flex-direction:column;
  animation:f-scroll-up linear infinite;
  animation-duration:var(--scroll-dur, 40s);
}
/* pausa ao passar o mouse -- so ajuda quem estiver testando no PC;
   numa TV sem mouse isso nunca dispara. */
.f-next-viewport:hover .f-scroll-track{animation-play-state:paused}
@keyframes f-scroll-up{
  from{transform:translateY(0)}
  to{transform:translateY(-50%)}     /* so metade: a outra metade e a copia */
}
/* Lista curta (cabe inteira sem rolar): sem sentido animar. So a SEGUNDA
   copia (a duplicata usada so pra fechar o loop de scroll) deve sumir --
   a primeira e o conteudo real da coluna. O seletor sem :nth-child(2)
   escondia as duas, deixando "Proximos dias" vazio sempre que a lista
   coubesse na tela sem precisar rolar (bug real, achado filtrando 24/06:
   so 5 cargas cabiam sem rolar e a coluna sumia por completo). */
.f-scroll-track.sem-scroll{animation:none}
.f-scroll-track.sem-scroll .f-scroll-copia:nth-child(2){display:none}