/* ==========================================================================
   GaragemOS V2 — Componentes (superfícies, manutenção, formulários)
   ========================================================================== */

/* ---------- Superfícies em vidro ---------- */
.card, .stat-card, .record-card, .notice-card, .chart-card, .link-card, .hero-card, .plan-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .16) 58%, rgba(255, 255, 255, .32)),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}
.card::before, .stat-card::before, .record-card::before, .notice-card::before,
.chart-card::before, .link-card::before, .hero-card::before, .plan-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(132deg, rgba(255, 255, 255, .34), transparent 40%, rgba(255, 255, 255, .07) 72%, transparent);
}
[data-theme="dark"] .card, [data-theme="dark"] .stat-card, [data-theme="dark"] .record-card,
[data-theme="dark"] .notice-card, [data-theme="dark"] .chart-card, [data-theme="dark"] .link-card,
[data-theme="dark"] .hero-card, [data-theme="dark"] .plan-card {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015) 60%, rgba(255, 255, 255, .04)),
    var(--surface);
  border-color: var(--line-strong);
}
[data-theme="dark"] .card::before, [data-theme="dark"] .stat-card::before, [data-theme="dark"] .record-card::before,
[data-theme="dark"] .chart-card::before, [data-theme="dark"] .hero-card::before, [data-theme="dark"] .plan-card::before {
  background: linear-gradient(132deg, rgba(255, 255, 255, .1), transparent 42%, color-mix(in srgb, var(--primary) 4%, transparent) 76%, transparent);
}

.card, .chart-card { padding: var(--space-4) }
.stat-card { padding: var(--space-4); min-height: 104px }
.stat-label { display: block; font-size: var(--text-sm); color: var(--muted); margin-bottom: 6px }
.stat-value { font-size: var(--text-xl); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; overflow-wrap: anywhere }
.stat-foot { margin-top: 6px; font-size: var(--text-xs); color: var(--muted) }

/* ---------- Hero de status da manutenção ---------- */
.hero-card {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 46%),
    linear-gradient(150deg, color-mix(in srgb, var(--primary) 16%, var(--surface-strong)), var(--surface));
}
.hero-top { display: flex; align-items: center; gap: var(--space-4); justify-content: space-between }
.hero-identity { min-width: 0 }
.hero-identity .eyebrow { margin-bottom: 2px }
.hero-vehicle { font-size: var(--text-lg); font-weight: 760; letter-spacing: -.02em; overflow-wrap: anywhere }
.hero-odometer { display: flex; align-items: baseline; gap: 6px; margin-top: 2px }
.hero-odometer strong { font-size: var(--text-hero); font-weight: 780; letter-spacing: -.04em; line-height: 1.05 }
.hero-odometer span { font-size: var(--text-sm); color: var(--muted); font-weight: 640 }
.hero-ring { flex: 0 0 auto; position: relative; width: 96px; height: 96px }
.hero-ring svg { width: 100%; height: 100%; transform: rotate(-90deg) }
.hero-ring .ring-track { fill: none; stroke: var(--surface-inset); stroke-width: 9 }
.hero-ring .ring-value { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray .6s ease }
.hero-ring .ring-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1.1;
}
.hero-ring .ring-label b { font-size: var(--text-xl); font-weight: 800; letter-spacing: -.03em }
.hero-ring .ring-label small { font-size: var(--text-xs); color: var(--muted) }
.hero-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-4) }
.hero-metric { padding: 10px var(--space-3); border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line) }
.hero-metric span { display: block; font-size: var(--text-xs); color: var(--muted) }
.hero-metric b { display: block; font-size: var(--text-base); font-weight: 760; letter-spacing: -.02em; overflow-wrap: anywhere }
.hero-metric small { display: block; font-size: var(--text-xs); color: var(--muted) }

/* ---------- Chips de estado ---------- */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 760;
  letter-spacing: -.01em;
  white-space: nowrap;
  background: var(--status-neutral-soft);
  color: var(--status-neutral);
}
.status-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor }
.status-chip.is-ok { background: var(--status-ok-soft); color: var(--status-ok) }
.status-chip.is-due { background: var(--status-due-soft); color: var(--status-due) }
.status-chip.is-overdue { background: var(--status-overdue-soft); color: var(--status-overdue) }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  min-height: 34px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  font-size: var(--text-sm);
  font-weight: 680;
}

/* ---------- Barras de progresso de manutenção ---------- */
.progress { display: block; width: 100% }
.progress-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: 5px; font-size: var(--text-xs); color: var(--muted) }
.progress-head b { color: var(--text); font-weight: 700 }
.progress-track {
  position: relative;
  display: block;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-inset);
  overflow: hidden;
}
.progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--status-ok), color-mix(in srgb, var(--status-ok) 60%, var(--primary)));
  transition: width .5s ease;
}
.progress-fill.is-due { background: linear-gradient(90deg, var(--status-due), var(--status-due-strong)) }
.progress-fill.is-overdue { background: linear-gradient(90deg, var(--status-overdue), var(--status-overdue-strong)) }
.progress-fill.is-neutral { background: linear-gradient(90deg, var(--status-neutral), var(--primary)) }

/* ---------- Itens de plano ---------- */
.plan-list { display: flex; flex-direction: column; gap: var(--space-3) }
.plan-item { display: flex; flex-direction: column; gap: 7px }
.plan-item + .plan-item { padding-top: var(--space-3); border-top: 1px dashed var(--line-strong) }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) }
.plan-title { display: flex; align-items: center; gap: 7px; min-width: 0; font-weight: 700; font-size: var(--text-base) }
.plan-title .plan-icon { flex: 0 0 auto; filter: saturate(.9) }
.plan-meta { font-size: var(--text-xs); color: var(--muted); overflow-wrap: anywhere }
.plan-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-xs); color: var(--muted) }
.plan-foot b { color: var(--text) }

/* Card de plano na tela de planos */
.plan-card { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3) }
.plan-card .plan-actions { display: flex; gap: var(--space-2); flex-wrap: wrap }

/* Sugestões do catálogo preventivo */
.suggestion-list { display: grid; grid-template-columns: 1fr; gap: var(--space-2) }
.suggestion {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.suggestion .suggestion-icon { display: grid; place-items: center; color: var(--primary) }
.suggestion .suggestion-body { flex: 1 1 auto; min-width: 0 }
.suggestion .suggestion-body b { display: block; font-size: var(--text-base); font-weight: 700 }
.suggestion .suggestion-body small { display: block; color: var(--muted); font-size: var(--text-xs) }
.suggestion .button { flex: 0 0 auto; min-height: 40px; padding: 0 14px }

/* ---------- Botões e controles ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: 730;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.button-primary {
  background: linear-gradient(150deg, var(--primary), var(--primary-dark));
  color: var(--on-primary);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 26%, transparent), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.button-secondary {
  background: color-mix(in srgb, var(--surface-strong) 80%, transparent);
  border-color: var(--line-strong);
  color: var(--text);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.button-ghost { background: transparent; border-color: var(--line-strong); color: var(--primary) }
.button-danger { background: var(--status-overdue-soft); border-color: transparent; color: var(--status-overdue) }
.button-sm { min-height: 38px; padding: 0 var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-sm) }
.button:hover { box-shadow: var(--shadow-soft) }

.icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-strong) 78%, transparent);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 750;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.icon-button:hover { background: var(--surface-strong) }

/* Controle segmentado (filtros de manutenção) */
.segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none }
.segmented button {
  flex: 1 1 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
}
.segmented button.active { background: var(--surface-strong); color: var(--primary); box-shadow: var(--shadow-soft) }


