/* CoremindBR Frotas — estilos (sem frameworks externos)
   Visual: design system "CoremindBR Frota" (13/09/2026) — verde-limão + verde-pinho sobre cinza-claro,
   Space Grotesk (títulos e números) e Plus Jakarta Sans (interface), grid de 4 px, cartões de 20 px.
   Fontes e ícones servidos localmente (a CSP bloqueia origens externas): /fonts e /icons.svg.
   Os nomes de classe antigos foram mantidos; as variáveis --cor-* agora apontam para os tokens novos. */
@import url('/fonts/fonts.css');

:root {
  /* ---- Tokens do design system ---- */
  --lime-50: #F4FCEC; --lime-100: #E6F8D6; --lime-200: #CDF2AE; --lime-300: #B6EC8F; --lime-400: #9FE870;
  --lime-500: #84D74E; --lime-600: #68BC34; --lime-700: #4F9426;
  --pine-900: #04201B; --pine-800: #062F28; --pine-700: #0C463C; --pine-600: #17685A; --pine-500: #2F8C7A;
  --pine-200: #A9D3C9; --pine-100: #DCEDE8; --pine-50: #EFF6F4;
  --coremind-blue: #2C3AE8; --coremind-ink: #10121C;
  --white: #FFFFFF; --neutral-25: #FCFCFC; --neutral-50: #FAFAFA; --neutral-100: #F4F4F3; --neutral-150: #ECECEA;
  --neutral-200: #E5E5E3; --neutral-300: #D4D4D2; --neutral-400: #A8A8A6; --neutral-500: #787878; --neutral-600: #5C5C5C; --neutral-700: #3D3D3D;
  --danger-50: #FEECEB; --danger-100: #FBD5D2; --danger-500: #F04438; --danger-700: #B42318;
  --warning-50: #FDF6E3; --warning-100: #FAE9BE; --warning-500: #EBAA0A; --warning-700: #B54708;

  /* Cor de destaque (tema). Padrão do modelo: verde-limão. Teste do CEO (13/09): azul do símbolo Coremind,
     ligado por <html data-tema="azul"> — tirar o atributo volta ao limão. */
  --accent-50: var(--lime-50); --accent-100: var(--lime-100); --accent-200: var(--lime-200); --accent-300: var(--lime-300);
  --accent: var(--lime-400); --accent-hover: var(--lime-500); --accent-strong: var(--lime-600);
  --on-accent: var(--pine-800); --on-accent-soft: var(--pine-700);
  --accent-text: var(--pine-700);
  --shadow-accent: 0 8px 24px rgba(132, 215, 78, .35);
  --ring-accent: 0 0 0 3px rgba(159, 232, 112, .45);

  --font-display: 'Space Grotesk', system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-ui: 'Plus Jakarta Sans', system-ui, 'Segoe UI', Roboto, sans-serif;

  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-card-inner: 14px; --radius-card: 20px; --radius-tile: 24px; --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(6, 47, 40, .05);
  --shadow-sm: 0 1px 2px rgba(6, 47, 40, .04), 0 2px 6px rgba(6, 47, 40, .04);
  --shadow-card: 0 1px 2px rgba(6, 47, 40, .03), 0 8px 24px rgba(6, 47, 40, .05);
  --shadow-raised: 0 2px 4px rgba(6, 47, 40, .04), 0 16px 40px rgba(6, 47, 40, .08);
  --shadow-overlay: 0 24px 64px rgba(4, 32, 27, .18);
  --shadow-brand: 0 8px 24px rgba(132, 215, 78, .35);
  --ring-focus: 0 0 0 3px rgba(23, 104, 90, .18);
  --ring-brand: 0 0 0 3px rgba(159, 232, 112, .45);
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 140ms; --dur-normal: 220ms; --dur-slow: 360ms;
  --transition-control: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
  --sidebar-w: 236px; --topbar-h: 64px; --content-max: 1240px; --tap-min: 44px;

  /* ---- Aliases antigos (usados pelas telas) → tokens novos ---- */
  --cor-fundo: var(--neutral-100);
  --cor-superficie: var(--white);
  --cor-superficie-alt: var(--neutral-50);
  --cor-texto: var(--pine-800);
  --cor-texto-suave: var(--neutral-600);
  --cor-texto-suave-2: var(--pine-700);
  --cor-texto-fraco: var(--neutral-500);
  --cor-borda: var(--neutral-200);
  --cor-borda-suave: var(--neutral-150);
  --cor-borda-fraca: var(--neutral-150);
  --cor-primaria: var(--pine-800);
  --cor-primaria-escura: var(--pine-900);
  --cor-primaria-hover: var(--pine-700);
  --cor-primaria-contraste: var(--white);
  --cor-azul-profundo: var(--pine-800);
  --cor-foco: var(--pine-600);
  --cor-perigo: var(--danger-700);
  --cor-perigo-fundo: var(--danger-50);
  --cor-perigo-borda: var(--danger-100);
  --cor-perigo-texto: var(--danger-700);
  --cor-alerta: var(--warning-500);
  --cor-alerta-fundo: var(--warning-50);
  --cor-alerta-borda: var(--warning-100);
  --cor-alerta-texto: var(--warning-700);
  /* Texto "positivo" em pinho sobre fundo limão claro: o verde-limão escuro do modelo não passa no contraste AA em texto pequeno. */
  --cor-sucesso: var(--accent-text);
  --cor-sucesso-borda: var(--accent-hover);
  --cor-sucesso-fundo: var(--accent-50);
  --cor-info-fundo: var(--pine-50);
  --cor-info-borda: var(--pine-100);
  --cor-info-texto: var(--pine-700);
  --cor-neutro-fundo: var(--neutral-100);
  --cor-neutro-texto: var(--neutral-600);
  --raio: var(--radius-md);
  --raio-grande: var(--radius-card);
  --altura-header: var(--topbar-h);
  --altura-bottom-nav: 64px;
  --fonte-texto: var(--font-ui);
  --fonte-mono: var(--font-display);
}

/* Tema azul Coremind: mesmo papel do limão, com texto branco sobre o azul (contraste 6,2:1). */
:root[data-tema="azul"] {
  --blue-50: #EEF0FE; --blue-100: #DEE2FD; --blue-200: #BDC4FB; --blue-300: #8D98F6;
  --blue-400: #2C3AE8; --blue-500: #2430CC; --blue-600: #1D28AD; --blue-700: #172089;
  --accent-50: var(--blue-50); --accent-100: var(--blue-100); --accent-200: var(--blue-200); --accent-300: var(--blue-300);
  --accent: var(--blue-400); --accent-hover: var(--blue-500); --accent-strong: var(--blue-600);
  --on-accent: #FFFFFF; --on-accent-soft: var(--blue-100);
  --accent-text: var(--blue-700);
  --shadow-accent: 0 8px 24px rgba(44, 58, 232, .28);
  --ring-accent: 0 0 0 3px rgba(44, 58, 232, .30);
  /* Sem verdes no tema azul: o pinho escuro (texto e botões escuros) vira o tom escuro oficial da Coremind (#10121C)
     e os pinhos claros (avisos, iniciais do usuário) viram os tons claros do azul. */
  --pine-900: #07080E; --pine-800: #10121C; --pine-700: #1E2233; --pine-600: #2C3AE8; --pine-500: #4B57EC;
  --pine-200: var(--blue-200); --pine-100: var(--blue-100); --pine-50: var(--blue-50);
  --ring-focus: 0 0 0 3px rgba(44, 58, 232, .22);
}

* { box-sizing: border-box; }

/* O atributo hidden deve sempre vencer, mesmo com display definido por outra regra. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  /* Celular: nunca rolar de lado nem aumentar o texto sozinho ao girar a tela. */
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font: 400 14px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
/* Celular: toque único sem espera nem zoom por toque duplo em botões e links. */
button, a, label, .btn { touch-action: manipulation; }

