/* ===================================================================
   KFROTA - Design System (visual corporativo premium)
   =================================================================== */
:root{
  --azul:#1d4ed8; --azul-700:#1e40af; --azul-900:#172554;
  --tinta:#0f172a; --tinta-2:#1e293b; --tinta-3:#334155;
  --cinza:#64748b; --cinza-2:#94a3b8; --linha:#e2e8f0;
  --fundo:#f1f5f9; --branco:#ffffff;
  --verde:#16a34a; --amarelo:#d97706; --vermelho:#dc2626; --info:#0ea5e9;
  --sombra:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.06);
  --sombra-lg:0 10px 25px -5px rgba(15,23,42,.15),0 8px 10px -6px rgba(15,23,42,.10);
  --raio:14px; --raio-sm:9px;
  --nav-w:248px;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--fundo);color:var(--tinta);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:14px}
.hidden{display:none !important}

/* ---- LOGIN ---- */
#tela-login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 70% -10%,#1e3a8a 0%,#0b1220 55%,#070b14 100%)}
.login-card{width:380px;max-width:92vw;background:var(--branco);border-radius:20px;padding:38px 34px;box-shadow:var(--sombra-lg);text-align:center}
.login-card .campo{text-align:left}
.login-logo{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.login-logo .mark{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,#2563eb,#1e3a8a);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px}
.login-logo h1{font-size:20px;letter-spacing:.5px}
.login-card p.sub{color:var(--cinza);margin:10px 0 22px;font-size:13px}
.campo{margin-bottom:14px}
.campo label{display:block;font-size:12px;font-weight:600;color:var(--tinta-3);margin-bottom:6px}
.campo input{width:100%;padding:11px 13px;border:1px solid var(--linha);border-radius:10px;outline:none;transition:.15s}
.campo input:focus{border-color:var(--azul);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:10px;
  font-weight:600;font-size:14px;transition:.15s;background:var(--azul);color:#fff}
.btn:hover{background:var(--azul-700)}
.btn.full{width:100%}
.btn.ghost{background:var(--branco);color:var(--tinta);border:1px solid var(--linha)}
.btn.ghost:hover{background:#f8fafc}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:8px}
.btn.danger{background:var(--vermelho)}
.erro-login{color:var(--vermelho);font-size:13px;margin-top:10px;min-height:18px}
.cred-dica{margin-top:18px;font-size:11.5px;color:var(--cinza);background:#f8fafc;border:1px dashed var(--linha);border-radius:10px;padding:10px}
.login-rodape{text-align:center;margin-top:18px;font-size:11.5px;color:var(--cinza);line-height:1.6;letter-spacing:.3px}
.login-rodape b{color:var(--azul)}

/* ---- LAYOUT APP ---- */
#app{display:grid;grid-template-columns:var(--nav-w) 1fr;grid-template-rows:60px 1fr;height:100vh}
.sidebar{grid-row:1/3;background:linear-gradient(180deg,#0b1220,#0e1830);color:#cbd5e1;display:flex;flex-direction:column;padding:16px 12px;overflow-y:auto}
.sidebar .brand{display:flex;align-items:center;gap:11px;padding:6px 8px 18px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:12px}
.sidebar .brand .mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#2563eb,#1e3a8a);display:grid;place-items:center;color:#fff;font-weight:800}
.sidebar .brand b{color:#fff;font-size:16px;letter-spacing:.5px}
.sidebar .brand span{display:block;font-size:10.5px;color:#64748b}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:#cbd5e1;font-weight:500;margin-bottom:3px;transition:.12s;cursor:pointer}
.nav-item .ic{width:18px;text-align:center;opacity:.9}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.ativo{background:var(--azul);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.4)}
.nav-sep{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:#475569;padding:14px 12px 6px}
.sidebar .rodape{margin-top:auto;font-size:10.5px;color:#475569;padding:12px 8px 4px;border-top:1px solid rgba(255,255,255,.08)}

.topbar{grid-column:2;display:flex;align-items:center;justify-content:space-between;background:var(--branco);
  border-bottom:1px solid var(--linha);padding:0 22px;box-shadow:var(--sombra)}
.topbar h2{font-size:17px;font-weight:700}
.topbar .right{display:flex;align-items:center;gap:16px}
.online-dot{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--cinza)}
.online-dot i{width:9px;height:9px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.user-chip{display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--azul-900);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}

.conteudo{grid-column:2;overflow-y:auto;padding:22px}
.view{animation:fade .2s ease}
.view.no-anim{animation:none}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- COMPONENTES ---- */
.grid-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:20px}
.kpi{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);padding:18px 20px;box-shadow:var(--sombra)}
.kpi .rotulo{font-size:12px;color:var(--cinza);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.kpi .valor{font-size:30px;font-weight:800;margin-top:6px;color:var(--tinta)}
.kpi .pe{font-size:12px;color:var(--cinza);margin-top:4px}
.kpi.azul{border-top:3px solid var(--azul)} .kpi.verde{border-top:3px solid var(--verde)}
.kpi.amarelo{border-top:3px solid var(--amarelo)} .kpi.vermelho{border-top:3px solid var(--vermelho)}

.cards-2{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
@media(max-width:1100px){.cards-2{grid-template-columns:1fr}}
.card{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra);overflow:hidden}
.card .cab{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--linha)}
.card .cab h3{font-size:15px;font-weight:700}
.card .corpo{padding:16px 18px}
.card.flush .corpo{padding:0}

table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{text-align:left;padding:11px 16px;background:#f8fafc;color:var(--tinta-3);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.3px;border-bottom:1px solid var(--linha);position:sticky;top:0}
tbody td{padding:11px 16px;border-bottom:1px solid var(--linha)}
tbody tr:hover{background:#f8fafc}
tbody tr:last-child td{border-bottom:none}
tfoot td{padding:11px 16px;border-top:2px solid var(--linha);background:#f8fafc;font-weight:700}

.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600}
.badge.on{background:#dcfce7;color:#15803d} .badge.off{background:#f1f5f9;color:#64748b}
.badge.mov{background:#dbeafe;color:#1d4ed8}
.sev-CRITICO{background:#fee2e2;color:#b91c1c} .sev-ALTO{background:#ffedd5;color:#c2410c}
.sev-MEDIO{background:#fef9c3;color:#a16207} .sev-BAIXO{background:#e0f2fe;color:#0369a1}

.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.toolbar input,.toolbar select{padding:9px 12px;border:1px solid var(--linha);border-radius:9px;background:#fff}
.toolbar .crescer{flex:1}

#mapa,#mapa-hist{width:100%;height:100%;border-radius:var(--raio);z-index:0}
.mapa-wrap{height:calc(100vh - 60px - 44px);border-radius:var(--raio);overflow:hidden;border:1px solid var(--linha);box-shadow:var(--sombra)}
.leaflet-popup-content{font-family:inherit}
.pin-label{font-weight:700;color:var(--tinta)}

.lista-frota{max-height:100%;overflow-y:auto}
.frota-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--linha);cursor:pointer}
.frota-item:hover{background:#f8fafc}
.frota-item .ic{width:38px;height:38px;border-radius:10px;background:#eff6ff;color:var(--azul);display:grid;place-items:center;font-size:18px}
.frota-item .nome{font-weight:600}
.frota-item .meta{font-size:12px;color:var(--cinza)}

.barra-cat{display:flex;flex-direction:column;gap:10px}
.barra-cat .row{display:grid;grid-template-columns:130px 1fr 40px;align-items:center;gap:10px;font-size:13px}
.barra-cat .bar{height:10px;border-radius:6px;background:#e2e8f0;overflow:hidden}
.barra-cat .bar i{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#1e40af)}

.toast-wrap{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:9999}
.toast{background:var(--tinta);color:#fff;padding:12px 16px;border-radius:11px;box-shadow:var(--sombra-lg);font-size:13.5px;max-width:340px;animation:fade .2s}
.toast.alerta{background:#7f1d1d}
.vazio{padding:40px;text-align:center;color:var(--cinza)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.5);display:grid;place-items:center;z-index:1000}
.modal{background:#fff;border-radius:16px;width:560px;max-width:94vw;max-height:90vh;overflow-y:auto;box-shadow:var(--sombra-lg)}
.modal .cab{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--linha)}
.modal .corpo{padding:22px}
.modal .rodape{padding:16px 22px;border-top:1px solid var(--linha);display:flex;justify-content:flex-end;gap:10px}
.chip-proto{display:inline-block;padding:4px 10px;border-radius:8px;font-size:12px;font-weight:600;margin:3px}
.chip-proto.ok{background:#dcfce7;color:#15803d}
.chip-proto.pend{background:#f1f5f9;color:#64748b}

/* ===================================================================
   KFROTA v2 - upgrades de produto comercial
   =================================================================== */

/* ---- KPIs com icone + variantes de cor ---- */
.grid-kpi{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.kpi{position:relative;display:flex;flex-direction:column;gap:2px}
.kpi .topo{display:flex;align-items:flex-start;justify-content:space-between}
.kpi .ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:17px;background:#eff6ff;color:var(--azul);flex:none}
.kpi.verde .ico{background:#dcfce7;color:#15803d}
.kpi.amarelo .ico{background:#fef3c7;color:#b45309}
.kpi.vermelho .ico{background:#fee2e2;color:#b91c1c}
.kpi.roxo{border-top:3px solid #7c3aed} .kpi.roxo .ico{background:#ede9fe;color:#6d28d9}
.kpi.ciano{border-top:3px solid #0891b2} .kpi.ciano .ico{background:#cffafe;color:#0e7490}
.kpi.cinza{border-top:3px solid #64748b} .kpi.cinza .ico{background:#f1f5f9;color:#475569}
.kpi .valor{font-size:27px}
.kpi.compacto .valor{font-size:22px}

/* ---- Badges de situacao / status ---- */
.badge.aguard{background:#e0e7ff;color:#4338ca}
.badge.sit-OPERACIONAL{background:#dcfce7;color:#15803d}
.badge.sit-MANUTENCAO{background:#fef3c7;color:#b45309}
.badge.sit-PARADO{background:#fee2e2;color:#b91c1c}
.badge.sit-INATIVO{background:#f1f5f9;color:#64748b}
.badge.est-ATIVO{background:#dcfce7;color:#15803d}
.badge.est-ENCERRADO{background:#f1f5f9;color:#64748b}
.badge.est-SUSPENSO{background:#fef3c7;color:#b45309}
.badge.est-PENDENTE{background:#fef3c7;color:#b45309}
.badge.est-VENCIDA{background:#fee2e2;color:#b91c1c}
.badge.est-CONCLUIDA{background:#dcfce7;color:#15803d}
.badge.est-AGENDADA{background:#dbeafe;color:#1d4ed8}
.pill-cat{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.pill-cat .gi{font-size:15px}

/* ---- Mapa com painel lateral inteligente ---- */
.mapa-layout{display:grid;grid-template-columns:300px 1fr;gap:0;height:calc(100vh - 60px - 44px);
  border-radius:var(--raio);overflow:hidden;border:1px solid var(--linha);box-shadow:var(--sombra)}
.mapa-side{background:#fff;border-right:1px solid var(--linha);display:flex;flex-direction:column;overflow:hidden}
.mapa-side .topo{padding:12px 14px;border-bottom:1px solid var(--linha)}
.mapa-side .topo input{width:100%;padding:8px 11px;border:1px solid var(--linha);border-radius:9px}
.mapa-side .resumo{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--linha);font-size:11px}
.mapa-side .resumo span{display:inline-flex;align-items:center;gap:4px;color:var(--cinza)}
.mapa-side .resumo b{color:var(--tinta)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot.on{background:var(--verde)} .dot.mov{background:var(--azul)} .dot.off{background:var(--cinza-2)}
.veic-lista{overflow-y:auto;flex:1}
.veic-item{display:flex;align-items:center;gap:10px;padding:10px 13px;border-bottom:1px solid var(--linha);cursor:pointer;transition:.12s}
.veic-item:hover{background:#f8fafc}
.veic-item.sel{background:#eff6ff;box-shadow:inset 3px 0 0 var(--azul)}
.veic-item .gi{width:34px;height:34px;border-radius:9px;background:#f1f5f9;display:grid;place-items:center;font-size:17px;flex:none}
.veic-item .nm{font-weight:600;font-size:13px}
.veic-item .mt{font-size:11.5px;color:var(--cinza);display:flex;gap:8px;flex-wrap:wrap}
.mapa-layout #mapa{border-radius:0}
.veic-foco{position:absolute;z-index:500;left:14px;bottom:14px;background:#fff;border-radius:12px;box-shadow:var(--sombra-lg);
  padding:13px 15px;width:250px;font-size:13px;display:none}
.veic-foco.show{display:block}
.veic-foco h4{font-size:14px;margin-bottom:8px;display:flex;align-items:center;gap:7px}
.veic-foco .lin{display:flex;justify-content:space-between;padding:3px 0;color:var(--cinza)}
.veic-foco .lin b{color:var(--tinta)}

/* ---- Filtros / chips ---- */
.filtros{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.chip-f{padding:7px 13px;border-radius:999px;border:1px solid var(--linha);background:#fff;font-size:13px;font-weight:600;color:var(--cinza);cursor:pointer}
.chip-f.on{background:var(--azul);color:#fff;border-color:var(--azul)}
.seg{display:inline-flex;border:1px solid var(--linha);border-radius:9px;overflow:hidden}
.seg button{padding:7px 13px;font-size:13px;font-weight:600;color:var(--cinza);background:#fff}
.seg button.on{background:var(--azul);color:#fff}

/* ---- Checklist ---- */
.chk-itens{display:flex;flex-direction:column;gap:8px;margin:6px 0 14px}
.chk-item{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--linha);border-radius:10px}
.chk-item .opt{display:inline-flex;gap:5px}
.chk-item .opt label{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;cursor:pointer}

/* ---- mini barras / KPI de modulo ---- */
.mini-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.mini-kpi{background:#fff;border:1px solid var(--linha);border-radius:12px;padding:13px 15px}
.mini-kpi .r{font-size:11.5px;color:var(--cinza);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.mini-kpi .v{font-size:21px;font-weight:800;margin-top:3px}

textarea{width:100%;padding:10px 12px;border:1px solid var(--linha);border-radius:10px;outline:none;resize:vertical;min-height:72px}
select{padding:10px 12px;border:1px solid var(--linha);border-radius:10px;background:#fff;outline:none}
.campo select{width:100%}
.campo.full{grid-column:1/-1}

/* ---- Typeahead (autocomplete com busca no servidor) ---- */
.ta{position:relative}
.ta .ta-input{width:100%;padding:11px 34px 11px 13px;border:1px solid var(--linha);border-radius:10px;outline:none;transition:.15s;background:var(--branco);color:var(--tinta)}
.ta .ta-input:focus{border-color:var(--azul);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.ta.sel .ta-input{font-weight:600}
.ta-clear{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:22px;height:22px;border:none;border-radius:6px;background:transparent;color:var(--cinza);cursor:pointer;font-size:13px;line-height:1;display:grid;place-items:center}
.ta-clear:hover{background:rgba(148,163,184,.18);color:var(--tinta)}
.ta-drop{position:absolute;z-index:50;left:0;right:0;top:calc(100% + 4px);background:var(--branco);border:1px solid var(--linha);border-radius:10px;box-shadow:var(--sombra-lg);max-height:280px;overflow-y:auto;padding:4px}
.ta-drop .ta-cab{font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--cinza);text-transform:uppercase;padding:8px 10px 4px}
.ta-item{padding:9px 10px;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;gap:1px}
.ta-item:hover,.ta-item.on{background:rgba(37,99,235,.12)}
.ta-item b{font-size:14px;font-weight:600;color:var(--tinta)}
.ta-item small{font-size:12px;color:var(--cinza)}
.ta-msg{padding:12px 10px;color:var(--cinza);font-size:13px;text-align:center}
.ta-msg.load::before{content:"";display:inline-block;width:13px;height:13px;margin-right:7px;vertical-align:-2px;border:2px solid var(--linha);border-top-color:var(--azul);border-radius:50%;animation:ta-spin .7s linear infinite}
@keyframes ta-spin{to{transform:rotate(360deg)}}

/* ---- Hamburguer / mobile ---- */
.hamburguer{display:none;font-size:18px;padding:6px 11px}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:40}
.sb-overlay.show{display:block}

@media(max-width:860px){
  #app{grid-template-columns:1fr}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:min(82vw,var(--nav-w));z-index:50;transform:translateX(-100%);transition:transform .22s ease}
  .sidebar.aberta{transform:none;box-shadow:var(--sombra-lg)}
  .topbar{grid-column:1;padding:0 12px}
  .topbar .right{gap:10px}
  .topbar h2{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px}
  .conteudo{grid-column:1;padding:14px}
  .hamburguer{display:inline-flex}
  .mapa-layout{grid-template-columns:1fr;height:calc(100vh - 60px - 44px)}
  .mapa-side{position:absolute;z-index:600;left:8px;right:8px;top:8px;max-height:46%;border-radius:12px;border:1px solid var(--linha);box-shadow:var(--sombra-lg);display:none}
  .mapa-side.aberta{display:flex}
  .cards-2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .topbar .user-chip .avatar{display:none}
  .kpi .valor{font-size:24px}
  /* seletor de empresa compacto no topo */
  .empresa-switch{padding:5px 9px;gap:5px}
  .empresa-switch .es-lbl{display:none}
  .empresa-switch select{max-width:140px}
}
@media(max-width:560px){
  body{overflow-x:hidden}
  .topbar{padding:0 10px}
  .topbar h2{font-size:15px}
  .topbar .right{gap:8px}
  .online-dot{display:none}
  .user-chip>div{display:none}
  .user-chip{gap:6px}
  .empresa-switch select{max-width:120px}
  .conteudo{padding:12px}
  input,select,textarea{font-size:16px}  /* evita zoom automatico do iOS ao focar */
  table{font-size:12px}
  thead th,tbody td{padding:8px 9px;white-space:nowrap}
  .grid-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi .valor{font-size:20px} .kpi.compacto .valor{font-size:18px}
  .kpi .rotulo{font-size:11px}
  .mod-grid,.alvo-grid,.tipo-cards{grid-template-columns:1fr}
  .modal .corpo{padding:16px}
  .modal .cab,.modal .rodape{padding:14px 16px}
  .modal .cab h3{font-size:15px}
  .rodape{flex-wrap:wrap;gap:8px}
  .rodape .btn{flex:1;min-width:120px}
  .proto-hero .corpo{padding:18px}
  .proto-stats{grid-template-columns:1fr 1fr}
  .filtros{flex-wrap:wrap}
}
@media(max-width:380px){
  .grid-kpi{grid-template-columns:1fr}
  .empresa-switch select{max-width:96px}
}

/* ===================================================================
   CENTRAL DE PROTOCOLOS E INTEGRACOES (Gateway Universal)
   =================================================================== */
.proto-hero{background:linear-gradient(135deg,var(--azul-900),var(--azul-700));color:#fff;border:none}
.proto-hero .corpo{padding:26px 28px}
.proto-hero-top{display:flex;justify-content:space-between;align-items:center;gap:26px}
.proto-hero h2{font-size:23px;margin:0 0 8px;color:#fff}
.proto-hero p{color:#cdd9f7;font-size:13.5px;line-height:1.6;max-width:680px;margin:0}
.proto-hero b{color:#fff}

/* anel de progresso de homologados */
.proto-prog{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
.proto-prog .anel{--p:0;width:108px;height:108px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(#34d399 calc(var(--p)*1%),rgba(255,255,255,.18) 0)}
.proto-prog .anel .centro{width:84px;height:84px;border-radius:50%;background:var(--azul-900);display:grid;place-items:center;text-align:center;line-height:1.1}
.proto-prog .anel .centro b{font-size:26px;color:#fff}
.proto-prog .anel .centro span{font-size:11px;color:#9fb4e6}
.proto-prog .leg{font-size:11.5px;color:#cdd9f7;text-align:center;text-transform:uppercase;letter-spacing:.5px;font-weight:600}

/* faixa de contadores por situacao */
.proto-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:22px}
.stat-proto{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:11px 14px}
.stat-proto .ico{font-size:18px}
.stat-proto .n{font-size:20px;font-weight:700;color:#fff;line-height:1}
.stat-proto .r{font-size:11.5px;color:#cdd9f7;margin-top:2px}

/* secoes por categoria */
.proto-cat{margin-top:8px}
.proto-cat+.proto-cat{margin-top:26px}
.proto-cat-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid var(--linha)}
.proto-cat-head .ic{width:40px;height:40px;border-radius:11px;background:#eff6ff;display:grid;place-items:center;font-size:20px;flex:none}
.proto-cat-head b{font-size:15px;display:block}
.proto-cat-head .d{font-size:12px;color:var(--cinza)}

.tabela-proto{font-size:13px}
.tabela-proto td .sub{font-size:11px;color:var(--cinza-2);font-family:ui-monospace,monospace;margin-top:2px}
.tabela-proto td.modelos{font-size:12px;color:var(--cinza);max-width:200px}
.tabela-proto td.ctr{text-align:center;white-space:nowrap}
.tabela-proto thead th{white-space:nowrap}

/* pilula de situacao (status) */
.stp{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.stp.homologado{background:#dcfce7;color:#15803d}
.stp.desenvolvimento{background:#fef3c7;color:#b45309}
.stp.testes{background:#dbeafe;color:#1d4ed8}
.stp.planejado{background:#f1f5f9;color:#64748b}
.stp.descontinuado{background:#fee2e2;color:#b91c1c}

/* tela de detalhes do protocolo */
.pd-desc{color:var(--cinza);font-size:13.5px;line-height:1.6;margin:0 0 18px}
.pd-ficha{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;margin-bottom:6px}
.pd-l{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--linha);font-size:13px}
.pd-l span{color:var(--cinza)}
.pd-l b{text-align:right}
.pd-bloco{margin-top:18px}
.pd-bloco h4{font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--azul);margin:0 0 8px}
.pd-lista{margin:0;padding-left:18px;display:grid;gap:4px}
.pd-lista li{font-size:13px;color:#334155}
.pd-obs{font-size:13px;color:#334155;line-height:1.6;background:#f8fafc;border:1px solid var(--linha);border-radius:10px;padding:12px 14px;margin:0}

@media(max-width:720px){
  .proto-hero-top{flex-direction:column;align-items:flex-start}
  .pd-ficha{grid-template-columns:1fr}
}

/* ===================================================================
   ADMINISTRACAO DA PLATAFORMA (painel do provedor)
   =================================================================== */
td.ctr, th.ctr{text-align:center}
.t-sub{font-size:11px;color:var(--cinza-2);margin-top:2px}

/* seletor de empresa do master (topbar) */
.empresa-switch{display:inline-flex;align-items:center;gap:7px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;padding:5px 10px}
.empresa-switch.hidden{display:none}
.empresa-switch .es-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--azul)}
.empresa-switch select{border:none;background:transparent;font-size:13px;font-weight:600;color:var(--tinta);max-width:200px;cursor:pointer;outline:none}

/* chips de situacao (empresa / fatura / rastreador) */
.chip-st{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.3px;white-space:nowrap;background:#f1f5f9;color:#64748b}
.chip-st.ATIVO,.chip-st.PAGA,.chip-st.ONLINE{background:#dcfce7;color:#15803d}
.chip-st.TESTE{background:#dbeafe;color:#1d4ed8}
.chip-st.SUSPENSO,.chip-st.PENDENTE,.chip-st.AGUARDANDO{background:#fef3c7;color:#b45309}
.chip-st.CANCELADO,.chip-st.VENCIDA,.chip-st.OFFLINE{background:#fee2e2;color:#b91c1c}

/* ===================================================================
   CENTRAL DE ALERTAS INTELIGENTES (abas + assistente)
   =================================================================== */
.seg-abas{margin-bottom:16px}
.seg-abas button{font-size:14px;padding:9px 16px}

/* assistente (wizard) */
.modal-wiz{width:720px}
.wiz-steps{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.wiz-step{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--cinza-2);flex:1;min-width:120px}
.wiz-step span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#e2e8f0;color:#64748b;font-size:12px;flex:none}
.wiz-step.on{color:var(--azul)} .wiz-step.on span{background:var(--azul);color:#fff}
.wiz-step.done span{background:var(--verde);color:#fff}
.wiz-h{font-size:14px;font-weight:700;margin:0 0 14px}

.wiz-opts{display:grid;gap:10px;margin-bottom:14px}
.wiz-opt{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;border:1.5px solid var(--linha);border-radius:12px;padding:13px 15px;cursor:pointer}
.wiz-opt input{grid-row:1/3;width:18px;height:18px}
.wiz-opt b{font-size:14px} .wiz-opt span{font-size:12px;color:var(--cinza)}
.wiz-opt.sel{border-color:var(--azul);background:#eff6ff}

.tipo-grupo{margin-bottom:16px}
.tg-nome{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--cinza);margin-bottom:8px}
.tipo-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.tipo-card{border:1.5px solid var(--linha);border-radius:11px;padding:11px 13px;cursor:pointer;transition:.12s;background:#fff}
.tipo-card:hover{border-color:var(--azul-700);box-shadow:0 2px 8px rgba(37,99,235,.12)}
.tipo-card.sel{border-color:var(--azul);background:#eff6ff;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.tipo-card.off{opacity:.62;background:#f8fafc}
.tc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tc-top b{font-size:13px}

.wiz-nota{background:#fffbeb;border:1px solid #fde68a;color:#b45309;border-radius:9px;padding:9px 12px;font-size:12.5px;margin-bottom:12px}

.canais{display:flex;flex-wrap:wrap;gap:8px}
.canal{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linha);border-radius:9px;padding:8px 12px;font-size:13px;cursor:pointer}
.canal.off{opacity:.6;cursor:not-allowed}
.dias{display:flex;flex-wrap:wrap;gap:8px}
.dia{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linha);border-radius:8px;padding:6px 10px;font-size:13px;cursor:pointer}

/* assistente simplificado (2 passos) */
.wiz-mini{display:inline-block;font-size:12px;font-weight:700;color:var(--cinza-2);margin-right:14px}
.wiz-mini.on{color:var(--azul)} .wiz-mini.done{color:var(--verde)}
.alvo-busca{width:100%;padding:11px 14px;border:1px solid var(--linha);border-radius:10px;font-size:14px;margin-bottom:14px}
.alvo-busca:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.alvo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-bottom:14px}
.alvo-card{display:flex;align-items:center;gap:12px;text-align:left;border:1.5px solid var(--linha);border-radius:12px;padding:12px 14px;background:#fff;cursor:pointer;transition:.12s;font:inherit;width:100%}
.alvo-card:hover{border-color:var(--azul);background:#eff6ff;box-shadow:0 3px 10px rgba(37,99,235,.14);transform:translateY(-1px)}
.alvo-card.off{opacity:.6}
.alvo-card .ac-ic{font-size:24px;flex:none;width:40px;height:40px;display:grid;place-items:center;background:#f1f5f9;border-radius:10px}
.alvo-card:hover .ac-ic{background:#dbeafe}
.ac-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ac-txt b{font-size:14px}
.ac-txt small{font-size:11.5px;color:var(--cinza);line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.wiz-chosen{display:flex;align-items:center;gap:13px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:13px 15px;margin-bottom:14px}
.wiz-chosen .ac-ic{font-size:26px;flex:none;width:46px;height:46px;display:grid;place-items:center;background:#fff;border-radius:11px}
.wiz-chosen b{font-size:16px}
.wc-desc{font-size:12.5px;color:var(--cinza);margin-top:3px;line-height:1.4}

.wiz-adv{margin-top:14px;border-top:1px solid var(--linha);padding-top:8px}
.wiz-adv>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--azul);padding:6px 0;list-style:none}
.wiz-adv>summary::-webkit-details-marker{display:none}
.wiz-adv>summary::before{content:'▸ ';font-size:11px}
.wiz-adv[open]>summary::before{content:'▾ '}
.modal-wiz{width:680px}

/* totais da fatura (detalhe/relatorio) */
.fatura-totais{margin-top:14px;margin-left:auto;max-width:320px}
.fatura-totais .pd-l.total{font-size:17px;font-weight:700;border-bottom:none;border-top:2px solid var(--linha);margin-top:4px;padding-top:10px;color:var(--azul-900)}

/* Painel do Provedor: KPIs clicaveis + cards de modulo */
.kpi-nav{cursor:pointer;display:flex}
.kpi-nav>.kpi{width:100%;transition:.14s}
.kpi-nav:hover>.kpi{transform:translateY(-2px);box-shadow:0 8px 20px rgba(37,99,235,.18);border-color:var(--azul)}
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.mod-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;border:1.5px solid var(--linha);border-radius:13px;padding:15px 16px;background:#fff;cursor:pointer;transition:.14s;font:inherit;width:100%}
.mod-card:hover{border-color:var(--azul);background:#eff6ff;box-shadow:0 4px 14px rgba(37,99,235,.16);transform:translateY(-2px)}
.mod-card .mc-ic{font-size:26px;width:48px;height:48px;display:grid;place-items:center;background:#f1f5f9;border-radius:12px;margin-bottom:6px}
.mod-card:hover .mc-ic{background:#dbeafe}
.mod-card b{font-size:15px}
.mod-card small{font-size:12px;color:var(--cinza);line-height:1.35}

/* ===================================================================
   LOGO DA EMPRESA (KRIGS) - marca oficial, sem fundo (transparente).
   Monocromatico e adaptavel: navy em fundo claro, branco em fundo escuro.
   E SEMPRE o logo da empresa. O nome do app (KFROTA) fica so no rodape.
   =================================================================== */
.logo-krigs{display:block;flex:none;aspect-ratio:2.944;
  background:url(/assets/logo-krigs-navy.png?v=5) center/contain no-repeat}
/* fundo escuro (tema dark): versao branca */
:root[data-theme="dark"] .logo-krigs{background-image:url(/assets/logo-krigs-white.png?v=5)}
/* a sidebar tem fundo sempre escuro -> logo sempre branco, nos dois temas */
.sidebar .logo-krigs,
:root[data-theme="dark"] .sidebar .logo-krigs{background-image:url(/assets/logo-krigs-white.png?v=5)}

/* --- Login: logo centralizado (sem texto abaixo) --- */
.login-logo{flex-direction:column;align-items:center;gap:0;margin-bottom:24px}
.login-logo .logo-krigs{width:200px}

/* --- Sidebar: logo da empresa --- */
.sidebar .brand{flex-direction:column;align-items:flex-start;gap:6px}
.sidebar .brand .logo-krigs{width:100%;max-width:176px}
.sidebar .brand .brand-app{display:block;font-size:11px;font-weight:700;letter-spacing:2px;color:#94a3b8;text-transform:uppercase;padding-left:2px}
.sidebar .brand .brand-app:empty{display:none}

/* ===================================================================
   BOTAO DE TEMA (canto superior direito) - claro / escuro
   =================================================================== */
.btn-tema{position:fixed;top:14px;right:16px;z-index:3000;width:40px;height:40px;border-radius:11px;
  display:grid;place-items:center;font-size:18px;line-height:1;cursor:pointer;transition:.15s;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(6px)}
.btn-tema:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)}
/* quando dentro do app (topbar), adapta ao tema para ter contraste */
:root[data-theme="light"] body:has(#app:not(.hidden)) .btn-tema{background:#fff;border-color:var(--linha);color:var(--tinta)}
:root[data-theme="light"] body:has(#app:not(.hidden)) .btn-tema:hover{background:#f1f5f9}
:root[data-theme="dark"] body:has(#app:not(.hidden)) .btn-tema{background:#1e293b;border-color:var(--linha);color:#e5edf7}
:root[data-theme="dark"] body:has(#app:not(.hidden)) .btn-tema:hover{background:#24344c}
/* evita que o botao flutuante cubra os controles da direita da topbar */
.topbar .right{padding-right:48px}

/* ===================================================================
   TEMA ESCURO (dark mode) - remapeia tokens e superficies claras
   =================================================================== */
:root[data-theme="dark"]{
  --tinta:#e5edf7; --tinta-2:#cbd5e1; --tinta-3:#cbd5e1;
  --cinza:#94a3b8; --cinza-2:#7c8ba1; --linha:#2b3a52;
  --fundo:#0b1220; --branco:#151f30;
  --sombra:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.35);
  --sombra-lg:0 10px 25px -5px rgba(0,0,0,.6),0 8px 12px -6px rgba(0,0,0,.5);
}
:root[data-theme="dark"] body{background:var(--fundo);color:var(--tinta)}

/* superficies que fixavam branco/claro no codigo */
:root[data-theme="dark"] .mini-kpi,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .mapa-side,
:root[data-theme="dark"] .veic-foco,
:root[data-theme="dark"] .tipo-card,
:root[data-theme="dark"] .alvo-card,
:root[data-theme="dark"] .mod-card,
:root[data-theme="dark"] .chip-f,
:root[data-theme="dark"] .seg button,
:root[data-theme="dark"] .btn.ghost{background:var(--branco);color:var(--tinta)}
:root[data-theme="dark"] .btn.ghost:hover{background:#1c2942}

/* campos de formulario */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .toolbar input,
:root[data-theme="dark"] .toolbar select,
:root[data-theme="dark"] .mapa-side .topo input,
:root[data-theme="dark"] .alvo-busca{background:#0f1a2b;color:var(--tinta);border-color:var(--linha)}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{color:#5b6b82}

/* tabelas (cabecalho, rodape e hover) */
:root[data-theme="dark"] thead th,
:root[data-theme="dark"] tfoot td{background:#0f1a2b;color:var(--tinta-2)}
:root[data-theme="dark"] tbody tr:hover,
:root[data-theme="dark"] .frota-item:hover,
:root[data-theme="dark"] .veic-item:hover{background:#0f1a2b}

/* tiles de icone com fundo claro */
:root[data-theme="dark"] .frota-item .ic,
:root[data-theme="dark"] .kpi .ico,
:root[data-theme="dark"] .veic-item .gi,
:root[data-theme="dark"] .proto-cat-head .ic,
:root[data-theme="dark"] .alvo-card .ac-ic,
:root[data-theme="dark"] .mod-card .mc-ic,
:root[data-theme="dark"] .wiz-chosen .ac-ic{background:#12233d;color:#dbeafe}

/* estados selecionado/hover com azul claro */
:root[data-theme="dark"] .veic-item.sel,
:root[data-theme="dark"] .tipo-card.sel,
:root[data-theme="dark"] .alvo-card:hover,
:root[data-theme="dark"] .mod-card:hover,
:root[data-theme="dark"] .wiz-opt.sel,
:root[data-theme="dark"] .wiz-chosen,
:root[data-theme="dark"] .empresa-switch{background:#12233d;border-color:#1e3a5f}
:root[data-theme="dark"] .veic-item.sel{box-shadow:inset 3px 0 0 var(--azul)}

/* barras e passos */
:root[data-theme="dark"] .barra-cat .bar,
:root[data-theme="dark"] .wiz-step span{background:#24344c}

/* blocos de texto/observacao claros */
:root[data-theme="dark"] .pd-lista li,
:root[data-theme="dark"] .pd-obs{color:var(--tinta-2)}
:root[data-theme="dark"] .pd-obs,
:root[data-theme="dark"] .cred-dica,
:root[data-theme="dark"] .tipo-card.off{background:#0f1a2b;border-color:var(--linha)}

/* toast (usava --tinta como fundo, que no dark fica claro) */
:root[data-theme="dark"] .toast{background:#1e293b;color:#fff;border:1px solid var(--linha)}

/* nota amarela do assistente e chips ok em ambos os temas (mantidos) */

/* ===================================================================
   TELA DO OPERADOR DE CAMPO - lancar abastecimento (placa + litros)
   =================================================================== */
/* ---- Kiosk do operador (app dedicado de abastecimento, tela cheia) ---- */
.modo-operador .sidebar{display:none}
.modo-operador .topbar{display:none}
.op-kiosk{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;background:var(--fundo)}
.op-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;padding-right:64px;border-bottom:1px solid var(--linha);background:var(--branco)}
.op-emp{display:flex;align-items:center;gap:10px;min-width:0}
.op-logo{width:132px;height:38px;flex:none}
.op-emp-txt{line-height:1.15;min-width:0}
.op-emp-txt b{display:block;font-size:14px;font-weight:800;color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.op-emp-txt small{font-size:10.5px;color:var(--cinza);text-transform:uppercase;letter-spacing:.6px}
.op-right{display:flex;align-items:center;gap:12px}
.op-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--cinza);white-space:nowrap}
.op-live i{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.op-user{font-size:13px;font-weight:600;color:var(--tinta);white-space:nowrap;max-width:26vw;overflow:hidden;text-overflow:ellipsis}
.op-palco{flex:1;overflow-y:auto;display:flex;align-items:flex-start;justify-content:center;padding:22px 16px}
.op-palco .wz{width:100%;max-width:540px;margin:0 auto;min-height:auto}
.op-palco .wz-card{border-radius:18px;border:1px solid var(--linha);box-shadow:var(--sombra-lg);padding:22px}
.op-sucesso{text-align:center;align-items:center}
.op-check{width:92px;height:92px;border-radius:50%;background:#dcfce7;color:#16a34a;font-size:54px;display:grid;place-items:center;margin:6px auto 18px;font-weight:700}
.op-sucesso-tit{font-size:22px;font-weight:800;color:var(--tinta);margin:0 0 6px;line-height:1.25}
.op-sucesso-sub{color:var(--cinza);margin-bottom:26px;font-size:15px}
@media (max-width:520px){.op-logo{width:104px;height:30px}.op-live span,.op-user{display:none}.op-palco{padding:12px 10px}}
/* ---- Escopo do visualizador (categorias / veiculos) ---- */
.acx-cats{display:flex;flex-wrap:wrap;gap:8px}
.acx-chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;border:1px solid var(--linha);border-radius:9px;padding:7px 11px;cursor:pointer;background:var(--branco)}
.acx-chk input{margin:0}
.acx-chips{display:flex;flex-wrap:wrap;gap:6px}
.acx-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;background:rgba(37,99,235,.1);color:var(--azul);border-radius:999px;padding:5px 6px 5px 11px}
.acx-chip button{border:none;background:rgba(37,99,235,.18);color:var(--azul);width:18px;height:18px;border-radius:50%;cursor:pointer;font-size:11px;line-height:1;display:grid;place-items:center}
/* ---- Construtor visual de geocerca (mapa protagonista) ---- */
.gb{position:fixed;inset:0;z-index:2500;display:flex;flex-direction:column;background:var(--fundo)}
.gb-top{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--linha);background:var(--branco)}
.gb-body{flex:1;display:flex;min-height:0}
.gb-map{position:relative;flex:0 0 60%;min-width:0}
#gb-mapa{position:absolute;inset:0}
.gb-busca{position:absolute;top:12px;left:12px;right:12px;z-index:600;display:flex;gap:8px;max-width:520px}
.gb-busca input{flex:1;padding:10px 12px;border:1px solid var(--linha);border-radius:10px;background:#fff;color:#0b1220;box-shadow:var(--sombra)}
.gb-selecionar{position:absolute;bottom:16px;left:12px;z-index:600;background:#fff;box-shadow:var(--sombra)}
.gb-panel{flex:1;overflow-y:auto;padding:18px;background:var(--fundo);border-left:1px solid var(--linha)}
.gb-sec{background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:14px;margin-bottom:12px}
.gb-sec h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--cinza)}
.gb-sec summary{cursor:pointer;font-size:13px;color:var(--cinza);font-weight:600}
.gb-f{display:block;margin-bottom:10px}
.gb-f span{display:block;font-size:12px;color:var(--tinta-3);font-weight:600;margin-bottom:4px}
.gb-f input{width:100%;padding:10px 12px;border:1px solid var(--linha);border-radius:9px;background:var(--branco);color:var(--tinta)}
.gb-panel select{width:100%;padding:10px 12px;border:1px solid var(--linha);border-radius:9px;background:var(--branco);color:var(--tinta)}
.gb-tipos{display:flex;gap:8px}
.gb-tipo{flex:1;padding:12px 8px;border:1.5px solid var(--linha);border-radius:10px;background:var(--branco);cursor:pointer;font-weight:600;color:var(--tinta);font-size:13px}
.gb-tipo.on{border-color:var(--azul);background:#eff6ff;color:var(--azul)}
.gb-sub{font-size:12px;color:var(--cinza);margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gb-range{width:100%}
.gb-raio-val{text-align:center;font-size:20px;margin-bottom:6px;color:var(--tinta)}
.gb-raios{display:flex;gap:6px;margin-top:8px}
.gb-raio-q{flex:1;padding:7px;border:1px solid var(--linha);border-radius:8px;background:var(--branco);cursor:pointer;font-size:12px;color:var(--tinta)}
.gb-raio-q.on{border-color:var(--azul);background:#eff6ff;color:var(--azul);font-weight:700}
.gb-chk{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:7px;cursor:pointer;color:var(--tinta)}
.gb-chk.dis{opacity:.55;cursor:default}
.gb-soon{font-size:10px;background:#fef3c7;color:#b45309;border-radius:6px;padding:1px 6px;font-weight:700}
.gb-cor{display:flex;align-items:center;gap:10px}
.gb-cor span{margin:0}
.gb-cor input[type=color]{width:52px;height:34px;border:1px solid var(--linha);border-radius:8px;background:none;padding:2px;cursor:pointer}
.gb-adv{font-size:12px;color:var(--cinza);margin-top:8px;word-break:break-all}
.gb-foot{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--linha);background:var(--branco)}
@media (max-width:820px){.gb-body{flex-direction:column}.gb-map{flex:0 0 44%}.gb-panel{border-left:none;border-top:1px solid var(--linha)}}
/* ---- Cards de compras lado a lado (gestao de combustivel) ---- */
.comb-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:760px){.comb-grid2{grid-template-columns:1fr}}

.abast-op{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.abast-op .abast-hero{display:flex;align-items:center;gap:14px;padding:18px 20px;
  background:linear-gradient(135deg,var(--azul-900),var(--azul-700));color:#fff;border-radius:var(--raio) var(--raio) 0 0}
.abast-op .abast-hero .ic{font-size:30px;line-height:1;flex:none}
.abast-op .abast-hero b{font-size:17px;display:block}
.abast-op .abast-hero span{font-size:12.5px;color:#cdd9f7;display:block;margin-top:2px}
.abast-op .abast-card .corpo{display:flex;flex-direction:column;gap:14px;padding:20px}
.abast-op .campo.full{width:100%}
.abast-op input,.abast-op select{width:100%;padding:12px 14px;border:1px solid var(--linha);border-radius:10px;background:var(--branco);color:var(--tinta)}
.abast-op input:focus,.abast-op select:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.abast-op label{display:block;font-size:12.5px;font-weight:600;color:var(--tinta-3);margin-bottom:6px}
.abast-op #op-ativo{font-size:16px;font-weight:600}
.abast-op .btn.full{padding:14px;font-size:15px}
:root[data-theme="dark"] .abast-op input,
:root[data-theme="dark"] .abast-op select{background:#0f1a2b}

/* ===================================================================
   ASSISTENTE (WIZARD) DE ABASTECIMENTO — experiencia premium para toque
   =================================================================== */
/* mobile-first: o cartao ocupa toda a tela (experiencia de app nativo) */
.conteudo:has(.wz){padding:0;background:radial-gradient(1100px 520px at 50% -10%,#e9f0fc 0%,var(--fundo) 58%)}
.wz{width:100%;min-height:100%;display:flex}
.wz-card{flex:1;width:100%;background:var(--branco);border:none;border-radius:0;box-shadow:none;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px}

.wz-head{display:flex;align-items:center;justify-content:space-between}
.wz-brand{font-size:14px;font-weight:800;letter-spacing:1.6px;color:var(--tinta)}
.wz-brand .wz-br{font-size:9px;font-weight:800;letter-spacing:.5px;color:var(--tinta);vertical-align:baseline;margin-left:3px}
.wz-brand .wz-brand-sub{font-weight:600;letter-spacing:.3px;color:var(--cinza);margin-left:6px}
.wz-cancel{width:36px;height:36px;border-radius:50%;border:1px solid var(--linha);background:var(--branco);
  font-size:14px;color:var(--cinza);flex:none;cursor:pointer;display:grid;place-items:center;transition:.15s}
.wz-cancel:hover{background:#f1f5f9;color:var(--tinta)}

.wz-steps{display:flex;gap:6px}
.wz-seg{height:6px;flex:1;border-radius:99px;background:var(--linha);transition:.3s}
.wz-seg.on{background:linear-gradient(90deg,#3b82f6,#1d4ed8);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.wz-seg.done{background:#1d4ed8}

.wz-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--azul);margin-bottom:-6px}
.wz-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:16px;justify-content:center;animation:wzin .34s cubic-bezier(.22,1,.36,1)}
.wz-body-lista{justify-content:flex-start}
.wz-body-lista .wz-veic-lista{flex:1;min-height:0;max-height:none}
.wz-nav{margin-top:auto}
.wz-q{font-size:27px;line-height:1.14;font-weight:800;letter-spacing:-.02em;text-wrap:balance;margin:0}
.wz-q .wz-opt{font-size:14px;font-weight:600;color:var(--cinza);letter-spacing:0;text-transform:none;margin-left:6px}
@keyframes wzin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wz-body{animation:none}}

.wz-field{position:relative;display:flex;align-items:center}
.wz-input{width:100%;font-size:46px;font-weight:800;letter-spacing:-.02em;text-align:center;padding:22px 16px;
  border:2px solid var(--linha);border-radius:18px;outline:none;color:var(--tinta);background:var(--branco);
  font-variant-numeric:tabular-nums;transition:.15s}
.wz-input::placeholder{color:#cbd5e1}
.wz-input:focus{border-color:var(--azul);box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.wz-input.wz-input-txt{font-size:23px;font-weight:600;letter-spacing:0}
.wz-field.has-unit .wz-input{padding-right:66px}
.wz-field.has-prefix .wz-input{padding-left:66px}
.wz-affix{position:absolute;font-size:20px;font-weight:700;color:var(--cinza);pointer-events:none}
.wz-suffix{right:22px}
.wz-prefix{left:22px}
.wz-hint{text-align:center;font-size:14px;color:var(--cinza)}
.wz-hint b{color:var(--tinta);font-variant-numeric:tabular-nums}

.wz-busca{width:100%;font-size:16px;padding:15px 16px;border:2px solid var(--linha);border-radius:14px;outline:none;background:var(--branco);color:var(--tinta)}
.wz-busca:focus{border-color:var(--azul);box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.wz-veic-lista{display:flex;flex-direction:column;gap:8px;max-height:48vh;overflow-y:auto;margin:0 -4px;padding:2px 4px}
.wz-veic{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;border:1.5px solid var(--linha);
  border-radius:16px;background:var(--branco);text-align:left;cursor:pointer;transition:.14s;font:inherit;width:100%}
.wz-veic:hover,.wz-veic:active{border-color:var(--azul);box-shadow:0 8px 20px -12px rgba(37,99,235,.55);transform:translateY(-1px)}
.wz-veic-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.wz-veic-plate{font-size:20px;font-weight:800;letter-spacing:2px;font-family:ui-monospace,"SFMono-Regular",Menlo,monospace}
.wz-veic-name{font-size:13px;color:var(--cinza);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wz-veic-cat{font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--azul);background:rgba(37,99,235,.09);
  padding:5px 9px;border-radius:8px;flex:none;text-transform:uppercase}
.wz-hint-busca{text-align:center;color:var(--cinza);font-size:14px;line-height:1.5;padding:22px 10px}

.comb-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.comb-btn{display:flex;align-items:center;gap:11px;padding:18px 16px;border:1.5px solid var(--linha);border-radius:16px;
  background:var(--branco);font-size:16px;font-weight:700;letter-spacing:.3px;cursor:pointer;transition:.14s;font-family:inherit;color:var(--tinta)}
.comb-dot{width:14px;height:14px;border-radius:50%;background:var(--cor);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--cor) 22%,transparent)}
.comb-btn:hover{border-color:var(--cor)}
.comb-btn.sel{border-color:var(--cor);background:color-mix(in srgb,var(--cor) 8%,var(--branco));box-shadow:0 0 0 3px color-mix(in srgb,var(--cor) 16%,transparent)}
.comb-btn:last-child:nth-child(odd){grid-column:1/-1;justify-content:center}

.wz-chips{display:flex;flex-wrap:wrap;gap:8px}
.wz-chip{padding:10px 15px;border:1.5px solid var(--linha);border-radius:99px;background:var(--branco);font-size:14px;font-weight:600;cursor:pointer;color:var(--tinta);transition:.14s}
.wz-chip:hover{border-color:var(--azul);color:var(--azul);background:rgba(37,99,235,.05)}

.wz-resumo{display:flex;flex-direction:column;border:1px solid var(--linha);border-radius:18px;overflow:hidden;background:#fbfcfe}
.wz-res-l{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--linha);font-size:15px}
.wz-res-l:last-child{border-bottom:none}
.wz-res-l span{color:var(--cinza);font-weight:500}
.wz-res-l b{font-size:17px;text-align:right;letter-spacing:-.01em}

.wz-erro{color:var(--vermelho);text-align:center;font-size:14px;min-height:16px;font-weight:600}
.wz-dica{flex:1;text-align:center;color:var(--cinza);font-size:14px;padding:4px}

.wz-nav{display:flex;gap:10px;margin-top:2px}
.wz-nav .btn{flex:1;padding:16px;font-size:15px;font-weight:700;border-radius:15px}
.wz-nav .btn.grande{flex:2;font-weight:800;letter-spacing:.2px;background:linear-gradient(180deg,#3b82f6,#1d4ed8);box-shadow:0 12px 26px -12px rgba(37,99,235,.75)}
.wz-nav .btn.grande:hover{background:linear-gradient(180deg,#2f78f0,#1a45c8)}
.wz-nav .btn.sucesso{flex:2;background:linear-gradient(180deg,#22c55e,#15803d);color:#fff;box-shadow:0 12px 26px -12px rgba(22,163,74,.75)}
.wz-nav .btn.sucesso:hover{background:linear-gradient(180deg,#1eb457,#136e35)}

:root[data-theme="dark"] .conteudo:has(.wz){background:radial-gradient(1100px 520px at 50% -10%,#17253f 0%,var(--fundo) 58%)}
:root[data-theme="dark"] .wz-input,
:root[data-theme="dark"] .wz-busca,
:root[data-theme="dark"] .wz-veic,
:root[data-theme="dark"] .comb-btn,
:root[data-theme="dark"] .wz-chip,
:root[data-theme="dark"] .wz-resumo,
:root[data-theme="dark"] .wz-cancel{background:#0f1a2b}
:root[data-theme="dark"] .wz-cancel:hover{background:#1c2942}
:root[data-theme="dark"] .wz-input::placeholder{color:#42536b}

/* tablet / iPad / desktop: cartao flutuante centralizado no tamanho certo */
@media(min-width:640px){
  .conteudo:has(.wz){padding:24px;display:flex;align-items:center;justify-content:center}
  .wz{min-height:auto;max-width:462px;align-items:center}
  .wz-card{flex:none;border:1px solid var(--linha);border-radius:26px;padding:26px 26px 22px;
    box-shadow:0 24px 60px -22px rgba(15,23,42,.30),0 8px 24px -14px rgba(15,23,42,.16);
    max-height:calc(100dvh - 128px)}
  .wz-body-lista .wz-veic-lista{max-height:52vh}
}
/* celular (cartao tela cheia): trava a largura para nao transbordar.
   1fr = minmax(auto,1fr) e o 'auto' cresce ate o min-content -> usar minmax(0,1fr). */
@media(max-width:860px){
  #app{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:639px){
  #app{max-width:100vw;overflow-x:hidden}
  .conteudo,.conteudo:has(.wz){min-width:0;overflow-x:hidden}
  .wz,.wz-card,.wz-body,.wz-veic{min-width:0;max-width:100%}
  .topbar .right{padding-right:44px}
}
/* celulares menores: reduz um pouco a tipografia */
@media(max-width:400px){
  .wz-q{font-size:23px}
  .wz-input{font-size:40px;padding:20px 14px}
  .comb-grid{gap:9px}
  .comb-btn{padding:16px 14px}
}

/* ===================================================================
   CADASTRO UNICO DE VEICULO - flags (rastreador / abastecimento) + bloco rastreador
   =================================================================== */
.flags-veic{display:flex;flex-direction:column;gap:10px;margin:18px 0 14px}
.flag-check{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1.5px solid var(--linha);border-radius:12px;cursor:pointer;transition:.12s}
.flag-check:hover{border-color:var(--azul)}
.flag-check input{width:19px;height:19px;margin-top:1px;flex:none;accent-color:var(--azul);cursor:pointer}
.flag-check b{font-size:14px;display:block}
.flag-check small{font-size:12px;color:var(--cinza);display:block;margin-top:2px}
.bloco-rast{border:1px dashed var(--linha);border-radius:12px;padding:14px 14px 4px;margin-bottom:6px;background:rgba(37,99,235,.03)}
.bloco-rast-tit{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--azul);margin-bottom:12px}
:root[data-theme="dark"] .bloco-rast{background:rgba(37,99,235,.08)}