/* ---------- Formulários ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3) }
.field > label { font-size: var(--text-sm); font-weight: 680; color: var(--muted) }
.form-control, .filter-input {
  width: 100%;
  min-height: 46px;
  padding: 10px var(--space-3);
  color: var(--text);
  background: color-mix(in srgb, var(--surface-strong) 84%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.form-control:focus, .filter-input:focus {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  outline: none;
}
textarea.form-control { min-height: 92px; resize: vertical }
.check-row { flex-direction: row; align-items: center; gap: var(--space-2); padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2) }
.check-row input { width: 20px; height: 20px; accent-color: var(--primary) }
.check-row span { font-size: var(--text-sm); font-weight: 640 }
.field-hint { font-size: var(--text-xs); color: var(--muted); margin: 0 }

/* ---------- Listas de registros ---------- */
.record-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
}
.record-main { flex: 1 1 auto; min-width: 0 }
.record-title { font-weight: 720; letter-spacing: -.015em; overflow-wrap: anywhere }
.record-meta { font-size: var(--text-xs); color: var(--muted); margin-top: 3px; overflow-wrap: anywhere }
.record-value { font-weight: 760; font-size: var(--text-base); text-align: right; white-space: nowrap }
.record-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px }
.record-actions button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--muted);
}
.record-actions button:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, transparent) }
.record-actions button[data-delete]:hover { color: var(--status-overdue); border-color: color-mix(in srgb, var(--status-overdue) 45%, transparent) }

/* ---------- Alertas e avisos ---------- */
.alert-list { display: flex; flex-direction: column; gap: var(--space-2) }
.alert-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--status-neutral-soft);
  border: 1px solid transparent;
}
.alert-item.is-overdue { background: var(--status-overdue-soft) }
.alert-item.is-due { background: var(--status-due-soft) }
.alert-body { flex: 1 1 auto; min-width: 0 }
.alert-body b { display: block; font-size: var(--text-base); font-weight: 700 }
.alert-body small { display: block; color: var(--muted); font-size: var(--text-xs) }
.alert-item a { flex: 0 0 auto; font-size: var(--text-sm); font-weight: 750; color: var(--primary) }

.notice-card { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--muted); border-radius: var(--radius) }
.notice-card strong { color: var(--text) }
.notice-card.danger { background: var(--status-overdue-soft); border-color: color-mix(in srgb, var(--status-overdue) 30%, transparent) }
.backup-warning { border-left: 3px solid var(--status-due) }

/* ---------- Cartões de atalho ---------- */
.link-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: 64px;
  border-radius: var(--radius);
  font-weight: 700;
}
.link-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-raised) }
/* O texto é o item flex do meio: precisa poder encolher para não estourar o card. */
.link-card > span:nth-child(2) { flex: 1 1 auto; min-width: 0; font-size: var(--text-base); line-height: 1.3; overflow-wrap: anywhere; }
.link-card small { display: block; font-weight: 500; color: var(--muted); overflow-wrap: anywhere; }
.link-icon {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
}
.link-chevron { flex: 0 0 auto; margin-left: auto; color: var(--muted); font-size: 20px; line-height: 1 }

/* ---------- Gráficos de barras ---------- */
.bar-list { display: flex; flex-direction: column; gap: 10px }
.bar-row { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: var(--space-2); font-size: var(--text-xs) }
.bar-row span { color: var(--muted) }
.bar-row b { font-weight: 720; white-space: nowrap }
.bar-track { height: 10px; border-radius: var(--radius-pill); background: var(--surface-inset); overflow: hidden }
.bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 55%, var(--accent))) }


/* ---------- Folhas inferiores (diálogos) ---------- */
dialog.sheet-dialog {
  width: min(100%, 560px);
  max-width: none;
  margin: auto auto 0;
  padding: 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(160deg, var(--surface-strong), var(--surface));
  color: var(--text);
  box-shadow: var(--shadow-raised);
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
}
dialog.sheet-dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px) }
dialog.sheet-dialog form { display: flex; flex-direction: column; max-height: min(88dvh, 780px) }
.sheet-grabber { width: 44px; height: 5px; margin: 10px auto 2px; border-radius: var(--radius-pill); background: var(--line-strong) }
.sheet-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4) 0 }
.sheet-heading h2 { font-size: var(--text-lg); font-weight: 760 }
.form-fields { padding: var(--space-4); overflow-y: auto; flex: 1 1 auto }
.sheet-actions {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) calc(var(--space-4) + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
}
.sheet-actions .button { flex: 1 1 auto }
.compact-dialog .quick-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2); padding: var(--space-4) }
.quick-options button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 96px;
  padding: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: 22px;
  font-weight: 700;
}
.quick-options button span { font-size: var(--text-sm); font-weight: 680 }
.quick-options button:hover { border-color: color-mix(in srgb, var(--primary) 45%, transparent); background: var(--primary-soft) }

/* ---------- Toasts ---------- */
.toast-region { position: fixed; z-index: 40; left: 50%; bottom: calc(var(--nav-height) + var(--safe-bottom) + 88px); transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: min(calc(100% - 32px), 460px); pointer-events: none }
.toast {
  padding: 12px var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  box-shadow: var(--shadow);
  font-size: var(--text-sm);
  font-weight: 640;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  animation: toast-in .22s ease both;
}
.toast.error { background: var(--status-overdue-soft); color: var(--status-overdue) }
.toast.info { background: var(--primary-soft); color: var(--primary) }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

/* ---------- Responsividade fina ---------- */
@media (max-width: 430px) {
  .hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .hero-metric:last-child { grid-column: 1 / -1 }
  .hero-ring { width: 84px; height: 84px }
  .page-heading { flex-direction: column; align-items: stretch }
  .page-heading .button { width: 100% }
  .record-card { flex-wrap: wrap }
  .record-value { text-align: left }
}
@media (min-width: 900px) {
  .hero-card { padding: var(--space-5) }
  .suggestion-list { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 360px) {
  .bottom-nav a small { font-size: 9.5px }
  .bottom-nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 68px minmax(0, 1fr) minmax(0, 1fr) }
  .nav-add { width: 58px; height: 58px }
  .brand span:last-child { display: none }
}



/* ---------- Ícones (SVG, sem emoji) ---------- */
.icon { width: 20px; height: 20px; flex: 0 0 auto }
.icon-sm { width: 14px; height: 14px }
.quick-options button .icon { color: var(--primary) }

/* ---------- Ajuste do modelo sobre o padrão ---------- */
.flag-note { display: flex; gap: var(--space-1); align-items: flex-start; margin-top: var(--space-1); color: var(--status-due); font-size: var(--text-xs) }
.flag-note .icon { margin-top: 1px }

/* ---------- Utilitários de espaçamento e grade ---------- */
.mt-1 { margin-top: var(--space-1) }
.mt-3 { margin-top: var(--space-3) }
.mt-4 { margin-top: var(--space-4) }
.mb-2 { margin-bottom: var(--space-2) }
.mb-3 { margin-bottom: var(--space-3) }
.mb-4 { margin-bottom: var(--space-4) }
.stats-grid.stats-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.stat-card.stat-card-compact { min-height: 0 }
.app-version { text-align: center; font-size: var(--text-xs); margin-top: var(--space-2) }

/* ---------- Larguras de barra em degraus de 5% ---------- */
.w-0 { width: 0% }
.w-5 { width: 5% }
.w-10 { width: 10% }
.w-15 { width: 15% }
.w-20 { width: 20% }
.w-25 { width: 25% }
.w-30 { width: 30% }
.w-35 { width: 35% }
.w-40 { width: 40% }
.w-45 { width: 45% }
.w-50 { width: 50% }
.w-55 { width: 55% }
.w-60 { width: 60% }
.w-65 { width: 65% }
.w-70 { width: 70% }
.w-75 { width: 75% }
.w-80 { width: 80% }
.w-85 { width: 85% }
.w-90 { width: 90% }
.w-95 { width: 95% }
.w-100 { width: 100% }

/* ---------- Aviso do catálogo no cadastro do veículo ---------- */
.catalog-hint { margin-top: var(--space-1) }
.catalog-hint[data-tone="ok"] { color: var(--status-ok) }
.catalog-hint[data-tone="flagged"] { color: var(--status-due) }

/* ---------- Falha ao iniciar (js/boot.js) ---------- */
.boot-error { display: flex; flex-direction: column; gap: var(--space-3); max-width: 560px; margin: var(--space-6) auto 0 }
.boot-code { display: block; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-inset); font-size: var(--text-sm); word-break: break-all }