a { color: var(--pine-700); text-underline-offset: 2px; }
a:hover { color: var(--pine-600); }
::selection { background: var(--accent-200); color: var(--pine-800); }

:focus-visible { outline: 2px solid var(--pine-600); outline-offset: 2px; }

/* Números, placas, datas e km: fonte de exibição com algarismos tabulares (assinatura tipográfica do modelo). */
.mono { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }

/* Ícones Lucide do sprite local: traço de 2 px herdando a cor do texto. */
.icon {
  flex: 0 0 auto; display: inline-block; vertical-align: -0.15em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Casca: menu lateral, barra superior, barra inferior ---------- */
#app { min-height: 100vh; min-height: 100dvh; }
#layout { display: flex; min-height: 100vh; min-height: 100dvh; }
.app-column { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.brand { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--coremind-ink); }
.brand-symbol { width: 26px; height: 26px; display: block; flex: 0 0 auto; }
.brand-word { font: 300 18px/1 var(--font-display); letter-spacing: -0.04em; }
.brand-word .brand-mind { font-weight: 700; }
.brand-br {
  display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-left: 1px;
  border: 1.5px solid var(--coremind-blue); border-radius: 50%; color: var(--coremind-blue);
  font: 700 7.5px/1 var(--font-ui); letter-spacing: 0.02em; align-self: flex-start;
}
.brand-product {
  padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--neutral-200);
  font: 600 16px/1 var(--font-display); letter-spacing: -0.02em; color: var(--pine-800);
}

#app-header {
  position: sticky; top: 0; z-index: 30; min-height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--white); border-bottom: 1px solid var(--neutral-150);
}
#app-header .header-info {
  flex: 1 1 auto; min-width: 0; font: 400 12px/1.4 var(--font-ui); color: var(--neutral-600);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#app-header .btn-logout { flex: 0 0 auto; }
#app-header .btn-back { flex: 0 0 auto; gap: 4px; }
@media (min-width: 900px) {
  #app-header { padding: 12px 24px; }
  #app-header .brand-topbar { display: none; }
  #app-header .header-info { font-size: 13px; }
}
@media (max-width: 899px) {
  #app-header .btn-logout { width: 40px; min-height: 40px; padding: 0; }
  #app-header .btn-logout span { display: none; }
  #app-header .btn-back { width: 40px; min-height: 40px; padding: 0; }
  #app-header .btn-back span { display: none; }
  #app-header .brand-topbar .brand-product { display: none; }
  #app-header .header-info { display: none; }
  #app-header .brand-topbar { flex: 1 1 auto; }
}

.side-nav { display: none; }
@media (min-width: 900px) {
  .side-nav {
    display: flex; flex-direction: column; gap: 20px; width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
    position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
    padding: 20px 16px; background: var(--white); border-right: 1px solid var(--neutral-150);
  }
}
.side-nav .nav-brand { padding: 0 10px; }
.nav-account {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  background: var(--white); border: 1px solid var(--neutral-150); border-radius: var(--radius-md);
}
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px;
  border-radius: 50%; background: var(--pine-100); color: var(--pine-700); font: 600 12px/1 var(--font-ui);
}
.nav-account-text { flex: 1 1 auto; min-width: 0; }
.nav-account-name { display: block; font: 500 13px/1.35 var(--font-ui); color: var(--pine-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-account-meta { display: block; font: 400 12px/1.4 var(--font-ui); color: var(--neutral-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-groups { display: flex; flex-direction: column; gap: 18px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.side-nav .nav-group-label {
  font: 500 11px/1.2 var(--font-ui); letter-spacing: 0.10em; text-transform: uppercase; color: var(--neutral-400);
  padding: 0 10px 6px;
}
.side-nav a {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px;
  border: 1px solid transparent; border-radius: var(--radius-md); text-decoration: none;
  color: var(--neutral-600); font: 400 14px/1.3 var(--font-ui); transition: var(--transition-control);
}
.side-nav a:hover { background: var(--neutral-50); color: var(--pine-800); }
.side-nav a.active { background: var(--accent-50); color: var(--accent-text); font-weight: 600; }
.nav-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-nav a .badge-count, .bottom-nav a .badge-count {
  margin-left: auto; background: var(--danger-500); color: var(--white); font: 600 11px/1.4 var(--font-ui);
  border-radius: var(--radius-pill); padding: 0 6px; min-width: 18px; text-align: center;
}

/* Celular: o menu lateral vira gaveta sobre um véu (quando há mais itens do que cabem na barra inferior). */
.nav-scrim { display: none; }
@media (max-width: 899px) {
  body.drawer-open .side-nav:not([hidden]) {
    display: flex; flex-direction: column; gap: 20px; position: fixed; top: 0; left: 0; bottom: 0; z-index: 70;
    width: min(86vw, 290px); overflow-y: auto; padding: 20px 16px; padding-top: max(20px, env(safe-area-inset-top));
    background: var(--white); box-shadow: var(--shadow-overlay);
  }
  body.drawer-open .nav-scrim:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 65; background: rgba(4, 32, 27, .35); backdrop-filter: blur(2px);
  }
  body.drawer-open .side-nav a { min-height: var(--tap-min); }
}

.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
  padding: 6px 8px; padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: var(--white); border-top: 1px solid var(--neutral-150); box-shadow: 0 -8px 24px rgba(6, 47, 40, .06);
}
.bottom-nav a, .bottom-nav .bottom-nav-menu {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--tap-min); padding: 4px 2px; border: none; border-radius: var(--radius-md); background: transparent;
  color: var(--neutral-500); font: 500 11px/1.15 var(--font-ui); text-align: center; text-decoration: none; cursor: pointer;
}
.bottom-nav .nav-icon { width: 36px; height: 26px; border-radius: var(--radius-pill); transition: var(--transition-control); }
.bottom-nav .nav-label { overflow: visible; white-space: normal; }
.bottom-nav a.active { color: var(--pine-800); font-weight: 600; }
.bottom-nav a.active .nav-icon { background: var(--accent-100); color: var(--accent-text); }
.bottom-nav a .badge-count { position: absolute; top: 2px; right: 10px; margin-left: 0; }
@media (min-width: 900px) {
  .bottom-nav { display: none !important; }
}

.view {
  flex: 1 1 auto; width: 100%; max-width: calc(var(--content-max) + 48px); margin: 0 auto; min-width: 0;
  padding: 16px 16px calc(var(--altura-bottom-nav) + 28px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) {
  .view { padding: 24px 24px 32px; }
}

.app-footer { padding: 8px 16px 12px; text-align: center; }
@media (max-width: 899px) {
  .app-footer { padding-bottom: calc(var(--altura-bottom-nav) + 16px + env(safe-area-inset-bottom)); margin-top: calc(-1 * var(--altura-bottom-nav)); }
}

/* ---------- Selos e avisos ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill);
  font: 500 11px/1.4 var(--font-ui); letter-spacing: 0.02em;
}
.tag-synthetic { background: var(--warning-50); color: var(--warning-700); border: 1px solid var(--warning-100); }
.tag-simulado {
  display: inline-flex; align-items: center; gap: 6px; background: var(--warning-50); color: var(--warning-700);
  border: 1px solid var(--warning-100); padding: 8px 12px; border-radius: var(--radius-card-inner);
  font: 600 12px/1.4 var(--font-ui); margin-bottom: 12px;
}
.tag-aviso {
  display: block; background: var(--danger-50); color: var(--danger-700); border: 1px solid var(--danger-100);
  padding: 10px 14px; border-radius: var(--radius-card-inner); font: 500 13px/1.45 var(--font-ui); margin-bottom: 12px;
}
.tag-info {
  display: block; background: var(--pine-50); color: var(--pine-700); border: 1px solid var(--pine-100);
  padding: 10px 14px; border-radius: var(--radius-card-inner); font: 500 13px/1.45 var(--font-ui); margin-bottom: 12px;
}

/* ---------- Tipografia e cabeçalho de página ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--pine-800); letter-spacing: -0.02em; }
h1 { font-size: 24px; font-weight: 600; line-height: 1.15; margin: 0 0 12px; }
h2 { font-size: 18px; font-weight: 600; line-height: 1.25; margin: 24px 0 10px; }
h3 { font: 600 16px/1.3 var(--font-ui); letter-spacing: -0.01em; margin: 16px 0 8px; }
@media (min-width: 900px) {
  h1 { font-size: 30px; }
  h2 { font-size: 20px; }
}

.page-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.page-head h1 { margin: 0; }
.page-subtitle { color: var(--neutral-600); font: 400 13px/1.5 var(--font-ui); margin: -6px 0 16px; }

/* Barra de ações: uma linha só, quebrando apenas quando falta largura; itens centralizados e com o mesmo respiro.
   18/09, pedido do CEO: botões da mesma barra com a mesma altura e campos que não estouram a largura. */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.toolbar > * { min-width: 0; }
.toolbar > .btn { flex: 0 0 auto; min-height: 38px; }
@media (pointer: coarse) { .toolbar > .btn { min-height: 40px; } }
.toolbar > .btn-lg, .toolbar > .btn-huge { min-height: 52px; }
.toolbar select, .toolbar input, .toolbar .field { width: auto; max-width: 100%; flex: 0 1 auto; }
.toolbar > .field { min-width: 180px; }
/* Última barra do cartão: sem folga sobrando embaixo. */
.card > .toolbar:last-child, .toolbar:last-child { margin-bottom: 0; }

/* ---------- Botões (pílula) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 8px 20px; border: 1px solid transparent; border-radius: var(--radius-pill);
  background: var(--pine-800); color: var(--white); font: 500 14px/1.2 var(--font-ui); letter-spacing: -0.01em;
  text-align: center; text-decoration: none; cursor: pointer; transition: var(--transition-control);
  /* 18/09, pedido do CEO ("botão muito feio, deixa harmonioso"): mesma sombra leve dos demais controles do
     design system, para o botão grande dos formulários não parecer um bloco chapado. */
  box-shadow: var(--shadow-xs);
}
.btn:hover { background: var(--pine-700); color: var(--white); }
.btn:active:not(:disabled) { transform: scale(.985); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); border-color: var(--pine-600); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* Verde-limão: a ação principal da tela (uma por vista). */
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-primary:focus-visible { box-shadow: var(--ring-accent); border-color: var(--accent-strong); }
.btn-secondary { background: var(--white); color: var(--pine-800); border-color: var(--neutral-200); }
.btn-secondary:hover { background: var(--neutral-50); color: var(--pine-800); }
.btn-ghost { background: transparent; color: var(--pine-800); border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--neutral-100); color: var(--pine-800); }
.btn-danger { background: var(--danger-700); color: var(--white); }
.btn-danger:hover { background: #912018; color: var(--white); }
/* Tamanhos proporcionais ao .btn grande (42 px / 8px 20px): mesma família, só menor. */
.btn-sm { min-height: 36px; padding: 6px 16px; font: 500 13px/1.2 var(--font-ui); }
@media (pointer: coarse) { .btn-sm { min-height: 40px; } }
.btn-lg { min-height: 52px; padding: 10px 28px; font: 500 16px/1.2 var(--font-ui); }
.btn-block { width: 100%; }
.btn-huge {
  width: 100%; min-height: 60px; font: 600 17px/1.2 var(--font-ui); border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-accent);
}
.btn-huge:hover { background: var(--accent-hover); color: var(--on-accent); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--neutral-150); border-radius: 50%; background: var(--white); color: var(--pine-800);
  box-shadow: var(--shadow-xs); cursor: pointer; transition: var(--transition-control);
}
.icon-btn:hover { filter: brightness(.97); }

