/* Identidade visual TMZX / Tira Multa aplicada ao Frotas.
   Camada final de sobrescrita: tokens, fontes e componentes seguem o site
   tiramulta.app.br (tailwind.config.js e brand-tokens.ts do e-commerce).
   Fundo escuro na landing e na autenticacao; area de trabalho clara com os
   acentos da marca (amarelo #F8C800 e azul #60A0F0 sobre navy #080C1E). */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;700&display=swap');

:root {
  --tm-ground: #080C1E;
  --tm-surface: #0E1430;
  --tm-surface-2: #182247;
  --tm-surface-3: #121A3B;
  --tm-line: #222D55;
  --tm-line-strong: #2E3A66;
  --tm-ink: #EAEFFB;
  --tm-ink-2: #B6C2E2;
  --tm-muted: #8894BA;
  --tm-blue: #60A0F0;
  --tm-blue-bright: #8CB8F5;
  --tm-blue-soft: #121A3B;
  --tm-amber: #F8C800;
  --tm-amber-hover: #E3B800;
  --tm-amber-on: #10193A;
  --tm-gold: #F4AE12;
  --tm-gold-400: #F7C24A;
  --tm-gold-300: #FAD57E;
  --tm-success: #2FBC8A;
  --tm-warning: #E0A43B;
  --tm-danger: #E06A6A;
  --tm-info: #4EA5D9;
  /* superficies claras (area de trabalho) */
  --tm-navy: #152B47;
  --tm-navy-2: #24405E;
  --tm-slate: #718096;
  --tm-slate-300: #CBD5E0;
  --tm-link: #1E5BB8;
  --tm-link-soft: #EAF1FC;
  --tm-amber-soft: #FFF6D1;
  --tm-amber-text: #6B4E00;
  --tm-radius-control: 14px;
  --tm-radius-card: 22px;
  --tm-radius-panel: 28px;
  --tm-shadow-card: 0 24px 70px rgba(0, 0, 0, .28);
  --tm-focus: 0 0 0 3px rgba(244, 174, 18, .35);
  --tm-font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --tm-font-display: Archivo, system-ui, sans-serif;
  --tm-font-mono: 'IBM Plex Mono', Consolas, monospace;
}

html { font-family: var(--tm-font-body); }
::selection { background: var(--tm-gold); color: var(--tm-navy); }
.eyebrow { font-family: var(--tm-font-display); }

/* ---------- White-label (marca por endereço; tokens trocados pelo app.js) ---------- */
.brand-mark:has(> .brand-logo) { background: transparent; box-shadow: none; padding: 0; }
.brand-mark .brand-logo { width: 100%; height: 100%; object-fit: contain; display: block; }
body.white-label .sidebar .brand-mark { background: var(--tm-amber); color: var(--tm-amber-on); box-shadow: none; }
body.white-label .brand b, body.white-label .auth-logo b, body.white-label .topbar-brand b { color: var(--tm-amber); }
/* Lista com busca (combo): um só controle; o select escondido guarda o valor e a validação. */
.combo { position: relative; }
.combo > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.combo-toggle { width: 100%; min-height: 46px; padding: 12px 40px 12px 14px; text-align: left; font: inherit; color: #0b111b; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--tm-slate-300); border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23152B47' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; }
.combo-toggle:focus, .combo.open .combo-toggle { border-color: var(--tm-gold); box-shadow: var(--tm-focus); outline: none; }
.combo-panel { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); padding: 8px; background: #fff;
  border: 1px solid var(--tm-slate-300); border-radius: 12px; box-shadow: 0 18px 40px rgba(16, 25, 58, .18); }
