/* ===========================================================================
   LF Pátio · telas (LFP-1.17 painel, 1.18 ficha, 1.19 nova entrada, 1.20 técnico)
   PORTE do protótipo aprovado lf-preview: as regras marcadas "(protótipo)" são
   cópia das do index.html do protótipo, só trocando valor cru por token.
   O que é novo (filtros, diálogo de motivo, formulário, linha do tempo, faixa de
   rede do técnico) usa a mesma linguagem: grafite, ardósia, filete azul, âmbar.
   =========================================================================== */

/* ============================================ fita das etapas (protótipo) */
.fita{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;margin:0 0 14px}
.fita .et{
  appearance:none;font:inherit;text-align:left;cursor:pointer;
  background:var(--grafite);border:1px solid var(--ardosia);border-top:2px solid var(--ardosia);
  border-radius:var(--raio-sm);padding:8px 8px 7px;min-width:0;transition:border-color .35s,background .35s;
}
.fita .et.tem{border-top-color:var(--azul)}
.fita .et.espera{border-top-style:dashed}
.fita .et .l1{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.fita .et .n{font-size:9.5px;font-weight:700;color:var(--prata-fraco);letter-spacing:.1em}
.fita .et .c{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--prata-fraco);line-height:1}
.fita .et.tem .c{color:var(--gelo)}
.fita .et .r{display:block;font-size:10.5px;font-weight:600;color:var(--prata);line-height:1.25;margin-top:5px}
.fita .et.tem .r{color:var(--gelo)}
.fita .et.piscou{background:var(--azul-fraco);border-color:var(--azul-borda);border-top-color:var(--azul)}
.fita .et.filtrada{background:var(--azul-fraco);border-color:var(--azul);border-top-color:var(--azul)}
.fita-leg{font-size:.76rem;color:var(--prata-fraco);margin:0 0 16px}
.fita-leg i{display:inline-block;width:14px;border-top:2px dashed var(--prata-fraco);vertical-align:4px;margin-right:6px}

/* ========================================================= kpis (protótipo) */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 12px}
.kpi{background:var(--grafite);border:1px solid var(--ardosia);border-radius:var(--raio-md);padding:10px 13px}
.kpi .v{font-family:var(--mono);font-size:var(--fs-kpi);font-weight:700;color:var(--gelo);line-height:1.1}
.kpi .v small{font-size:14px;color:var(--prata-fraco);font-weight:700}
.kpi .r{display:block;font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--prata-fraco);margin-top:4px}
.kpi.alerta{border-color:var(--alerta-borda);background:var(--alerta-fraco)}
.kpi.alerta .v{color:var(--alerta)}
.kpi.alerta .r{color:var(--gelo)}

/* ================================================== pendências (protótipo) */
.pend{background:var(--grafite);border:1px solid var(--alerta-borda);border-left:3px solid var(--alerta);border-radius:0 var(--raio-md) var(--raio-md) 0;padding:11px 14px;margin:0 0 16px}
.pend .cab{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pend .cab .et{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--alerta)}
.pend .cab .qt{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--onix);background:var(--alerta);border-radius:var(--raio-xs);padding:1px 6px}
.pend ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.pend li{font-size:.84rem;line-height:1.45;color:var(--prata);display:flex;gap:8px;align-items:baseline}
.pend li b{color:var(--gelo);font-weight:700}
.pend li .tp{flex:0 0 auto;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--onix);background:var(--alerta);border-radius:var(--raio-selo);padding:2px 6px;line-height:1.3}
.pend li .tp.rev{background:transparent;border:1px solid var(--alerta);color:var(--alerta)}
.pend li .txt{flex:1 1 auto;min-width:0;cursor:pointer}
.pend li .txt:hover b{text-decoration:underline}
.pend li .visto{font-size:.74rem;color:var(--prata-fraco);white-space:nowrap}
.pend li.nova{animation:entra .5s ease-out}
.bt-mini{
  appearance:none;flex:0 0 auto;background:transparent;border:1px solid var(--ardosia);color:var(--prata);
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--raio-xs);
  padding:6px 9px;cursor:pointer;line-height:1.2;min-height:32px;
}
.bt-mini:hover{color:var(--gelo);border-color:var(--azul-borda)}
.bt-mini.al{border-color:var(--alerta-borda);color:var(--alerta)}
@keyframes entra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* =========================================================== filtros (novo) */
.filtros{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.filtros .campo{flex:0 1 220px}
.filtros .campo select{min-height:40px}
.chk{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--ardosia);border-radius:var(--raio-sm);
  background:var(--onix);color:var(--prata);font-size:.84rem;font-weight:600;cursor:pointer;user-select:none}
