/* KM Guinchos - camada profissional de UI e fluxo */

:root{
  --kmg-ink:#f8fafc;
  --kmg-muted:#aeb6c2;
  --kmg-muted-2:#7f8896;
  --kmg-panel:#181c21;
  --kmg-panel-2:#20262d;
  --kmg-line:rgba(255,255,255,.10);
  --kmg-line-strong:rgba(255,255,255,.18);
  --kmg-green:#39d98a;
  --kmg-green-soft:rgba(57,217,138,.12);
  --kmg-blue:#6aa6ff;
  --kmg-blue-soft:rgba(106,166,255,.12);
}

.kmg-pro body,
body.kmg-pro{
  min-width:320px;
}

.kmg-pro .btn,
.kmg-pro button,
.kmg-pro input,
.kmg-pro select,
.kmg-pro textarea{
  font:inherit;
}

.kmg-pro .btn{
  justify-content:center;
}

.kmg-pro .btn svg{
  flex:0 0 auto;
}

.kmg-account-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid var(--kmg-line);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:var(--kmg-muted);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.kmg-account-pill strong{
  color:var(--kmg-ink);
  font-weight:800;
}

.kmg-account-pill .kmg-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--kmg-green);
  box-shadow:0 0 0 4px var(--kmg-green-soft);
}

.kmg-resume-bar,
.kmg-service-card,
.kmg-trip-card,
.kmg-map-card,
.kmg-driver-tools,
.kmg-provider-settings,
.kmg-dialog{
  background:
    linear-gradient(180deg,rgba(255,255,255,.026),transparent 44%),
    var(--kmg-panel);
  border:1px solid var(--kmg-line);
  border-radius:12px;
  box-shadow:0 18px 48px rgba(0,0,0,.22);
}

.kmg-resume-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  margin:-42px auto 42px;
  position:relative;
  z-index:4;
}

.kmg-resume-bar .kmg-title,
.kmg-trip-card .kmg-title,
.kmg-service-card .kmg-title,
.kmg-provider-settings .kmg-title{
  color:var(--kmg-ink);
  font-size:14px;
  font-weight:800;
}

.kmg-resume-bar .kmg-meta,
.kmg-trip-card .kmg-meta,
.kmg-service-card .kmg-meta,
.kmg-provider-settings .kmg-meta{
  color:var(--kmg-muted);
  font-size:12.5px;
  line-height:1.5;
  margin-top:3px;
}

.kmg-resume-bar .btn{
  min-height:38px;
  padding:9px 14px;
  font-size:12.5px;
}

.kmg-service-card{
  padding:18px;
  margin-bottom:20px;
}

.kmg-service-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}

.kmg-step-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border-radius:999px;
  background:var(--kmg-green-soft);
  color:var(--kmg-green);
  font-family:"JetBrains Mono",monospace;
  font-size:10px;
  font-weight:800;
  letter-spacing:.4px;
  white-space:nowrap;
}

.kmg-service-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
}

.kmg-field{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.kmg-field.kmg-wide{
  grid-column:1 / -1;
}

.kmg-field label{
  color:var(--kmg-muted);
  font-size:12px;
  font-weight:750;
}

.kmg-field input,
.kmg-field select,
.kmg-field textarea{
  width:100%;
  min-height:45px;
  border:1px solid var(--kmg-line);
  border-radius:10px;
  background:var(--kmg-panel-2);
  color:var(--kmg-ink);
  padding:12px 13px;
  outline:none;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}

.kmg-field textarea{
  min-height:74px;
  resize:vertical;
}

.kmg-field input:focus,
.kmg-field select:focus,
.kmg-field textarea:focus{
  border-color:rgba(255,176,32,.66);
  box-shadow:0 0 0 3px rgba(255,176,32,.10);
  background:#242a32;
}

.kmg-field-row{
  display:flex;
  gap:8px;
}

.kmg-field-row input{
  flex:1;
}

.kmg-locate{
  width:45px;
  min-height:45px;
  border:1px solid var(--kmg-line);
  border-radius:10px;
  background:var(--kmg-panel-2);
  color:var(--beacon);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.kmg-locate:hover{
  border-color:rgba(255,176,32,.55);
}

.kmg-locate svg{
  width:18px;
  height:18px;
}

.kmg-alert{
  display:none;
  margin-top:13px;
  padding:10px 12px;
  border:1px solid rgba(255,107,107,.32);
  border-radius:10px;
  background:rgba(255,107,107,.09);
  color:#ffb4ad;
  font-size:12.5px;
  font-weight:650;
}

.kmg-alert.show{
  display:block;
}

.kmg-mini-chips,
.kmg-provider-extra,
.kmg-driver-tools{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.kmg-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:6px 9px;
  border:1px solid var(--kmg-line);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:var(--kmg-muted);
  font-size:11px;
  font-weight:750;
}

.kmg-chip svg,
.kmg-trip-card .btn svg,
.kmg-service-card .btn svg,
.kmg-provider-settings .btn svg{
  width:14px;
  height:14px;
  flex:0 0 auto;
}

.kmg-locate svg,
.kmg-tool-btn svg,
.kmg-dispatch-wa svg{
  width:17px;
  height:17px;
  flex:0 0 auto;
}

.kmg-chip.good{
  border-color:rgba(57,217,138,.28);
  background:var(--kmg-green-soft);
  color:#a8f5cf;
}

.kmg-trip-card{
  padding:15px 16px;
  margin-bottom:16px;
}

.kmg-trip-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}

.kmg-trip-item{
  min-width:0;
  padding:10px 11px;
  border:1px solid var(--kmg-line);
  border-radius:10px;
  background:rgba(255,255,255,.028);
}

.kmg-trip-item span{
  display:block;
  color:var(--kmg-muted-2);
  font-size:10px;
  font-family:"JetBrains Mono",monospace;
  font-weight:800;
  letter-spacing:.35px;
  margin-bottom:3px;
}

.kmg-trip-item strong{
  display:block;
  color:var(--kmg-ink);
  font-size:12.5px;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.kmg-provider-extra{
  grid-column:1 / -1;
  border-top:1px solid var(--kmg-line);
  padding-top:11px;
  margin-top:2px;
}

.kmg-dispatch-wa{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  border-radius:11px;
  border:1px solid rgba(57,217,138,.34);
  background:var(--kmg-green-soft);
  color:#b9ffd9;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
}

.kmg-dispatch-wa:hover{
  border-color:rgba(57,217,138,.58);
}

.kmg-map-card{
  padding:16px;
  margin:0 0 20px;
  overflow:hidden;
}

.kmg-route-canvas{
  position:relative;
  min-height:156px;
  border-radius:10px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.035) 1px,transparent 1px),
    #12161b;
  background-size:34px 34px;
  border:1px solid var(--kmg-line);
}