/* ---------- Cadastro de veículo em etapas ---------- */
.wizard { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); overflow-y: auto; flex: 1 1 auto }
.wizard-title { margin: 0; font-size: var(--text-xl); font-weight: 750; letter-spacing: -.01em }
.wizard-label { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em }
.wizard-hint, .wizard-empty { margin: 0; font-size: var(--text-sm) }
.wizard-loading { padding: var(--space-5) 0; text-align: center }
.wizard-trail { display: flex; flex-wrap: wrap; gap: var(--space-2) }
.trail-chip {
  min-height: 32px; padding: 0 var(--space-3); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary);
  font: inherit; font-size: var(--text-sm); font-weight: 650; cursor: pointer;
}
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-2) }
.choice-list { display: flex; flex-direction: column; gap: var(--space-2) }
.choice {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 48px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--surface-strong); color: var(--text);
  font: inherit; font-size: var(--text-sm); font-weight: 650; text-align: center; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.choice small { color: var(--muted); font-size: var(--text-xs); font-weight: 500 }
.choice:hover { border-color: color-mix(in srgb, var(--primary) 45%, transparent) }
.choice:focus-visible, .trail-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px }
.choice.is-selected { border-color: var(--primary); background: var(--primary-soft); color: var(--primary) }
.choice-row { flex-direction: row; justify-content: space-between; text-align: left; gap: var(--space-3) }
.fuel-badge {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-pill);
  background: var(--primary-soft); color: var(--primary); font-size: var(--text-xs); font-weight: 700; white-space: nowrap;
}
.fuel-badge.is-neutral { background: var(--status-neutral-soft); color: var(--status-neutral) }
.wizard-more { border-top: 1px solid var(--line-strong); padding-top: var(--space-3) }
.wizard-more > summary { cursor: pointer; color: var(--primary); font-size: var(--text-sm); font-weight: 650; margin-bottom: var(--space-3) }
.wizard-more[open] { display: flex; flex-direction: column; gap: var(--space-3) }
.link-button { align-self: flex-start; padding: var(--space-1) 0; border: 0; background: none; color: var(--primary); font: inherit; font-size: var(--text-sm); font-weight: 650; cursor: pointer }
.vehicle-summary { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius); background: var(--surface-inset) }
.vehicle-summary strong { display: block; font-size: var(--text-lg) }
.vehicle-summary small { display: block }
.vehicle-summary-icon { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary) }
.summary-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2) }
.field-label { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 650 }
.segmented-fill button { flex: 1 1 0 }
.km-input { font-size: var(--text-2xl); font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums }
.wizard-error { margin: 0; color: var(--status-overdue); font-size: var(--text-sm); font-weight: 650 }
[hidden] { display: none !important }
.wizard-dialog form { height: min(88dvh, 780px) }

/* ==========================================================================
   Modais padronizados
   Celular: folha que sobe de baixo. Tablet/desktop (>= 720px): janela central.
   ========================================================================== */
dialog.sheet-dialog form { min-height: 0 }
.sheet-heading { padding-bottom: var(--space-2) }
.sheet-actions { position: sticky; bottom: 0; padding-bottom: calc(var(--space-3) + var(--safe-bottom)) }
dialog.sheet-dialog[open] { animation: sheet-up .28s cubic-bezier(.2, .8, .2, 1) }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes sheet-pop { from { transform: scale(.97); opacity: 0 } to { transform: none; opacity: 1 } }

@media (min-width: 720px) {
  dialog.sheet-dialog {
    width: min(100% - 48px, 560px);
    margin: auto;
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius-xl);
  }
  dialog.sheet-dialog[open] { animation-name: sheet-pop; animation-duration: .2s }
  dialog.sheet-dialog form { max-height: min(86dvh, 760px) }
  dialog.sheet-dialog .sheet-grabber { display: none }
  .sheet-heading { padding-top: var(--space-4) }
  .sheet-actions { padding-bottom: var(--space-4) }
  .sheet-actions .button { flex: 0 0 auto; min-width: 128px }
  .sheet-actions { justify-content: flex-end }
  .wizard-dialog form { height: min(86dvh, 720px) }
  .confirm-dialog { width: min(100% - 48px, 420px) }
}
@media (prefers-reduced-motion: reduce) { dialog.sheet-dialog[open] { animation: none } }

.confirm-dialog form { height: auto }
.confirm-message { margin: 0; padding: 0 var(--space-4) var(--space-3); font-size: var(--text-sm); line-height: 1.5 }

/* ---------- Campos inteligentes ---------- */
.form-fields { display: flex; flex-direction: column; gap: var(--space-4) }
.field-row-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-3) }
.field-row-wrap > .field { grid-column: 1 / -1; margin: 0 }
.field-row-wrap > .field-half { grid-column: auto }
.form-fields .field { margin-bottom: 0 }
.field .field-label { margin-bottom: 0; color: var(--muted) }
.req { color: var(--primary) }
.form-context { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--surface-inset); color: var(--muted); font-size: var(--text-sm); font-weight: 600 }
.form-context .icon { color: var(--primary) }
.choice-grid-compact { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) }
.choice-grid-compact .choice { min-height: 44px; flex-direction: row; gap: var(--space-1) }
.input-affix { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-solid); transition: border-color .15s ease }
.input-affix:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft) }
.input-affix .form-control { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; box-shadow: none }
.input-affix .form-control:focus { box-shadow: none; outline: none }
.affix { flex: 0 0 auto; padding: 0 var(--space-3); color: var(--muted); font-size: var(--text-sm); font-weight: 650 }
.input-affix.is-hero .form-control { min-height: 56px; font-size: var(--text-2xl); font-weight: 750; font-variant-numeric: tabular-nums }
.input-affix.is-hero .affix { font-size: var(--text-lg) }
.km-field { font-variant-numeric: tabular-nums }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); font-size: var(--text-sm); font-weight: 650; cursor: pointer }
.switch { appearance: none; position: relative; flex: 0 0 44px; width: 44px; height: 26px; margin: 0; border-radius: var(--radius-pill); background: var(--line-strong); cursor: pointer; transition: background-color .2s ease }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-solid); box-shadow: var(--shadow-soft); transition: transform .2s ease }
.switch:checked { background: var(--primary) }
.switch:checked::after { transform: translateX(18px) }
.switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px }
.field-error { margin: 0; color: var(--status-overdue); font-size: var(--text-xs); font-weight: 650 }
.field.has-error .input-affix, .field.has-error > .form-control { border-color: var(--status-overdue) }
.field.has-error .choice-grid .choice { border-color: color-mix(in srgb, var(--status-overdue) 40%, var(--line-strong)) }

/* ---------- Bloco recolhível (Mais detalhes, Todas as marcas) ---------- */
.disclosure { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2) }
.disclosure > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-3); list-style: none; cursor: pointer;
  color: var(--text); font-size: var(--text-sm); font-weight: 650;
}
.disclosure > summary::-webkit-details-marker { display: none }
.disclosure > summary .count { margin-left: auto; color: var(--muted); font-weight: 600 }
.disclosure-icon { color: var(--muted); transition: transform .2s ease }
.disclosure[open] > summary .disclosure-icon { transform: rotate(90deg) }
.disclosure[open] > summary { border-bottom: 1px solid var(--line-strong) }
.disclosure-body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-3) }

/* ---------- Ação secundária de largura total ---------- */
.button-ghost-row {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%;
  min-height: 48px; padding: 0 var(--space-3); border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: transparent; color: var(--muted); font: inherit; font-size: var(--text-sm); font-weight: 650; cursor: pointer;
}
.button-ghost-row:hover { border-color: var(--primary); color: var(--primary) }
.quick-options button .icon { width: 24px; height: 24px }

/* ==========================================================================
   v2.0 (000007) — ajustes mobile-first
   ========================================================================== */
.form-stack { display: flex; flex-direction: column; gap: var(--space-5) }
.form-stack > .field { margin: 0 }
.form-fields { gap: var(--space-5) }

/* Inputs dentro de prefixo/sufixo: sem caixa interna, sem vidro. */
.input-affix .form-control, .input-affix .form-control:focus {
  background: none; border: 0; box-shadow: none; outline: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.input-affix .form-control::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent) }
.input-affix[hidden] { display: none }

/* Foco só por teclado: sem anel ao tocar ou ao abrir um modal. */
.icon-button:focus:not(:focus-visible), .choice:focus:not(:focus-visible),
.segmented button:focus:not(:focus-visible), .sheet-heading h2:focus { outline: none; box-shadow: none }