.chk input{width:16px;height:16px;accent-color:var(--azul);margin:0}
.chk.on{border-color:var(--alerta-borda);color:var(--gelo);background:var(--alerta-fraco)}
.filtros .limpar{appearance:none;background:transparent;border:0;color:var(--prata-fraco);font-size:.8rem;font-weight:600;text-decoration:underline;cursor:pointer;min-height:40px;padding:0 4px}
.filtros .conta{margin-left:auto;font-size:.78rem;color:var(--prata-fraco);align-self:center}

/* ================================================= grade de carros (protótipo) */
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grade .grade-vazia{grid-column:1/-1;background:var(--grafite);border:1px dashed var(--ardosia);border-radius:var(--raio-md);padding:18px;font-size:.86rem;color:var(--prata-fraco);text-align:center}
.carro{
  appearance:none;font:inherit;color:inherit;
  background:var(--grafite);border:1px solid var(--ardosia);border-left:4px solid var(--prata);
  border-radius:var(--raio-md);padding:12px 14px 11px;cursor:pointer;text-align:left;width:100%;
  display:block;transition:border-color .3s,background .3s,transform .2s;
}
.carro:hover{background:var(--ardosia);transform:translateY(-1px)}
.carro.p-urgente{border-left-color:var(--alerta)}
.carro.p-alta{border-left-color:var(--azul)}
.carro.p-normal{border-left-color:var(--prata)}
.carro.p-baixa{border-left-color:var(--ardosia)}
.carro.com-alerta{border-color:var(--alerta-borda)}
.carro.moveu{animation:moveu 2.4s ease-out}
@keyframes moveu{
  0%{box-shadow:0 0 0 0 rgba(0,85,255,.55);background:var(--azul-fraco)}
  55%{box-shadow:0 0 0 7px rgba(0,85,255,0);background:var(--azul-fraco)}
  100%{box-shadow:0 0 0 0 rgba(0,85,255,0);background:var(--grafite)}
}
.carro.pisca-al{animation:piscaAl 2.4s ease-out}
@keyframes piscaAl{
  0%{box-shadow:0 0 0 0 rgba(255,176,32,.6);background:var(--alerta-fraco)}
  55%{box-shadow:0 0 0 7px rgba(255,176,32,0);background:var(--alerta-fraco)}
  100%{box-shadow:0 0 0 0 rgba(255,176,32,0);background:var(--grafite)}
}
.carro .l-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.carro .l-top .os{font-family:var(--mono);font-size:10.5px;font-weight:700;color:var(--prata-fraco);margin-left:auto}
.prio{font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:2px 7px;border-radius:var(--raio-selo);line-height:1.5;white-space:nowrap}
.prio.urgente{background:var(--alerta);color:var(--onix)}
.prio.alta{background:var(--azul);color:var(--gelo)}
.prio.normal{background:var(--ardosia);color:var(--prata)}
.prio.baixa{background:transparent;border:1px solid var(--ardosia);color:var(--prata-fraco)}
.sinal{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--alerta);white-space:nowrap}
.sinal::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--alerta);animation:pisca 1.6s infinite}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.25}}
.carro .modelo{font-size:1rem;font-weight:700;color:var(--gelo);line-height:1.25;margin:0}
.carro .ident{font-size:.79rem;color:var(--prata-fraco);margin:2px 0 9px;line-height:1.4}
.carro .ident b{font-family:var(--mono);font-weight:700;color:var(--prata);letter-spacing:.02em}
.carro .etapa{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--ardosia);border-bottom:1px solid var(--ardosia)}
.carro .etapa .num{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--gelo);background:var(--azul);border-radius:var(--raio-selo);padding:2px 6px;line-height:1.4}
.carro .etapa .nome{font-size:.87rem;font-weight:700;color:var(--gelo);line-height:1.25;flex:1 1 auto}
.carro .etapa .de9{font-size:.7rem;color:var(--prata-fraco);white-space:nowrap}
.carro .tempos{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:9px 0 8px;border-bottom:1px solid var(--ardosia)}
.carro .tempos .r{display:block;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--prata-fraco);margin-bottom:2px}
.carro .tempos .v{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--gelo);line-height:1.1}
.carro .tempos .v.tenso{color:var(--alerta)}
.carro .tempos .v small{font-family:var(--fonte);font-size:9.5px;font-weight:600;color:var(--prata-fraco);margin-left:3px}
.carro .quem{padding-top:9px;min-height:40px}
.carro .quem .linha{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.carro .quem .ponto{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 auto;animation:pisca 2s infinite}
.carro .quem .linha.atrasada .ponto{background:var(--alerta)}
.carro .quem .nome{font-size:.82rem;font-weight:600;color:var(--gelo);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.carro .quem .cron{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--gelo);letter-spacing:.01em}
.carro .quem .linha.atrasada .cron,.carro .quem .linha.atrasada .nome{color:var(--alerta)}
.carro .quem .vazio{font-size:.8rem;color:var(--prata-fraco);font-style:italic}
.carro .prog{font-size:.75rem;color:var(--prata-fraco);margin-top:5px}
.carro .prog b{color:var(--prata);font-weight:700}

/* ================================================= aviso na tela (protótipo) */
.avisos{position:fixed;right:18px;bottom:18px;z-index:60;display:grid;gap:9px;max-width:400px}
.aviso{
  background:var(--grafite);border:1px solid var(--azul-borda);border-left:4px solid var(--azul);
  border-radius:0 var(--raio-md) var(--raio-md) 0;padding:11px 14px;box-shadow:0 10px 30px rgba(0,0,0,.55);
  animation:sobe .35s ease-out;
}
.aviso.al{border-color:var(--alerta-borda);border-left-color:var(--alerta)}
.aviso.erro{border-color:rgba(229,72,77,.5);border-left-color:var(--perigo)}
.aviso .r{display:block;font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gelo);margin-bottom:4px}
.aviso.al .r{color:var(--alerta)}
.aviso p{margin:0;font-size:.85rem;color:var(--prata);line-height:1.45}
.aviso p b{color:var(--gelo);font-weight:700}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ================================================ ficha do carro (protótipo) */
:root{--perigo:#E5484D; --perigo-fraco:rgba(229,72,77,.14)} /* só a faixa "sem conexão, não gravou" e erro grave */
.voltar{
  appearance:none;background:transparent;border:1px solid var(--ardosia);color:var(--prata);
  font-size:.82rem;font-weight:600;padding:6px 12px;border-radius:var(--raio-sm);cursor:pointer;margin:0 0 14px;
  min-height:36px;text-decoration:none;display:inline-flex;align-items:center;
}
.voltar:hover{color:var(--gelo);border-color:var(--azul-borda)}
.ficha{background:var(--grafite);border:1px solid var(--ardosia);border-top:3px solid var(--azul);border-radius:var(--raio-md);padding:16px 18px;margin:0 0 14px}
.ficha .top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ficha h3{font-size:1.32rem;font-weight:700;color:var(--gelo);margin:0;line-height:1.2}
.ficha .meta{font-size:.84rem;color:var(--prata);margin:4px 0 0}
.ficha .meta b{font-family:var(--mono);color:var(--gelo);font-weight:700}
.ficha .relato{font-size:.84rem;color:var(--prata);margin:8px 0 0;max-width:62ch}
.ficha .relato .r{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--prata-fraco);margin-right:6px}
.ficha .tiles{display:flex;gap:10px;flex-wrap:wrap}
.ficha .ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.ficha .ctl select{font-family:var(--fonte);font-size:.8rem;color:var(--gelo);background:var(--onix);border:1px solid var(--ardosia);border-radius:var(--raio-sm);padding:6px 8px;min-height:36px}
.tile{background:var(--onix);border:1px solid var(--ardosia);border-radius:var(--raio-sm);padding:8px 14px;min-width:132px}
.tile .r{display:block;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--prata-fraco);margin-bottom:3px}
.tile .v{font-family:var(--mono);font-size:19px;font-weight:700;color:var(--gelo);line-height:1.1}
.tile .v.tenso{color:var(--alerta)}
.tile .v small{font-family:var(--fonte);font-size:9.5px;font-weight:600;color:var(--prata-fraco);margin-left:3px}
/* passos 1..9 (protótipo) — aqui cada passo é um botão: tocar = mover manual */
.passos{display:grid;grid-template-columns:repeat(9,1fr);gap:0;margin:16px 0 0;padding:0;list-style:none}
.passos li{position:relative;padding-top:20px;text-align:center;min-width:0}
.passos li::after{content:"";position:absolute;top:7px;left:0;right:0;height:2px;background:var(--ardosia)}
.passos li.feito::after,.passos li.aqui::after{background:var(--azul)}
.passos li::before{
  content:"";position:absolute;top:2px;left:50%;transform:translateX(-50%);
  width:12px;height:12px;border-radius:50%;background:var(--ardosia);border:2px solid var(--grafite);z-index:2;
}
.passos li.feito::before{background:var(--azul)}
.passos li.aqui::before{background:var(--gelo);box-shadow:0 0 0 3px var(--azul)}
.passos li span,.passos li button{display:block;font-size:9.5px;font-weight:600;color:var(--prata-fraco);line-height:1.25;padding:0 2px}
.passos li button{appearance:none;background:transparent;border:0;width:100%;cursor:pointer;font-family:var(--fonte);min-height:34px;border-radius:var(--raio-sm)}
.passos li button:hover{color:var(--gelo);background:var(--ardosia)}
.passos li button:disabled{cursor:default;background:transparent}
.passos li.aqui span,.passos li.aqui button{color:var(--gelo);font-weight:700}
.passos li.feito span,.passos li.feito button{color:var(--prata)}
.passos-nota{font-size:.74rem;color:var(--prata-fraco);margin:8px 0 0;text-align:right}