/* ---------- Cartões ---------- */
.card {
  background: var(--white); border: 1px solid var(--neutral-150); border-radius: var(--radius-card);
  padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow-card); min-width: 0;
}
@media (min-width: 900px) { .card { padding: 20px; } }
.card > h2:first-child, .card > h3:first-child, .card > header:first-child h2, .card > summary + h2 { margin-top: 0; }
.card-list { display: flex; flex-direction: column; gap: 12px; }
.card-list > .card { margin-bottom: 0; }
.card-clickable { cursor: pointer; text-decoration: none; color: inherit; display: block; transition: var(--transition-control); }
.card-clickable:hover { background: var(--neutral-50); border-color: var(--neutral-200); color: inherit; }
.card-title-row { display: flex; justify-content: space-between; gap: 6px 10px; align-items: center; flex-wrap: wrap; }
/* 18/09, pedido do CEO: com mais de um selo, eles ficam juntos à direita do título em vez de espalhados pela linha. */
.card-title-row > .card-title:first-child { flex: 1 1 auto; margin-right: auto; min-width: 0; }
.card-title { font: 600 16px/1.3 var(--font-ui); letter-spacing: -0.01em; color: var(--pine-800); }
.card-title.mono { font-family: var(--font-display); letter-spacing: 0.02em; }
.card-subtitle { color: var(--neutral-600); font: 400 13px/1.45 var(--font-ui); }
/* 18/09, pedido do CEO: os dados da linha nunca colados — gap uniforme, mesmo quando o texto quebra. */
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 6px; font: 400 13px/1.45 var(--font-ui); color: var(--neutral-600); }
.card-meta > * { min-width: 0; }
.card-indicio-repetido { border: 1px solid var(--danger-100); background: var(--danger-50); }
/* Faz um item ocupar todas as colunas de um grid — a CSP (style-src 'self') bloqueia style="" inline. */
.col-span-2 { grid-column: 1 / -1; }
.card-dashed {
  background: var(--white); border: 1px dashed var(--neutral-300); border-radius: var(--radius-card);
  padding: 32px 20px; text-align: center; color: var(--neutral-600);
}
.card details > summary, details.card > summary { cursor: pointer; font: 600 14px/1.4 var(--font-ui); color: var(--pine-800); }
/* 18/09, pedido do CEO: com o painel aberto, o summary não pode colar no primeiro rótulo do formulário. */
details.card[open] > summary, .card details[open] > summary { margin-bottom: 14px; }

.empty-state { color: var(--neutral-600); padding: 16px 0; }
.loading-state { color: var(--neutral-600); padding: 16px 0; display: flex; align-items: center; gap: 8px; }
.spinner {
  width: 16px; height: 16px; border: 2px solid var(--neutral-200); border-top-color: var(--pine-800);
  border-radius: 50%; display: inline-block; animation: girar 0.7s linear infinite; flex: 0 0 auto;
}
@keyframes girar { to { transform: rotate(360deg); } }
.error-state {
  background: var(--danger-50); color: var(--danger-700); border: 1px solid var(--danger-100);
  border-radius: var(--radius-card-inner); padding: 10px 14px; margin-bottom: 12px; font: 500 13px/1.45 var(--font-ui);
}
.success-state {
  background: var(--accent-50); color: var(--accent-text); border: 1px solid var(--accent-300);
  border-radius: var(--radius-card-inner); padding: 10px 14px; margin-bottom: 12px; font: 500 13px/1.45 var(--font-ui);
}