/* ---------- Calendário próprio ---------- */
.choice-other { gap: var(--space-2) }
.calendar { margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-solid) }
.calendar[hidden] { display: none }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2) }
.cal-title { font-size: var(--text-base); font-weight: 750; text-transform: capitalize }
.cal-nav { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--primary); cursor: pointer }
.cal-nav:disabled { color: var(--line-strong); cursor: default }
.cal-nav:not(:disabled):hover { background: var(--primary-soft) }
.icon-flip { transform: rotate(180deg) }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center }
.cal-weekday { padding: var(--space-1) 0; color: var(--muted); font-size: var(--text-xs); font-weight: 700 }
.cal-day {
  aspect-ratio: 1; min-height: 40px; border: 0; border-radius: var(--radius-pill); background: transparent;
  color: var(--text); font: inherit; font-size: var(--text-base); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
.cal-day.is-out { color: var(--muted); opacity: .45 }
.cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--primary) }
.cal-day.is-selected { background: var(--primary); color: var(--on-primary); box-shadow: none }
.cal-day:disabled { opacity: .25; cursor: default }
.cal-day:not(:disabled):not(.is-selected):hover { background: var(--primary-soft) }

/* ---------- Lista de opções (itens do plano) ---------- */
.option-list { display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-solid); overflow: hidden }
.disclosure-body.option-list { gap: 0; padding: 0; border: 0; border-radius: 0; background: transparent }
.option-row {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 60px;
  padding: var(--space-2) var(--space-3); border: 0; border-bottom: 1px solid var(--line-strong);
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.option-list > .option-row:last-child { border-bottom: 0 }
.option-icon { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary) }
.option-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0 }
.option-text b { font-size: var(--text-sm); font-weight: 650 }
.option-text small { color: var(--muted); font-size: var(--text-xs) }
.option-check { display: grid; place-items: center; flex: 0 0 24px; height: 24px; border: 1.5px solid var(--line-strong); border-radius: 50%; color: transparent }
.option-row.is-selected { background: var(--primary-soft) }
.option-row.is-selected .option-check { border-color: var(--primary); background: var(--primary); color: var(--on-primary) }
.button-ghost-row.is-active { border-style: solid; border-color: var(--primary); color: var(--primary) }
[data-field="item"] > .form-control { margin-top: var(--space-1) }

/* ---------- Abastecimento ---------- */
[data-field="fuelAmount"] .segmented { margin-bottom: var(--space-1) }
[data-amount-result] { min-height: 1.2em; font-weight: 600; color: var(--primary) }
.field-hero .field-label { color: var(--text) }
.form-stack > .switch-row { margin: 0 }

/* ---------- Configurações ---------- */
.settings { display: flex; flex-direction: column; gap: var(--space-5); max-width: 640px; margin: 0 auto; padding-bottom: var(--space-6) }
.settings-group { display: flex; flex-direction: column; gap: var(--space-2) }
.settings-title { margin: 0 var(--space-3); color: var(--muted); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em }
.settings-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-strong); box-shadow: var(--shadow-soft) }
.settings-row {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 60px;
  padding: var(--space-2) var(--space-4); border: 0; border-bottom: 1px solid var(--line-strong);
  background: transparent; color: var(--text); font: inherit; text-align: left;
}
.settings-card > .settings-row:last-child { border-bottom: 0 }
.settings-row.is-action { cursor: pointer }
.settings-row.is-action:hover { background: var(--surface-inset) }
.settings-row.is-stack { flex-wrap: wrap }
.settings-row.is-stack .meter { flex: 1 0 100%; margin: 0 0 var(--space-2) calc(32px + var(--space-3)) }
.settings-icon { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary) }
.settings-icon .icon { width: 18px; height: 18px }
.settings-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0 }
.settings-text b { font-size: var(--text-base); font-weight: 600 }
.settings-text small { color: var(--muted); font-size: var(--text-xs) }
.settings-chevron { color: var(--muted) }
.settings-row.is-danger, .settings-row.is-danger .settings-icon { color: var(--status-overdue) }
.settings-row.is-danger .settings-icon { background: var(--status-overdue-soft) }
.settings-foot { margin: 0 var(--space-3); color: var(--muted); font-size: var(--text-xs) }
.segmented-sm { flex: 0 0 auto }
.segmented-sm button { min-height: 32px; padding: 0 var(--space-3); font-size: var(--text-xs) }
.meter { height: 6px; border-radius: var(--radius-pill); background: var(--surface-inset); overflow: hidden }
.meter-fill { display: block; height: 100%; border-radius: inherit; background: var(--primary) }
.settings .app-version { margin: 0 }

/* ==========================================================================
   v2.0 (000008)
   ========================================================================== */

/* Badges que se ajustam ao texto: nenhum rótulo estoura (ex.: Financiamento/parcela). */
.choice-grid-compact { display: flex; flex-wrap: wrap; gap: var(--space-2) }
.choice-grid-compact .choice { flex: 1 1 auto; min-width: 88px; padding: 0 var(--space-4); white-space: nowrap }
.choice { -webkit-tap-highlight-color: transparent; touch-action: manipulation }
.choice:active { transform: scale(.97) }

/* Carroceria no cadastro: glifo em cima, nome embaixo. */
.choice-grid-compact.body-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) }
.choice-body { flex-direction: column; min-height: 72px; gap: var(--space-1); padding: var(--space-2) }
.choice-body .vehicle-glyph { width: 40px; height: 22px }

/* ---------- Glifo do veículo ---------- */
.vehicle-glyph { flex: 0 0 auto; width: 32px; height: 18px; color: var(--primary) }
.hero-vehicle { display: flex; align-items: center; gap: var(--space-2) }
.hero-vehicle .vehicle-glyph { width: 44px; height: 24px }
.record-title { display: flex; align-items: center; gap: var(--space-2) }
.record-title .vehicle-glyph { width: 30px; height: 17px }
.form-context .vehicle-glyph { width: 28px; height: 16px }
.vehicle-summary-icon .vehicle-glyph { width: 34px; height: 19px }

/* ---------- Lista suspensa própria ---------- */
.dropdown { position: relative; min-width: 0 }
.dropdown-trigger {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 46px;
  padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface-solid); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.dropdown-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px }
.dropdown.is-open .dropdown-trigger { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft) }
.dropdown-current { display: flex; flex: 1 1 auto; align-items: center; gap: var(--space-2); min-width: 0 }
.dropdown-text { display: flex; flex-direction: column; min-width: 0 }
.dropdown-text b { overflow: hidden; font-size: var(--text-sm); font-weight: 650; white-space: nowrap; text-overflow: ellipsis }
.dropdown-text b.is-placeholder { color: var(--muted); font-weight: 500 }
.dropdown-text small { overflow: hidden; color: var(--muted); font-size: var(--text-xs); white-space: nowrap; text-overflow: ellipsis }
.dropdown-current .dropdown-text small { display: none }
.dropdown-chevron { color: var(--muted); transform: rotate(90deg); transition: transform .2s ease }
.dropdown.is-open .dropdown-chevron { transform: rotate(-90deg) }
.dropdown-glyph { display: grid; place-items: center; flex: 0 0 32px; color: var(--primary) }
.dropdown-menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; min-width: 220px;
  max-height: min(50vh, 340px); margin: 0; padding: var(--space-1); overflow-y: auto; list-style: none;
  border: 1px solid var(--line); border-radius: var(--radius-md); outline: none;
  background: var(--surface-strong); box-shadow: var(--shadow-raised);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  transform-origin: top center; animation: dropdown-in .18s cubic-bezier(.2, .8, .2, 1);
}
.dropdown.opens-up .dropdown-menu { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center }
.dropdown-menu[hidden] { display: none }
@keyframes dropdown-in { from { opacity: 0; transform: translateY(-4px) scale(.98) } to { opacity: 1; transform: none } }
.dropdown-option { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer }
.dropdown-option .dropdown-text { flex: 1 1 auto }
.dropdown-option.is-active, .dropdown-option:hover { background: var(--surface-inset) }
.dropdown-check { display: grid; place-items: center; color: var(--primary); opacity: 0 }
.dropdown-option.is-selected .dropdown-check { opacity: 1 }
.dropdown-option.is-selected b { color: var(--primary) }

/* Variante do topo: pílula de vidro, menu mais largo que o botão. */
.dropdown-topbar .dropdown-trigger { min-height: 44px; border-radius: var(--radius-pill); background: var(--surface); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)) }
.dropdown-topbar .dropdown-menu { left: auto; right: 0; width: max(100%, 280px) }
.dropdown-topbar .dropdown-glyph { flex-basis: 30px }
@media (prefers-reduced-motion: reduce) { .dropdown-menu { animation: none } .choice:active { transform: none } }