.tar-cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 9px;flex-wrap:wrap}
.tar-cab h4{font-size:.95rem;font-weight:700;color:var(--gelo);margin:0}
.tar-cab .nota{font-size:.78rem;color:var(--prata-fraco)}
.tarefas{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px}
.tarefas li{
  display:grid;grid-template-columns:1fr 168px 96px 96px 118px;gap:12px;align-items:center;
  background:var(--grafite);border:1px solid var(--ardosia);border-left:3px solid var(--ardosia);
  border-radius:var(--raio-sm);padding:11px 14px;
}
.tarefas li.rodando{border-left-color:var(--azul);background:var(--azul-fraco)}
.tarefas li.pausada{border-left-color:var(--prata)}
.tarefas li.concluida{border-left-color:var(--ok);opacity:.78}
.tarefas li.cancelada{opacity:.5}
.tarefas li.cancelada .serv{text-decoration:line-through}
.tarefas li.atrasada{border-left-color:var(--alerta);border-color:var(--alerta-borda)}
.tarefas .serv{font-size:.9rem;font-weight:700;color:var(--gelo);line-height:1.3;min-width:0}
.tarefas .serv .tipo{display:block;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--prata-fraco);margin-top:3px}
.tarefas .serv .rev{color:var(--alerta)}
.tarefas .tec{display:flex;align-items:center;gap:8px;min-width:0}
.ini{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--ardosia);color:var(--gelo);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.tarefas .tec .n{font-size:.82rem;color:var(--prata);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tarefas .tec .n.sem{font-style:italic;color:var(--prata-fraco)}
.tarefas .col{min-width:0}
.tarefas .col .r{display:block;font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--prata-fraco);margin-bottom:2px}
.tarefas .col .v{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--gelo);line-height:1.1}
.tarefas .col .v.tenso{color:var(--alerta)}
.tarefas .acoes{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--ardosia);padding-top:9px;margin-top:1px}
.tarefas .acoes select{font-family:var(--fonte);font-size:.78rem;color:var(--gelo);background:var(--onix);border:1px solid var(--ardosia);border-radius:var(--raio-xs);padding:5px 6px;min-height:32px;max-width:190px}
.est{font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;padding:4px 8px;border-radius:var(--raio-selo);text-align:center;line-height:1.4;white-space:nowrap}
.est.afazer{background:var(--ardosia);color:var(--prata)}
.est.rodando{background:var(--azul);color:var(--gelo)}
.est.pausada{background:transparent;border:1px solid var(--prata-fraco);color:var(--prata)}
.est.concluida{background:var(--ok-fraco);border:1px solid var(--ok);color:var(--ok)}
.est.atrasada{background:var(--alerta);color:var(--onix)}
.est.cancelada{background:transparent;border:1px dashed var(--ardosia);color:var(--prata-fraco)}

