/* Cenas dos modulos: texto a esquerda, painel do Connect redesenhado a direita, montado pela rolagem. */
.cena { max-width: 1280px; margin: 0 auto; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); padding-block: 110px; }
.cena-texto { display: grid; gap: 22px; align-content: center; min-width: 0; }
.cena-visual { position: relative; display: grid; place-items: center; gap: 18px; min-width: 0; perspective: 1200px; }
.lista-simples { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; color: #c2c8dc; max-width: 52ch; }
.lista-simples li { position: relative; padding-left: 26px; }
.lista-simples li::before { content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 2px; background: var(--farol); }
.tela-rotulo { font: 500 .7rem var(--fonte-dado); letter-spacing: .12em; text-transform: uppercase; color: var(--neblina); }
.tela-nota { font: 400 .7rem var(--fonte-dado); color: var(--neblina); }
.pilula { display: inline-block; padding: 3px 10px; border-radius: 999px; font: 500 .68rem var(--fonte-dado); white-space: nowrap; }
.pilula.ok { background: rgba(68, 217, 164, .14); color: var(--ok); }
.pilula.alerta { background: rgba(255, 107, 90, .16); color: var(--alerta); }
.pilula.neutra { background: var(--asfalto-3); color: var(--neblina); }
.girando { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--linha); border-top-color: var(--farol); animation: girar .9s linear infinite; flex: none; }
.feito .girando { border-color: var(--ok); animation: none; background: var(--ok); }
@keyframes girar { to { transform: rotate(360deg); } }

/* Motoristas: passos ligados as telas do celular */
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.passos li { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; border: 1px solid transparent; color: var(--neblina); transition: background .35s, border-color .35s, color .35s; }
.passos b { font: 800 1.35rem/1.05 var(--fonte-display); text-transform: uppercase; color: var(--giz); opacity: .5; transition: opacity .35s, color .35s; }
.passos li.ativo { background: var(--asfalto-2); border-color: var(--linha); color: #c9cfe4; }
.passos li.ativo b { opacity: 1; color: var(--farol); }
.celular { position: relative; width: min(320px, 82vw); aspect-ratio: 9 / 18.5; max-width: 100%; border-radius: 46px; padding: 14px; background: linear-gradient(145deg, #2a3150, #0d1122); box-shadow: 0 60px 120px -40px rgba(85, 208, 255, .35), inset 0 0 0 1.5px #3a4266; transform-style: preserve-3d; }
.celular-ilha { position: absolute; top: 24px; left: 50%; width: 90px; height: 26px; margin-left: -45px; border-radius: 20px; background: #000; z-index: 3; }
.tela { position: absolute; inset: 14px; border-radius: 34px; background: var(--asfalto); padding: 64px 18px 18px; display: grid; align-content: start; gap: 12px; overflow: hidden; opacity: 0; }
.tela-0 { opacity: 1; }
.campo { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--asfalto-2); border: 1px solid var(--linha); }
.campo span { font: 500 .62rem var(--fonte-dado); color: var(--neblina); text-transform: uppercase; letter-spacing: .1em; }
.campo b { font-weight: 500; min-height: 1.4em; }
.digitar::after { content: "|"; color: var(--farol); animation: piscar 1s steps(2) infinite; }
@keyframes piscar { 50% { opacity: 0; } }
.sincronia, .status-sync { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 181, 71, .08); border: 1px solid rgba(255, 181, 71, .3); font-size: .78rem; }
.sincronia.feito, .status-sync.feito { background: rgba(68, 217, 164, .08); border-color: rgba(68, 217, 164, .35); }
.linha-conf { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: .82rem; }
.app-cartao { position: relative; display: grid; gap: 2px; padding: 14px; border-radius: 16px; background: var(--asfalto-2); border: 1px solid var(--linha); overflow: hidden; }
.app-cartao span { font-size: .72rem; color: var(--neblina); }
.app-cartao b { font: 800 2rem/1 var(--fonte-display); }
.app-cartao i { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p) * 100%); background: var(--farol); }
.notificacao { display: grid; gap: 2px; padding: 12px 14px; border-radius: 18px; background: rgba(238, 241, 250, .1); backdrop-filter: blur(8px); border: 1px solid rgba(238, 241, 250, .16); font-size: .8rem; }
.notificacao b { font: 500 .66rem var(--fonte-dado); color: var(--farol); text-transform: uppercase; letter-spacing: .1em; }