/* ==========================================================================
   v2.0 (000009) — várias categorias, anexos e leitura de documentos
   ========================================================================== */

/* Escolha múltipla: o check aparece só no que está marcado. */
.choice-multi { gap: var(--space-1) }
.choice-multi .choice-tick { display: none }
.choice-multi.is-selected .choice-tick { display: block }

/* Tipos de documento com clipe; verde quando o arquivo está anexado. */
.choice-doc { gap: var(--space-1) }
.choice-doc .icon { color: var(--muted) }
.choice-doc.is-selected .icon { color: var(--primary) }
.choice-doc.has-file { border-color: var(--status-ok); background: var(--status-ok-soft); color: var(--status-ok) }
.choice-doc.has-file .icon { color: var(--status-ok) }
.doc-status:empty { display: none }
.doc-status { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2) }
.doc-file-line { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--text-sm) }
.doc-file-line .icon { flex: 0 0 auto; color: var(--status-ok) }
.doc-file-name { overflow: hidden; font-weight: 650; white-space: nowrap; text-overflow: ellipsis }
.doc-file-line small { flex: 0 0 auto; color: var(--muted) }
.doc-progress { height: 6px; border-radius: var(--radius-pill); background: var(--surface-inset); overflow: hidden }
.doc-progress-bar { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width .3s ease }
.doc-progress-text, .doc-note { color: var(--muted); font-size: var(--text-xs) }
.doc-note.is-ok { color: var(--status-ok); font-weight: 650 }
.doc-review[hidden] { display: none }
.doc-review-card { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-3); border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line-strong)); border-radius: var(--radius-md); background: var(--primary-soft) }
.doc-review-head { display: flex; gap: var(--space-2); align-items: flex-start }
.doc-review-head .icon { flex: 0 0 auto; color: var(--primary) }
.doc-review-head strong { display: block; font-size: var(--text-sm) }
.doc-review-head small { color: var(--muted); font-size: var(--text-xs) }
.review-list { overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-solid) }
.review-row { display: flex; align-items: center; gap: var(--space-3); min-height: 54px; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line-strong); cursor: pointer }
.review-list > .review-row:last-child { border-bottom: 0 }
.review-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0 }
.review-text b { overflow-wrap: anywhere; font-size: var(--text-sm); font-weight: 650 }
.review-text small { color: var(--muted); font-size: var(--text-xs) }

/* Botão de anexo na lista de documentos. */
.record-actions .record-attach { display: inline-flex; align-items: center; gap: 4px; color: var(--status-ok) }

/* Diálogo de ações empilhadas (Abrir / Substituir / Excluir). */
.confirm-dialog.is-stacked .sheet-actions { flex-direction: column; align-items: stretch }
.confirm-dialog.is-stacked .sheet-actions .button { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; min-width: 0 }
.confirm-dialog .button-ghost { border: 0; background: transparent; color: var(--muted) }
.confirm-dialog .button-ghost:hover { color: var(--text) }
@media (min-width: 720px) { .confirm-dialog.is-stacked .sheet-actions .button { flex: 0 0 auto } }

/* ---------- Novidades da 2.0 ---------- */
/* Revisão: valor diferente do cadastro fica desligado e destacado. */
.review-row.is-conflict { background: var(--status-due-soft) }
.review-row.is-conflict .review-text small { color: var(--status-due) }
.doc-raw-box { background: var(--surface-solid) }
.doc-raw { margin: 0; max-height: 240px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: var(--text-xs); line-height: 1.5 }

/* ==========================================================================
   v2.0 (000011) — situação do veículo e vencimentos
   ========================================================================== */
.compliance-title { display: flex; align-items: center; gap: var(--space-2); margin: 0 }
.compliance-uf-tag { font-size: var(--text-xs); font-weight: 650 }
.compliance-uf { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); padding: var(--space-3); border-radius: var(--radius); background: var(--surface-inset) }
.compliance-uf small { font-size: var(--text-xs) }
.compliance-list { display: flex; flex-direction: column; overflow: visible; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-solid) }
.compliance-row { display: flex; gap: var(--space-3); padding: var(--space-3); border-bottom: 1px solid var(--line-strong) }
.compliance-list > .compliance-row:last-child { border-bottom: 0 }
.compliance-icon { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: var(--radius-sm); background: var(--status-neutral-soft); color: var(--status-neutral) }
.compliance-row.status-ok .compliance-icon { background: var(--status-ok-soft); color: var(--status-ok) }
.compliance-row.status-due .compliance-icon, .compliance-row.status-check .compliance-icon { background: var(--status-due-soft); color: var(--status-due) }
.compliance-row.status-overdue .compliance-icon { background: var(--status-overdue-soft); color: var(--status-overdue) }
.compliance-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0 }
.compliance-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) }
.compliance-head b { font-size: var(--text-base); font-weight: 700 }
.compliance-text small { color: var(--muted); font-size: var(--text-sm); line-height: 1.4 }
.compliance-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1) }
.compliance-extra { margin-top: var(--space-2) }
.status-chip.is-neutral { background: var(--status-neutral-soft); color: var(--status-neutral) }
.chip-button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface-strong);
  color: var(--text); font: inherit; font-size: var(--text-xs); font-weight: 650; cursor: pointer;
}
.chip-button .icon { color: var(--muted) }
.chip-button.is-primary { border-color: color-mix(in srgb, var(--primary) 40%, transparent); background: var(--primary-soft); color: var(--primary) }
.chip-button.is-primary .icon { color: var(--primary) }
.switch-text { display: flex; flex-direction: column; gap: 2px }
.switch-text small { color: var(--muted); font-size: var(--text-xs); font-weight: 500 }
.doc-licensing { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--status-ok-soft); color: var(--status-ok); font-size: var(--text-sm) }
.doc-licensing .icon { flex: 0 0 auto; margin-top: 2px }
.alerts-body { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-4) var(--space-3) }
.alerts-body p { margin: 0; font-size: var(--text-sm) }

/* ==========================================================================
   v2.0 (000012) — estado do carro e dados lidos
   ========================================================================== */
.uf-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--status-due) 45%, transparent); border-radius: var(--radius-md); background: var(--status-due-soft) }
.uf-banner-icon { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: var(--radius-sm); background: var(--surface-strong); color: var(--status-due) }
.uf-banner-text { display: flex; flex: 1 1 200px; flex-direction: column; gap: 2px; min-width: 0 }
.uf-banner-text b { font-size: var(--text-base) }
.uf-banner-text small { color: var(--muted); font-size: var(--text-sm) }
.uf-banner .button { flex: 0 0 auto }
@media (max-width: 480px) { .uf-banner .button { width: 100% } }
.compliance-uf-tag { min-height: 30px }
.uf-body { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-4) var(--space-3); overflow-y: auto }
.uf-lead { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.45 }
.uf-lead .icon { flex: 0 0 auto; color: var(--primary) }
.uf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--space-2) }
.uf-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 58px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-strong); color: var(--text); font: inherit; text-align: left; cursor: pointer }
.uf-choice b { font-size: var(--text-lg); font-weight: 750 }
.uf-choice small { color: var(--muted); font-size: var(--text-xs); line-height: 1.2 }
.uf-choice:hover, .uf-choice.is-selected { border-color: var(--primary); background: var(--primary-soft) }
.uf-choice.is-selected b { color: var(--primary) }
.uf-dialog form { max-height: min(88dvh, 760px) }
.review-row.is-static { cursor: default }
.review-row.is-static .icon { flex: 0 0 auto; color: var(--status-ok) }
.doc-data .review-text b { font-size: var(--text-sm) }

/* ==========================================================================
   v2.0 (000013) — selo de estado/placa e tempo para renovar
   ========================================================================== */
.plate-badge {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-2); width: 100%; margin-bottom: var(--space-3);
  padding: var(--space-2); border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line-strong)); border-radius: var(--radius-md);
  background: var(--primary-soft); color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.plate-badge-part { display: flex; flex: 1 1 140px; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--surface-strong) }