.bloco{background:var(--grafite);border:1px solid var(--ardosia);border-radius:var(--raio-md);padding:13px 15px 14px;margin:0 0 14px}
.bloco h4{font-size:.95rem;font-weight:700;color:var(--gelo);margin:0 0 10px}
.nova-tarefa{display:grid;grid-template-columns:1.6fr .8fr .6fr 1fr auto;gap:10px;align-items:end}
.nova-tarefa .bt{min-height:40px;font-size:12px;width:auto;padding:0 16px}
.bt.sec{background:transparent;border:1px solid var(--azul-borda);color:var(--gelo)}
.bt.sec:hover{background:var(--ardosia)}
.bt.perigo{background:transparent;border:1px solid rgba(229,72,77,.55);color:#FF8589}
.campo .erro-c{display:block;font-size:.72rem;color:var(--alerta);margin-top:4px}
.campo.com-erro input,.campo.com-erro select,.campo.com-erro textarea{border-color:var(--alerta)}
.campo textarea{
  width:100%;font-family:var(--fonte);font-size:.88rem;color:var(--gelo);background:var(--onix);
  border:1px solid var(--ardosia);border-radius:var(--raio-sm);padding:9px 11px;resize:vertical;min-height:64px;
}
.campo textarea:focus{outline:0;border-color:var(--azul)}

/* linha do tempo (novo) */
.linha-tempo{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--ardosia);display:grid;gap:9px}
.linha-tempo li{position:relative;font-size:.83rem;color:var(--prata);line-height:1.45}
.linha-tempo li::before{content:"";position:absolute;left:-19px;top:.45em;width:8px;height:8px;border-radius:50%;background:var(--ardosia);border:2px solid var(--grafite)}
.linha-tempo li.etapa::before{background:var(--azul)}
.linha-tempo .q{display:block;font-size:.72rem;color:var(--prata-fraco)}
.linha-tempo .q b{font-family:var(--mono);color:var(--prata);font-weight:700}
.linha-tempo .mot{color:var(--alerta)}

