/* Fleetlog – padronização visual transversal
   Arquivo criado na refatoração 2026-05-20 para reduzir CSS duplicado nos templates. */
:root {
  --fleetlog-brand: #cc1319;
  --fleetlog-brand-dark: #a70f14;
  --fleetlog-bg: #f3f4f6;
  --fleetlog-card: #ffffff;
  --fleetlog-line: #e5e7eb;
  --fleetlog-text: #1f2937;
  --fleetlog-muted: #6b7280;
  --fleetlog-radius: 24px;
  --fleetlog-shadow: 0 18px 45px rgba(15, 23, 42, .08);
  --fleetlog-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
}
body.app-shell, body.page-standard {
  background: var(--fleetlog-bg);
  color: var(--fleetlog-text);
  font-family: var(--fleetlog-font);
}
.fleet-page-frame, .hero-panel, .metric-card, .filter-panel, .table-card, .app-panel, .dashboard-card {
  border-radius: var(--fleetlog-radius);
  border: 1px solid rgba(226, 232, 240, .88);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--fleetlog-shadow);
}
.section-chip, .eyebrow, .app-kicker {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 999px;
  background: rgba(204, 19, 25, .08);
  color: var(--fleetlog-brand);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.app-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(8px);
}
.app-modal-overlay.hidden { display: none !important; }
.app-modal-card {
  border-radius: 28px;
  border: 1px solid rgba(226, 232, 240, .9);
  background: #fff;
  box-shadow: 0 24px 72px rgba(15, 23, 42, .22);
  overflow: hidden;
}
.app-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, var(--fleetlog-brand), var(--fleetlog-brand-dark));
  color: #fff;
}
.app-modal-title, .vehicle-modal-title, .multa-create-title, .multa-info-title, .vehicle-info-title {
  margin: 0;
  font-family: var(--fleetlog-font);
  font-size: 1.08rem;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -.018em;
  text-transform: none;
}
.app-modal-subtitle, .vehicle-modal-subtitle {
  margin: .2rem 0 0;
  color: rgba(255, 255, 255, .92);
  font-size: .9rem;
  font-weight: 500;
  text-transform: none;
}
.app-modal-body { padding: 1rem 1.25rem; }
.app-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(226, 232, 240, .9);
  background: #f8fafc;
}
.app-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
}
.app-modal-close:hover { background: rgba(255, 255, 255, .26); }
input, select, textarea, button { font-family: var(--fleetlog-font); }
button, .btn, .app-btn { border-radius: 999px; }
@media (max-width: 768px) {
  .app-modal-card { max-height: calc(100dvh - 1rem); border-radius: 24px 24px 0 0; }
  .app-modal-footer { flex-direction: column-reverse; }
  .app-modal-footer > * { width: 100%; justify-content: center; }
}