.plate-badge-part > .icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--primary) }
.plate-badge-part > span { display: flex; flex-direction: column; min-width: 0 }
.plate-badge-part small { color: var(--muted); font-size: var(--text-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .05em }
.plate-badge-part b { font-size: var(--text-2xl); font-weight: 800; line-height: 1.1; color: var(--primary) }
.plate-badge-part em { overflow: hidden; color: var(--muted); font-size: var(--text-sm); font-style: normal; white-space: nowrap; text-overflow: ellipsis }
.plate-badge-edit { align-self: center; padding: 0 var(--space-3); color: var(--primary); font-size: var(--text-sm); font-weight: 700 }
@media (max-width: 480px) { .plate-badge-edit { width: 100%; padding-bottom: var(--space-1); text-align: center } }
.time-left { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--surface-inset); color: var(--muted); font-size: var(--text-xs); font-weight: 700 }
.time-left.status-due, .time-left.status-check { background: var(--status-due-soft); color: var(--status-due) }
.time-left.status-overdue { background: var(--status-overdue-soft); color: var(--status-overdue) }
.time-left.status-ok { background: var(--status-ok-soft); color: var(--status-ok) }

/* ==========================================================================
   v2.0 (000015) — fundo, avisos, selo da marca e dashboards
   ========================================================================== */

/* Fundo: aurora (CSS) + grade de pontos (canvas) */
:root { --backdrop-dot: rgba(43, 43, 46, .14); --aurora-1: rgba(10, 111, 209, .18); --aurora-2: rgba(46, 168, 255, .14); --aurora-3: rgba(111, 195, 255, .10) }
[data-theme="dark"] { --backdrop-dot: rgba(228, 228, 236, .11); --aurora-1: rgba(46, 168, 255, .26); --aurora-2: rgba(46, 168, 255, .12); --aurora-3: rgba(111, 195, 255, .10) }
.app-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(160deg, var(--bg-glow, var(--bg)), var(--bg) 55%) }
.aurora { position: absolute; inset: -20% -10% auto -10%; height: 75vh; filter: blur(60px); opacity: .9 }
.aurora-band { position: absolute; border-radius: 50%; mix-blend-mode: normal }
.aurora-band-1 { left: -5%; top: 0; width: 60vw; height: 38vh; background: radial-gradient(closest-side, var(--aurora-1), transparent); animation: aurora-drift-1 26s ease-in-out infinite alternate }
.aurora-band-2 { right: -8%; top: 8%; width: 55vw; height: 34vh; background: radial-gradient(closest-side, var(--aurora-2), transparent); animation: aurora-drift-2 32s ease-in-out infinite alternate }
.aurora-band-3 { left: 25%; top: 22%; width: 50vw; height: 30vh; background: radial-gradient(closest-side, var(--aurora-3), transparent); animation: aurora-drift-3 38s ease-in-out infinite alternate }
@keyframes aurora-drift-1 { to { transform: translate3d(14vw, 6vh, 0) scale(1.15) } }
@keyframes aurora-drift-2 { to { transform: translate3d(-12vw, 10vh, 0) scale(.9) } }
@keyframes aurora-drift-3 { to { transform: translate3d(-8vw, -6vh, 0) scale(1.2) } }
.dot-grid { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 85%) }
@media (prefers-reduced-motion: reduce) { .aurora-band { animation: none } }
@media print { .app-backdrop { display: none } }

/* Avisos: quantos são, quando tocam e qual é o próximo */
.alerts-button { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; min-height: 48px; padding: 6px var(--space-2) 6px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-strong); color: var(--text); text-align: left; cursor: pointer }
.alerts-button:hover, .alerts-button:focus-visible { border-color: var(--primary); background: var(--primary-soft) }
.alerts-icon { position: relative; display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary) }
.alerts-count { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid var(--surface-strong); border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 800; line-height: 1 }
.alerts-text { display: flex; flex-direction: column; min-width: 0 }
.alerts-text b { font-size: var(--text-sm); font-weight: 700 }
.alerts-text small { color: var(--muted); font-size: var(--text-xs) }
.alerts-edit { display: inline-flex; align-items: center; gap: 2px; margin-left: var(--space-1); color: var(--primary); font-size: var(--text-xs); font-weight: 700; white-space: nowrap }

/* Selo da marca */
.brand-badge { display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line-strong)); border-radius: 30%; background: linear-gradient(150deg, var(--surface-strong), var(--primary-soft)); color: var(--primary); font-weight: 800; letter-spacing: -.02em; line-height: 1; overflow: hidden; vertical-align: middle }
.brand-badge-sm { width: 26px; height: 26px; font-size: 11px }
.brand-badge-md { width: 32px; height: 32px; margin-right: var(--space-2); font-size: 13px }
.brand-badge-lg { width: 44px; height: 44px; font-size: 16px }
.brand-badge.has-logo { background: #fff; border-color: var(--line) }
.brand-badge img { width: 78%; height: 78%; object-fit: contain }
.choice-with-lead { display: flex; align-items: center; gap: var(--space-2); text-align: left }
.trail-chip .brand-badge { width: 20px; height: 20px; margin-right: 6px; font-size: 9px }
.hero-vehicle .brand-badge, .compliance-title .brand-badge, .record-title .brand-badge { margin-right: 2px }
.dropdown-glyph .brand-badge { width: 28px; height: 28px }

/* Relatórios */
.report-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3) }
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface) }
.segmented-option { min-height: 36px; padding: 0 var(--space-3); border: 0; border-radius: calc(var(--radius) - 3px); background: transparent; color: var(--muted); font-size: var(--text-sm); font-weight: 650 }
.segmented-option.is-selected { background: var(--surface-strong); color: var(--primary); box-shadow: 0 1px 2px rgba(0, 0, 0, .08) }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3) }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface) }
.kpi-label { color: var(--muted); font-size: var(--text-sm) }
.kpi-value { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.kpi small { color: var(--muted); font-size: var(--text-xs) }
.kpi:first-child { border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); background: linear-gradient(150deg, var(--primary-soft), var(--surface)) }
.kpi:first-child .kpi-value { color: var(--primary) }
.insight-list { display: grid; gap: var(--space-2); margin-bottom: var(--space-3) }
.insight { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius-md); background: var(--surface) }
.insight b { display: block; font-size: var(--text-base) }
.insight p { margin: 2px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.45 }
.insight-icon { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50% }
.insight-warn { border-left-color: var(--status-due) } .insight-warn .insight-icon { background: var(--status-due-soft); color: var(--status-due) }
.insight-good { border-left-color: var(--status-ok) } .insight-good .insight-icon { background: var(--status-ok-soft); color: var(--status-ok) }
.insight-info { border-left-color: var(--primary) } .insight-info .insight-icon { background: var(--primary-soft); color: var(--primary) }
.chart-grid-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-3) }
@media (min-width: 900px) { .chart-grid-layout { grid-template-columns: 1fr 1fr } .chart-card-wide { grid-column: 1 / -1 } }
.chart-card .section-title { flex-wrap: wrap; gap: var(--space-2) }
.chart { display: block; width: 100%; height: auto; overflow: visible }
.chart-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4 }
.chart-axis { fill: var(--muted); font-size: 11px; font-weight: 600 }
.chart-axis-strong { fill: var(--primary) }
.chart-series-1 { fill: var(--primary); stroke: var(--primary); background: var(--primary) }
.chart-series-2 { fill: color-mix(in srgb, var(--primary) 55%, var(--surface-strong)); stroke: color-mix(in srgb, var(--primary) 55%, var(--surface-strong)); background: color-mix(in srgb, var(--primary) 55%, var(--surface-strong)) }
.chart-series-3 { fill: color-mix(in srgb, var(--status-due) 70%, var(--surface-strong)); stroke: color-mix(in srgb, var(--status-due) 70%, var(--surface-strong)); background: color-mix(in srgb, var(--status-due) 70%, var(--surface-strong)) }
.chart-hitbox { fill: transparent; stroke: none }
.chart-hit { cursor: pointer; outline: none }
.chart-bars .chart-hit rect:not(.chart-hitbox) { transform-box: fill-box; transform-origin: bottom; animation: bar-grow .55s cubic-bezier(.2, .8, .2, 1) both }
.chart-hit.is-active .chart-hitbox, .chart-hit:focus-visible .chart-hitbox { fill: var(--primary-soft) }
@keyframes bar-grow { from { transform: scaleY(0) } }
.chart-path { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round }
.chart-area { fill: color-mix(in srgb, var(--primary) 12%, transparent) }
.chart-dot { fill: var(--surface-strong); stroke: var(--primary); stroke-width: 2.5 }
.chart-hit.is-active .chart-dot { fill: var(--primary) }
.chart-tip { min-height: 1.4em; margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-sm) }
.chart-empty { margin: var(--space-4) 0 }
.chart-legend { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm) }
.chart-legend li { display: grid; grid-template-columns: 12px 1fr auto; column-gap: var(--space-2); align-items: center }
.chart-legend small { grid-column: 2 / -1; color: var(--muted) }
.chart-legend-inline { display: flex; flex-wrap: wrap; gap: var(--space-3) }
.chart-legend-inline li { display: inline-flex; gap: 6px }
.legend-swatch { width: 12px; height: 12px; border-radius: 4px }
.donut-wrap { display: grid; grid-template-columns: minmax(140px, 180px) 1fr; gap: var(--space-4); align-items: center }
@media (max-width: 420px) { .donut-wrap { grid-template-columns: 1fr } .donut-wrap .chart { max-width: 200px; margin: 0 auto } }
.chart-donut-track { fill: none; stroke: var(--surface-inset, var(--line)); stroke-width: 22 }
.chart-donut { fill: none; stroke-width: 22; stroke-linecap: butt; transition: stroke-dasharray .6s ease }
.donut-value { fill: var(--text); font-size: 20px; font-weight: 800 }
.report-empty { display: flex; gap: var(--space-4); align-items: flex-start }
.report-empty > .icon { flex: 0 0 auto; width: 40px; height: 40px; color: var(--primary) }
@media (prefers-reduced-motion: reduce) { .chart-bars .chart-hit rect { animation: none } }
.brand-badge.is-long { font-size: 8.5px; letter-spacing: -.04em }
.brand-badge-md.is-long { font-size: 10px }
.brand-badge-lg.is-long { font-size: 13px }
.kpi-value { font-size: clamp(20px, 5.6vw, var(--text-2xl)); overflow-wrap: anywhere }
@media (max-width: 480px) { .kpi-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2) } .kpi { padding: var(--space-3) } }
/* Logos na lista de marcas do cadastro: maiores, para os logotipos em texto (Dodge, Chrysler) ficarem legíveis */
.choice .brand-badge { width: 40px; height: 40px; border-radius: 12px; font-size: 14px }
.choice .brand-badge.has-logo img { width: 86%; height: 86% }
.brand-badge.has-logo { background: #fbfcfe }
[data-theme="dark"] .brand-badge.has-logo { border-color: transparent }

/* ==========================================================================
   v2.0 (000018) — situação do carro responsiva e financiamento
   ========================================================================== */

/* Linha: ícone | texto | ações. No celular as ações descem e ocupam a largura;
   a partir de 760 px vão para a direita e usam o espaço que sobrava. */
.compliance-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-2); align-items: start }
.compliance-row > .compliance-actions { grid-column: 2; margin-top: 0 }
.compliance-actions .alerts-button { width: 100% }
@media (min-width: 760px) {
  .compliance-row { grid-template-columns: 36px minmax(0, 1fr) minmax(300px, 380px); align-items: center }
  .compliance-row > .compliance-actions { grid-column: 3; grid-row: 1; flex-direction: column; align-items: stretch }
  .compliance-row > .compliance-actions .chip-button { justify-content: center }
}
.alerts-button { justify-content: space-between }
.alerts-text { flex: 1 1 auto }
.alerts-text b, .alerts-text small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
@media (max-width: 380px) { .alerts-text small { white-space: normal } }
.compliance-actions > .chip-button { min-height: 40px }
.chip-button.is-strong { background: var(--primary); border-color: var(--primary); color: var(--on-primary) }