.badge {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 10px; border-radius: var(--radius-pill);
  font: 500 12px/1.3 var(--font-ui); white-space: nowrap; background: var(--neutral-100); color: var(--neutral-600);
}
.badge-info { background: var(--pine-50); color: var(--pine-700); }
.badge-alerta { background: var(--warning-50); color: var(--warning-700); }
.badge-perigo { background: var(--danger-50); color: var(--danger-700); }
.badge-sucesso { background: var(--accent-50); color: var(--accent-text); }
.badge-neutro { background: var(--neutral-100); color: var(--neutral-600); }
.badge-content { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Status de prazo / revisão — texto + ícone, nunca só cor ---------- */
.deadline-badge {
  display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 2px 10px; border-radius: var(--radius-pill);
  font: 500 12px/1.3 var(--font-ui);
}
.deadline-badge .deadline-icon { display: inline-flex; line-height: 1; }
.deadline-concluido { background: var(--accent-50); color: var(--accent-text); }
.deadline-pendente { background: var(--warning-50); color: var(--warning-700); }
.deadline-atrasado { background: var(--danger-50); color: var(--danger-700); }
.deadline-sem_periodicidade, .deadline-nao_iniciado { background: var(--neutral-100); color: var(--neutral-600); }

/* ---------- Conexão em tempo real ---------- */
.connection-status {
  display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1.3 var(--font-ui); color: var(--neutral-600);
  background: var(--white); border: 1px solid var(--neutral-150); border-radius: var(--radius-pill); padding: 6px 12px;
}
.connection-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--neutral-400); }
.connection-status.conectado .connection-dot { background: var(--accent-strong); }
.connection-status.reconectando .connection-dot { background: var(--warning-500); animation: pulsar 1.3s ease-in-out infinite; }
.connection-status.desconectado .connection-dot { background: var(--danger-500); }
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger-500); display: inline-block; animation: pulsar 1.4s ease-in-out infinite; }

/* ---------- Formulários ---------- */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.form-grid > div:empty { display: none; }
@media (min-width: 640px) {
  .form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
}
/* 18/09, pedido do CEO: o botão do formulário nunca ocupa uma célula da grade ao lado de um campo — ele fica
   numa linha só sua, com largura natural (não esticado) e uma folga acima. Vale para grades de 1 ou 2 colunas
   e para uma barra de ações dentro do formulário. `.btn-block`/`.btn-huge` continuam de largura cheia. */
.form-grid > .btn, .form-grid > .toolbar {
  grid-column: 1 / -1; justify-self: start; max-width: 100%; margin-top: 4px;
}
.form-grid > .btn:not(.btn-block):not(.btn-huge) { width: auto; }
.form-grid > .toolbar { margin-bottom: 0; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font: 500 13px/1.35 var(--font-ui); color: var(--pine-800); }
.field .hint, .hint { font: 400 12px/1.4 var(--font-ui); color: var(--neutral-600); }
.field .field-error { font: 400 12px/1.4 var(--font-ui); color: var(--danger-700); }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"],
input[type="date"], input[type="datetime-local"], input[type="file"], input[type="search"], select, textarea {
  border: 1px solid var(--neutral-200); border-radius: var(--radius-md); padding: 10px 14px;
  background: var(--white); color: var(--pine-800); width: 100%; min-height: 44px; max-width: 100%; min-width: 0;
  /* 16px evita o zoom automático do iPhone ao focar um campo (que "desenquadra" a página). */
  font: 400 16px/1.4 var(--font-ui);
  transition: var(--transition-control);
}
input::placeholder, textarea::placeholder { color: var(--neutral-400); }
input[type="file"] { padding: 8px 10px; font-size: 14px; }
input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 6px 14px; border: 1px solid var(--neutral-200); border-radius: var(--radius-pill);
  background: var(--neutral-50); color: var(--pine-800); font: 500 13px/1.2 var(--font-ui); cursor: pointer;
}
textarea { resize: vertical; min-height: 4.5em; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--pine-600); box-shadow: var(--ring-focus);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--pine-700); width: 18px; height: 18px; }
.checkbox-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.checkbox-row input { width: 18px; }
fieldset { border: 1px solid var(--neutral-150); border-radius: var(--radius-card-inner); padding: 12px; margin: 0; }
legend { padding: 0 6px; font: 600 13px/1.3 var(--font-ui); }

/* ---------- Tabela (faixa de cabeçalho cinza, linhas com filete) ---------- */
.table-wrap { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 13px/1.45 var(--font-ui); }
table.data-table th, table.data-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--neutral-150); vertical-align: middle; }
table.data-table th {
  background: var(--neutral-100); border-bottom: none; color: var(--neutral-600);
  font: 500 12px/1.3 var(--font-ui); white-space: nowrap; padding-top: 10px; padding-bottom: 10px;
}
table.data-table th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
table.data-table th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
table.data-table tbody tr.linha-nova { animation: destacarLinha 2.4s ease-out; }
@keyframes destacarLinha { from { background: var(--accent-50); } to { background: transparent; } }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: var(--neutral-100);
}
.login-card {
  width: 100%; max-width: 420px; background: var(--white); border: 1px solid var(--neutral-150);
  border-radius: var(--radius-tile); padding: 32px 24px; box-shadow: var(--shadow-raised);
}
.login-brand { display: flex; justify-content: center; margin-bottom: 20px; }
.login-brand .brand-symbol { width: 32px; height: 32px; }
.login-brand .brand-word { font-size: 22px; }
.login-card h1 { text-align: center; margin-bottom: 4px; font-size: 24px; }
.login-subtitle { text-align: center; color: var(--neutral-600); font: 400 13px/1.5 var(--font-ui); margin-bottom: 20px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Abas (sublinhado limão) ---------- */
.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--neutral-150); margin-bottom: 16px; overflow-x: auto; }
.tabs button {
  background: transparent; border: none; padding: 10px 2px; cursor: pointer; white-space: nowrap; min-height: 44px;
  font: 400 13px/1.3 var(--font-ui); color: var(--neutral-600); transition: var(--transition-control);
}
.tabs button:hover { color: var(--pine-800); }
.tabs button.active { color: var(--pine-800); font-weight: 600; box-shadow: inset 0 -2px 0 0 var(--accent); }

/* ---------- Mensagens (conversas) ---------- */
.message { border-radius: var(--radius-card-inner); padding: 10px 14px; margin-bottom: 8px; background: var(--neutral-50); border: 1px solid var(--neutral-150); }
.message.staff { background: var(--pine-50); border-color: var(--pine-100); }
.message.internal { background: var(--warning-50); border-color: var(--warning-100); }
.message-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font: 400 12px/1.4 var(--font-ui); color: var(--neutral-600); margin-bottom: 4px; }
.message p { margin: 0; }

/* ---------- Fotos ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 8px 0; }
.photo-grid img { width: 100%; height: 96px; object-fit: cover; border-radius: var(--radius-card-inner); border: 1px solid var(--neutral-150); }
.photo-grid .photo-placeholder {
  aspect-ratio: 1; border-radius: var(--radius-card-inner); background: var(--neutral-100);
  display: flex; align-items: center; justify-content: center; font: 500 11px var(--font-ui); color: var(--neutral-500); text-align: center; padding: 6px;
}
.photo-add-btn {
  aspect-ratio: 1; border: 1px dashed var(--neutral-300); border-radius: var(--radius-card-inner); background: var(--white);
  color: var(--pine-800); font: 600 13px var(--font-ui); cursor: pointer; min-height: 96px;
}

.toast-region {
  position: fixed; bottom: calc(var(--altura-bottom-nav) + 12px + env(safe-area-inset-bottom)); left: 12px; right: 12px; z-index: 80;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
@media (min-width: 900px) { .toast-region { bottom: 20px; left: auto; right: 20px; width: 340px; } }
.toast { padding: 12px 16px; border-radius: var(--radius-card-inner); font: 500 13px/1.45 var(--font-ui); box-shadow: var(--shadow-raised); }
.toast-erro { background: var(--danger-700); color: var(--white); }
.toast-sucesso { background: var(--pine-800); color: var(--white); }

.kv-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font: 400 14px/1.45 var(--font-ui); }
.kv-list dt { color: var(--neutral-600); }
.kv-list dd { margin: 0; color: var(--pine-800); }

.list-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Indicadores (StatTile): rótulo pequeno, número grande na fonte de exibição. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-card {
  display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--white);
  border: 1px solid var(--neutral-150); border-radius: var(--radius-card-inner); text-decoration: none; color: inherit;
  transition: var(--transition-control);
}
a.stat-card:hover { background: var(--neutral-50); color: inherit; }
.stat-card .stat-value { order: 2; font: 600 26px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--pine-800); font-variant-numeric: tabular-nums; }
.stat-card .stat-label { order: 1; font: 400 12px/1.4 var(--font-ui); color: var(--neutral-600); }

.section-divider { border: none; border-top: 1px solid var(--neutral-150); margin: 20px 0; }

/* ---------- Filtros do painel ---------- */
.filter-bar {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; background: var(--white);
  border: 1px solid var(--neutral-150); border-radius: var(--radius-card); padding: 16px; margin-bottom: 16px; box-shadow: var(--shadow-card);
}
.filter-bar .field { min-width: 160px; flex: 1 1 160px; }