/* diálogo (motivo, ajuste) */
.dlg{border:1px solid var(--ardosia);border-top:3px solid var(--azul);border-radius:var(--raio-md);background:var(--grafite);color:var(--prata);padding:16px;max-width:440px;width:calc(100% - 24px)}
.dlg::backdrop{background:rgba(5,7,12,.72)}
.dlg h4{margin:0 0 4px;font-size:1rem;color:var(--gelo)}
.dlg p{margin:0 0 12px;font-size:.84rem;line-height:1.5}
.dlg .campo{margin-bottom:12px}
.dlg .bts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.dlg .bt{min-height:48px;font-size:13px}
.dlg .erro-dlg{color:var(--alerta);font-size:.8rem;margin:-4px 0 10px}

/* ================================================================= nova entrada */
.entrada{max-width:760px}
.entrada .passo{background:var(--grafite);border:1px solid var(--ardosia);border-radius:var(--raio-md);padding:14px 16px 16px;margin:0 0 12px}
.entrada .passo h4{display:flex;align-items:center;gap:8px;font-size:.92rem;font-weight:700;color:var(--gelo);margin:0 0 11px}
.entrada .passo h4 .num{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--gelo);background:var(--azul);border-radius:var(--raio-selo);padding:2px 6px}
.linha-placa{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.linha-placa input{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;min-height:56px}
.linha-placa .bt{width:auto;padding:0 22px}
.grade-campos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.grade-campos .largo{grid-column:1/-1}
.grade-campos .meio{grid-column:span 2}
.entrada .campo input,.entrada .campo select,.entrada .campo textarea{font-size:16px;min-height:46px}
.achado{background:var(--onix);border:1px solid var(--ardosia);border-left:3px solid var(--azul);border-radius:0 var(--raio-sm) var(--raio-sm) 0;padding:10px 12px;margin:10px 0 0;font-size:.86rem;color:var(--prata);line-height:1.5}
.achado b{color:var(--gelo)}
.achado.novo{border-left-color:var(--prata)}
.achado.patio{border-left-color:var(--alerta);background:var(--alerta-fraco);border-color:var(--alerta-borda)}
.achado.patio b{color:var(--alerta)}
.achado a{color:var(--gelo);font-weight:700}
.prio-esc{display:flex;gap:7px;flex-wrap:wrap}
.prio-esc label{cursor:pointer}
.prio-esc input{position:absolute;opacity:0;pointer-events:none}
.prio-esc .prio{display:inline-block;padding:9px 14px;font-size:10px;border-radius:var(--raio-sm);opacity:.55;min-height:40px;line-height:22px}
.prio-esc input:checked + .prio{opacity:1;box-shadow:0 0 0 2px var(--gelo)}
.prio-esc input:focus-visible + .prio{outline:2px solid var(--azul);outline-offset:2px}
.sugestoes{list-style:none;margin:6px 0 0;padding:0;border:1px solid var(--ardosia);border-radius:var(--raio-sm);background:var(--onix);max-height:220px;overflow:auto}
.sugestoes li button{appearance:none;display:block;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--ardosia);color:var(--prata);padding:10px 12px;font-size:.86rem;cursor:pointer;min-height:44px}
.sugestoes li button:hover{background:var(--ardosia);color:var(--gelo)}
.sugestoes li button b{color:var(--gelo)}
.entrada .rodape-f{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.entrada .rodape-f .bt{width:auto;padding:0 28px}
.entrada .rodape-f .msg{font-size:.84rem;color:var(--alerta)}
.oculto-lf{display:none}

/* ====================================================== celular do técnico (protótipo) */
body.modo-tecnico .topo,body.modo-tecnico .rodape{display:none !important}
body.modo-tecnico .palco{padding:0;max-width:480px}
.app-top{background:var(--grafite);border-bottom:var(--filete);padding:max(14px,env(safe-area-inset-top)) 14px 12px;position:sticky;top:0;z-index:4}
.app-top .l{display:flex;align-items:center;gap:10px}
.app-top .ini{width:36px;height:36px;font-size:13px;background:var(--azul);color:var(--gelo)}
.app-top .l>span:nth-child(2){display:block;min-width:0}
.app-top .nome{display:block;font-size:1rem;font-weight:700;color:var(--gelo);line-height:1.25}
.app-top .fn{display:block;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--prata-fraco);margin-top:2px;line-height:1.2}
.app-top .l .sai{margin-left:auto;flex:0 0 auto}
.app-corpo{padding:14px 14px 22px}
.app-corpo .cab{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 11px}
.app-corpo .cab .t{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--prata)}
.app-corpo .cab .q{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--gelo);background:var(--ardosia);border-radius:var(--raio-xs);padding:2px 7px}
.app-corpo .vazio-t{background:var(--grafite);border:1px dashed var(--ardosia);border-radius:var(--raio-card);padding:18px;text-align:center;font-size:.9rem;color:var(--prata-fraco)}
.app-corpo .sub-cab{margin-top:18px}
.tcard{background:var(--grafite);border:1px solid var(--ardosia);border-left:4px solid var(--ardosia);border-radius:var(--raio-card);padding:13px 14px 14px;margin-bottom:11px;transition:border-color .3s,background .3s}
.tcard.rodando{border-left-color:var(--azul);background:var(--azul-fraco);border-color:var(--azul-borda)}
.tcard.pausada{border-left-color:var(--prata)}
.tcard.atrasada{border-left-color:var(--alerta);border-color:var(--alerta-borda);background:var(--alerta-fraco)}
.tcard.concluida{opacity:.62;border-left-color:var(--ok)}
.tcard .l1{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.tcard .carroN{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--prata-fraco);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcard .placa{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--prata);background:var(--ardosia);border-radius:var(--raio-selo);padding:2px 6px;flex:0 0 auto}
.tcard .serv{font-size:1.06rem;font-weight:700;color:var(--gelo);line-height:1.3;margin:0 0 9px}
.tcard .relo{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:12px}
.tcard .relo .big{font-family:var(--mono);font-size:var(--fs-cron-g);font-weight:700;color:var(--gelo);line-height:1;letter-spacing:.01em}
.tcard.atrasada .relo .big{color:var(--alerta)}
.tcard .relo .prev{font-size:11px;color:var(--prata-fraco);text-align:right;line-height:1.35}
.tcard .relo .prev b{display:block;font-family:var(--mono);font-size:13px;color:var(--prata);font-weight:700}
.tcard .chip{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:var(--raio-selo);margin:0 5px 9px 0}
.tcard .chip.atrasada{background:var(--alerta);color:var(--onix)}
.tcard .chip.pausada{background:var(--ardosia);color:var(--prata)}
.tcard .chip.concluida{background:var(--ok-fraco);border:1px solid var(--ok);color:var(--ok)}
.tcard .nota-bt{appearance:none;background:transparent;border:0;color:var(--prata-fraco);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:10px;padding:8px 0;cursor:pointer;min-height:40px}
.tcard .nota-bt:hover{color:var(--gelo)}
.botoes{display:grid;gap:9px}
.botoes.duplo{grid-template-columns:1fr 1fr}
.bt.feito{background:transparent;border:1px solid var(--ardosia);color:var(--prata-fraco);min-height:42px;cursor:default;font-size:12px}
.bt.enviando{opacity:.6;pointer-events:none}
/* pausa: 4 motivos + pular */
.motivos{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:4px 0 9px}
.motivos .bt{font-size:13px;min-height:56px}
.motivos .pular{grid-column:1/-1;background:transparent;border:1px dashed var(--prata-fraco);color:var(--prata);min-height:48px}
/* desfazer 10 s */
.desfazer{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:62;max-width:456px;margin:0 auto;
  display:flex;align-items:center;gap:12px;background:var(--gelo);color:var(--onix);border-radius:var(--raio-card);padding:10px 10px 10px 14px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.desfazer .t{flex:1 1 auto;font-size:.88rem;font-weight:600;line-height:1.35}
.desfazer .bt{width:auto;min-height:48px;padding:0 16px;background:var(--onix);color:var(--gelo);font-size:13px}
/* faixa vermelha: "sem conexão, não gravou" */
.faixa-tec{position:sticky;top:0;z-index:6;background:var(--perigo);color:#fff;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:10px 12px;line-height:1.3}
.faixa-tec small{display:block;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none;opacity:.92}

/* acesso do técnico (protótipo: .ac-top/.ac-corpo/.quem/.pontos/.pad) */
.ac{min-height:100vh;min-height:100dvh;background:var(--onix)}
.ac-top{background:var(--grafite);border-bottom:var(--filete);padding:max(26px,env(safe-area-inset-top)) 16px 14px;text-align:center}
.ac-top .of{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--prata-fraco);margin-bottom:6px}
.ac-top .nm{display:block;font-size:1.05rem;font-weight:700;color:var(--gelo);line-height:1.25}
.ac-top img{display:block;height:30px;width:auto;margin:0 auto 10px;max-width:100%}
.ac-corpo{padding:18px 14px 22px;max-width:420px;margin:0 auto}
.ac-corpo .pg{font-size:.9rem;color:var(--prata);line-height:1.5;margin:0 0 14px;text-align:center}
.ac-corpo .pg b{color:var(--gelo)}
.ac-corpo .erro-ac{background:var(--alerta-fraco);border:1px solid var(--alerta-borda);border-left:3px solid var(--alerta);border-radius:0 var(--raio-md) var(--raio-md) 0;padding:10px 12px;font-size:.86rem;color:var(--prata);margin:0 0 14px}
.ac-corpo .erro-ac b{color:var(--alerta)}
.nomes{display:grid;gap:9px}
.nomes button{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  background:var(--grafite);border:1px solid var(--ardosia);border-left:4px solid var(--azul);
  border-radius:var(--raio-card);padding:14px;font-family:var(--fonte);min-height:64px;
}
.nomes button:hover{background:var(--ardosia)}
.nomes .ini{width:38px;height:38px;font-size:13px;background:var(--azul);color:var(--gelo)}
.nomes .n{display:block;font-size:1rem;font-weight:700;color:var(--gelo);line-height:1.25}
.nomes .f{display:block;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--prata-fraco);margin-top:2px}
.pontos{display:flex;justify-content:center;gap:13px;margin:6px 0 18px}
.pontos i{width:14px;height:14px;border-radius:50%;border:2px solid var(--prata-fraco);display:block}
.pontos i.on{background:var(--azul);border-color:var(--azul)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.pad button{
  font-family:var(--mono);font-size:24px;font-weight:700;color:var(--gelo);min-height:64px;
  background:var(--grafite);border:1px solid var(--ardosia);border-radius:var(--raio-pad);padding:15px 0;cursor:pointer;
}
.pad button:hover{background:var(--ardosia)}
.pad button:active{background:var(--azul-fraco)}
.pad button.acao{font-family:var(--fonte);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--prata)}
.ac-sair{
  background:transparent;border:0;color:var(--prata-fraco);font-family:var(--fonte);font-size:10px;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;cursor:pointer;padding:8px 0;min-height:36px;
}
.ac-sair:hover{color:var(--gelo)}
.ac-link{display:block;text-align:center;margin:18px 0 0;font-size:.8rem;color:var(--prata-fraco)}
.ac-link a{color:var(--prata);font-weight:700}
.entrar-alt{text-align:center;margin:14px 0 0;font-size:.8rem;color:var(--prata-fraco)}
.entrar-alt a{color:var(--prata);font-weight:700}