/* Veiculos: placas Mercosul */
.placas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: min(460px, 100%); }
.placa { position: relative; display: grid; justify-items: center; border-radius: 10px; background: #f5f6f8; color: #111; border: 3px solid #1c1c1c; overflow: hidden; transform-style: preserve-3d; backface-visibility: hidden; }
.placa-pais { width: 100%; text-align: center; padding: 3px 0; background: #1f4fb8; color: #fff; font: 600 .62rem var(--fonte-dado); letter-spacing: .3em; }
.placa b { font: 800 clamp(1.6rem, 3.4vw, 2.3rem)/1.25 var(--fonte-display); letter-spacing: .08em; padding: 4px 10px 6px; }
.placa-inativa { filter: grayscale(1) brightness(.55); }
.placa-inativa::after { content: "INATIVA"; position: absolute; inset: auto 8px 6px auto; font: 600 .55rem var(--fonte-dado); color: #fff; background: var(--alerta); padding: 2px 6px; border-radius: 4px; }
.engate { display: flex; align-items: center; width: min(460px, 100%); font: 500 .72rem var(--fonte-dado); }
.engate-cavalo, .engate-carreta { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--asfalto-2); text-align: center; }
.engate-elo { width: 40px; height: 4px; background: var(--farol); box-shadow: 0 0 14px var(--farol); transform: scaleX(0); }
.status-sync, .aviso-sino { width: min(460px, 100%); }
.aviso-sino { display: grid; gap: 2px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255, 107, 90, .4); background: rgba(255, 107, 90, .08); font-size: .85rem; }
.aviso-sino span { font: 400 .68rem var(--fonte-dado); color: var(--neblina); }

/* Telemetria */
.painel { width: min(500px, 100%); display: grid; gap: 18px; padding: 24px; border-radius: 22px; background: var(--asfalto-2); border: 1px solid var(--linha); box-shadow: 0 50px 120px -50px rgba(85, 208, 255, .35); transform-style: preserve-3d; }
.velocimetro { position: relative; display: grid; justify-items: center; }
.velocimetro svg { width: min(300px, 100%); overflow: visible; }
.arco-fundo { fill: none; stroke: var(--asfalto-3); stroke-width: 14; stroke-linecap: round; }
.arco-valor { fill: none; stroke: var(--sinal); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 283; stroke-dashoffset: 283; filter: drop-shadow(0 0 10px rgba(85, 208, 255, .5)); }
.ponteiro { stroke: var(--farol); stroke-width: 4; stroke-linecap: round; }
.velocimetro circle { fill: var(--farol); }
.vel-numero { margin-top: 6px; font: 900 3.4rem/1 var(--fonte-display); font-variant-numeric: tabular-nums; }
.velocimetro > span { font: 500 .7rem var(--fonte-dado); color: var(--neblina); }
.faixas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.faixas li { display: grid; grid-template-columns: 128px minmax(0, 1fr) 36px; align-items: center; gap: 12px; font-size: .8rem; color: #c2c8dc; }
.faixas i { height: 8px; border-radius: 6px; background: linear-gradient(90deg, var(--farol), var(--alerta)); transform-origin: left; transform: scaleX(0); width: calc(var(--w) * 100% + 8%); max-width: 100%; }
.faixas b { font: 500 .9rem var(--fonte-dado); text-align: right; font-variant-numeric: tabular-nums; }

/* Jornada */
.dia { position: relative; height: 46px; border-radius: 10px; background: var(--asfalto-3); overflow: hidden; }
.seg { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 100%); width: calc(var(--w) * 100%); transform-origin: left; transform: scaleX(0); border-right: 2px solid var(--asfalto-2); }
.direcao { --cor: var(--sinal); }
.refeicao { --cor: var(--ok); }
.espera { --cor: var(--farol); }
.descanso { --cor: #a78bfa; }
.seg { background: var(--cor); }
.dia-legenda { display: flex; flex-wrap: wrap; gap: 14px; font: 500 .66rem var(--fonte-dado); color: var(--neblina); }
.dia-legenda span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--cor); }
.fila { display: grid; gap: 10px; }
.fila-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--asfalto); border: 1px solid var(--linha); font-size: .82rem; }
.estado { padding: 4px 10px; border-radius: 999px; font: 500 .66rem var(--fonte-dado); background: var(--asfalto-3); color: var(--neblina); white-space: nowrap; transition: background .3s, color .3s; }
.estado.e1 { background: rgba(85, 208, 255, .14); color: var(--sinal); }
.estado.e2 { background: rgba(68, 217, 164, .14); color: var(--ok); }
.agente { display: flex; align-items: center; gap: 10px; font: 500 .7rem var(--fonte-dado); color: var(--neblina); }
.agente-pulso { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(68, 217, 164, .6); animation: batida 1.6s infinite; }
@keyframes batida { to { box-shadow: 0 0 0 12px rgba(68, 217, 164, 0); } }

@media (max-width: 860px) {
  .cena { grid-template-columns: minmax(0, 1fr); padding-block: 80px; }
  .faixas li { grid-template-columns: 100px minmax(0, 1fr) 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .tela { opacity: 1; position: relative; inset: auto; }
  .celular { aspect-ratio: auto; }
  .seg, .faixas i, .engate-elo { transform: none; }
  .janela-connect { opacity: 1; transform: none; }
}