/* Financiamento na lista */
.fin-progress { display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; color: var(--muted); font-size: var(--text-xs); font-weight: 650 }
.fin-progress progress { flex: 1 1 auto; max-width: 260px; height: 8px; border: 0; border-radius: 999px; background: var(--surface-inset); overflow: hidden; -webkit-appearance: none; appearance: none }
.fin-progress progress::-webkit-progress-bar { background: var(--surface-inset); border-radius: 999px }
.fin-progress progress::-webkit-progress-value { background: var(--primary); border-radius: 999px }
.fin-progress progress::-moz-progress-bar { background: var(--primary); border-radius: 999px }
.compliance-add { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3); border: 0; border-top: 1px dashed var(--line-strong); background: transparent; color: var(--text); text-align: left; cursor: pointer }
.compliance-add > .icon:first-child { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 9px; border-radius: var(--radius-sm); background: var(--primary-soft); color: var(--primary) }
.compliance-add > span { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0 }
.compliance-add small { color: var(--muted); font-size: var(--text-sm) }
.compliance-add > .icon:last-child { color: var(--muted) }
.compliance-add:hover { background: var(--primary-soft) }

/* Janela do financiamento */
.fin-body { display: flex; flex-direction: column; gap: var(--space-4); padding: 0 var(--space-4) var(--space-3); overflow-y: auto }
.fin-body .field { display: flex; flex-direction: column; gap: 6px; margin: 0 }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2) }
.chip-row .chip-button { min-height: 40px; padding: 0 var(--space-3) }
.chip-button.is-selected { border-color: var(--primary); background: var(--primary-soft); color: var(--primary) }
.mt-2 { margin-top: var(--space-2) }
.fin-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) }
@media (max-width: 360px) { .fin-pair { grid-template-columns: 1fr } }
.stepper { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-strong); overflow: hidden }
.stepper-button { height: 46px; border: 0; background: transparent; color: var(--primary); font-size: 22px; font-weight: 600 }
.stepper-button:active { background: var(--primary-soft) }
.stepper .stepper-value { border: 0; border-radius: 0; background: transparent; text-align: center; font-weight: 700; box-shadow: none }
.toggle-row { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 46px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-strong); color: var(--text); text-align: left; font-weight: 600 }
.toggle-row .choice-tick { opacity: .25 }
.toggle-row.is-selected { border-color: var(--primary); background: var(--primary-soft) }
.toggle-row.is-selected .choice-tick { opacity: 1; color: var(--primary) }
.fin-preview { margin: 0; padding: var(--space-3); border-radius: var(--radius); background: var(--surface-inset); color: var(--muted); font-size: var(--text-sm) }
.fin-preview b { color: var(--text) }
.financing-dialog form { max-height: min(92dvh, 820px) }
@media (max-width: 759px) {
  /* Celular: ações ocupam a linha inteira (sem o recuo do ícone) e o texto pode quebrar */
  .compliance-row > .compliance-actions { grid-column: 1 / -1 }
  .alerts-text small { white-space: normal }
  .compliance-actions > .chip-button { flex: 1 1 auto; justify-content: center }
}
/* Em telas estreitas o título vira só "4 avisos"; o detalhe fica na linha de baixo */
@media (max-width: 480px) { .alerts-title-rest { display: none } }

/* Painel: glifo do carro ao lado de "Veículo ativo"; na linha do nome, só o logo */
.eyebrow-with-glyph { display: inline-flex; align-items: center; gap: var(--space-2) }
.eyebrow-with-glyph .vehicle-glyph { width: 30px; height: 16px; color: var(--primary) }
.hero-vehicle .brand-badge-md { width: 34px; height: 34px; margin-right: 0 }
/* Cartões lado a lado com a mesma altura (Finanças e Documentos e lembretes) */
.content-grid { align-items: stretch }
.content-grid > .card, .content-grid > .chart-card { display: flex; flex-direction: column; height: 100% }
.content-grid > .card > .inline-actions:last-child { margin-top: auto; padding-top: var(--space-3) }
/* Anel do painel agora é um link (vai para Documentos quando há algo a resolver) */
a.hero-ring { display: block; color: inherit; text-decoration: none; border-radius: 50% }
a.hero-ring:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px }
a.hero-ring:active { transform: scale(.96) }
.hero-ring.tone-overdue .ring-label small { color: var(--status-overdue); font-weight: 700 }

/* ==========================================================================
   v2.0 (000021) — lembrete de km e rodapé MAGU
   ========================================================================== */