.kmg-route-line{
  position:absolute;
  left:12%;
  right:16%;
  top:52%;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--beacon),var(--kmg-green));
  box-shadow:0 0 20px rgba(255,176,32,.18);
}

.kmg-route-pin{
  position:absolute;
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(255,255,255,.22);
  color:#111417;
  font-weight:900;
  box-shadow:0 10px 22px rgba(0,0,0,.28);
}

.kmg-route-pin.origin{
  left:8%;
  top:calc(52% - 14px);
  background:var(--beacon);
}

.kmg-route-pin.driver{
  right:12%;
  top:calc(52% - 14px);
  background:var(--kmg-green);
}

.kmg-route-note{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:11px;
  color:var(--kmg-muted);
  font-size:12px;
}

.kmg-driver-tools{
  margin-top:12px;
}

.kmg-tool-btn{
  flex:1 1 150px;
  min-height:42px;
  border:1px solid var(--kmg-line);
  border-radius:10px;
  background:var(--kmg-panel-2);
  color:var(--kmg-ink);
  cursor:pointer;
  font-size:13px;
  font-weight:800;
}

.kmg-tool-btn:hover{
  border-color:var(--kmg-line-strong);
}

.kmg-modal-layer{
  position:fixed;
  inset:0;
  z-index:300;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(7,9,12,.72);
  backdrop-filter:blur(10px);
}

.kmg-modal-layer.show{
  display:flex;
}

.kmg-dialog{
  width:min(100%,430px);
  padding:20px;
}

.kmg-dialog h2{
  color:var(--kmg-ink);
  font-size:18px;
  line-height:1.2;
  margin:0 0 8px;
  letter-spacing:0;
  text-transform:none;
  font-family:"Inter",sans-serif;
}

.kmg-dialog p{
  color:var(--kmg-muted);
  font-size:13.5px;
  line-height:1.55;
  margin:0 0 15px;
}

.kmg-dialog-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
}

.kmg-dialog-actions .btn{
  flex:1 1 130px;
}

.kmg-provider-settings{
  padding:16px;
  margin-bottom:18px;
}

.kmg-provider-settings-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}

.kmg-provider-settings .kmg-field input{
  font-family:"JetBrains Mono",monospace;
}

.kmg-vehicle-toggles{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.kmg-toggle-chip{
  border:1px solid var(--kmg-line);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:var(--kmg-muted);
  padding:7px 10px;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}

.kmg-toggle-chip.active{
  border-color:rgba(255,176,32,.45);
  background:rgba(255,176,32,.12);
  color:var(--beacon);
}

@media (max-width:720px){
  .kmg-service-grid,
  .kmg-trip-grid,
  .kmg-provider-settings-grid{
    grid-template-columns:1fr;
  }

  .kmg-service-head,
  .kmg-resume-bar{
    align-items:stretch;
    flex-direction:column;
  }

  .kmg-resume-bar{
    margin:-28px 18px 30px;
  }

  .kmg-account-pill{
    display:none;
  }

  .kmg-route-note{
    flex-direction:column;
    gap:4px;
  }
}

@media (max-width:520px){
  .kmg-service-card,
  .kmg-trip-card,
  .kmg-map-card,
  .kmg-provider-settings{
    border-radius:10px;
    padding:14px;
  }

  .kmg-provider-extra{
    gap:6px;
  }
}