/* ================================================================== mobile (protótipo) */
@media (max-width:900px){
  .fita{grid-template-columns:repeat(3,1fr)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grade{grid-template-columns:1fr}
  .tarefas li{grid-template-columns:1fr;gap:8px}
  .passos{grid-template-columns:repeat(3,1fr);gap:12px 0}
  .nova-tarefa{grid-template-columns:1fr 1fr}
  .nova-tarefa .largo{grid-column:1/-1}
  .nova-tarefa .bt{grid-column:1/-1;min-height:var(--alvo-acao)}
}
@media (max-width:560px){
  .avisos{left:12px;right:12px;bottom:12px;max-width:none}
  .grade-campos{grid-template-columns:1fr}
  .grade-campos .meio{grid-column:auto}
  .filtros .campo{flex:1 1 140px}
  .filtros .conta{margin-left:0;width:100%}
  .ficha{padding:14px}
  .tile{min-width:0;flex:1 1 30%;padding:8px 10px}
  .tile .v{font-size:16px}
  .linha-placa{grid-template-columns:1fr}
  .linha-placa .bt{width:100%}
  .entrada .rodape-f .bt{width:100%}
}
@media (max-width:560px){
  .pend li{flex-wrap:wrap;row-gap:4px}
  .pend li .txt{flex:1 1 100%;order:3}
}
/* ficha no celular: previsto e real lado a lado, estado inteiro embaixo (mais curto que 1 coluna) */
@media (max-width:900px){
  .tarefas li{grid-template-columns:1fr 1fr}
  .tarefas li .serv,.tarefas li .tec,.tarefas li .est,.tarefas li .acoes{grid-column:1/-1}
}
/* no celular do técnico o aviso de rede é a faixa vermelha dele (.faixa-tec), não a de "reconectando" */
body.modo-tecnico .faixa-rede{display:none !important}