.km-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line-strong)); border-radius: var(--radius); background: var(--primary-soft) }
.km-banner-icon { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: var(--radius-sm); background: var(--surface-strong); color: var(--primary) }
.km-banner-text { display: flex; flex: 1 1 220px; flex-direction: column; min-width: 0 }
.km-banner-text small { color: var(--muted); font-size: var(--text-sm) }
.km-banner-actions { display: flex; gap: var(--space-2) }
@media (max-width: 520px) { .km-banner-actions { width: 100% } .km-banner-actions .button { flex: 1 1 0 } }
.km-body { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-4) var(--space-3) }
.km-body .muted { margin: 0; font-size: var(--text-sm) }
.km-input { font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.km-error { margin: 0; color: var(--status-overdue); font-size: var(--text-sm); font-weight: 600 }

/* Rodapé padrão dos produtos MAGU ("Powered by Magu") */
.app-footer { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-4) calc(var(--nav-height) + 48px + var(--safe-bottom)); color: var(--muted); font-size: var(--text-sm); text-align: center }
.app-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-3) }
.app-footer-links a { color: var(--primary); font-weight: 600; text-decoration: none }
@media print { .app-footer { display: none } }

/* Alvos de toque de 44 px (regra do MAGU Design System; conferido pela auditoria do site) */
.icon-button, .language-toggle { min-width: 44px; min-height: 44px }
.topbar .brand { display: inline-flex; align-items: center; min-height: 44px }
.link-more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px }
.button-sm { min-height: 44px }
.app-footer-links a { display: inline-flex; align-items: center; min-height: 44px }
/* Celular: o seletor de veículo precisa do espaço; a marca fica só com o ícone */
@media (max-width: 430px) { .topbar .brand span:last-child { display: none } }
/* Alvos de toque de 44 px também em chips, controles segmentados e ações das listas */
.chip-button, .compliance-actions > .chip-button { min-height: 44px }
.segmented-option, .segmented button, .segmented-sm button { min-height: 44px }
.record-actions button, .record-attach { min-height: 44px; min-width: 44px }

/* Conta e sincronização */
.account-body { display: grid; gap: var(--space-3); padding: 0 var(--space-4) var(--space-3) }
.password-wrap { position: relative; display: block }
.password-wrap .form-control { padding-right: 52px }
.password-toggle { position: absolute; right: 0; top: 50%; transform: translateY(-50%); border: 0; background: transparent }
.account-error { margin: 0; color: var(--status-overdue); font-size: var(--text-sm); font-weight: 640 }
.account-switch { margin: 0; text-align: center; font-size: var(--text-sm); color: var(--text-muted) }
.link-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 700; cursor: pointer }
.account-actions { display: flex; gap: var(--space-2); width: 100%; margin-top: var(--space-2) }
.account-actions .button { flex: 1 }
.recovery-code { margin: 0; padding: var(--space-3); border: 1px dashed var(--primary); border-radius: var(--radius); background: var(--primary-soft); font: 700 1.25rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-align: center; word-break: break-all; user-select: all }
.settings-note { margin: 0; padding: var(--space-2) var(--space-3) var(--space-3); color: var(--text-muted); font-size: var(--text-xs) }
.settings-text small.is-error { color: var(--status-overdue) }
.button-danger { background: var(--status-overdue); color: #fff; border-color: transparent }
.button.is-loading { opacity: .7; pointer-events: none }


/* ---------- Novidades: janela flutuante com folhas ---------- */
dialog.float-dialog {
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(165deg, var(--surface-strong), var(--surface));
  color: var(--text);
  box-shadow: var(--shadow-raised), 0 30px 80px -30px rgba(10, 111, 209, .45);
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  overflow: hidden;
}
dialog.float-dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px) }
dialog.float-dialog[open] { animation: float-in .32s cubic-bezier(.2, .8, .2, 1) }
@keyframes float-in { from { transform: translateY(8px) scale(.96); opacity: 0 } to { transform: none; opacity: 1 } }
.wn-card { display: flex; flex-direction: column; max-height: calc(100dvh - 32px) }
.wn-header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2) var(--space-4) }
.wn-header h2 { flex: 1; margin: 0; color: var(--muted); font-size: var(--text-sm); font-weight: 700 }
.wn-counter { color: var(--muted); font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums }
.wn-close { border: 0; background: transparent }
.wn-progress { height: 3px; margin: 0 var(--space-4); border-radius: 99px; background: var(--line); overflow: hidden }
.wn-progress span { --progress: 0; display: block; height: 100%; width: calc(var(--progress) * 100%); border-radius: inherit; background: var(--primary); transition: width .35s ease }
.wn-viewport { overflow: hidden; touch-action: pan-y; flex: 1 1 auto; min-height: 0 }
.wn-track { --page: 0; display: flex; height: 100%; transform: translateX(calc(var(--page) * -100%)); transition: transform .4s cubic-bezier(.22, .8, .24, 1) }
.wn-page { flex: 0 0 100%; min-width: 0; box-sizing: border-box; height: min(470px, calc(100dvh - 190px)); overflow-y: auto; padding: var(--space-4) var(--space-4) var(--space-3) }
.wn-hero { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4) }
.wn-icon { display: grid; place-items: center; flex: 0 0 56px; height: 56px; border-radius: 18px; background: radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, .22), transparent 60%), var(--primary); color: #fff; box-shadow: 0 10px 24px -10px var(--primary) }
.wn-icon .icon { width: 28px; height: 28px }
.wn-title { margin: 0; font-size: 1.3rem; line-height: 1.2; font-weight: 760; letter-spacing: -.01em }
.wn-part { margin: 4px 0 0; color: var(--primary); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase }
.wn-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none }
.wn-list li { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); font-size: var(--text-sm); line-height: 1.45 }
.wn-check { display: grid; place-items: center; flex: 0 0 22px; height: 22px; margin-top: 1px; border-radius: 99px; background: var(--primary-soft); color: var(--primary) }
.wn-check .icon { width: 14px; height: 14px }
.wn-cover { text-align: center; display: flex; flex-direction: column; align-items: center }
.wn-app-icon { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 14px 30px -12px var(--primary) }
.wn-eyebrow { margin: var(--space-3) 0 2px; color: var(--primary); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase }
.wn-lead { margin: var(--space-2) 0 var(--space-3); color: var(--muted); font-size: var(--text-sm); line-height: 1.5 }
.wn-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; margin: 0; padding: 0; list-style: none; text-align: left }
.wn-topics li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--text-xs); font-weight: 650; line-height: 1.25 }
.wn-topic-icon { display: grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 8px; background: var(--primary-soft); color: var(--primary) }
.wn-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--space-2); padding: var(--space-3) var(--space-4) calc(var(--space-4) + var(--safe-bottom, 0px)); border-top: 1px solid var(--line) }
@media (prefers-reduced-motion: reduce) { .wn-track, .wn-progress span, dialog.float-dialog[open] { transition: none; animation: none } }/* Capa compacta: cabe sem rolar mesmo no iPhone SE */
.wn-cover { padding-top: var(--space-3) }
.wn-app-icon { width: 60px; height: 60px; border-radius: 16px }
.wn-eyebrow { margin-top: var(--space-2) }
.wn-lead { margin: 6px 0 var(--space-3); font-size: var(--text-xs) }
.wn-topics { gap: 5px }
.wn-topics li { padding: 6px 8px; gap: 6px }
.wn-topic-icon { flex-basis: 22px; height: 22px }
@media (max-height: 700px) { .wn-cover .wn-lead { display: none } }

/* Novidades: leitura confortável (texto do corpo em 1rem, títulos maiores) */
.wn-header h2 { font-size: .9375rem }
.wn-counter { font-size: .875rem }
.wn-title { font-size: 1.5rem }
.wn-part { font-size: .8125rem }
.wn-list li { font-size: 1.0625rem; line-height: 1.45; padding: 14px }
.wn-check { flex-basis: 24px; height: 24px; margin-top: 2px }
.wn-lead { font-size: 1rem }
.wn-eyebrow { font-size: .8125rem }
.wn-topics li { font-size: .875rem }
.wn-cover .wn-lead { font-size: .9375rem; margin-bottom: var(--space-2) }
.wn-cover .wn-title { font-size: 1.375rem }
.wn-topics li { font-size: .8125rem; padding: 5px 8px }
.wn-page { height: min(520px, calc(100dvh - 180px)) }