/* Guia de primeiro acesso da equipe administradora. */
.first-access-guide { margin-bottom: 16px; }
.first-access-guide > h2 { margin-top: 0; }
.first-access-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 10px; margin: 14px 0 0; padding: 0; list-style: none;
}
.first-access-step { min-width: 0; padding: 14px; border: 1px solid var(--neutral-150); border-radius: var(--radius-card-inner); background: var(--white); }
.first-access-step.concluida { border-color: var(--accent); }
.first-access-step-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.first-access-step h3 { margin: 0; font: 600 15px/1.35 var(--font-ui); }
.first-access-step > p { margin: 10px 0; }
.first-access-step .btn { min-height: 40px; }

/* ---------- Etapas do checklist ---------- */
.stepper { display: flex; gap: 6px; margin-bottom: 20px; overflow-x: auto; }
.stepper .step {
  flex: 1; min-width: 64px; text-align: center; font: 600 11px/1.3 var(--font-ui); color: var(--neutral-500);
  padding-bottom: 8px; border-bottom: 3px solid var(--neutral-200);
}
.stepper .step.atual { color: var(--pine-800); border-bottom-color: var(--pine-800); }
.stepper .step.concluida { color: var(--accent-text); border-bottom-color: var(--accent); }
.wizard-nav { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.wizard-nav .btn { flex: 1; min-width: 120px; min-height: 48px; }
.km-input { font-family: var(--font-display); font-size: 20px; font-variant-numeric: tabular-nums; }
.draft-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: var(--warning-50); color: var(--warning-700); border: 1px solid var(--warning-100);
  border-radius: var(--radius-card-inner); padding: 10px 14px; margin-bottom: 16px; font: 500 13px var(--font-ui);
}
/* ---------- Itens do checklist: dois botões (Conforme / Avaria) ---------- */
.choice-row { display: flex; gap: 10px; margin: 8px 0; }
.item-choice-btn { flex: 1; min-height: 52px; font-size: 15px; }

/* ---------- Grade de blocos 2 por linha (fotos, itens e opções do condutor) ---------- */
.photo-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 580px; }
.photo-tile-wrap { min-width: 0; }
.photo-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: 1 / 1; width: 100%; border-radius: var(--radius-card); border: 1.5px dashed var(--neutral-300); background: var(--white);
  color: var(--pine-800); font-weight: 600; text-align: center; padding: 10px; cursor: pointer; overflow: hidden; min-height: 44px;
  transition: var(--transition-control);
}
.photo-tile:hover { background: var(--neutral-50); }
.photo-tile:focus-within { outline: none; box-shadow: var(--ring-focus); border-color: var(--pine-600); }
.photo-tile-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.photo-tile-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--neutral-100); color: var(--pine-700);
}
.photo-tile-label { font: 600 14px/1.25 var(--font-ui); }
.photo-tile-status { font: 500 12px/1.3 var(--font-ui); color: var(--neutral-600); }
.photo-tile-done { border: 1.5px solid var(--accent-hover); padding: 0; justify-content: flex-end; }
.photo-tile-done img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-tile-done .photo-tile-label, .photo-tile-done .photo-tile-status {
  position: relative; z-index: 1; width: 100%; padding: 4px 8px; background: rgba(6, 47, 40, .84); color: var(--white);
}
.photo-tile-done .photo-tile-status { padding-bottom: 8px; color: var(--accent-200); }
.photo-tile-alta { border-color: var(--danger-700); }
.photo-tile-atencao { border-color: var(--warning-500); }
/* Itens (etapa 2): mesmo bloco, com os dois botões. */
/* Compacto (pedido do CEO de 13/09: pouco espaço entre o nome do item e os botões). */
.item-tile { cursor: default; border: 1px solid var(--neutral-150); aspect-ratio: auto; justify-content: center; gap: 8px; padding: 10px 8px; min-height: 0; box-shadow: var(--shadow-sm); }
.item-tile .photo-tile-label { font-size: 13px; line-height: 1.2; }
.item-tile:hover { background: var(--white); }
.item-tile-locked { opacity: 0.45; }
.item-tile-locked .item-choice-btn { cursor: not-allowed; }
/* Prévia da descrição recolhida dentro do bloco (tocar reabre o painel). */
.item-note-preview {
  display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; max-width: 100%; background: none; border: none;
  padding: 2px 4px; cursor: pointer; font: 500 12px/1.3 var(--font-ui); color: var(--danger-700); overflow: hidden;
}
/* O texto encolhe e termina em "…" (em flex, as reticências precisam ficar no próprio texto, não no botão). */
.item-note-preview > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline dotted; }
.item-tile .choice-row { width: 100%; margin: 0; gap: 6px; }
.item-tile .item-choice-btn { min-height: 44px; font-size: 13px; padding: 6px 4px; min-width: 0; }
@media (max-width: 359px) { .photo-tile-grid { gap: 8px; } .item-tile .item-choice-btn { font-size: 13px; } .photo-tile-label { font-size: 13px; } }
.item-tile-ok { border-color: var(--accent-hover); }
.item-tile-avaria { border-color: var(--danger-700); background: var(--danger-50); }
.item-tile-avaria:hover { background: var(--danger-50); }
/* Painel de descrição da avaria: linha inteira, logo abaixo da dupla de blocos. */
.item-note-block {
  grid-column: 1 / -1; margin: 0; padding: 12px 14px; border: 1px solid var(--danger-100); border-radius: var(--radius-card);
  background: var(--danger-50);
}
.item-note-block label { font: 600 13px/1.4 var(--font-ui); color: var(--danger-700); }
.item-note-block textarea { width: 100%; min-height: 84px; }
.item-note-block .item-audio-label { display: block; margin-top: 10px; font: 600 13px/1.4 var(--font-ui); color: var(--pine-800); }
.item-audio-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.item-note-block .item-audio-file-label { display: block; margin-top: 8px; font: 500 12px/1.4 var(--font-ui); color: var(--pine-800); }
/* Gravador de áudio pelo site */
.audio-recorder-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.audio-recorder-btn.audio-recorder-on { background: var(--danger-700); border-color: var(--danger-700); color: var(--white); }
.audio-recorder-status { font: 500 12px/1.4 var(--font-ui); color: var(--neutral-600); }
.audio-recorder-hint { margin: 4px 0; font: 400 12px/1.4 var(--font-ui); color: var(--neutral-600); }
.item-audio-row audio { width: 100%; min-width: 0; }
.audio-delete-btn { color: var(--danger-700); flex: 0 0 auto; }