.combo-panel[hidden] { display: none; }
.combo-search { width: 100%; margin-bottom: 6px; }
.combo-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.combo-option { padding: 9px 10px; border-radius: 8px; cursor: pointer; color: #0b111b; font-size: 14px; line-height: 1.35; }
.combo-option:hover, .combo-option.active { background: #EAF1FC; }
.combo-option.selected { background: #FFF6D1; font-weight: 700; }
.combo-clear { color: #5b6b82; }
.combo-note { padding: 9px 10px; color: #5b6b82; font-size: 13px; }
/* Menu Infrações: abas entre as três telas e filtro de valor */
.subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.subtabs button { padding: 8px 16px; font: inherit; font-weight: 600; color: #24405E; cursor: pointer; background: #fff; border: 1px solid #E2E8F0; border-radius: 999px; }
.subtabs button:hover { border-color: var(--tm-gold); }
.subtabs button.active { background: var(--tm-amber); color: var(--tm-amber-on); border-color: transparent; }
.check-filter { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #24405E; white-space: nowrap; cursor: pointer; }
.check-filter input { width: 18px; height: 18px; accent-color: var(--tm-amber); }
.muted { opacity: .6; }
.import-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
#reg-result h4 { margin: 16px 0 6px; font-size: 14px; }
.color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .25); vertical-align: -1px; margin: 0 4px 0 8px; }
.brand-preview { max-height: 40px; max-width: 160px; vertical-align: middle; background: #fff; border-radius: 6px; padding: 3px; }

/* ---------- Landing ---------- */
.landing {
  --future-ink: var(--tm-ground);
  --future-panel: var(--tm-surface);
  --future-line: var(--tm-line-strong);
  --future-pink: var(--tm-amber);
  --future-blue: var(--tm-blue);
  background: var(--tm-ground);
  color: var(--tm-ink);
}
.landing-header { background: rgba(8, 12, 30, .92); border-bottom: 1px solid var(--tm-line); }
.landing-header .brand-mark, .auth-art .brand-mark, .landing .brand-mark {
  background: var(--tm-amber); color: var(--tm-amber-on); border-radius: 10px; box-shadow: 0 0 28px rgba(248, 200, 0, .35);
}
.landing-header .auth-logo b, .auth-logo b { color: var(--tm-amber); font-weight: 800; }
.landing-header nav a:hover, .landing-login:hover { color: var(--tm-amber); }
.landing-header .button-primary, .landing-hero .button-primary, .landing-final .button-primary, .landing .button-primary {
  background: var(--tm-amber); color: var(--tm-amber-on); border-color: transparent; border-radius: var(--tm-radius-control);
  box-shadow: 0 12px 32px rgba(248, 200, 0, .22); font-family: var(--tm-font-body); font-weight: 700;
}
.landing-header .button-primary:hover, .landing-hero .button-primary:hover, .landing-final .button-primary:hover, .landing .button-primary:hover {
  background: var(--tm-amber-hover); box-shadow: 0 14px 40px rgba(248, 200, 0, .3);
}
.landing-hero {
  background: radial-gradient(circle at 73% 45%, var(--tm-surface-2) 0, var(--tm-surface) 34%, var(--tm-ground) 72%);
}
.landing-hero::before { background: linear-gradient(90deg, var(--tm-ground) 0, rgba(8, 12, 30, .95) 30%, rgba(8, 12, 30, .45) 62%, transparent 84%); }
.landing-kicker {
  border: 1px solid rgba(248, 200, 0, .45); background: rgba(248, 200, 0, .1); color: var(--tm-gold-300); border-radius: 999px; padding: 9px 15px;
}
.landing-kicker i { background: var(--tm-amber); box-shadow: 0 0 0 4px rgba(248, 200, 0, .2), 0 0 14px var(--tm-amber); }
.landing-hero h1 { color: #fff; }
.landing-hero h1 em {
  color: var(--tm-amber); background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: var(--tm-amber);
}
.landing-hero p { color: var(--tm-ink-2); }
.landing-cta .button { border-radius: var(--tm-radius-control); font-family: var(--tm-font-body); }
.landing-cta .button-secondary { background: var(--tm-surface-3); border-color: rgba(255, 255, 255, .12); color: #fff; }
.landing-cta .button-secondary:hover { background: rgba(255, 255, 255, .1); }
.landing-trust { color: var(--tm-muted); }
.landing-trust span { border-right-color: var(--tm-line-strong); }
.landing-trust span::first-letter { color: var(--tm-amber); }
.future-edge-label { color: var(--tm-muted); }
.future-art::before { background: radial-gradient(circle, rgba(248, 200, 0, .16) 0, rgba(96, 160, 240, .14) 35%, rgba(96, 160, 240, .04) 60%, transparent 70%); }
.future-grid { background-image: linear-gradient(rgba(96, 160, 240, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(96, 160, 240, .18) 1px, transparent 1px); }
.future-routes path { stroke: var(--tm-amber); filter: drop-shadow(0 0 8px rgba(248, 200, 0, .7)); }
.future-routes path:nth-child(2) { stroke: var(--tm-blue); }
.future-routes path:nth-child(3) { stroke: var(--tm-blue-bright); }
.future-orbit { border-color: rgba(96, 160, 240, .55); box-shadow: inset 0 0 30px rgba(96, 160, 240, .08), 0 0 36px rgba(96, 160, 240, .08); }
.future-orbit-two { border-color: rgba(140, 184, 245, .5); }
.future-orbit-three { border-color: rgba(248, 200, 0, .6); box-shadow: 0 0 35px rgba(248, 200, 0, .18), inset 0 0 40px rgba(248, 200, 0, .1); }
.future-core { border-color: var(--tm-gold-400); background: radial-gradient(circle, rgba(248, 200, 0, .22), rgba(14, 20, 48, .9) 70%); box-shadow: 0 0 0 12px rgba(248, 200, 0, .05), 0 0 80px rgba(248, 200, 0, .3), inset 0 0 40px rgba(248, 200, 0, .18); }
.future-core::before, .future-core::after { background: rgba(248, 200, 0, .45); }
.future-core-mark { text-shadow: 0 0 32px rgba(248, 200, 0, .8); }
.future-core-label { color: var(--tm-gold-300); }
.future-ping { background: var(--tm-amber); box-shadow: 0 0 0 6px rgba(248, 200, 0, .2), 0 0 22px var(--tm-amber); }
.future-ping-two { background: var(--tm-blue); box-shadow: 0 0 0 6px rgba(96, 160, 240, .2), 0 0 22px var(--tm-blue); }
.future-data { border-left-color: var(--tm-amber); background: rgba(14, 20, 48, .78); }
.future-data small { color: var(--tm-gold-300); }
.future-data-two { border-left-color: var(--tm-blue); }
.future-data-two small { color: var(--tm-blue-bright); }
.landing-preview { border-color: var(--tm-line-strong); background: var(--tm-surface); box-shadow: var(--tm-shadow-card), 0 0 55px rgba(96, 160, 240, .12); }
.landing-section-head .eyebrow, .landing-flow .eyebrow, .landing-final .eyebrow { color: var(--tm-amber); }
.landing-section-head h2, .landing-final h2 { color: #fff; }
.landing-section-head p { color: var(--tm-ink-2); }
.landing-feature-grid article { border-color: var(--tm-line); background: var(--tm-surface-3); border-radius: var(--tm-radius-card); }
.landing-feature-grid article::before { background: linear-gradient(90deg, var(--tm-amber), var(--tm-blue)); }
.landing-feature-grid article:hover { border-color: rgba(248, 200, 0, .55); box-shadow: 0 22px 55px rgba(0, 0, 0, .45), 0 0 25px rgba(248, 200, 0, .12); }
.landing-feature-grid .feature-icon { color: var(--tm-amber); }
.landing-feature-grid p, .flow-grid p { color: var(--tm-ink-2); }
.landing-flow { background: radial-gradient(circle at 80% 20%, var(--tm-surface-2), transparent 45%), var(--tm-surface); border-color: var(--tm-line); }
.flow-grid > div { border-top-color: var(--tm-amber); }
.landing .flow-grid > div > span {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tm-amber); color: var(--tm-amber-on);
  font: 800 13px/1 var(--tm-font-display); letter-spacing: 0;
}
.landing-final { border-radius: var(--tm-radius-panel); border-color: var(--tm-line-strong); background: radial-gradient(circle at 50% -30%, rgba(248, 200, 0, .22), transparent 60%), linear-gradient(125deg, var(--tm-surface-2), var(--tm-surface)); box-shadow: var(--tm-shadow-card); }
.landing-final p { color: var(--tm-ink-2); }
.landing-footer { background: var(--tm-ground); border-top-color: var(--tm-line); color: var(--tm-muted); }
.landing-footer > span { color: #fff; }
.landing-footer b { color: var(--tm-amber); }

/* Painel ilustrativo da landing */
.landing-preview.preview-dashboard { border-color: var(--tm-line-strong); background: var(--tm-surface); color: var(--tm-ink); border-radius: var(--tm-radius-card); }
.preview-dashboard .is-purple { --preview-accent: var(--tm-blue-bright); }
.preview-dashboard .is-blue { --preview-accent: var(--tm-blue); }
.preview-dashboard .is-mint { --preview-accent: var(--tm-success); }
.preview-dashboard .is-amber { --preview-accent: var(--tm-amber); }
.preview-dashboard .preview-top { background: var(--tm-surface-2); border-color: var(--tm-line); }
.preview-dashboard .preview-mark { background: var(--tm-amber); color: var(--tm-amber-on); }
.preview-dashboard .preview-demo i { background: var(--tm-amber); box-shadow: 0 0 10px rgba(248, 200, 0, .5); }
.preview-dashboard .preview-side { background: var(--tm-ground); border-color: var(--tm-line); }
.preview-dashboard .preview-nav-item.is-current { background: rgba(248, 200, 0, .12); color: var(--tm-gold-300); box-shadow: inset 2px 0 var(--tm-amber); }
.preview-dashboard .preview-side-summary > .preview-dot { color: var(--tm-success); }
.preview-dashboard .preview-period { background: var(--tm-surface-3); border-color: var(--tm-line); }
.preview-dashboard .preview-metric { background: linear-gradient(130deg, var(--tm-surface-2), var(--tm-surface-3)); border-color: var(--tm-line); }
.preview-dashboard .preview-card { background: var(--tm-surface-3); border-color: var(--tm-line); }
.preview-dashboard .preview-chart-points { fill: var(--tm-amber); stroke: var(--tm-surface-3); }
.preview-dashboard .preview-donut { background: conic-gradient(var(--tm-blue) 0 27.6%, var(--tm-surface-3) 27.6% 28.1%, var(--tm-amber) 28.1% 69.8%, var(--tm-surface-3) 69.8% 70.3%, var(--tm-success) 70.3% 99.5%, var(--tm-surface-3) 99.5% 100%); }
.preview-dashboard .preview-donut > div { background: var(--tm-surface-3); }
.preview-dashboard .preview-completion > strong { color: var(--tm-success); }
.preview-dashboard .preview-card-heading .preview-count { background: rgba(248, 200, 0, .12); color: var(--tm-amber); }

/* ---------- Autenticacao ---------- */
.auth-shell { background: var(--tm-ground); }
.auth-art { background: radial-gradient(circle at 66% 23%, var(--tm-surface-2) 0, var(--tm-surface) 36%, var(--tm-ground) 75%); }
.auth-art::after { border-color: rgba(248, 200, 0, .3); box-shadow: 0 0 0 85px rgba(248, 200, 0, .05), 0 0 0 180px rgba(96, 160, 240, .05); }
.auth-art .eyebrow.light { color: var(--tm-amber); }
.auth-copy h1 { color: #fff; font-family: var(--tm-font-display); }
.auth-copy h1 em { color: var(--tm-amber); }
.auth-copy p { color: var(--tm-ink-2); }
.auth-lines span { background: var(--tm-amber); }
.auth-lines span:nth-child(2), .auth-lines span:nth-child(3) { background: var(--tm-line-strong); }
.auth-foot { color: var(--tm-muted); }
.auth-panel { background: var(--tm-surface); }
.auth-form-wrap .eyebrow { color: var(--tm-amber); }
#auth-title, .auth-shell .auth-form-wrap h2 { color: #fff; font-family: var(--tm-font-display); }
.auth-form-wrap > p, .auth-hint, .auth-panel-foot { color: var(--tm-muted) !important; }
.auth-form-wrap .field label { color: var(--tm-ink-2); }
.auth-form-wrap .field input { background: var(--tm-surface-3); border: 1px solid var(--tm-line-strong); color: var(--tm-ink); border-radius: var(--tm-radius-control); }
.auth-form-wrap .field input::placeholder { color: var(--tm-muted); }
.auth-form-wrap .field input:focus { border-color: var(--tm-gold); box-shadow: var(--tm-focus); }
.auth-form-wrap .button-primary { background: var(--tm-amber); color: var(--tm-amber-on); border-radius: var(--tm-radius-control); box-shadow: 0 12px 32px rgba(248, 200, 0, .2); font-weight: 700; }
.auth-form-wrap .button-primary:hover { background: var(--tm-amber-hover); }
.auth-switch { color: var(--tm-blue-bright); }
.auth-office-options { border-color: var(--tm-line-strong); background: var(--tm-surface-3); }
.auth-office-options p { color: var(--tm-ink-2); }
.auth-office-options .button-secondary { background: var(--tm-surface-2); border-color: var(--tm-line-strong); color: #fff; }
.auth-error { background: rgba(224, 106, 106, .14); color: #F6B5B5; }

/* ---------- Area de trabalho ---------- */
#shell {
  --ink: var(--tm-navy); --muted: var(--tm-slate); --line: #E2E8F0; --canvas: #F4F6FA;
  --green: var(--tm-link); --green-dark: #184A98; --green-pale: var(--tm-link-soft);
  --amber: var(--tm-amber-text); --amber-pale: var(--tm-amber-soft); --red: #B43A3A; --red-pale: #FDECEC;
  font-family: var(--tm-font-body);
}
#shell .sidebar { background: var(--tm-ground); color: var(--tm-ink-2); }
#shell .brand { color: #fff; font-family: var(--tm-font-display); }
#shell .brand b { color: var(--tm-amber); }
#shell .brand small { color: var(--tm-muted); }
#shell .brand-mark { background: var(--tm-amber); color: var(--tm-amber-on); border-radius: 10px; font-family: var(--tm-font-display); }
#shell .nav-group { color: var(--tm-muted); }
#shell .nav-button { color: var(--tm-ink-2); border-radius: 10px; }
#shell .nav-button:hover { background: var(--tm-surface-3); color: #fff; }
#shell .nav-button.active { background: var(--tm-surface-2); color: #fff; box-shadow: inset 3px 0 var(--tm-amber); }
#shell .nav-icon { color: var(--tm-blue-bright); }
#shell .nav-button.active .nav-icon { color: var(--tm-amber); }
#shell .help-card { border-top-color: var(--tm-line); }
#shell .help-card strong { color: var(--tm-ink-2); }
#shell .help-card button { color: var(--tm-blue-bright); }
#shell .profile { border-color: var(--tm-line); }
#shell .profile strong { color: #fff; }
#shell .profile small, #shell .profile button { color: var(--tm-muted); }
#shell .avatar, #shell .topbar-avatar { background: var(--tm-amber); color: var(--tm-amber-on); font-family: var(--tm-font-display); }
#shell .topbar { background: #fff; border-color: #E2E8F0; }
#shell .topbar-search { border-radius: 12px; border-color: #E2E8F0; background: #F4F6FA; }
#shell .topbar-search input:focus { outline: none; }
#shell .topbar-search:focus-within { border-color: var(--tm-gold); box-shadow: var(--tm-focus); background: #fff; }
#shell .tenant-pill { background: var(--tm-amber-soft); color: var(--tm-amber-text); }
#shell .icon-button:hover { color: var(--tm-navy); }
#shell .account-menu { border-radius: 14px; }
#shell .page-intro h1, #shell #content.dashboard-view > .page-intro h1, #shell #content.portal-view > .page-intro h1 { color: var(--tm-navy); font-family: var(--tm-font-display); }
#shell .button { border-radius: 12px; font-family: var(--tm-font-body); font-weight: 700; }
#shell .button:focus-visible { outline: none; box-shadow: var(--tm-focus); }
#shell .button-primary { background: var(--tm-amber); color: var(--tm-amber-on); }
#shell .button-primary:hover { background: var(--tm-amber-hover); }
#shell .button-secondary { background: #fff; border-color: var(--tm-slate-300); color: var(--tm-navy); }
#shell .button-secondary:hover { background: var(--tm-link-soft); border-color: #B9C8DA; }
#shell .button-danger { color: #B43A3A; border-color: #F2D5D5; }
#shell .dashboard-alert { border-radius: 16px; background: var(--tm-navy); color: #fff; }
#shell .dashboard-alert > strong { color: var(--tm-amber); font-family: var(--tm-font-display); }
#shell .dashboard-alert .button { background: var(--tm-amber); color: var(--tm-amber-on); }
#shell .stat-card, #shell .panel, #shell .info-card { border-radius: 16px; border-color: #E2E8F0; }
#shell .stat-value, #shell .panel-head h2, #shell .info-card h3, #shell .empty h3, #shell .detail-section h3 { color: var(--tm-navy); font-family: var(--tm-font-display); }
#shell .stat-bottom strong { color: var(--tm-link); }
#shell .link-button, #shell .row-button, #shell .info-card button, #shell .doc-item a { color: var(--tm-link); }
#shell th { color: var(--tm-slate); }
#shell td { color: #34495E; }
#shell td strong, #shell .info-card .card-meta strong { color: var(--tm-navy); }
#shell tbody tr:hover { background: #F7F9FD; }
#shell .plate { color: var(--tm-navy); font-family: var(--tm-font-mono); }
#shell .badge { border-radius: 999px; font-weight: 700; }
#shell .badge.green { background: #E3F7EE; color: #1B7F5B; }
#shell .badge.amber { background: var(--tm-amber-soft); color: var(--tm-amber-text); }
#shell .badge.red { background: #FDECEC; color: #B43A3A; }
#shell .progress-track { background: #EDF1F7; }
#shell .progress-fill, #shell .progress-fill.blue { background: var(--tm-link); }
#shell .progress-fill.amber { background: var(--tm-gold); }
#shell .quick-links button { border-radius: 12px; }
#shell .quick-links button span { color: var(--tm-link); }
#shell .search input, #shell .toolbar select { border-radius: 12px; border-color: #E2E8F0; }
#shell .search input:focus, #shell .toolbar select:focus { border-color: var(--tm-gold); box-shadow: var(--tm-focus); outline: none; }
#shell .empty-icon { background: var(--tm-amber-soft); color: var(--tm-amber-text); }
#shell .alert-strip { border-radius: 12px; background: var(--tm-amber-soft); border-color: #F3DD8A; color: var(--tm-amber-text); }
#shell .guide strong, #shell .detail-stat strong { color: var(--tm-navy); }

/* Portal do condutor (celular) */
#shell.role-driver .topbar { background: var(--tm-ground); }
#shell.role-driver .topbar-brand { color: #fff; font-family: var(--tm-font-display); }
#shell.role-driver .topbar-brand b { color: var(--tm-amber); }
#shell.role-driver .topbar-avatar { background: var(--tm-amber); color: var(--tm-amber-on); }
#shell.role-driver .portal-priority { border-left-color: var(--tm-danger); border-radius: 16px; }
#shell.role-driver .portal-priority strong { color: var(--tm-navy); font-family: var(--tm-font-display); }
#shell.role-driver .portal-case-card { border-left-color: var(--tm-gold); border-radius: 14px; }
#shell.role-driver .portal-case-card small { color: var(--tm-amber-text); }
#shell.role-driver .portal-bottom-nav button.active { color: var(--tm-link); }

/* ---------- Modais, gavetas e formularios ---------- */
.modal, .drawer { border-radius: var(--tm-radius-card); border-color: #E2E8F0; color: var(--tm-navy); }
.modal-header h2, .drawer-hero h2, .detail-section h3 { color: var(--tm-navy); font-family: var(--tm-font-display); }
.modal-header .eyebrow, .drawer-hero .eyebrow { color: var(--tm-amber-text); }
.drawer-hero { background: #F4F6FA; }
.close-button { border-radius: 10px; }
.modal .field label, .drawer .field label { color: var(--tm-navy-2); }
.modal .field input, .modal .field select, .modal .field textarea, .drawer .field input, .drawer .field select, .drawer .field textarea { border-radius: 12px; border-color: var(--tm-slate-300); }
.modal .field input:focus, .modal .field select:focus, .modal .field textarea:focus, .drawer .field input:focus, .drawer .field select:focus, .drawer .field textarea:focus { border-color: var(--tm-gold); box-shadow: var(--tm-focus); }
.modal .form-note, .drawer .form-note { background: var(--tm-amber-soft); border-color: var(--tm-gold); color: #4A3A00; border-radius: 12px; }
.modal .form-note .guide, .drawer .form-note .guide { color: #4A3A00; }
.modal .form-note .guide strong, .drawer .form-note .guide strong { color: var(--tm-navy); }
.modal .button, .drawer .button { border-radius: 12px; font-weight: 700; }
.modal .button-primary, .drawer .button-primary { background: var(--tm-amber); color: var(--tm-amber-on); }
.modal .button-primary:hover, .drawer .button-primary:hover { background: var(--tm-amber-hover); }
.modal .button-secondary, .drawer .button-secondary { background: #fff; border-color: var(--tm-slate-300); color: var(--tm-navy); }
.detail-stat, .draft-preview { border-radius: 12px; }
.timeline { border-color: #C7D8F3; }
.timeline-item::before { background: var(--tm-link); box-shadow: 0 0 0 2px #C7D8F3; }
.doc-item a { color: var(--tm-link); }
.toast { background: var(--tm-surface); color: var(--tm-ink); border: 1px solid var(--tm-line-strong); border-radius: 12px; }
.toast.error { background: #B43A3A; border-color: #B43A3A; color: #fff; }

/* Formulario do recurso */
.appeal-dialog { border-radius: var(--tm-radius-card); color: var(--tm-navy); }
.appeal-header { background: linear-gradient(120deg, var(--tm-ground), var(--tm-navy)); }
.appeal-header .eyebrow { color: var(--tm-amber); }
.appeal-header h2 { font-family: var(--tm-font-display); }
.appeal-steps [aria-current] { color: var(--tm-link); }
.appeal-steps [aria-current] b { background: var(--tm-amber); color: var(--tm-amber-on); }
.appeal-search:focus, .appeal-dialog input:focus-visible, .appeal-dialog textarea:focus-visible { outline: none; border-color: var(--tm-gold); box-shadow: var(--tm-focus); }
.appeal-resource:hover, .appeal-resource:focus-visible { border-color: var(--tm-gold); outline: 2px solid rgba(244, 174, 18, .35); }
.appeal-resource-link { color: var(--tm-link); }
.appeal-option input, .appeal-confirm input { accent-color: var(--tm-gold); }
.appeal-option:has(input:checked) { border-color: var(--tm-gold); background: var(--tm-amber-soft); }
.appeal-dialog .button-primary { background: var(--tm-amber); color: var(--tm-amber-on); border-radius: 12px; }
.appeal-dialog .button-primary:hover { background: var(--tm-amber-hover); }

/* ---------- Movimento do hero (frota em operacao) ---------- */
.future-core { perspective: 600px; }
.future-core-mark {
  display: inline-block; transform-style: preserve-3d; will-change: transform;
  animation: tmCoreMark 7s ease-in-out infinite;
}
@keyframes tmCoreMark {
  0%   { transform: translateY(0) rotateX(0deg) rotateY(0deg) scale(1); text-shadow: 0 0 22px rgba(248, 200, 0, .55); }
  25%  { transform: translateY(-9px) rotateX(10deg) rotateY(-14deg) scale(1.04); text-shadow: 0 0 46px rgba(248, 200, 0, .95), 0 0 90px rgba(248, 200, 0, .35); }
  50%  { transform: translateY(0) rotateX(0deg) rotateY(0deg) scale(1); text-shadow: 0 0 22px rgba(248, 200, 0, .55); }
  75%  { transform: translateY(8px) rotateX(-10deg) rotateY(14deg) scale(1.03); text-shadow: 0 0 46px rgba(248, 200, 0, .95), 0 0 90px rgba(96, 160, 240, .3); }
  100% { transform: translateY(0) rotateX(0deg) rotateY(0deg) scale(1); text-shadow: 0 0 22px rgba(248, 200, 0, .55); }
}
/* varredura de radar dentro do nucleo */
.future-core-cross { overflow: hidden; animation: tmSpinReverse 36s linear infinite; }
.future-core-cross::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(248, 200, 0, 0) 0deg, rgba(248, 200, 0, 0) 250deg, rgba(248, 200, 0, .55) 345deg, rgba(248, 200, 0, .85) 360deg);
  animation: tmSpin 4s linear infinite;
}
@keyframes tmSpin { to { transform: rotate(360deg); } }
@keyframes tmSpinReverse { to { transform: rotate(-360deg); } }
/* orbitas mais vivas e com "satelites" que viajam com elas */
.future-orbit-one { animation-duration: 18s; }
.future-orbit-two { animation-duration: 14s; }
.future-orbit-one::before, .future-orbit-two::before {
  content: ""; position: absolute; left: 50%; top: -6px; width: 11px; height: 11px; margin-left: -6px; border-radius: 50%;
  background: var(--tm-amber); box-shadow: 0 0 0 5px rgba(248, 200, 0, .18), 0 0 18px var(--tm-amber);
}
.future-orbit-two::before { background: var(--tm-blue); box-shadow: 0 0 0 5px rgba(96, 160, 240, .18), 0 0 18px var(--tm-blue); }
/* veiculos percorrendo as rotas (SMIL no SVG, sem JavaScript) */
.future-vehicle { fill: var(--tm-amber); filter: drop-shadow(0 0 7px rgba(248, 200, 0, .9)); }
.future-vehicle-blue { fill: var(--tm-blue); filter: drop-shadow(0 0 7px rgba(96, 160, 240, .9)); }
.future-vehicle-light { fill: var(--tm-blue-bright); filter: drop-shadow(0 0 6px rgba(140, 184, 245, .9)); }
.future-routes path { stroke-width: 2.2; }
.future-routes path:nth-child(1) { animation-duration: 9s; }
.future-routes path:nth-child(2) { animation-duration: 13s; }
.future-routes path:nth-child(3) { animation-duration: 17s; }
.future-ping { animation-duration: 2.2s; }
@media (prefers-reduced-motion: reduce) {
  .future-core-mark, .future-core-cross, .future-core-cross::before { animation: none !important; }
  .future-fleet { display: none; }
}