:root {
  --navy-950: #0a1533;
  --navy-900: #0f1d45;
  --navy-800: #14275a;
  --navy-700: #1c3577;
  --navy-600: #284696;
  --navy-100: #e6ebf6;
  --navy-50: #f2f5fb;
  --orange: #f26a1b;
  --orange-600: #dc5a0e;
  --orange-100: #fde7d9;
  --orange-50: #fff5ee;
  --bg: #f3f5f9;
  --card: #ffffff;
  --text: #121a2e;
  --muted: #5d6882;
  --subtle: #8a93a8;
  --line: #e3e7ef;
  --green: #16a34a;
  --green-100: #dcfce7;
  --blue: #2563eb;
  --blue-100: #dbeafe;
  --red: #dc2626;
  --red-100: #fee2e2;
  --amber: #d97706;
  --amber-100: #fef3c7;
  --gray-100: #eef0f4;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 8px rgba(16, 24, 40, .05);
  --shadow-lg: 0 10px 30px rgba(15, 29, 69, .14);
  --sidebar: 256px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
.ico { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ico.sm { width: 16px; height: 16px; }
.ico.lg { width: 26px; height: 26px; }
.muted { color: var(--muted); }
.subtle { color: var(--subtle); }
.mono { font-variant-numeric: tabular-nums; }
.hide { display: none !important; }

/* ---------------- shell ---------------- */
.shell { min-height: 100vh; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--navy-800);
  color: #fff;
  padding: calc(10px + var(--safe-t)) 16px 10px;
  display: flex; align-items: center; gap: 12px;
}
.topbar .brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.topbar .brand-mark { width: 34px; height: 34px; border-radius: 8px; background: #fff; padding: 3px; flex-shrink: 0; }
.topbar .brand-text { min-width: 0; }
.topbar .brand-text b { display: block; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .brand-text small { display: block; font-size: 12px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .back { background: rgba(255, 255, 255, .12); border: 0; color: #fff; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
.avatar-btn { border: 0; background: transparent; padding: 0; border-radius: 50%; }

.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 14px; flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}
.avatar.sm { width: 28px; height: 28px; font-size: 11px; box-shadow: none; }
.avatar.lg { width: 52px; height: 52px; font-size: 18px; }

.main { padding: 16px 16px calc(96px + var(--safe-b)); max-width: 1240px; margin: 0 auto; }

.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: #fff;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 4px calc(6px + var(--safe-b));
  box-shadow: 0 -4px 20px rgba(15, 29, 69, .06);
}
.bottomnav a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--subtle); padding: 6px 0; position: relative; }
.bottomnav a.active { color: var(--orange); }
.bottomnav a.active::before { content: ""; position: absolute; top: -7px; width: 28px; height: 3px; border-radius: 3px; background: var(--orange); }
.bottomnav .fab { margin-top: -26px; }
.bottomnav .fab span.fab-btn {
  width: 56px; height: 56px; border-radius: 18px;
  background: linear-gradient(135deg, #ff8a3d, var(--orange-600));
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 18px rgba(242, 106, 27, .45);
  border: 4px solid #fff;
}
.bottomnav .fab.active::before { display: none; }

.sidebar { display: none; }

@media (min-width: 960px) {
  .bottomnav { display: none; }
  .topbar { display: none; }
  .sidebar {
    display: flex; flex-direction: column;
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar); z-index: 30;
    background: linear-gradient(180deg, var(--navy-800), var(--navy-950));
    color: #fff; padding: 20px 14px;
  }
  .sidebar .logo-card { background: #fff; border-radius: 14px; padding: 14px 16px; margin-bottom: 8px; }
  .sidebar .logo-card img { width: 100%; height: auto; }
  .sidebar .app-name { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin: 10px 10px 18px; font-weight: 600; }
  .sidebar nav { display: flex; flex-direction: column; gap: 4px; }
  .sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; font-weight: 600; color: rgba(255, 255, 255, .78); }
  .sidebar nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
  .sidebar nav a.active { background: rgba(242, 106, 27, .16); color: #fff; box-shadow: inset 3px 0 0 var(--orange); }
  .sidebar nav a.active .ico { color: var(--orange); }
  .sidebar .cta { margin: 18px 4px; }
  .sidebar .me { margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
  .sidebar .me b { display: block; font-size: 14px; }
  .sidebar .me small { opacity: .65; font-size: 12px; }
  .sidebar .me button { margin-left: auto; background: transparent; border: 0; color: #fff; opacity: .7; }
  .shell { padding-left: var(--sidebar); }
  .main { padding: 28px 32px 48px; }
  .page-head.desk { display: flex; }
}

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; font-weight: 800; color: var(--navy-900); letter-spacing: -.01em; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
@media (min-width: 960px) { .page-head h1 { font-size: 28px; } }

/* ---------------- primitives ---------------- */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid #edf0f5; }
.card.pad { padding: 16px; }
.section { margin-top: 22px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; }
.section-title h2 { font-size: 17px; font-weight: 700; color: var(--navy-900); display: flex; align-items: center; gap: 8px; }
.section-title a, .link { color: var(--orange); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 700; font-size: 15px;
  background: var(--navy-800); color: #fff; transition: transform .08s, filter .15s, background .15s;
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn:hover { filter: brightness(1.08); }
.btn.orange { background: linear-gradient(135deg, #ff7f2e, var(--orange-600)); box-shadow: 0 6px 16px rgba(242, 106, 27, .3); }
.btn.ghost { background: #fff; color: var(--navy-800); border: 1.5px solid var(--line); }
.btn.ghost:hover { border-color: var(--navy-600); filter: none; }
.btn.danger { background: #fff; color: var(--red); border: 1.5px solid #f5c2c2; }
.btn.green { background: var(--green); }
.btn.block { width: 100%; }
.btn.lg { padding: 16px 20px; font-size: 16px; border-radius: 14px; }
.btn.sm { padding: 8px 12px; font-size: 13px; border-radius: 10px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.b-livre { background: var(--green-100); color: #15803d; }
.b-em_uso { background: var(--blue-100); color: #1d4ed8; }
.b-reservado, .b-agendada { background: var(--orange-100); color: #c2410c; }
.b-atrasado, .b-atrasada { background: var(--red-100); color: #b91c1c; }
.b-concluida { background: var(--gray-100); color: #374151; }
.b-cancelada { background: #f3f4f6; color: #9ca3af; text-decoration: line-through; }
.b-proprio { background: var(--navy-100); color: var(--navy-700); }
.b-locado { background: #f3e8ff; color: #7e22ce; }
.b-warn { background: var(--amber-100); color: #b45309; }
.b-ai { background: linear-gradient(135deg, #eef2ff, #fdf4ff); color: #6d28d9; }

.plate {
  display: inline-flex; flex-direction: column; align-items: stretch;
  border: 1.5px solid #1f2937; border-radius: 4px; overflow: hidden; background: #fff;
  font-family: "DejaVu Sans Mono", Menlo, Consolas, monospace; font-weight: 700; line-height: 1;
}
.plate::before { content: "BRASIL"; background: #1e3a8a; color: #fff; font-size: 6px; letter-spacing: .2em; text-align: center; padding: 1.5px 0; font-family: Inter, sans-serif; }
.plate span { font-size: 12px; padding: 2px 6px 3px; letter-spacing: .06em; color: #111; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 13px; white-space: nowrap; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.chip.active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.chip .n { background: rgba(0, 0, 0, .08); border-radius: 999px; padding: 0 7px; font-size: 11px; }
.chip.active .n { background: rgba(255, 255, 255, .2); }

.seg { display: inline-flex; background: var(--gray-100); border-radius: 12px; padding: 4px; gap: 2px; }
.seg button { border: 0; background: transparent; padding: 7px 14px; border-radius: 9px; font-weight: 600; font-size: 13px; color: var(--muted); }
.seg button.active { background: #fff; color: var(--navy-800); box-shadow: var(--shadow); }

.grid { display: grid; gap: 14px; }
.grid > *, .form > * { min-width: 0; }
@media (max-width: 619px) {
  .grid.cars.scroller {
    grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 8px; scroll-padding: 0 16px;
    scrollbar-width: none;
  }
  .grid.cars.scroller::-webkit-scrollbar { display: none; }
  .grid.cars.scroller > * { scroll-snap-align: start; }
}
.grid.kpis { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .grid.kpis { grid-template-columns: repeat(4, 1fr); } }
.grid.cars { grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid.cars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .grid.cars { grid-template-columns: repeat(3, 1fr); } }
.grid.two { grid-template-columns: 1fr; }
@media (min-width: 960px) { .grid.two { grid-template-columns: 1fr 1fr; } .grid.two.wide-left { grid-template-columns: 1.4fr 1fr; } }

/* ---------------- kpi ---------------- */
.kpi { padding: 14px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.kpi .kpi-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; }
.kpi b { font-size: 26px; font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; }
.kpi span { font-size: 13px; color: var(--muted); font-weight: 600; }
.kpi small { font-size: 12px; color: var(--subtle); }
.tone-green .kpi-ico { background: var(--green-100); color: var(--green); }
.tone-blue .kpi-ico { background: var(--blue-100); color: var(--blue); }
.tone-orange .kpi-ico { background: var(--orange-100); color: var(--orange); }
.tone-red .kpi-ico { background: var(--red-100); color: var(--red); }
.tone-navy .kpi-ico { background: var(--navy-100); color: var(--navy-700); }
a.kpi:hover { box-shadow: var(--shadow-lg); }

/* ---------------- hero ---------------- */
.hero {
  background: radial-gradient(120% 140% at 100% 0%, #2a4aa0 0%, var(--navy-800) 45%, var(--navy-900) 100%);
  color: #fff; border-radius: 20px; padding: 18px; position: relative; overflow: hidden;
}
.hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 40px; background: var(--orange); opacity: .12; transform: rotate(20deg); }
.hero h1 { font-size: 22px; font-weight: 800; }
.hero p { margin: 4px 0 14px; opacity: .8; }
.hero .btn { position: relative; z-index: 1; }
@media (min-width: 960px) { .hero { padding: 26px 28px; } .hero h1 { font-size: 28px; } }

/* ---------------- vehicle card ---------------- */
.car-card { overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.car-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.car-photo { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(160deg, #eef2f9, #dde4f0); overflow: hidden; }
.car-photo img { width: 100%; height: 100%; object-fit: cover; }
.car-photo svg.car-ill { position: absolute; inset: 12% 8% 6%; width: 84%; height: 82%; }
.car-photo .tl { position: absolute; top: 10px; left: 10px; }
.car-photo .br { position: absolute; bottom: 10px; right: 10px; }
.car-photo .bl { position: absolute; bottom: 10px; left: 10px; }
.car-photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, rgba(10, 21, 51, .25)); pointer-events: none; }
.car-photo > * { z-index: 1; }
.car-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.car-title { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.car-title b { font-size: 16px; color: var(--navy-900); }
.car-title small { display: block; color: var(--muted); font-size: 12px; }
.car-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.car-meta span { display: inline-flex; gap: 5px; align-items: center; }
.car-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
.car-actions .btn { flex: 1; }
.who { display: flex; align-items: center; gap: 8px; font-size: 13px; background: var(--navy-50); padding: 8px 10px; border-radius: 10px; }
.who b { font-weight: 700; color: var(--navy-900); }

/* ---------------- lists ---------------- */
.list { display: flex; flex-direction: column; gap: 10px; }
.res-item { display: flex; gap: 12px; padding: 12px; align-items: center; }
.res-item:hover { box-shadow: var(--shadow-lg); }
.res-thumb { width: 74px; height: 52px; border-radius: 10px; overflow: hidden; background: #e8edf6; flex-shrink: 0; position: relative; }
.res-thumb img { width: 100%; height: 100%; object-fit: cover; }
.res-thumb svg.car-ill { width: 100%; height: 100%; padding: 6px; }
.res-main { flex: 1; min-width: 0; }
.res-main .l1 { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.res-main .l1 b { font-size: 15px; color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-main .l2, .res-main .l3 { font-size: 13px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.res-main .l2 span, .res-main .l3 span { display: inline-flex; align-items: center; gap: 4px; }

.alert-item { display: flex; gap: 12px; padding: 12px 14px; align-items: flex-start; border-left: 4px solid var(--amber); }
.alert-item.alta { border-left-color: var(--red); }
.alert-item .ai-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--amber-100); color: var(--amber); flex-shrink: 0; }
.alert-item.alta .ai-ico { background: var(--red-100); color: var(--red); }
.alert-item b { font-size: 14px; color: var(--navy-900); }
.alert-item p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

.empty { text-align: center; padding: 30px 16px; color: var(--muted); }
.empty .ico { width: 40px; height: 40px; color: var(--subtle); margin: 0 auto 8px; }

/* ---------------- forms ---------------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 700; color: var(--navy-900); }
.field .hint { font-size: 12px; color: var(--muted); }
.input, select.input, textarea.input {
  width: 100%; border: 1.5px solid var(--line); background: #fff; border-radius: 12px;
  padding: 12px 14px; font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s;
  appearance: none; -webkit-appearance: none;
}
select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235d6882' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.input:focus { border-color: var(--navy-600); box-shadow: 0 0 0 4px rgba(40, 70, 150, .12); }
.input.err { border-color: var(--red); box-shadow: 0 0 0 4px rgba(220, 38, 38, .1); }
.input.km { font-size: 28px; font-weight: 800; letter-spacing: .02em; text-align: center; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.row > * { min-width: 0; }
@media (max-width: 420px) { .row.stack-sm { grid-template-columns: 1fr; } }
.presets { display: flex; gap: 8px; flex-wrap: wrap; }
.err-text { color: var(--red); font-size: 13px; font-weight: 600; }

.step { padding: 16px; }
.step-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.step-num { width: 30px; height: 30px; border-radius: 50%; background: var(--navy-800); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 14px; flex-shrink: 0; }
.step.done .step-num { background: var(--green); }
.step-head h3 { font-size: 16px; color: var(--navy-900); }
.step-head p { margin: 0; font-size: 13px; color: var(--muted); }

.pick-car { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; text-align: left; width: 100%; }
.pick-car:hover { border-color: var(--navy-600); }
.pick-car.sel { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(242, 106, 27, .14); background: var(--orange-50); }
.pick-car.busy { opacity: .55; cursor: not-allowed; background: #fafbfc; }
.pick-car .res-thumb { width: 84px; height: 58px; }
.pick-list { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.pick-car { min-width: 0; overflow: hidden; }
.res-main .l1 b { min-width: 0; }
@media (min-width: 720px) { .pick-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.photo-drop {
  border: 2px dashed #f7b48c; background: var(--orange-50); border-radius: 14px; padding: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.photo-preview { position: relative; border-radius: 14px; overflow: hidden; background: #111; }
.photo-preview img { width: 100%; max-height: 300px; object-fit: contain; }
.photo-preview .retake { position: absolute; right: 10px; bottom: 10px; }
.ai-box { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, #f5f3ff, #fff7ed); border: 1px solid #e9d5ff; margin-top: 10px; }
.ai-box .ico { color: #7c3aed; }
.ai-box b { color: #4c1d95; }
.spinner { width: 18px; height: 18px; border: 2.5px solid rgba(124, 58, 237, .25); border-top-color: #7c3aed; border-radius: 50%; animation: spin .8s linear infinite; flex-shrink: 0; }
.spinner.w { border-color: rgba(255, 255, 255, .3); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

.loc-box { display: flex; gap: 12px; align-items: center; }
.loc-box .ico-wrap { width: 42px; height: 42px; border-radius: 12px; background: var(--navy-100); color: var(--navy-700); display: grid; place-items: center; flex-shrink: 0; }
.loc-box.ok .ico-wrap { background: var(--green-100); color: var(--green); }
.loc-box.fail .ico-wrap { background: var(--amber-100); color: var(--amber); }
.map { width: 100%; height: 180px; border: 0; border-radius: 12px; margin-top: 12px; background: #e5e7eb; }

.warn-box { display: flex; gap: 10px; padding: 12px; border-radius: 12px; background: var(--amber-100); color: #92400e; font-size: 14px; align-items: flex-start; }
.warn-box.red { background: var(--red-100); color: #991b1b; }
.info-box { display: flex; gap: 10px; padding: 12px; border-radius: 12px; background: var(--navy-50); color: var(--navy-800); font-size: 14px; align-items: flex-start; }

.fuel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.fuel button { border: 1.5px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 0; font-weight: 700; font-size: 13px; color: var(--muted); }
.fuel button.active { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }

.sticky-actions { position: sticky; bottom: calc(76px + var(--safe-b)); z-index: 5; padding: 12px 0 0; background: linear-gradient(transparent, var(--bg) 30%); }
@media (min-width: 960px) { .sticky-actions { bottom: 0; padding-bottom: 12px; } }

/* ---------------- detail ---------------- */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; color: var(--navy-900); text-align: right; }
.timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
.tl-item { display: flex; gap: 14px; position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--line); }
.tl-item:last-child::before { display: none; }
.tl-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--gray-100); color: var(--subtle); flex-shrink: 0; }
.tl-item.done .tl-dot { background: var(--green-100); color: var(--green); }
.tl-item.now .tl-dot { background: var(--blue-100); color: var(--blue); }
.tl-item.late .tl-dot { background: var(--red-100); color: var(--red); }
.tl-body { flex: 1; min-width: 0; }
.tl-body b { color: var(--navy-900); }
.tl-body .muted { font-size: 13px; }
.tl-photos { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.tl-photo { width: 120px; height: 80px; border-radius: 10px; overflow: hidden; cursor: zoom-in; background: #111; border: 0; padding: 0; }
.tl-photo img { width: 100%; height: 100%; object-fit: cover; }
.facts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.fact { background: var(--navy-50); border-radius: 8px; padding: 4px 9px; font-size: 12px; font-weight: 600; color: var(--navy-800); display: inline-flex; gap: 5px; align-items: center; }

.veh-hero { overflow: hidden; }
.veh-hero .car-photo { aspect-ratio: 21 / 9; }
@media (max-width: 640px) { .veh-hero .car-photo { aspect-ratio: 16 / 9; } }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.stat-row > div { padding: 12px 14px; border-right: 1px solid var(--line); }
.stat-row > div:last-child { border-right: 0; }
.stat-row b { display: block; font-size: 18px; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.stat-row span { font-size: 12px; color: var(--muted); }

/* ---------------- agenda ---------------- */
.agenda-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.agenda-bar .date-nav { display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 12px; padding: 4px; border: 1px solid var(--line); }
.agenda-bar .date-nav button { border: 0; background: transparent; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; }
.agenda-bar .date-nav button:hover { background: var(--gray-100); }
.agenda-bar .date-nav b { min-width: 150px; text-align: center; font-size: 14px; color: var(--navy-900); }
.agenda { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ag-grid { min-width: 860px; position: relative; }
.ag-grid { --agl: 150px; }
@media (max-width: 619px) { .ag-grid { --agl: 112px; min-width: 760px; } .ag-label b { font-size: 12px; } }
.ag-row { display: grid; grid-template-columns: var(--agl) 1fr; border-bottom: 1px solid var(--line); min-height: 56px; }
.ag-row:last-child { border-bottom: 0; }
.ag-label { position: sticky; left: 0; z-index: 3; background: #fff; padding: 8px 10px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.ag-label b { font-size: 13px; color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-label .plate span { font-size: 10px; padding: 1px 4px 2px; }
.ag-label .plate::before { font-size: 5px; }
.ag-track { position: relative; background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 18 - 1px), #eef1f6 calc(100% / 18 - 1px), #eef1f6 calc(100% / 18)); }
.ag-head .ag-track { display: grid; grid-template-columns: repeat(18, 1fr); background: none; }
.ag-head .ag-track span { font-size: 11px; color: var(--subtle); padding: 8px 0 6px 4px; font-weight: 600; border-left: 1px solid #eef1f6; }
.ag-head .ag-label { font-size: 12px; color: var(--subtle); font-weight: 700; }
.ag-block {
  position: absolute; top: 7px; bottom: 7px; border-radius: 9px; padding: 4px 8px; overflow: hidden;
  font-size: 12px; line-height: 1.25; color: #fff; display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 2px 6px rgba(15, 29, 69, .18); cursor: pointer; min-width: 6px;
}
.ag-block b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.ag-block small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.ag-block.agendada { background: linear-gradient(135deg, #ff8a3d, var(--orange-600)); }
.ag-block.em_uso { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.ag-block.atrasada { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.ag-block.concluida { background: #cbd3e1; color: #334155; box-shadow: none; }
.ag-block.mine { outline: 2px solid var(--navy-900); outline-offset: 1px; }
.ag-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); z-index: 2; pointer-events: none; }
.ag-now::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.ag-week .ag-track { display: grid; grid-template-columns: repeat(7, 1fr); background: none; }
.ag-week .ag-cell { border-left: 1px solid #eef1f6; padding: 5px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ag-week .ag-cell.today { background: var(--orange-50); }
.ag-week .ag-head .ag-cell { font-size: 12px; font-weight: 700; color: var(--muted); padding: 8px 6px; }
.ag-week .ag-head .ag-cell.today { color: var(--orange); }
.ag-chip { border-radius: 7px; padding: 3px 6px; font-size: 11px; line-height: 1.25; color: #fff; cursor: pointer; overflow: hidden; }
.ag-chip b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-chip span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.ag-chip.agendada { background: var(--orange); }
.ag-chip.em_uso { background: var(--blue); }
.ag-chip.atrasada { background: var(--red); }
.ag-chip.concluida { background: #cbd3e1; color: #334155; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 10px; }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

/* ---------------- charts ---------------- */
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.bar-row .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--navy-900); }
.bar-row .val { font-weight: 700; color: var(--navy-900); font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }
.bar-track { height: 10px; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--navy-700), var(--navy-600)); }
.bar-fill.orange { background: linear-gradient(90deg, #ff8a3d, var(--orange-600)); }
.bar-fill.green { background: linear-gradient(90deg, #22c55e, #15803d); }
.bar-fill.amber { background: linear-gradient(90deg, #fbbf24, #d97706); }
.bar-fill.red { background: linear-gradient(90deg, #f87171, #dc2626); }
.cols { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-top: 10px; }
.cols .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; position: relative; }
.cols .col i { display: block; width: 100%; max-width: 22px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #ff8a3d, var(--orange-600)); }
.cols .col.we i { background: #cbd3e1; }
.cols .col:hover i { filter: brightness(1.1); }
.cols .col .tip { position: absolute; bottom: calc(100% + 4px); background: var(--navy-900); color: #fff; font-size: 11px; padding: 3px 7px; border-radius: 6px; white-space: nowrap; display: none; z-index: 2; }
.cols .col:hover .tip { display: block; }
.cols-x { display: flex; gap: 3px; margin-top: 6px; }
.cols-x span { flex: 1; text-align: left; font-size: 10px; color: var(--subtle); min-width: 0; overflow: visible; white-space: nowrap; width: 0; }
.stack { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--gray-100); }
.stack i { display: block; height: 100%; }
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
table.t th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--subtle); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--line); }
table.t td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
table.t th.num { text-align: right; }

/* ---------------- login ---------------- */
.login {
  min-height: 100vh; display: grid; grid-template-columns: 1fr;
  background: radial-gradient(120% 80% at 100% 0%, #2a4aa0 0%, var(--navy-800) 40%, var(--navy-950) 100%);
}
.login-side { color: #fff; padding: calc(36px + var(--safe-t)) 22px 24px; position: relative; overflow: hidden; }
.login-side .logo-card { background: #fff; border-radius: 16px; padding: 14px 18px; display: inline-block; box-shadow: var(--shadow-lg); }
.login-side .logo-card img { height: 30px; width: auto; }
.login-side h1 { font-size: 30px; font-weight: 800; margin-top: 26px; letter-spacing: -.02em; }
.login-side h1 em { font-style: normal; color: var(--orange); }
.login-side p { opacity: .8; max-width: 460px; margin: 10px 0 0; }
.login-side .feats { display: none; }
.login-pick { background: var(--bg); border-radius: 26px 26px 0 0; padding: 22px 16px 40px; }
.login-pick h2 { font-size: 18px; color: var(--navy-900); }
.user-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
@media (min-width: 560px) { .user-grid { grid-template-columns: 1fr 1fr; } }
.user-card { display: flex; gap: 12px; align-items: center; padding: 12px 14px; text-align: left; border: 1.5px solid transparent; width: 100%; }
.user-card:hover { border-color: var(--orange); }
.user-card b { display: block; font-size: 15px; color: var(--navy-900); }
.user-card small { color: var(--muted); font-size: 13px; }
.user-card .ico { margin-left: auto; color: var(--subtle); }
.group-label { display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin-top: 18px; }
@media (min-width: 960px) {
  .login { grid-template-columns: 1.05fr 1fr; }
  .login-side { padding: 56px 56px; display: flex; flex-direction: column; }
  .login-side h1 { font-size: 46px; margin-top: 60px; }
  .login-side p { font-size: 17px; }
  .login-side .feats { display: grid; gap: 14px; margin-top: 40px; max-width: 460px; }
  .login-side .feat { display: flex; gap: 14px; align-items: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); padding: 14px 16px; border-radius: 14px; }
  .login-side .feat .ico-wrap { width: 40px; height: 40px; border-radius: 12px; background: rgba(242, 106, 27, .18); color: var(--orange); display: grid; place-items: center; flex-shrink: 0; }
  .login-side .feat b { display: block; }
  .login-side .feat small { opacity: .7; }
  .login-side .foot { margin-top: auto; padding-top: 30px; opacity: .5; font-size: 13px; }
  .login-pick { border-radius: 0; padding: 56px 48px; overflow-y: auto; max-height: 100vh; }
  .login-pick h2 { font-size: 22px; }
}

/* ---------------- overlay ---------------- */
#toasts { position: fixed; z-index: 100; left: 50%; transform: translateX(-50%); bottom: calc(92px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; width: min(92vw, 440px); pointer-events: none; }
@media (min-width: 960px) { #toasts { bottom: 24px; left: auto; right: 24px; transform: none; } }
.toast { background: var(--navy-900); color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 500; animation: tin .2s ease-out; pointer-events: auto; }
.toast.err { background: #991b1b; }
.toast.ok { background: #166534; }
@keyframes tin { from { opacity: 0; transform: translateY(10px); } }
.backdrop { position: fixed; inset: 0; background: rgba(10, 21, 51, .55); z-index: 80; display: flex; align-items: flex-end; justify-content: center; animation: fin .15s; }
@keyframes fin { from { opacity: 0; } }
.sheet { background: #fff; width: 100%; max-width: 560px; border-radius: 22px 22px 0 0; max-height: 92vh; overflow-y: auto; padding: 8px 18px calc(22px + var(--safe-b)); animation: sup .2s ease-out; }
.sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 4px auto 12px; }
@keyframes sup { from { transform: translateY(40px); opacity: .6; } }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.sheet-head h3 { font-size: 18px; color: var(--navy-900); }
.icon-btn { border: 0; background: var(--gray-100); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); }
@media (min-width: 720px) {
  .backdrop { align-items: center; }
  .sheet { border-radius: 20px; padding: 20px 24px 24px; }
  .sheet::before { display: none; }
}
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .9); display: grid; place-items: center; padding: 20px; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: 10px; }
.menu-list { display: flex; flex-direction: column; }
.menu-list a, .menu-list button { display: flex; gap: 12px; align-items: center; padding: 14px 4px; border: 0; background: none; border-bottom: 1px solid var(--line); text-align: left; font-weight: 600; width: 100%; }
.menu-list a:last-child, .menu-list button:last-child { border-bottom: 0; }
.menu-list .ico { color: var(--navy-700); }

.success { text-align: center; padding: 28px 18px; }
.success .big { width: 76px; height: 76px; border-radius: 50%; background: var(--green-100); color: var(--green); display: grid; place-items: center; margin: 0 auto 14px; animation: pop .35s cubic-bezier(.2, 1.4, .4, 1); }
.success .big .ico { width: 40px; height: 40px; stroke-width: 2.5; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.success h2 { color: var(--navy-900); font-size: 22px; }

.skeleton { background: linear-gradient(90deg, #eceff5 25%, #f5f7fa 50%, #eceff5 75%); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 12px; }
@keyframes sk { to { background-position: -200% 0; } }

.filters { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .filters { grid-template-columns: repeat(4, 1fr); } }
.filters .input { padding: 10px 12px; font-size: 14px; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.toolbar .grow { flex: 1; }
.demo-tag { position: fixed; top: calc(8px + var(--safe-t)); right: 8px; z-index: 50; display: none; }
.split { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.kmdiff { font-size: 14px; text-align: center; margin-top: 8px; color: var(--muted); }
.kmdiff b { color: var(--navy-900); }

/* Histórico do veículo */
.hist-resumo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); overflow: hidden; margin-bottom: 14px; }
.hist-resumo > div { background: #fff; padding: 12px 14px; min-width: 0; }
.hist-resumo b { display: block; font-size: 18px; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.hist-resumo span { font-size: 12px; color: var(--muted); }
@media (min-width: 720px) { .hist-resumo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 619px) { .filters.hist-filtros { grid-template-columns: minmax(0, 1fr); } }
.hist-mes { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 0 10px; }
.hist-mes h3 { font-size: 15px; color: var(--navy-900); margin: 0; }
.hist-mes h3::first-letter { text-transform: uppercase; }
.hist-mes span { font-size: 13px; color: var(--muted); white-space: nowrap; }
.hist-item { padding: 12px 14px; }
.hist-link { display: block; }
.hist-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 130px)); gap: 10px; margin-top: 10px; }
.hist-fotos.unica { grid-template-columns: minmax(0, 320px); margin-top: 0; }
.hist-foto { display: block; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; text-align: left; cursor: zoom-in; font: inherit; width: 100%; }
.hist-foto img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #111; }
.hist-foto span { display: block; padding: 6px 10px; font-size: 12px; color: var(--muted); }
.hist-foto.vazia { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 90px; color: var(--subtle); cursor: default; }
.hist-ver { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; color: var(--orange-600); font-size: 14px; font-weight: 600; }
.hist-atalho { display: flex; align-items: center; gap: 12px; padding: 14px; }
.hist-atalho:hover { box-shadow: var(--shadow-lg); }
.hist-atalho > div { flex: 1; min-width: 0; }
.hist-atalho b { display: block; color: var(--navy-900); font-size: 16px; }
.hist-atalho div span { font-size: 13px; color: var(--muted); }
.hist-nav { display: flex; justify-content: space-between; gap: 10px; }
@media (min-width: 720px) { .hist-resumo.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hist-topo { display: flex; justify-content: space-between; gap: 10px; color: var(--navy-900); }
.hist-km { font-weight: 700; color: var(--orange-600); white-space: nowrap; }
.hist-quem { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); margin: 6px 0 8px; }
.hist-dados { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; margin: 0; font-size: 13px; }
.hist-dados dt { color: var(--subtle); }
.hist-dados dd { margin: 0; color: var(--navy-800); overflow-wrap: anywhere; }
.hist-obs { display: flex; gap: 6px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--orange-50); font-size: 13px; color: var(--navy-800); }
.hist-alertas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media (min-width: 720px) { .hist-dados { grid-template-columns: repeat(2, auto minmax(0, 1fr)); } }

/* Gestão */
.gestao-linha { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.gestao-linha:last-child { border-bottom: 0; }
.gestao-linha > div { min-width: 0; }
.gestao-linha b { display: block; color: var(--navy-900); font-size: 14px; }
.gestao-linha span:not(.badge) { display: block; font-size: 13px; color: var(--muted); }
.gestao-valor { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.kpi b.kpi-nome { font-size: 18px; line-height: 1.2; }

/* Mapa de veículos */
.mapa-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.mapa-area { position: relative; z-index: 0; isolation: isolate; overflow: hidden; }
#mapa { height: 58vh; min-height: 380px; background: #e8edf6; }
.mapa-lista { min-width: 0; }
@media (min-width: 960px) {
  .mapa-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  #mapa { height: calc(100vh - 230px); }
  .mapa-lista { max-height: calc(100vh - 230px); overflow-y: auto; }
}
.mapa-item { display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; width: 100%; text-align: left; font: inherit; cursor: pointer; }
.mapa-item-txt { flex: 1; min-width: 0; }
.mapa-item-txt b { display: block; color: var(--navy-900); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa-item-txt small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapa-sit { flex: none; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--green-100); color: var(--green); }
.mapa-sit.em_uso { background: var(--blue-100); color: var(--blue); }
.mapa-sit.atrasado { background: var(--red-100); color: var(--red); }
.mapa-sit.reservado { background: var(--orange-50); color: var(--orange-600); }
.mapa-pino { position: relative; width: 52px; display: flex; flex-direction: column; align-items: center; }
.leaflet-container .leaflet-marker-pane .mapa-pino img, .mapa-pino > .ico { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 3px solid var(--green); background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); padding: 0; }
.mapa-pino > .ico { padding: 12px; color: var(--navy-800); }
.mapa-pino.em_uso img, .mapa-pino.em_uso > .ico { border-color: var(--blue); }
.mapa-pino.atrasado img, .mapa-pino.atrasado > .ico { border-color: var(--red); }
.mapa-pino.reservado img, .mapa-pino.reservado > .ico { border-color: var(--orange); }
.mapa-pino.grupo img, .mapa-pino.grupo > .ico { border-color: var(--navy-800); }
.mapa-pino span { margin-top: -6px; padding: 1px 5px; border-radius: 6px; background: var(--navy-800); color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap; position: relative; }
.mapa-pino b { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: grid; place-items: center; background: var(--orange); color: #fff; font-size: 12px; }
.mapa-sede { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--navy-800); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.mapa-popup { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.mapa-popup img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; margin-bottom: 4px; }
.mapa-popup b { font-size: 14px; color: var(--navy-900); }
.mapa-popup div { display: flex; align-items: center; gap: 4px; }
.mapa-popup a { color: var(--orange-600); font-weight: 700; margin-top: 4px; }

/* Integrações */
.integra-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.integra-topo h2 { font-size: 17px; color: var(--navy-900); margin: 0 0 4px; }
.integra-logo { width: 48px; height: 48px; flex: none; object-fit: contain; }
.integra p { margin: 0 0 10px; font-size: 14px; }
.integra ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--navy-800); }
.integra li { display: flex; align-items: center; gap: 6px; }
.integra li .ico { color: var(--green); }
.integra-req { margin-bottom: 14px; padding: 10px 12px; border-radius: 10px; background: var(--gray-100, #f3f5f9); font-size: 13px; color: var(--muted); }
.integra-req b { display: block; margin-bottom: 4px; color: var(--navy-900); }
.integra-req span { display: block; }

/* Multas */
.multa { padding: 12px 14px; }
.multa .hist-topo { margin-bottom: 8px; align-items: flex-start; }
.multa-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.busca-barra { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.busca-barra i { display: block; height: 100%; background: var(--orange); transition: width .2s; }
.plano-multas { display: grid; gap: 14px; padding: 16px; background: var(--orange-50); border: 1.5px solid var(--orange); }
.plano-multas p { margin: 0; font-size: 14px; }
.plano-rotulo { font-size: 13px; font-weight: 700; color: var(--orange-600); }
.plano-preco { margin-top: 2px !important; color: var(--navy-900); }
.plano-preco b { font-size: 28px; font-weight: 800; }
.plano-preco small { font-size: 13px; color: var(--muted); }
.plano-multas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--navy-800); }
.plano-multas li { display: flex; align-items: center; gap: 6px; }
.plano-multas li .ico { color: var(--green); flex: none; }
@media (min-width: 720px) { .plano-multas { grid-template-columns: 1fr 1fr; align-items: center; } }

/* Unidade e caronas */
.hero-unidade { margin: 6px 0 2px; }
.unidade-sel { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; }
.unidade-sel select { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.unidade-sel select option { color: var(--navy-900); }
.carona { display: flex; align-items: center; gap: 12px; padding: 12px; }
.carona:hover { box-shadow: var(--shadow-lg); }
.carona-txt { flex: 1; min-width: 0; font-size: 13px; }
.carona-rota { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 15px; color: var(--navy-900); }
.carona-horas { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; color: var(--navy-800); }
.carona-horas span { display: inline-flex; align-items: center; gap: 4px; }
.carona-vagas { flex: none; min-width: 58px; text-align: center; padding: 6px 8px; border-radius: 12px; background: var(--green-100); color: #15803d; font-size: 11px; font-weight: 700; }
.carona-vagas b { display: block; font-size: 22px; line-height: 1; }
.carona-vagas.cheio { background: var(--gray-100); color: var(--muted); }

/* Checklist da devolução */
.checklist { display: grid; gap: 10px; }
.check-item { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.check-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.check-linha b { color: var(--navy-900); font-size: 14px; }
.check-item .seg button[data-prob].active { background: var(--red); color: #fff; }
.check-foto { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.check-foto img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; }

/* Painel para TV */
.tv { min-height: 100vh; padding: 2.5vh 2.5vw; background: var(--navy-900, #0b1b3d); color: #fff; display: flex; flex-direction: column; gap: 2.5vh; font-size: clamp(14px, 1.1vw, 22px); }
.tv-topo { display: flex; align-items: center; gap: 2vw; }
.tv-logo { height: 6vh; min-height: 40px; background: #fff; border-radius: 12px; padding: 8px 12px; }
.tv-topo h1 { margin: 0; font-size: 2.2em; }
.tv-topo p { margin: 0; opacity: .7; }
.tv-relogio { margin-left: auto; text-align: right; }
.tv-relogio b { display: block; font-size: 3em; line-height: 1; }
.tv-relogio span { opacity: .7; text-transform: capitalize; }
.tv-grade { flex: 1; display: grid; gap: 2vw; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .tv-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.tv-grade section { background: rgba(255, 255, 255, .06); border-radius: 18px; padding: 2vh 1.5vw; min-width: 0; }
.tv-grade h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 1.5vh; font-size: 1.4em; }
.tv-grade h2 span { margin-left: auto; padding: 2px 12px; border-radius: 999px; background: var(--green); font-size: .8em; }
.tv-carros { display: grid; gap: 1vw; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tv-carro { background: #fff; color: var(--navy-900); border-radius: 14px; overflow: hidden; padding-bottom: 10px; text-align: center; }
.tv-foto { height: 12vh; min-height: 80px; background: #e8edf6; margin-bottom: 8px; }
.tv-foto img, .tv-foto svg { width: 100%; height: 100%; object-fit: cover; }
.tv-carro b { display: block; padding: 0 8px; }
.tv-carro span { color: var(--muted); font-size: .85em; }
.tv-linha { display: grid; grid-template-columns: 6em minmax(0, 1fr) 6em 4.5em; gap: 1vw; align-items: center; padding: 1.2vh 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.tv-linha b { display: block; font-size: 1.15em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-linha small { opacity: .65; font-size: .8em; }
.tv-cab { opacity: .6; font-size: .85em; text-transform: uppercase; letter-spacing: .05em; }
.tv-vagas { text-align: center; font-size: 1.8em; font-weight: 800; color: #4ade80; }
.tv-vagas.cheio { color: rgba(255, 255, 255, .35); }
.tv-vazio { opacity: .6; }
.tv-rodape { display: flex; justify-content: space-between; align-items: center; opacity: .8; }
.tv-rodape a { color: #fff; text-decoration: underline; }

/* Versões do dashboard */
.dash-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dash-topo .unidade-sel { background: var(--navy-800); order: 2; margin-left: auto; }
.dash-versoes { min-width: 0; }
.linha-dia { overflow-x: auto; }
.linha-escala, .linha-carro { display: grid; grid-template-columns: 190px minmax(420px, 1fr); gap: 10px; align-items: center; }
.linha-escala > div { position: relative; height: 18px; font-size: 11px; color: var(--muted); }
.linha-escala i { position: absolute; transform: translateX(-50%); font-style: normal; }
.linha-carro { padding: 6px 0; border-top: 1px solid var(--line); }
.linha-nome { display: flex; gap: 8px; align-items: center; min-width: 0; }
.linha-nome .res-thumb { width: 52px; height: 36px; }
.linha-nome b { display: block; font-size: 13px; color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-nome small { color: var(--muted); font-size: 11px; }
.linha-trilho { position: relative; height: 34px; background: var(--gray-100); border-radius: 8px; }
.linha-bloco { position: absolute; top: 4px; bottom: 4px; padding: 0 6px; border-radius: 6px; color: #fff; font-size: 11px; font-weight: 600; line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--orange); }
.linha-bloco.em_uso { background: var(--blue); }
.linha-bloco.atrasada { background: var(--red); }
.linha-bloco.concluida { background: #94a3b8; }
.linha-agora { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--red); }
.saida-hora { flex: none; width: 58px; text-align: center; }
.saida-hora b { display: block; font-size: 18px; color: var(--navy-900); }
.saida-hora small { color: var(--muted); font-size: 11px; }
.kanban { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(240px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
.kanban-coluna { background: var(--gray-100); border-radius: 16px; padding: 10px; border-top: 4px solid var(--cor); min-width: 0; }
.kanban-topo { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 10px; color: var(--navy-900); }
.kanban-topo span { min-width: 26px; padding: 2px 8px; border-radius: 999px; background: var(--cor); color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.kanban-lista { display: grid; gap: 10px; }
.kanban-cartao { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.kanban-foto { height: 96px; background: #e8edf6; }
.kanban-foto img, .kanban-foto svg { width: 100%; height: 100%; object-fit: cover; }
.kanban-corpo { padding: 10px; display: grid; gap: 6px; font-size: 13px; }
.kanban-corpo > b { color: var(--navy-900); font-size: 14px; }
.kanban-res { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border-radius: 10px; background: var(--gray-100); }
.kanban-res b, .kanban-res span { display: block; font-size: 12px; }
.kanban-res span { color: var(--muted); }
.kanban-vazio { margin: 6px 4px; color: var(--muted); font-size: 13px; }
@media (max-width: 719px) { .kanban { grid-template-columns: repeat(4, 82%); scroll-snap-type: x mandatory; } .kanban-coluna { scroll-snap-align: start; } }

/* Números do Início em duas linhas */
.kpis-compactos .kpi { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 0; padding: 10px 14px; }
.kpis-compactos .kpi .kpi-ico { grid-row: 1 / 3; width: 36px; height: 36px; }
.kpis-compactos .kpi b { font-size: 22px; line-height: 1.1; }
.kpis-compactos .kpi span { line-height: 1.2; }
.kpis-compactos .kpi small { grid-column: 2 / 4; line-height: 1.2; }
.kanban-horas { display: grid; gap: 2px; font-size: 12px; color: var(--navy-800); }
.kanban-horas span { display: inline-flex; align-items: center; gap: 4px; }
.kanban-corpo .carona-vagas { justify-self: start; display: inline-flex; align-items: baseline; gap: 4px; }
.kanban-corpo .carona-vagas b { display: inline; font-size: 18px; }
a.kanban-cartao { display: block; }

/* Cadastro da frota */
.frota-tabela { min-width: 860px; }
.frota-veiculo { display: flex; align-items: center; gap: 10px; }
.frota-veiculo .res-thumb { width: 64px; height: 44px; }
.frota-veiculo b { display: block; color: var(--navy-900); }
.frota-veiculo small, .frota-sub { display: block; color: var(--muted); font-size: 12px; }
.frota-acoes { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.kanban-viagem .kanban-corpo { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; }
.kanban-viagem .kanban-corpo > *:not(.carona-vagas) { grid-column: 1; }
.kanban-viagem .kanban-corpo .carona-vagas { grid-column: 2; grid-row: 1 / span 3; align-self: center; flex-direction: column; align-items: center; gap: 2px; padding: 10px 12px; min-width: 68px; }
.kanban-viagem .kanban-corpo .carona-vagas b { font-size: 34px; line-height: 1; }
.kanban-horas .hora-destaque { font-size: 15px; font-weight: 800; color: var(--navy-900); }
.kanban-titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.kanban-titulo b { color: var(--navy-900); font-size: 14px; min-width: 0; }
.kanban-viagem .kanban-corpo .kanban-titulo { grid-column: 1 / -1; }
.kanban-viagem .kanban-corpo .carona-vagas { grid-row: 2 / span 2; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.kanban-pessoa { display: flex; align-items: center; gap: 6px; color: var(--navy-800); font-size: 13px; }

/* Saídas e retornos: cards do mesmo tamanho e filtros */
.kanban-cartao { display: flex; flex-direction: column; height: 262px; }
.kanban-foto { flex: none; }
.kanban-corpo { flex: 1; align-content: start; }
.kanban-titulo b, .kanban-pessoa { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanban-pessoa { min-width: 0; }
.kanban-corpo > .btn { margin-top: auto; }
.kanban-cartao:not(.kanban-viagem) .kanban-corpo { display: flex; flex-direction: column; }
.carona-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-top: 14px; }
.carona-filtros .field { flex: 1 1 150px; margin: 0; }
.carona-filtros .input { padding: 9px 12px; font-size: 14px; }
.carona-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--navy-800); padding-bottom: 10px; white-space: nowrap; }

/* Menu lateral recolhível */
.logo-mini { display: none; }
.sidebar .recolher { display: none; }
@media (min-width: 960px) {
  .sidebar { transition: width .2s; }
  .sidebar .recolher { display: grid; place-items: center; position: absolute; top: 34px; right: -13px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: #fff; color: var(--navy-800); box-shadow: var(--shadow); cursor: pointer; z-index: 2; }
  .shell { transition: padding-left .2s; }
  body.menu-mini { --sidebar: 76px; }
  body.menu-mini .sidebar { padding: 20px 10px; }
  body.menu-mini .sidebar .logo-card { padding: 8px; }
  body.menu-mini .logo-cheio, body.menu-mini .sidebar .app-name, body.menu-mini .sidebar nav a span, body.menu-mini .sidebar .cta span, body.menu-mini .sidebar .me > div, body.menu-mini .sidebar .me button { display: none; }
  body.menu-mini .logo-mini { display: block; width: 100%; height: auto; }
  body.menu-mini .sidebar nav a { justify-content: center; padding: 11px 0; position: relative; }
  body.menu-mini .sidebar .cta { padding: 12px 0; justify-content: center; margin: 18px 0; position: relative; }
  body.menu-mini .sidebar .me { justify-content: center; padding: 8px 0; background: transparent; }
  body.menu-mini .sidebar [data-dica]:hover::after { content: attr(data-dica); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); padding: 6px 10px; border-radius: 8px; background: var(--navy-900); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-lg); z-index: 40; pointer-events: none; }
}

/* Cronograma */
.cron-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.cron-topo > b { color: var(--navy-900); }
.cron-mes { display: flex; align-items: center; gap: 8px; }
.cron-mes b { color: var(--navy-900); min-width: 150px; text-align: center; }
.cron .linha-escala i { font-size: 10px; }
.cron-fds { position: absolute; inset: 0; }
.cron-fds i { position: absolute; top: 0; bottom: 0; background: #e2e6ee; }
.cron .linha-bloco { top: 7px; bottom: 7px; padding: 0; border-radius: 4px; }

/* Voltar no computador, à esquerda do título (no celular a seta fica na barra do topo) */
.voltar-desk { display: none; }
@media (min-width: 960px) {
  .shell { position: relative; }
  .voltar-desk { display: grid; place-items: center; position: absolute; top: 28px; left: calc(var(--sidebar) + 32px); width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--navy-800); cursor: pointer; box-shadow: var(--shadow); }
  .voltar-desk:hover { border-color: var(--navy-600); }
  .main.com-voltar > .page-head:first-child, .main.com-voltar > .card:first-child { margin-left: 52px; }
}

/* Nova reserva simples */
.saida-foto-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.check-tanque { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy-900); font-size: 15px; }
.check-tanque input { width: 20px; height: 20px; accent-color: var(--orange); }
/* Seleção com busca (estilo Select2) */
.sel2 { position: relative; }
.sel2-botao { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer; }
.sel2-botao .ico { transform: rotate(90deg); color: var(--muted); }
.sel2-botao.vazio span { color: var(--subtle); }
.sel2-painel { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px; }
.sel2-busca { margin-bottom: 6px; padding: 9px 12px; font-size: 14px; }
.sel2-lista { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.sel2-lista li { padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--navy-900); }
.sel2-lista li.ativo { background: var(--gray-100); }
.sel2-lista li.sel { font-weight: 700; color: var(--orange-600); }
.sel2-lista li.vazio { color: var(--muted); cursor: default; }
.sel2-lista li.sel2-novo { display: flex; align-items: center; gap: 6px; color: var(--orange-600); font-weight: 700; border-top: 1px solid var(--line); margin-top: 4px; }
/* Cards de números como filtro */
button.kpi { border: 2px solid transparent; font: inherit; text-align: left; cursor: pointer; width: 100%; color: inherit; }
button.kpi:hover { border-color: var(--line); }
button.kpi.ativo { border-color: var(--orange); }
.filtro-extra:not(:empty) { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.filtro-extra .link { border: 0; background: none; color: var(--orange-600); font-weight: 700; cursor: pointer; }
/* Veículo já escolhido no topo da nova reserva */
.veic-topo { display: flex; align-items: center; gap: 14px; padding: 12px; margin-bottom: 14px; }
.veic-topo .res-thumb { width: 140px; height: 92px; }
.veic-topo-txt { flex: 1; min-width: 0; display: grid; gap: 4px; }
.veic-topo-txt .kanban-titulo b { font-size: 18px; }
.veic-topo-ok, .veic-topo-aviso { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.veic-topo-ok { color: var(--green); }
.veic-topo-aviso { color: var(--red); }
/* Nova reserva com veículo já escolhido: viagem e saída lado a lado */
@media (min-width: 960px) { .reserva-fixa > .form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } }
/* Chave (switch) no título das colunas */
.chave { display: inline-flex; align-items: center; gap: 8px; margin: 0 4px 10px; font-size: 13px; font-weight: 700; color: var(--navy-800); cursor: pointer; user-select: none; }
.chave input { position: absolute; opacity: 0; width: 0; height: 0; }
.chave i { position: relative; width: 36px; height: 20px; border-radius: 999px; background: #cbd2dd; transition: background .15s; flex: none; }
.chave i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.chave input:checked + i { background: var(--cor, var(--green)); }
.chave input:checked + i::after { transform: translateX(16px); }
.chave input:focus-visible + i { outline: 2px solid var(--orange); outline-offset: 2px; }
.carona-check { display: none; }
/* Cards de Saídas e retornos mais baixos */
.kanban-cartao { height: 196px; }
.kanban-foto { height: 72px; }
.kanban-corpo { padding: 8px 10px; gap: 4px; }
.kanban-corpo .btn.sm { padding: 6px 10px; }
.kanban-viagem .kanban-corpo .carona-vagas { padding: 6px 10px; min-width: 60px; }
.kanban-viagem .kanban-corpo .carona-vagas b { font-size: 28px; }
/* Título das colunas em destaque, na cor da cidade */
.kanban-topo { background: var(--cor); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(15, 29, 69, .12); }
.kanban-topo b { color: #fff; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.kanban-topo span { background: #fff; color: var(--cor); min-width: 28px; font-size: 13px; }
.chave { display: flex; width: fit-content; margin-left: auto; }

/* Cronograma em calendário */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cal-semana { padding: 8px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; background: var(--gray-100); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.cal-dia { min-height: 118px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; background: #fff; }
.cal-dia.fds { background: #f7f8fb; }
.cal-dia.fora { background: #fafbfc; }
.cal-dia.fora .cal-num { color: var(--subtle); }
.cal-num { font-size: 13px; font-weight: 700; color: var(--navy-900); margin-bottom: 2px; }
.cal-dia.hoje .cal-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--orange); color: #fff; }
.cal-item { display: block; padding: 3px 6px; border-radius: 6px; font-size: 11px; line-height: 1.3; color: #fff; background: var(--orange); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-item.em_uso { background: var(--blue); }
.cal-item.atrasada { background: var(--red); }
.cal-item.concluida { background: #94a3b8; }
.cal-item b { font-weight: 800; }
.cal-mais { border: 0; background: none; padding: 2px 4px; text-align: left; font-size: 11px; font-weight: 700; color: var(--orange-600); cursor: pointer; }
@media (max-width: 719px) { .cal-dia { min-height: 74px; padding: 3px; } .cal-item { font-size: 9px; padding: 2px 3px; } .cal-semana { padding: 6px 2px; font-size: 10px; } }

/* abas da Frota: Veículos e Histórico */
.abas-frota { margin: 0 0 14px; }
.abas-frota .chip { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }

/* Mapa de trajetos */
.trajetos-filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.trajetos-filtros .field { min-width: 170px; margin: 0; }
.trajeto-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; width: 100%; text-align: left; font: inherit; cursor: pointer; }
.trajeto-pos { flex: none; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 12px; display: grid; place-items: center; }
.trajeto-txt { flex: 1; min-width: 0; }
.trajeto-txt b { display: block; color: var(--navy-900); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trajeto-txt small { display: block; color: var(--muted); font-size: 12px; }
.trajeto-barra { display: block; height: 4px; border-radius: 4px; background: var(--line, #e5e9f0); margin-top: 6px; overflow: hidden; }
.trajeto-barra i { display: block; height: 100%; border-radius: 4px; }
.trajeto-n { flex: none; text-align: right; line-height: 1.1; }
.trajeto-n b { display: block; font-size: 20px; color: var(--navy-900); }
.trajeto-n small { color: var(--muted); font-size: 11px; }

/* Painel TV: dia em destaque e hora numa tag abaixo */
.tv-linha { grid-template-columns: 7.5em minmax(0, 1fr) 7.5em 4.5em; }
.tv-quando b { text-transform: capitalize; }
.tv-hora { display: inline-block; margin-top: .35em; padding: .1em .55em; border-radius: 999px; background: rgba(255, 255, 255, .14); font-style: normal; font-weight: 700; font-size: .8em; }

/* Calendário: rádios Mês / Dia / Veículo e mês do veículo */
.cron-esq { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.radios { display: inline-flex; gap: 14px; align-items: center; }
.radio { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--navy-800); cursor: pointer; }
.radio input { accent-color: var(--orange); width: 16px; height: 16px; margin: 0; }
.cal-veic { width: auto; min-width: 230px; }
.cal-veic-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cal-veic-topo .res-thumb { width: 64px; height: 44px; }
.cal-veic-topo b { color: var(--navy-900); }
.cal-veic-topo small { display: block; color: var(--muted); font-size: 12px; }
.cal-dia.vazio { background: #fafbfc; }
.cal-dia.cal-v { min-height: 92px; }
.cal-dia.cal-v.livre { background: #ecfdf3; }
.cal-dia.cal-v.livre .cal-num { color: #15803d; }
.cal-livre { margin-top: auto; align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: #bbf7d0; color: #166534; font-size: 11px; font-weight: 700; text-decoration: none; }
.cal-dia.cal-v.ocupado { background: #eef1f5; }
.cal-dia.cal-v.ocupado .cal-num { color: var(--subtle); }
.cal-ocup { display: block; padding: 2px 6px; border-radius: 6px; background: #cbd5e1; color: #475569; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.cal-dia.cal-v.passado { background: #fafbfc; }
.cal-dia.cal-v.passado .cal-num { color: var(--subtle); }
.cal-dia.cal-v.hoje .cal-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--orange); color: #fff; }

.carona-filtros .cf-busca { flex: 2 1 240px; }
.kanban-cartao[hidden] { display: none; }

/* Detalhe do trajeto */
.traj-num { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 16px; }
.traj-num div { background: var(--gray-100); border-radius: 12px; padding: 12px; text-align: center; }
.traj-num b { display: block; font-size: 20px; color: var(--navy-900); }
.traj-num small { color: var(--muted); font-size: 12px; }
.traj-tops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.traj-tops h4, .traj-sub { margin: 0 0 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.traj-tops p { display: flex; justify-content: space-between; gap: 8px; margin: 0; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.traj-tops p span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.traj-lista { max-height: 46vh; overflow-y: auto; }
@media (max-width: 560px) { .traj-tops { grid-template-columns: 1fr; } }

/* Mapa de trajetos: filtros ocupando a linha toda e botão Limpar no fim */
.trajetos-filtros { flex-wrap: wrap; }
.trajetos-filtros .field { flex: 1 1 170px; min-width: 0; }
.trajetos-filtros .field[hidden] { display: none; }
.trajetos-filtros .t-limpar { flex: none; height: 42px; }

/* Menu lateral: o sanduíche recolhe/abre; a foto abre a conta */
.sidebar .me .me-conta { margin: 0; padding: 0; background: none; border: 0; opacity: 1; cursor: pointer; border-radius: 50%; }
.sidebar .me .me-recolher { cursor: pointer; }
body.menu-mini .sidebar .me .me-conta { display: none; }
body.menu-mini .sidebar .me .me-recolher { display: grid; place-items: center; margin: 0; opacity: .85; }

/* Seletor de veículo com foto */
.sel-veic.cal-veic { min-width: 0; width: min(440px, 100%); }
.sv-botao { padding: 6px 10px; min-height: 56px; }
.sv-botao > .ico { flex: none; }
.sv-botao, .sv-lista li { display: flex; align-items: center; gap: 10px; }
.sv-foto { flex: none; width: 58px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--gray-100); }
.sv-foto img, .sv-foto > * { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-txt { flex: 1; min-width: 0; }
.sv-txt b { display: block; color: var(--navy-900); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-txt small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-lista { max-height: 320px; }
.sv-lista li { padding: 6px 8px; }
.sv-lista li.sel .sv-txt b { color: var(--orange-600); }

/* Início: mesmos cartões de Saídas e retornos */
.grid.cartoes-inicio { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* Seletor de veículo maior */
.sel-veic.cal-veic { width: min(620px, 100%); }
.sv-botao { min-height: 72px; padding: 8px 14px; }
.sv-botao .sv-foto { width: 86px; height: 56px; border-radius: 10px; }
.sv-botao .sv-txt b { font-size: 17px; }
.sv-botao .sv-txt small { font-size: 13px; }
.sv-lista li .sv-foto { width: 72px; height: 48px; }
.sv-lista li .sv-txt b { font-size: 15px; }
.sv-lista { max-height: 380px; }

/* Calendário por veículo: nome e hora / trajeto ou destino */
.cal-ocup { white-space: normal; padding: 4px 7px; line-height: 1.25; }
.cal-ocup-l1 { display: flex; justify-content: space-between; gap: 6px; }
.cal-ocup-l1 b { font-weight: 700; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ocup-l1 span { flex: none; font-weight: 600; }
.cal-ocup-l2 { display: block; font-size: 10.5px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ocup-l1 { flex-wrap: wrap; column-gap: 6px; row-gap: 0; }
.cal-ocup-l1 b { flex: 0 1 auto; min-width: 0; }

/* Calendário Mês: nome e hora / destino */
.cal-item { white-space: normal; padding: 4px 7px; line-height: 1.25; }
.cal-item .cal-ocup-l1 b { color: #fff; }
.cal-item .cal-ocup-l2 { opacity: .9; }

/* Detalhe da reserva: pessoa e carro à esquerda, linha do tempo à direita */
@media (min-width: 900px) { .grid.two.reserva-det { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.tl-photos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.tl-foto { margin: 0; width: min(260px, 100%); }
.tl-foto .tl-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: zoom-in; background: #0b0f14; }
.tl-foto .tl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-foto figcaption { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; color: var(--muted); }

/* Início: cartões um pouco mais altos */
.cartoes-inicio .kanban-cartao { height: 260px; }
.cartoes-inicio .kanban-foto { height: 120px; }

/* Início: filtros de Todos numa segunda linha */
.filtro-extra:not(:empty) { flex-direction: column; align-items: flex-start; gap: 10px; }

/* Tag do trajeto sobre a foto */
.kanban-foto { position: relative; }
.foto-trajeto { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,.25); max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foto-livre { background: #16a34a; }

/* Detalhe da reserva: a linha do tempo vai até o fim do cartão do carro */
.grid.two.reserva-det { align-items: stretch; }
.reserva-det > .form { display: flex; flex-direction: column; }
.reserva-det > .form > section:last-child { flex: 1; }

/* Contato da pessoa na reserva: telefone e WhatsApp */
.pessoa-contato { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.pessoa-tel { display: inline-flex; align-items: center; gap: 5px; color: var(--navy-800); font-weight: 600; font-size: 14px; text-decoration: none; }
.btn-whats { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #25d366; color: #fff; font-weight: 700; font-size: 13px; text-decoration: none; }
.btn-whats:hover { background: #1ebe5a; }
.btn-whats .ico { width: 16px; height: 16px; }

/* Calendário: foto antes do nome */
.cal-ocup-l1 b { display: inline-flex; align-items: center; gap: 5px; }
.avatar.cal-av { width: 18px; height: 18px; min-width: 18px; font-size: 8px; border: 1.5px solid #fff; }
.avatar.cal-av img { width: 100%; height: 100%; object-fit: cover; }

.filtro-cal { margin: 0 0 12px; }

/* Saídas e retornos: Origem e Destino em botões */
.cf-botoes { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 4px; }
.cf-grupo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cf-rotulo { font-size: 13px; font-weight: 700; color: var(--navy-900); }
.btn-whats-ico { flex: none; align-self: flex-start; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 2px 8px rgba(37, 211, 102, .35); }
.btn-whats-ico:hover { background: #1ebe5a; }
.btn-whats-ico .ico { width: 22px; height: 22px; }

/* Filtro Origem / Destino */
.filtro-cidades { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; }
.cf-vazio { font-size: 13px; }

/* Início: Disponíveis / Com vagas / Todos como seletor único (um ou outro) */
.seg.modo-inicio { flex: none; }
.seg.modo-inicio button { padding: 8px 16px; font-size: 14px; cursor: pointer; }
.seg.modo-inicio button.active { background: var(--navy-800); color: #fff; }
.filtro-sep { flex: none; width: 1px; height: 26px; background: var(--line); margin: 0 4px; }

/* Calendário: vagas no cartão */
.cal-ocup-l2 { display: flex !important; align-items: center; gap: 6px; }
.cal-ocup-l2 > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-vagas { flex: none; font-style: normal; font-weight: 700; font-size: 10.5px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .28); }
.cal-ocup .cal-vagas { background: rgba(255, 255, 255, .7); color: #166534; }
.cal-vagas.cheio { opacity: .75; }
.cal-ocup-l2 { flex-wrap: wrap; row-gap: 2px; }
.cal-ocup-l2 > span { flex: 1 1 90px; }

/* Quantidade de pessoas em botões */
.seg.pessoas-seg { display: flex; width: 100%; }
.seg.pessoas-seg button { flex: 1; padding: 10px 6px; font-size: 15px; cursor: pointer; }
.seg.pessoas-seg button.active { background: var(--navy-800); color: #fff; }

/* Checklist: Combustível */
.check-combustivel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; }
.check-combustivel .seg button { min-width: 72px; }

/* Manutenção */
.manut-filtro { margin-bottom: 14px; }
.manut-filtro .n { opacity: .7; margin-left: 4px; font-size: 12px; }
.manut-lista { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
@media (max-width: 560px) { .manut-lista { grid-template-columns: 1fr; } }
.manut-item { display: flex; gap: 14px; padding: 12px; align-items: stretch; }
.manut-foto { flex: none; width: 130px; border-radius: 10px; overflow: hidden; background: #e8edf6; }
.manut-foto img, .manut-foto svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.manut-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.manut-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.manut-topo b { color: var(--navy-900); }
.manut-problema { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 700; color: #b91c1c; }
.manut-quem { margin: 0; font-size: 12px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.manut-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }

/* Nova reserva: coluna única compacta (veículo já escolhido) */
.form-unica { max-width: none; }
.form-unica .veic-topo { padding: 10px 12px; margin-bottom: 0; }
.form-unica .veic-topo .res-thumb { width: 96px; height: 64px; }
.form-unica .veic-topo-txt .kanban-titulo { justify-content: flex-start; gap: 10px; }
.form-unica .veic-topo-txt .kanban-titulo b { font-size: 16px; }
.grid.reserva-unica { grid-template-columns: 1fr; }
.grid.reserva-unica > .form { display: grid; gap: 14px; }
.saida-linha { display: grid; gap: 12px 16px; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 720px) { .saida-linha { grid-template-columns: 1.2fr 1.3fr 1fr; } }
.saida-linha .field { margin: 0; }
.saida-linha .input.km { font-size: 22px; font-weight: 800; text-align: center; padding: 8px 10px; }
.saida-foto { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.saida-mini { flex: none; width: 84px; height: 56px; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: zoom-in; background: #0b0f14; }
.saida-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.saida-foto .link { border: 0; background: none; color: var(--orange-600); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.saida-linha .seg { display: flex; }
.saida-linha .seg button { flex: 1; padding: 10px 8px; cursor: pointer; }
.saida-linha .seg button.active { background: var(--navy-800); color: #fff; }

/* Minhas reservas: blocos */
.minhas-bloco .section-title h2 { display: flex; align-items: center; gap: 8px; }
.minhas-n { font-size: 13px; font-weight: 700; color: var(--muted); background: var(--gray-100); border-radius: 999px; padding: 1px 9px; }
.minhas-vazio { padding: 18px; }

/* Data e hora separadas */
.dh-linha { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 8px; }
.dh-data { position: relative; }
.dh-data .input { padding-right: 44px; width: 100%; }
.dh-cal { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 8px; background: var(--gray-100); color: var(--navy-800); display: grid; place-items: center; cursor: pointer; }
.dh-cal:hover { background: #e2e8f0; }
.dh-nativo { position: absolute; right: 6px; bottom: 0; width: 34px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.dh-hora { text-align: center; }

@media (min-width: 720px) { .saida-linha { grid-template-columns: 1fr 1fr; } }
#s-check-saida[hidden] { display: none; }
.check-combustivel .seg button.active { background: var(--navy-800); color: #fff; }

/* Calendário próprio da data (dias ocupados só para leitura) */
.dh-pop { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 12px; }
.dh-pop-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dh-pop-topo b { color: var(--navy-900); font-size: 14px; }
.dh-pop-topo button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--gray-100); color: var(--navy-800); display: grid; place-items: center; cursor: pointer; }
.dh-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dh-grade i { font-style: normal; text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding: 2px 0; }
.dh-dia { height: 34px; border: 0; border-radius: 8px; background: #ecfdf3; color: #166534; font-weight: 700; font-size: 13px; cursor: pointer; }
.dh-dia:hover:not([disabled]) { background: #bbf7d0; }
.dh-dia.hoje { box-shadow: inset 0 0 0 1.5px var(--orange); }
.dh-dia.sel { background: var(--navy-800); color: #fff; }
.dh-dia[disabled] { cursor: not-allowed; }
.dh-dia.passado { background: transparent; color: #cbd5e1; font-weight: 500; }
.dh-dia.ocup { background: #eef1f5; color: #94a3b8; text-decoration: line-through; }
.dh-legenda { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.dh-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.dh-legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.dh-legenda .l-livre { background: #bbf7d0; }
.dh-legenda .l-ocup { background: #eef1f5; border: 1px solid #cbd5e1; }
.dh-pop { left: 0; right: auto; }

.minha-card { text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow .15s; }
.minha-card:hover { box-shadow: var(--shadow-lg); }

/* Retirada / devolução no layout da Nova reserva (coluna única) */
.op-unica { display: grid; gap: 14px; }
.op-painel { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .op-painel { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.op-painel .photo-drop { padding: 18px; }
.op-painel .photo-preview img { max-height: 200px; }
.kv-linha { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 18px; }
@media (min-width: 720px) { .kv-linha { grid-template-columns: auto 1fr auto 1fr auto 1fr; } }
.op-unica .row { display: block; }

/* Painel TV: nome do carro numa linha; pessoa abaixo do trajeto */
.tv-carro b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-pessoa { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9em; margin: 2px 0; }
.tv-pessoa .avatar.cal-av { width: 1.3em; height: 1.3em; min-width: 1.3em; border-color: rgba(255,255,255,.6); }
.tv-linha small { display: block; }

/* Painel TV: foto da pessoa do tamanho das duas linhas (nome e carro) */
.tv-pessoa { gap: 10px; margin-top: 6px; }
.avatar.tv-av { width: 2.6em; height: 2.6em; min-width: 2.6em; border: 2px solid rgba(255,255,255,.7); font-size: .8em; }
.avatar.tv-av img { width: 100%; height: 100%; object-fit: cover; }
.tv-pessoa-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tv-pessoa-txt em { font-style: normal; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-pessoa-txt small { opacity: .65; font-weight: 400; }

/* Painel TV: voltar ao lado da logo */
.tv-voltar { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; cursor: pointer; }
.tv-voltar:hover { background: rgba(255,255,255,.18); }
.tv-topo { gap: 1.2vw; }

/* Calendário da data: dia com reserva mas com horário livre */
.dh-dia { position: relative; }
.dh-dia.parcial::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--orange); }
.dh-dia.sel.parcial::after { background: #fff; }
.dh-legenda .l-parcial { background: #bbf7d0; box-shadow: inset 0 -4px 0 var(--orange); }
.dh-legenda { flex-wrap: wrap; }

/* Aviso compacto de reserva confirmada */
.aviso-ok { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 14px; border-left: 4px solid var(--green); }
.aviso-ok-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #dcfce7; color: #15803d; display: grid; place-items: center; }
.aviso-ok b { display: block; color: var(--navy-900); font-size: 15px; }
.aviso-ok .muted { font-size: 13px; }
.aviso-ok .muted b { display: inline; font-size: inherit; }
@media (min-width: 720px) { .kv-linha { grid-template-columns: auto 1fr auto 1fr auto 1fr auto auto; } }

/* Checklist: ao marcar Problema, arrastar a foto ou tirar foto ao lado */
.check-item .check-linha { flex-wrap: wrap; }
.check-item .check-linha > b { margin-right: auto; }
.check-foto { display: flex; align-items: center; gap: 8px; margin: 0; }
.check-foto.hide { display: none; }
.check-drop { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1.5px dashed var(--orange); border-radius: 10px; background: #fff7ed; color: var(--orange-600); font-weight: 700; font-size: 13px; cursor: pointer; }
.check-drop.sobre { background: #ffedd5; border-style: solid; }
.check-mini { width: 54px; height: 36px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; }
.check-mini.hide { display: none; }

.check-desc { margin-top: 10px; }
.check-desc.hide { display: none; }

/* Manutenção: cards por tipo de problema (itens do checklist) */
.manut-tipos { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
@media (max-width: 720px) { .manut-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.manut-tipo { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px; border: 2px solid transparent; text-align: left; font: inherit; cursor: pointer; }
.manut-tipo.ativo { border-color: var(--orange); }
.manut-tipo-ico { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; background: #fff1f2; color: #b91c1c; display: grid; place-items: center; }
.manut-tipo b { font-size: 24px; color: var(--navy-900); line-height: 1; }
.manut-tipo span:last-child { color: var(--muted); font-size: 13px; font-weight: 600; }
.manut-tag { flex: none; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; background: #fee2e2; color: #991b1b; }

/* Histórico do veículo: foto, abas Uso / Manutenção e paginação */
.hv-veiculo { display: flex; gap: 16px; padding: 14px; margin-bottom: 14px; align-items: stretch; }
.hv-foto { flex: none; width: 240px; border-radius: 12px; overflow: hidden; background: #e8edf6; }
.hv-foto img, .hv-foto svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.hv-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hv-info .kanban-titulo { justify-content: flex-start; gap: 10px; }
.hv-info .kanban-titulo b { font-size: 20px; }
.hv-resumo { margin: 6px 0 0; box-shadow: none; border: 1px solid var(--line); }
@media (max-width: 720px) { .hv-veiculo { flex-direction: column; } .hv-foto { width: 100%; height: 180px; } }
.hv-abas { margin-bottom: 14px; }
.hv-abas .n { opacity: .7; margin-left: 4px; font-size: 12px; }
#hv-aba-uso.hide, #hv-aba-manut.hide { display: none; }
.paginacao { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.paginacao:empty { display: none; }
.paginacao button { min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--navy-800); font-weight: 700; cursor: pointer; display: inline-grid; place-items: center; }
.paginacao button.active { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.paginacao button[disabled] { opacity: .4; cursor: default; }
.paginacao span { color: var(--muted); }
.hv-manut-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: inherit; }
.hv-manut-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hv-manut-txt .muted { font-size: 12px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hv-manut-item .manut-tipo-ico { width: 40px; height: 40px; }

/* Manutenção: ver checklist e OS */
.manut-os { margin: 0; font-size: 12px; font-weight: 700; color: #92400e; display: flex; align-items: center; gap: 6px; }
.mc-bloco { margin-bottom: 16px; }
.mc-bloco h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.mc-pessoa { display: flex; align-items: center; gap: 12px; }
.mc-pessoa b { display: block; color: var(--navy-900); }
.mc-pessoa .muted { font-size: 13px; }

.manut-tipos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 720px) { .manut-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.manut-tipo-ico.manut-tipo-todas { background: #eef2ff; color: var(--navy-800); }

/* Gestão: 5 cards numa linha */
@media (min-width: 1100px) { .grid.kpis.kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Manutenção: botões numa linha */
.manut-acoes { flex-wrap: nowrap; }
.manut-acoes .btn { white-space: nowrap; padding-left: 10px; padding-right: 10px; }

/* Gestão: cards clicáveis e lista do detalhe */
.kpi-clique { cursor: pointer; transition: box-shadow .15s, transform .15s; }
.kpi-clique:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.kc-lista { display: grid; gap: 6px; max-height: 62vh; overflow-y: auto; }
.kc-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: inherit; }
.kc-linha:hover { background: var(--gray-100); }
.kc-nome { min-width: 0; display: flex; flex-direction: column; }
.kc-nome b { color: var(--navy-900); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-nome small { color: var(--muted); font-size: 12px; }
.kc-valor { flex: none; font-weight: 800; color: var(--navy-900); }

/* Gestão: cards e gráficos do mesmo tamanho em cada linha */
.painel-g .grid { align-items: stretch !important; }
.painel-g .grid > .card { height: 100%; display: flex; flex-direction: column; }
.painel-g .grid.kpis > .card { min-height: 190px; }
.painel-g .grid.two > .card.pad { min-height: 320px; }
.painel-g .table-wrap { max-height: 460px; overflow-y: auto; }

/* Gestão: ordenação da tabela Uso por veículo */
.th-ordem { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; text-transform: inherit; letter-spacing: inherit; }
.th-ordem:hover { color: var(--orange-600); }
.th-ordem span { font-size: 10px; color: var(--orange-600); }
.painel-g .table-wrap { max-height: none; }

.badge.b-manutencao { background: #fef3c7; color: #92400e; }
.badge.b-manutencao .dot { background: #d97706; }

/* Frota: cards de situação (filtros) */
.frota-sits { display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 12px; }
@media (max-width: 900px) { .frota-sits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.frota-sit { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px; border: 2px solid transparent; text-align: left; font: inherit; cursor: pointer; }
.frota-sit.ativo { border-color: var(--orange); }
.frota-sit-ico { grid-row: span 2; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
.frota-sit b { font-size: 22px; line-height: 1; color: var(--navy-900); }
.frota-sit > span:last-child { font-size: 12px; font-weight: 600; color: var(--muted); }
.tom-navy .frota-sit-ico { background: #eef2ff; color: var(--navy-800); }
.tom-green .frota-sit-ico { background: #dcfce7; color: #15803d; }
.tom-blue .frota-sit-ico { background: #dbeafe; color: #1d4ed8; }
.tom-orange .frota-sit-ico { background: #ffedd5; color: #c2410c; }
.tom-red .frota-sit-ico { background: #fee2e2; color: #b91c1c; }
.tom-amber .frota-sit-ico { background: #fef3c7; color: #b45309; }

/* Painel TV: cidade no topo, ao lado do título */
.tv-cidade { align-self: center; }
.tv-relogio { margin-left: auto; }

/* Painel TV: seletor da cidade grande no lugar do título */
.tv-cidade-grande .unidade-sel { padding: .35em .6em .35em .7em; border-radius: 16px; gap: .4em; font-size: 2em; }
.tv-cidade-grande .unidade-sel .ico { width: .9em; height: .9em; }
.tv-cidade-grande select { font-size: 1em; font-weight: 800; padding-right: 1.3em; }

/* Painel TV: topo redesenhado — voltar, logo e cidade com a mesma altura e cantos */
.tv-topo { --tv-h: clamp(48px, 7vh, 68px); gap: 12px; }
.tv-voltar { width: var(--tv-h); height: var(--tv-h); border-radius: 16px; border: 0; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.tv-voltar:hover { background: rgba(255, 255, 255, .18); }
.tv-voltar .ico { width: 24px; height: 24px; }
.tv-logo { height: var(--tv-h); min-height: 0; padding: 10px 18px; border-radius: 16px; box-sizing: border-box; }
.tv-cidade-grande .unidade-sel { height: var(--tv-h); box-sizing: border-box; padding: 0 18px 0 16px; border-radius: 16px; font-size: calc(var(--tv-h) * .42);
  background: linear-gradient(135deg, var(--orange, #f26a1b), #ea580c); color: #fff; border: 0; box-shadow: 0 6px 18px rgba(234, 88, 12, .35); }
.tv-cidade-grande .unidade-sel:hover { filter: brightness(1.05); }
.tv-cidade-grande .unidade-sel .ico { color: #fff; opacity: .95; width: 1em; height: 1em; }
.tv-cidade-grande select { color: #fff; background: transparent; font-weight: 800; }
.tv-cidade-grande select option { color: var(--navy-900); }

/* Painel TV: topo em barra única (voltar · logo · cidades em abas) e relógio no mesmo estilo */
.tv-topo { --tv-h: clamp(46px, 6.4vh, 62px); align-items: stretch; gap: 14px; }
.tv-barra, .tv-relogio { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.25); }
.tv-barra .tv-voltar { width: var(--tv-h); height: var(--tv-h); border-radius: 15px; background: rgba(255,255,255,.08); box-shadow: none; }
.tv-logo-box { height: var(--tv-h); padding: 0 18px; border-radius: 15px; background: #fff; display: flex; align-items: center; }
.tv-logo-box .tv-logo { height: 62%; padding: 0; border-radius: 0; background: none; min-height: 0; }
.tv-sep { width: 1px; align-self: stretch; margin: 6px 4px; background: rgba(255,255,255,.14); }
.tv-cidades { display: flex; gap: 6px; height: var(--tv-h); }
.tv-cidades button { height: 100%; padding: 0 22px; border: 0; border-radius: 15px; background: transparent; color: rgba(255,255,255,.62); font: inherit; font-size: calc(var(--tv-h) * .34); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .15s, color .15s; }
.tv-cidades button:hover { background: rgba(255,255,255,.08); color: #fff; }
.tv-cidades button.ativa { background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; font-weight: 800; box-shadow: 0 6px 16px rgba(234,88,12,.4); }
.tv-cidades button .ico { width: .95em; height: .95em; }
.tv-relogio { margin-left: auto; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0; padding: 8px 20px; text-align: right; }
.tv-relogio b { font-size: calc(var(--tv-h) * .62); line-height: 1; }
.tv-relogio span { opacity: .65; font-size: .85em; }
.tv-relogio span { white-space: nowrap; }

/* Painel TV: voltar fora da barra; barra ocupa até o relógio */
.tv-voltar.tv-voltar-fora { align-self: center; width: calc(var(--tv-h) + 16px); height: calc(var(--tv-h) + 16px); border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.25); }
.tv-barra { flex: 1; min-width: 0; }
.tv-relogio { margin-left: 0; }

/* Painel TV: cidades distribuídas por igual na barra */
.tv-cidades { flex: 1; }
.tv-cidades button { flex: 1; justify-content: center; padding: 0 12px; }
.tv-cidades button { flex: 1 1 0; min-width: 0; }

/* Painel TV: card Timer (rodízio de cidades a cada 10s) */
.tv-timer { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 18px; border: 0; border-radius: 22px; color: rgba(255,255,255,.85); font: inherit; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.25); transition: background .15s; }
.tv-timer:hover { background: rgba(255,255,255,.14); }
.tv-timer .ico { width: 26px; height: 26px; }
.tv-timer-txt { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.tv-timer-txt b { font-size: 1.05em; }
.tv-timer-txt small { opacity: .7; font-size: .8em; white-space: nowrap; min-width: 9.5em; }
.tv-timer.ligado { background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; box-shadow: 0 6px 18px rgba(22,163,74,.35); }
.tv-timer.ligado small { opacity: .95; }

/* Timer menor por dentro, mesma largura */
.tv-timer { width: 178px; justify-content: center; gap: 8px; padding: 6px 12px; }
.tv-timer .ico { width: 18px; height: 18px; }
.tv-timer-txt b { font-size: .85em; }
.tv-timer-txt small { font-size: .7em; min-width: 0; }
.tv-logo-box { flex: none; }
.tv-cidades { min-width: 0; }
.tv-cidades button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Timer: mesma altura, mais estreito */
.tv-timer { width: auto; min-width: 0; padding: 6px 14px; gap: 8px; }
.tv-timer .ico { width: 22px; height: 22px; }
.tv-timer-txt b { font-size: .95em; }
.tv-timer-txt small { font-size: .75em; min-width: 7.6em; }

/* Timer bem compacto */
.tv-timer { padding: 6px 12px; gap: 6px; }
.tv-timer-txt small { min-width: 2.2em; }