/* ---------- Cartão do veículo: nome do condutor ao lado da placa (padrão Mercosul) ---------- */
.veiculo-vitrine { display: flex; align-items: center; gap: 12px; }
.veiculo-modelo { margin: 10px 0 0; font: 600 16px/1.3 var(--font-ui); color: var(--pine-800); }
.veiculo-ano { margin: 2px 0 8px; color: var(--neutral-600); font: 400 13px/1.4 var(--font-ui); }

.placa-mercosul {
  flex: 0 0 auto; width: 132px; max-width: 45%; border: 2px solid #111; border-radius: 8px;
  overflow: hidden; background: #fff; box-shadow: var(--shadow-sm);
}
.placa-mercosul-topo {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: #0B3C8D; color: #fff; font: 700 8px/1 var(--font-ui); letter-spacing: 0.14em; padding: 3px 0;
}
.placa-mercosul-bandeira {
  width: 12px; height: 8px; border-radius: 1px; background: #009B3A;
  background-image: radial-gradient(circle at 50% 50%, #002776 0 22%, transparent 23%), linear-gradient(#FFDF00, #FFDF00);
  background-size: 100% 100%, 60% 60%; background-position: center, center; background-repeat: no-repeat;
}
.placa-mercosul-num {
  font: 700 20px/1.2 var(--font-display); letter-spacing: 0.08em; font-variant-numeric: tabular-nums;
  text-align: center; color: #111; padding: 3px 3px 4px;
}

.veiculo-condutor {
  flex: 1 1 0; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 3px;
  background: var(--neutral-50); border: 1px solid var(--neutral-150); border-radius: var(--radius-card-inner); padding: 10px 12px;
}
.veiculo-condutor-rotulo { font: 500 11px/1.2 var(--font-ui); color: var(--neutral-500); text-transform: uppercase; letter-spacing: 0.10em; }
.veiculo-condutor-nome { font: 600 15px/1.3 var(--font-ui); color: var(--pine-800); overflow-wrap: anywhere; }
.veiculo-condutor-vazio .veiculo-condutor-nome { color: var(--neutral-600); font-weight: 500; }
.veiculo-placa-col { flex: 0 0 auto; width: 140px; max-width: 46%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.veiculo-placa-col .placa-mercosul { width: 100%; max-width: 100%; }
.veiculo-placa-col .veiculo-modelo { margin: 8px 0 0; font-size: 14px; line-height: 1.25; }
.veiculo-placa-col .veiculo-ano { margin: 2px 0 0; font-size: 12px; }

/* Situação no cartão do condutor: selos do checklist e da revisão lado a lado; datas abaixo. */
/* 18/09: linha só de selos — gap menor que o do texto, mas ainda folgado (os selos já têm respiro interno). */
.status-linha { gap: 6px 8px; margin-top: 12px; }
.status-linha .deadline-badge { white-space: nowrap; padding: 2px 9px; }
.status-datas { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; font: 400 13px/1.45 var(--font-ui); color: var(--neutral-600); }

/* Opções do condutor na tela inicial: blocos com título e explicação curta. */
.home-tile-grid { margin: 4px 0 16px; }
.home-tile {
  aspect-ratio: auto; min-height: 100px; gap: 4px; border: 1px solid var(--neutral-150); text-decoration: none;
  background: var(--white); color: var(--pine-800); box-shadow: var(--shadow-sm);
}
.home-tile:hover { background: var(--neutral-50); color: var(--pine-800); }
.home-tile-title { font: 600 15px/1.25 var(--font-ui); letter-spacing: -0.01em; }
.home-tile-hint { font: 400 12px/1.35 var(--font-ui); color: var(--neutral-600); }
/* Única superfície limão da tela do condutor: a ação principal. */
.home-tile-destaque { background: var(--accent); border-color: transparent; color: var(--on-accent); box-shadow: var(--shadow-accent); }
.home-tile-destaque:hover { background: var(--accent-hover); color: var(--on-accent); }
.home-tile-destaque .home-tile-hint { color: var(--on-accent-soft); }

/* ---------- Computador: módulos alinhados (pedido do CEO, 13/09 — o celular não muda) ---------- */
@media (min-width: 900px) {
  /* Tela do condutor: a grade de opções ocupa a mesma largura dos cartões, em 3 colunas. */
  .home-tile-grid { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .home-tile-grid .col-span-2 { grid-column: span 2; }
  .home-tile { min-height: 112px; }
  /* Checklist: uma coluna de leitura centralizada; etapas, blocos e botões com as mesmas bordas. */
  .wizard { max-width: 820px; margin: 0 auto; }
  .wizard .photo-tile-grid { max-width: none; gap: 16px; }
  .wizard .fotos-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Minha frota do gestor: blocos por veículo, agrupados por setor ---------- */
.frota-resumo { margin: -8px 0 12px; font: 500 13px/1.4 var(--font-ui); color: var(--neutral-600); }
.frota-setor { display: flex; align-items: center; gap: 8px; margin: 20px 0 10px; font: 600 15px/1.3 var(--font-ui); color: var(--pine-800); }
.frota-setor .icon { color: var(--neutral-500); }
.frota-setor-n { margin-left: 2px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--neutral-100); color: var(--neutral-600); font: 500 12px/1.6 var(--font-ui); }
.frota-grid { max-width: none; }
.frota-tile { aspect-ratio: auto; align-items: stretch; justify-content: flex-start; gap: 6px; border: 1px solid var(--neutral-150); text-decoration: none; text-align: left; padding: 12px; box-shadow: var(--shadow-sm); }
.frota-tile:hover { background: var(--neutral-50); color: var(--pine-800); }
.frota-tile-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.frota-tile-topo .placa-mercosul { width: 104px; max-width: 62%; }
.frota-tile-topo .placa-mercosul-num { font-size: 16px; padding: 2px 2px 3px; }
.frota-tile-tipo { display: inline-flex; align-items: center; gap: 4px; font: 500 11px/1.3 var(--font-ui); color: var(--neutral-600); white-space: nowrap; }
.frota-tile-modelo { font: 600 14px/1.25 var(--font-ui); color: var(--pine-800); }
.frota-tile-condutor { font: 400 12px/1.35 var(--font-ui); color: var(--neutral-600); }
.frota-tile-selos { margin-top: 2px; }
.frota-tile-selos .deadline-badge { font-size: 11px; padding: 1px 8px; }
.frota-tile-data { font: 400 12px/1.4 var(--font-ui); color: var(--neutral-600); display: inline-flex; align-items: center; gap: 4px; }
.cliente-tile .frota-tile-topo { align-items: center; }
/* Pesquisa de veículos (Frota). */
.busca-veiculos { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 6px 6px 6px 14px; background: var(--white); border: 1px solid var(--neutral-150); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
.busca-veiculos .icon { color: var(--neutral-500); flex: 0 0 auto; }
.busca-veiculos input[type="search"] { flex: 1 1 auto; min-width: 0; border: 0; box-shadow: none; background: transparent; padding: 8px 4px; font-size: 16px; }
.busca-veiculos input[type="search"]:focus { outline: none; box-shadow: none; }
.check-inline { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.4 var(--font-ui); color: var(--pine-800); margin: 0 0 12px; cursor: pointer; }
.check-inline input { width: 18px; height: 18px; accent-color: var(--accent-strong); margin: 0; }
.filter-bar .check-inline { margin: 0; align-self: end; padding-bottom: 10px; }
.debito-card.debito-vencido { border-left: 4px solid var(--danger-500); }
.debito-card.debito-vence_em_breve { border-left: 4px solid #F5A524; }
.carteira a.badge { text-decoration: none; }
.stat-card.stat-perigo .stat-value { color: var(--danger-700); }
.stat-card.stat-alerta .stat-value { color: #B7791F; }
.busca-contagem { flex: 0 0 auto; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--neutral-100); color: var(--neutral-600); font: 500 12px/1.5 var(--font-ui); white-space: nowrap; }
/* Operação: botões de ação da linha ("Ver", "Conferir") lado a lado, alinhados. */
table.data-table td.acoes-linha { white-space: nowrap; }
table.data-table td.acoes-linha .btn { display: inline-flex; vertical-align: middle; margin-right: 6px; }
table.data-table td.acoes-linha .btn:last-child { margin-right: 0; }
.meta-tipo { display: inline-flex; align-items: center; gap: 2px; }
/* Blocos por secretaria/setor (órgão com mais de 4 veículos) e demandas da gestora (13/09). */
.setor-tile { min-height: 132px; }
.setor-tile-icone { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--accent-100); color: var(--accent-text); }
.frota-tile-demanda { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/1.4 var(--font-ui); color: var(--danger-700); }
.demandas-card { margin: 0 0 16px; border-left: 4px solid var(--danger-500); }
.demandas-card .card-title { display: inline-flex; align-items: center; gap: 6px; }
.demandas-resumo { display: flex; align-items: center; gap: 10px; padding: 14px 16px; text-decoration: none; color: inherit; }
.demandas-resumo .card-title { flex: 1 1 auto; }
.demandas-resumo:hover { background: var(--neutral-50); }
.demandas-n { min-width: 32px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--danger-50); color: var(--danger-700); font: 700 15px/1.5 var(--font-ui); text-align: center; }
.demandas-lista { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; font: 400 14px/1.4 var(--font-ui); }
.demandas-vazia { display: flex; align-items: center; gap: 8px; border-left-color: var(--accent); color: var(--neutral-600); font: 500 13px/1.4 var(--font-ui); }
.kanban { display: flex; gap: 10px; margin-top: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.kanban-col { flex: 0 0 200px; max-width: 78vw; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--radius-card-inner); background: var(--neutral-50); max-height: 240px; overflow-y: auto; }
.kanban-col-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 2px 6px; background: var(--neutral-50); font: 600 12px/1.3 var(--font-ui); color: var(--pine-800); }
.kanban-card { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--white); border: 1px solid var(--neutral-150); text-decoration: none; color: inherit; min-width: 0; overflow-wrap: anywhere; }
.kanban-card-link { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; color: inherit; min-width: 0; }
.kanban-card-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
/* 18/09, pedido do CEO: campo e botão da ação do cartão com a mesma altura (antes o campo era 44 e o botão 36). */
.kanban-card-acoes input { flex: 1 1 100px; min-width: 0; min-height: 40px; padding: 6px 10px; font-size: 16px; }
.kanban-card-acoes > .btn { min-height: 40px; }
.kanban-card-urgente { border-color: var(--danger-100); background: var(--danger-50); }
.kanban-urgente { display: inline-flex; align-items: center; gap: 4px; color: var(--danger-700); font-weight: 600; }
.kanban-card:hover { border-color: var(--neutral-300); }
/* 18/09, pedido do CEO ("texto dentro da caixa mal formatado, sem espaços"): o título é um bloco e cada detalhe
   fica na sua própria linha, com respiro — nada de spans emendados no mesmo parágrafo. */
.kanban-card-titulo { display: block; width: 100%; font: 600 13px/1.3 var(--font-ui); letter-spacing: 0.02em; }
.kanban-card-detalhe { display: block; width: 100%; font: 400 11px/1.4 var(--font-ui); color: var(--neutral-600); }
.kanban-card-detalhe + .kanban-card-detalhe { margin-top: 1px; }
/* Detalhe urgente: linha própria também, com o ícone alinhado ao texto. */
.kanban-card-detalhe.kanban-urgente { display: flex; align-items: center; gap: 4px; }
/* Tela Demandas: quadro kanban ocupando a tela — colunas altas, sem rolagem interna; celular desliza uma coluna por vez. */
.kanban-quadro { margin: 4px -16px 0; padding: 0 16px 16px; gap: 12px; align-items: flex-start; min-height: calc(100vh - 220px); scroll-snap-type: x mandatory; scroll-padding-left: 16px; }
.kanban-quadro .kanban-col { flex: 0 0 min(84vw, 300px); max-height: none; overflow-y: visible; padding: 10px; background: var(--neutral-100); border-radius: var(--radius-card); }
.kanban-quadro .kanban-col-head { position: static; background: transparent; font-size: 14px; padding: 0 2px 8px; }
.kanban-quadro .kanban-card { padding: 12px 14px; border-radius: 12px; box-shadow: var(--shadow-sm); }
.kanban-quadro .kanban-card-titulo { font-size: 15px; }
.kanban-quadro .kanban-card-detalhe { font-size: 12px; }
.kanban-col-locadora { background: var(--neutral-50); border: 1px dashed var(--neutral-200); }
@media (min-width: 900px) {
  .kanban-quadro { margin: 4px 0 0; padding: 0 0 16px; scroll-snap-type: none; }
  .kanban-quadro .kanban-col { flex-basis: 280px; }
}
.relatorio-toolbar { align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.relatorio-toolbar .field { margin: 0; min-width: 240px; }
.relatorio-tabela { padding: 0; }
.relatorio-tabela table.data-table td, .relatorio-tabela table.data-table th { white-space: nowrap; }
@media print {
  #app-header, #side-nav, #bottom-nav, .relatorio-toolbar, .footer, footer { display: none !important; }
  .relatorio-tabela { overflow: visible; box-shadow: none; }
  .relatorio-tabela table.data-table td, .relatorio-tabela table.data-table th { white-space: normal; }
}
@media (min-width: 900px) {
  .frota-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1400px) {
  .frota-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Fotos: quadro por vaga (estilos antigos) — REMOVIDO em 18/09 ----------
   O quadro de fotos por vaga virou a grade de blocos (.photo-tile-grid) e nenhuma tela usava mais
   .kanban-board / .kanban-col-wrap. O bloco antigo redefinia .kanban-col, .kanban-card e
   ".kanban-card > a { display: block }" DEPOIS das regras do quadro de Demandas e, por vir por último,
   desmanchava a coluna do cartão: era esse o "texto sem espaços" que o CEO capturou (título e detalhes
   caíam na mesma linha, colados). Sem substituto — as regras do quadro de Demandas já bastam. */

.receipt-card {
  background: var(--white); border: 1px solid var(--neutral-150); border-radius: var(--radius-card);
  padding: 24px; text-align: center; box-shadow: var(--shadow-card);
}
.receipt-protocol { font: 600 22px/1.2 var(--font-display); color: var(--pine-800); margin: 10px 0; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.receipt-check {
  width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 12px; box-shadow: var(--shadow-accent);
}

/* ---------- Feed "ao vivo" ---------- */
.feed-list { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.feed-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius-card-inner);
  background: var(--white); border: 1px solid var(--neutral-150); font: 400 13px/1.45 var(--font-ui);
}
.feed-item.novo { background: var(--accent-50); border-color: var(--accent-300); }
.feed-item time { color: var(--neutral-500); font: 500 12px/1.4 var(--font-display); flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* ---------- QR do veículo (impressão) ---------- */
.qr-print-sheet {
  max-width: 420px; margin: 0 auto; background: var(--white); border: 1px solid var(--neutral-150);
  border-radius: var(--radius-card); padding: 24px; text-align: center; box-shadow: var(--shadow-card);
}
.qr-print-image { width: 260px; height: 260px; margin: 0 auto 16px; display: block; }
.qr-print-plate { font: 700 30px/1.1 var(--font-display); margin: 4px 0; letter-spacing: 0.04em; }
.qr-print-model { font: 400 15px/1.4 var(--font-ui); color: var(--neutral-600); margin: 0 0 12px; }
.qr-print-instruction { font: 600 15px/1.4 var(--font-ui); margin: 0 0 10px; }
.qr-print-url { font: 400 12px/1.4 var(--font-ui); color: var(--neutral-600); word-break: break-all; }
@media print {
  .no-print, #app-header, #side-nav, #bottom-nav, .app-footer, .toast-region, .nav-scrim { display: none !important; }
  body { background: #fff; }
  .qr-print-sheet { border: none; box-shadow: none; max-width: 100%; }
  .qr-print-image { width: 320px; height: 320px; }
}

/* ---------- Lista curta de pessoas por órgão (17/09, pedido do CEO) ----------
   "Layout de condutores e admin deve ser algo curto em lista, com botão de ações na mesma linha, separado por
   órgão": grupo de órgão (nível 1) → subgrupo de papel (nível 2) → linha da pessoa (nível 3) com o botão
   "Ações" na mesma linha e o painel de ações logo abaixo. Sem rolagem lateral no celular: a linha quebra. */
.grupo-lista { display: flex; flex-direction: column; gap: 8px; }
.grupo-orgao {
  background: var(--white); border: 1px solid var(--neutral-150); border-radius: var(--radius-card);
  padding: 0 12px; box-shadow: var(--shadow-xs);
}
.grupo-orgao > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  cursor: pointer; padding: 12px 2px; min-height: var(--tap-min);
  font: 600 15px/1.3 var(--font-ui); color: var(--pine-800);
}
.grupo-orgao[open] > summary { border-bottom: 1px solid var(--neutral-150); }
.grupo-orgao-nome { min-width: 0; overflow-wrap: anywhere; }
.grupo-orgao-total { font: 400 12px/1.4 var(--font-ui); color: var(--neutral-500); white-space: nowrap; }
.grupo-orgao-corpo { display: flex; flex-direction: column; padding-bottom: 6px; }
.grupo-papel + .grupo-papel { border-top: 1px solid var(--neutral-150); }
.grupo-papel > summary {
  cursor: pointer; padding: 10px 2px; min-height: var(--tap-min); display: flex; align-items: center;
  font: 600 13px/1.4 var(--font-ui); color: var(--neutral-600);
}
.grupo-papel[open] > summary { color: var(--pine-700); }
.user-list { display: flex; flex-direction: column; }
.user-list-vazio { padding: 4px 2px 10px; font: 400 12px/1.4 var(--font-ui); color: var(--neutral-500); }
.user-item + .user-item { border-top: 1px solid var(--neutral-150); }
.user-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 8px 2px; }
.user-row-principal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; flex: 1 1 auto; }
.user-row-nome { font: 600 14px/1.35 var(--font-ui); color: var(--pine-800); overflow-wrap: anywhere; }
.user-row-email { font: 400 12px/1.35 var(--font-ui); color: var(--neutral-600); min-width: 0; overflow-wrap: anywhere; }
.user-row-selos { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.user-row-carteira { font: 400 12px/1.35 var(--font-ui); color: var(--neutral-500); }
.user-row-acao { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.user-row-btn { white-space: nowrap; }
.user-row-acoes { margin: 0 0 8px 2px; padding: 4px 0 4px 10px; border-left: 2px solid var(--accent-300); }
.user-row-acoes[hidden] { display: none; }
.user-row-acoes .toolbar { margin-bottom: 8px; }
.user-row-acoes h3 { margin: 8px 0 6px; font: 600 13px/1.4 var(--font-ui); color: var(--neutral-600); }

/* Carteira por contrato: lista curta de veículos com marcação (um colaborador) ou select de responsável (divisão). */
.carteira-editor { display: flex; flex-direction: column; gap: 6px; }
.carteira-editor .field { margin: 0; }
.carteira-lista { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }
.carteira-row { cursor: pointer; }
.carteira-row + .carteira-row { border-top: 1px solid var(--neutral-150); }
.carteira-row .user-row-principal { gap: 4px 8px; align-items: center; }
.carteira-row select { max-width: 220px; }
.vinculo-celula { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vinculo-celula .toolbar { margin: 0; }
@media (max-width: 480px) {
  .user-row { align-items: flex-start; }
  .user-row-acao { align-self: flex-start; }
  .carteira-row select { max-width: 150px; }
}
.user-list > .user-row + .user-row { border-top: 1px solid var(--neutral-150); }

/* ---------- Padrão em blocos (23/09, aprovado pelo CEO) ----------
   Peças de public/js/views/blocos.js (guia: docs/UI-BLOCOS.md). Trazidas de operacao/design/padrao-kanban/kit/kit.css
   (sem os @font-face, que eram só para mockups em file://) + decisões aprovadas no relatório do padrão. */

/* Grupo por SITUAÇÃO: o mesmo .grupo-orgao com faixa à esquerda e a contagem no selo da situação (tons do .badge). */
.grupo-situacao { border-left-width: 4px; }
.grupo-situacao.tom-perigo  { border-left-color: var(--danger-700); }
.grupo-situacao.tom-alerta  { border-left-color: var(--warning-500); }
.grupo-situacao.tom-sucesso { border-left-color: var(--accent-hover); }
.grupo-situacao.tom-info    { border-left-color: var(--pine-600); }
.grupo-situacao.tom-neutro  { border-left-color: var(--neutral-300); }
.grupo-situacao > summary .grupo-orgao-total.badge { font: 500 12px/1.3 var(--font-ui); }

/* Grupo com blocos de veículo (vehicle-tile.js, .frota-grid): respiro dentro do corpo do grupo. */
.grupo-orgao-corpo > .frota-grid { padding: 12px 0 8px; }

/* Linha de registro com "Abrir" à direita: o botão é um link. */
.user-row-acao > a.btn { text-decoration: none; white-space: nowrap; }

/* Bloco-resumo da tela inicial: visual do .grupo-orgao, mas é link direto — nome à esquerda, contagem + "Abrir" à direita. */
.grupo-resumo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px; min-height: var(--tap-min);
  background: var(--white); border: 1px solid var(--neutral-150); border-radius: var(--radius-card); box-shadow: var(--shadow-xs);
  font: 600 15px/1.3 var(--font-ui); color: var(--pine-800); text-decoration: none;
}
.grupo-resumo:hover { background: var(--neutral-50); color: var(--pine-800); }
div.grupo-resumo:hover { background: var(--white); }
.grupo-resumo-lado { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.grupo-resumo-abrir { font: 500 13px/1.2 var(--font-ui); color: var(--accent-text); white-space: nowrap; }

/* Decisão 7 (P2): a pilha de grupos não cola no bloco seguinte (mesmo respiro do .card). */
.grupo-lista:not(:last-child) { margin-bottom: 16px; }

/* Decisão 3: no celular, blocos de veículo dentro de grupo (ou do painel de Ações) em 1 coluna — em 2 a placa corta. */
@media (max-width: 480px) {
  .grupo-orgao-corpo .frota-grid, .user-row-acoes .frota-grid { grid-template-columns: 1fr; }
}

/* Decisão 22: no computador as colunas do quadro de Demandas cabem na largura (a 5ª não fica fora da tela).
   Piso de 150 px: em 1280 px sobram 996 px de conteúdo (menu 236 + respiro 48); 5 colunas de 200 px + 4 vãos de
   12 px dariam 1048 px e voltariam a rolar. Abaixo de 1100 px (e no celular) continua como antes. */
@media (min-width: 1100px) {
  .kanban-quadro .kanban-col { flex: 1 1 0; min-width: 150px; }
}

/* Lote 1 (W2): linha nova chegada ao vivo no painel ganha o mesmo destaque que a linha de tabela tinha (linha 498). */
.user-item.linha-nova { animation: destacarLinha 2.4s ease-out; }

/* Lote 1 (W1): a caixa de pesquisa da Frota, dentro da barra de filtros, ocupa a largura toda (sem isso fica ~230 px). */
.toolbar > .busca-veiculos { flex: 1 1 100%; margin: 0; }