/* =============================================================
   Módulo: styles.css (front Nexus)
   Responsabilidade: estilo do hub e do shell dos módulos, 100%
     sobre os tokens do design system Zeus (design-system/colors_and_type.css).
   Por que existe: separa a camada visual das telas; trocar tema =
     trocar tokens, sem tocar em HTML/JS.
   Decisões de design:
     - Neutros stone; laranja (--color-zeus) só em acento (botão primário).
     - Gradiente chrome em elementos tocáveis; nav-active na navegação.
     - Dois layouts DISTINTOS: mobile ≤768 (tabbar inferior) e
       desktop ≥769 (rail lateral + grade), sem scroll horizontal.
   Dependências externas: tokens do design system (obrigatório importar antes).
   ============================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }
button { font-family: var(--font-sans); }
img { max-width: 100%; }

/* ============================================================
   HUB (index.html): porta de entrada do Nexus
   Redesenho de 2026-08-03 conforme a referência do Fernando: cards horizontais com
   seta, eyebrow, título grande e ambiente agrícola de fundo. Toda cor vem de token
   (§9); o laranja claro é derivado de --color-zeus por color-mix, sem literal novo.
   ============================================================ */
.hub {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--color-background);
}
.hub__header {
  position: relative; z-index: 1;
  height: var(--header-height);
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xs);
}
.hub__header img { height: 30px; }
.hub__header .hub__title { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.hub__divisor { width: 1px; height: 18px; background: var(--color-border); }
.hub__header .sub { color: var(--color-text-muted); font-size: var(--text-xs); }

.hub__main {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--space-8) var(--space-6);
  gap: var(--space-6);
  overflow: hidden;   /* o ambiente sangra até a borda sem criar barra de rolagem */
  /* Calor de amanhecer nas bordas, com o centro limpo para o conteúdo respirar. */
  background:
    radial-gradient(60% 45% at 8% 0%, color-mix(in srgb, var(--color-zeus) 14%, transparent) 0%, transparent 70%),
    radial-gradient(55% 45% at 100% 12%, color-mix(in srgb, var(--color-zeus-light) 16%, transparent) 0%, transparent 70%),
    radial-gradient(85% 55% at 50% 100%, color-mix(in srgb, var(--color-zeus) 16%, transparent) 0%, transparent 75%);
}
/* Ambiente: campo ao amanhecer atrás do conteúdo. Decorativo, nunca clicável. */
.hub__ambiente {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

.hub__intro { position: relative; text-align: center; }
.hub__eyebrow {
  margin-bottom: var(--space-2);
  color: var(--color-zeus-deep);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  letter-spacing: .18em; text-transform: uppercase;
}
.hub__intro h1 {
  font-size: clamp(var(--text-3xl), 5vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.hub__sub { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-base); }

.hub__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 510px));
  gap: var(--space-6);
  width: 100%;
  max-width: 1060px;
  justify-content: center;
}
/* Card horizontal: ícone, corpo e seta na mesma linha. */
.modcard {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  text-decoration: none; color: var(--color-text);
  transition: box-shadow .15s ease, transform .08s ease, border-color .15s ease;
}
.modcard__corpo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
/* O módulo em operação é o que a pessoa veio usar: ganha o realce de marca. */
.modcard--ativo { border-color: color-mix(in srgb, var(--color-zeus) 35%, var(--color-border-soft)); }
.modcard--ativo:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.modcard__icon {
  width: 56px; height: 56px; border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--color-zeus) 12%, var(--color-surface));
  color: var(--color-zeus-deep);
}
.modcard__icon svg { width: 26px; height: 26px; }
.modcard__seta { display: flex; color: color-mix(in srgb, var(--color-zeus) 55%, var(--color-surface)); }
.modcard__seta svg { width: 20px; height: 20px; }
.modcard__name { font-size: var(--text-xl); font-weight: var(--weight-bold); }
.modcard__desc { color: var(--color-text-muted); font-size: var(--text-sm); }
.modcard--off { opacity: .72; cursor: default; }
.modcard--off .modcard__seta { color: var(--color-text-faint); }
/* Selo de estado com marcador: diz que o módulo existe no plano, e ainda não na tela. */
.modcard__soon {
  margin-top: var(--space-1);
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
  color: var(--color-zeus-deep);
  background: color-mix(in srgb, var(--color-zeus) 10%, var(--color-surface));
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
}
.modcard__soon::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill);
  background: var(--color-zeus);
}
.modcard__links { margin-top: var(--space-2); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.modcard__go {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
  color: var(--color-zeus-deep);
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-zeus) 45%, var(--color-surface));
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease;
}
.modcard__go svg { width: 14px; height: 14px; }
.modcard__go:hover { background: color-mix(in srgb, var(--color-zeus) 10%, var(--color-surface)); box-shadow: var(--shadow-xs); }
.modcard__go:active { box-shadow: var(--shadow-inset); }

.hub__rodape {
  position: relative;
  display: flex; align-items: center; gap: var(--space-4);
  width: 100%; max-width: 560px; margin-top: var(--space-4);
}
.hub__rodape img { height: 22px; }
.hub__regua { flex: 1; height: 1px; background: var(--color-border-soft); }
.hub__assinatura {
  position: relative;
  color: var(--color-text-muted); font-size: var(--text-sm); text-align: center;
}

@media (max-width: 768px) {
  .hub__main { justify-content: flex-start; padding-top: var(--space-8); }
  .hub__grid { grid-template-columns: 1fr; max-width: 460px; }
  .modcard { padding: var(--space-4); gap: var(--space-3); }
  .modcard__icon { width: 44px; height: 44px; }
  .modcard__icon svg { width: 22px; height: 22px; }
  .hub__intro h1 { font-size: var(--text-3xl); }
}
@media (prefers-reduced-motion: reduce) {
  .modcard, .modcard__go { transition: none; }
  .modcard--ativo:hover { transform: none; }
}

/* ============================================================
   APP SHELL (módulos): mobile-first, "cara de aplicativo"
   ============================================================ */
.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh; /* tela cheia real no celular (barra de endereço dinâmica) */
  background: var(--color-background);
  display: flex; flex-direction: column;
  /* Moldura da marca no frame do app (token --color-zeus; definição do Fernando),
     com cantos arredondados de celular (token --radius-3xl) */
  border: 3px solid var(--color-zeus);
  border-radius: var(--radius-3xl);
}
/* Os filhos que tocam os cantos acompanham o raio da moldura (raio interno = raio - borda),
   sem overflow hidden para não quebrar o sticky do cabeçalho e da tabbar. */
.app__header {
  border-top-left-radius: calc(var(--radius-3xl) - 3px);
  border-top-right-radius: calc(var(--radius-3xl) - 3px);
}
.tabbar {
  border-bottom-left-radius: calc(var(--radius-3xl) - 3px);
  border-bottom-right-radius: calc(var(--radius-3xl) - 3px);
}
.app__header {
  position: sticky; top: 0; z-index: 10;
  height: var(--header-height);
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xs);
}
.app__header img.logo { height: 24px; }
.app__header .sub { color: var(--color-text-muted); font-size: var(--text-xs); }
.app__brand { font-weight: var(--weight-bold); font-size: var(--text-base); white-space: nowrap; }
/* O nome cede espaço antes de todo mundo: com a engrenagem no cabeçalho (2026-08-04),
   nome longo empurrava a marca para duas linhas num telefone de 390px. Ele encolhe até
   caber e corta com reticências; os botões, que são alvo de toque, não encolhem. */
.app__driver {
  margin-left: auto; color: var(--color-text-muted); font-size: var(--text-xs);
  text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.iconbtn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; border-radius: var(--radius-md);
  background: var(--gradient-chrome); box-shadow: var(--shadow-xs);
  color: var(--color-stone-700); border: none; cursor: pointer; text-decoration: none;
}
.iconbtn svg { width: 18px; height: 18px; }
.iconbtn:active { box-shadow: var(--shadow-inset); }

/* Telefone estreito: são seis elementos no cabeçalho e três deles são alvos de toque,
   que não podem encolher. O que sai é o logotipo em imagem: a marca continua escrita ao
   lado, e a moldura do app já é da Zeus. */
@media (max-width: 430px) {
  .app__header { gap: var(--space-2); padding: 0 var(--space-3); }
  .app__header img.logo { display: none; }
}

.app__main { flex: 1; padding: var(--space-4); }
.view { display: grid; gap: var(--space-3); align-content: start; }
.view[hidden] { display: none; }
.view__title { font-size: var(--text-lg); font-weight: var(--weight-bold); }

/* ---------- Navegação do módulo (tabbar) ---------- */
.tabbar {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-soft);
}
.tabbar button {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--space-2) var(--space-1);
  border: none; background: none; border-radius: var(--radius-xl);
  color: var(--color-text-muted);
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
  cursor: pointer;
}
.tabbar button svg { width: 20px; height: 20px; }
.tabbar button.active { background: var(--gradient-nav-active); color: var(--color-stone-50); }

/* ---------- Cards e listas ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  display: grid; gap: var(--space-2);
}
.card__label { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-text-muted); }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.list { display: grid; gap: var(--space-2); }
.muted-sm { color: var(--color-text-muted); font-size: var(--text-xs); }
.empty { color: var(--color-text-muted); font-size: var(--text-sm); padding: var(--space-4); text-align: center; }

/* ---------- Painel do veículo (Início) ---------- */
.plate { font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: .06em; }
.bignum { font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.bignum .unit { font-size: var(--text-sm); }

.gauge { display: grid; gap: var(--space-2); }
.gauge__bar {
  height: 10px; border-radius: var(--radius-pill);
  background: var(--color-stone-200); overflow: hidden;
}
.gauge__fill { height: 100%; border-radius: var(--radius-pill); background: var(--color-status-online); transition: width .3s ease; }
.gauge--ok .gauge__fill { background: var(--color-status-online); }
.gauge--atencao .gauge__fill { background: var(--color-status-delayed); }
.gauge--estouro .gauge__fill { background: var(--color-status-offline); }
.gauge__pct { font-size: var(--text-xl); font-weight: var(--weight-bold); }

/* ---------- Badges de severidade (tokens do DS) ---------- */
.badge {
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  white-space: nowrap; border: 1px solid transparent;
}
.badge--success { background: var(--color-severity-success-bg); color: var(--color-severity-success-text); border-color: var(--color-severity-success-rail); }
.badge--warning { background: var(--color-severity-warning-bg); color: var(--color-severity-warning-text); border-color: var(--color-severity-warning-rail); }
.badge--error   { background: var(--color-severity-error-bg);   color: var(--color-severity-error-text);   border-color: var(--color-severity-error-rail); }
.badge--info    { background: var(--color-severity-info-bg);    color: var(--color-severity-info-text);    border-color: var(--color-severity-info-rail); }

/* Aviso de janela (chip com ícone) */
.chip {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
}
.chip svg { width: 16px; height: 16px; flex: none; }
.chip--success { background: var(--color-severity-success-bg); color: var(--color-severity-success-text); border: 1px solid var(--color-severity-success-rail); }
.chip--info    { background: var(--color-severity-info-bg);    color: var(--color-severity-info-text);    border: 1px solid var(--color-severity-info-rail); }
.chip--error   { background: var(--color-severity-error-bg);   color: var(--color-severity-error-text);   border: 1px solid var(--color-severity-error-rail); }

/* ---------- Formulários ---------- */
.form { display: grid; gap: var(--space-3); }
.field { display: grid; gap: var(--space-1); }
.field > span { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-text-muted); }
.field input, .field textarea {
  padding: var(--space-3); border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; box-shadow: var(--ring-focus); }

/* O `select` com a MESMA caixa do `input`. O select nativo traz altura, tipografia e
   seta próprias: ao lado de um campo de texto ele fica visivelmente mais baixo e com
   cara de sistema operacional, não de Nexus (achado do Jorge, 2026-08-04, no formulário
   de criar conta). `appearance: none` devolve a caixa ao design system; a seta volta
   como imagem de fundo em SVG inline, sem arquivo novo e sem requisição. O
   `line-height` é declarado nos dois porque é dele que sai a altura final. */
.field input, .field select, .rtable select { line-height: 1.5; }
.field select, .rtable select {
  appearance: none; -webkit-appearance: none;
  padding: var(--space-3); padding-right: var(--space-8);
  border-radius: var(--radius-md); border: 1px solid var(--color-border);
  color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base);
  width: 100%;
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 14px 14px;
}
.field select:focus, .rtable select:focus { outline: none; box-shadow: var(--ring-focus); }

/* Botão de foto: chip chrome tocável; input file fica invisível */
.fotobtn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--gradient-chrome); box-shadow: var(--shadow-xs);
  border: 1px solid var(--color-border-soft);
  font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-stone-700);
  cursor: pointer;
}
.fotobtn svg { width: 18px; height: 18px; }
.fotobtn:active { box-shadow: var(--shadow-inset); }
.fotobtn input { display: none; }
.foto-preview { display: none; gap: var(--space-3); align-items: center; }
.foto-preview.on { display: flex; }
.foto-preview img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: var(--radius-md); border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xs);
}
.foto-preview .nome { font-size: var(--text-xs); color: var(--color-text-muted); word-break: break-all; }

.btn {
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); border: none;
  background: var(--gradient-zeus); color: var(--color-surface);
  font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-base);
  cursor: pointer; box-shadow: var(--shadow-sm);
}
.btn:active { box-shadow: var(--shadow-inset); }
.btn:disabled { opacity: .5; cursor: default; }

.feedback { display: none; }
.feedback.on { display: block; }
.feedback--error {
  background: var(--color-severity-error-bg); color: var(--color-severity-error-text);
  border-left: 4px solid var(--color-severity-error-rail);
  padding: var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm);
}
.feedback--success {
  background: var(--color-severity-success-bg); color: var(--color-severity-success-text);
  border-left: 4px solid var(--color-severity-success-rail);
  padding: var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm);
}

.demo-note { text-align: center; }

/* ============================================================
   ADMIN DO GESTOR (frotas/admin.html): experiência PRÓPRIA de
   gestão, distinta do app do motorista. Desktop-first: sidebar
   escura (escala stone) + conteúdo largo com tabelas. No mobile
   a navegação vira faixa de pílulas que quebra linha (sem
   scroll horizontal). Laranja --color-zeus só como acento de
   seleção (regra da marca).
   ============================================================ */
.adm {
  min-height: 100vh;
  background: var(--color-background);
  display: flex; flex-direction: column;
}
.adm__side {
  background: var(--color-stone-800);
  color: var(--color-stone-300);
  padding: var(--space-3) var(--space-4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
.adm__brand {
  display: flex; align-items: center; gap: var(--space-2);
  margin-right: var(--space-4);
  color: var(--color-stone-50); font-weight: var(--weight-bold);
  white-space: nowrap;   /* "Nexus Frotas" em duas linhas descia a barra inteira */
}
/* Logotipo NEGATIVO na barra escura (decisão do Jorge, 2026-08-04). O arquivo lacrado do
   design system é feito para fundo claro: o símbolo é laranja e o wordmark é cinza-pedra
   (#79716b), que sobre a `--color-stone-800` some. O pacote não traz versão negativa, e
   editar o arquivo lacrado está fora de cogitação, então a barra usa o tratamento
   negativo padrão de marca: o mesmo arquivo pintado de branco por filtro. `brightness(0)`
   achata tudo em preto e `invert(1)` vira branco, sem depender da estrutura interna do
   SVG (que pode mudar quando o design system for atualizado). */
.adm__brand img { height: 22px; filter: brightness(0) invert(1); }
.adm__brand .micro { color: var(--color-stone-400); }
.adm__nav { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.adm__nav button {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: none; border-radius: var(--radius-md);
  background: none; color: var(--color-stone-400);
  font-size: var(--text-sm); font-weight: var(--weight-bold);
  cursor: pointer;
  border-left: 3px solid transparent;
}
.adm__nav button svg { width: 16px; height: 16px; }
.adm__nav button:hover { color: var(--color-stone-100); }
.adm__nav button.active {
  /* §9: gradiente nav-active na navegacao ativa, assinatura do design system */
  background: var(--gradient-nav-active);
  color: var(--color-stone-50);
  border-left-color: var(--color-zeus);
}
.adm__user { margin-left: auto; font-size: var(--text-xs); color: var(--color-stone-400); display: flex; align-items: center; gap: var(--space-3); }
.adm__user a { color: var(--color-stone-300); text-decoration: underline; text-underline-offset: 2px; }
.adm__user a:hover { text-decoration: none; }

/* A BARRA DE CIMA das telas com lateral (decisão do Jorge, 2026-08-04): quem está
   logado, home, configurações e sair ficam no MESMO canto em todas as telas do Nexus, o
   alto à direita, que é onde o hub e o app do motorista já os tinham. Antes eles moravam
   no pé da lateral escura, empilhados, e mudavam de lugar de tela para tela. */
.adm__topo {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
  flex-wrap: wrap;
}
.adm__topo-quem {
  margin-right: auto; color: var(--color-text-muted); font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.adm__main { flex: 1; padding: var(--space-4); display: grid; gap: var(--space-4); align-content: start; }
.adm__view { display: grid; gap: var(--space-4); align-content: start; }
.adm__view[hidden] { display: none; }
.adm__title { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.adm__subtitle { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Cartões de indicador (Dashboards) */
.statgrid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat {
  background: var(--color-surface); border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-xs);
  display: grid; gap: var(--space-1);
}
.stat__label { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-text-muted); }
.stat__value { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.stat__value .unit { font-size: var(--text-xs); }
.stat__hint { font-size: var(--text-2xs); color: var(--color-text-faint); }

/* Tabela responsiva: tabela no desktop, cartões rotulados no mobile */
.tablecard {
  background: var(--color-surface); border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.tablecard__head { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-soft); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.rtable { width: 100%; border-collapse: collapse; }
.rtable th, .rtable td { padding: var(--space-2) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border-soft); font-size: var(--text-sm); }
.rtable th { color: var(--color-text-muted); background: var(--color-surface-2); font-weight: var(--weight-bold); font-size: var(--text-xs); white-space: nowrap; }
.rtable td b { white-space: nowrap; }
.rtable .num { text-align: right; }
.rtable .minigauge { min-width: 120px; }
.minigauge .gauge__bar { height: 6px; }

/* Cabeçalho ordenável (clique para ordenar) e filtros dentro do cabeçalho da tabela */
.rtable th.ord { cursor: pointer; user-select: none; white-space: nowrap; }
.rtable th.ord:hover { color: var(--color-text); }
.tablecard__head .field { min-width: 0; gap: 2px; }
.tablecard__head .field input, .tablecard__head .field select {
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background-color: var(--color-surface);
  color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-xs);
  line-height: 1.5;
}
/* Filtro no cabeçalho: caixa apertada, mas a seta continua cabendo. */
.tablecard__head .field select { padding-right: var(--space-6); background-size: 12px 12px;
  background-position: right var(--space-1) center; }

/* Segmento (subtabs de Cadastros) */
.seg { display: inline-flex; gap: var(--space-1); background: var(--color-stone-200); padding: var(--space-1); border-radius: var(--radius-xl); box-shadow: var(--shadow-inset); }
.seg button {
  border: none; background: none; cursor: pointer;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg);
  font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-muted);
}
.seg button.active { background: var(--gradient-nav-active); color: var(--color-stone-50); box-shadow: var(--shadow-xs); }

/* Formulários do admin (linha, com quebra no mobile) */
.adm__form { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: end; padding: var(--space-4); border-top: 1px solid var(--color-border-soft); background: var(--color-surface-2); }
.adm__form .field { min-width: 160px; flex: 1; }
.adm__form .field input, .adm__form .field select {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background-color: var(--color-surface);
  color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-sm);
  width: 100%; line-height: 1.5;
}
/* Espaço para a seta, que aqui vem da regra geral de `.field select` (a caixa é mais
   apertada neste formulário, mas a seta é a mesma). */
.adm__form .field select { padding-right: var(--space-8); }
.adm__form .field select:focus, .adm__form .field input:focus { outline: none; box-shadow: var(--ring-focus); }
.adm__form .btn { padding: var(--space-2) var(--space-6); font-size: var(--text-sm); }

/* Botões de ação em linha de tabela (chip chrome tocável, pequeno) */
.rowbtn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md); border: 1px solid var(--color-border-soft);
  background: var(--gradient-chrome); box-shadow: var(--shadow-xs);
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-bold);
  color: var(--color-stone-700); cursor: pointer; white-space: nowrap;
}
.rowbtn:active { box-shadow: var(--shadow-inset); }
.rowbtn + .rowbtn { margin-left: var(--space-1); }

/* Formulário inline (agendamento de revisão dentro da linha) */
.inlineform { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: end; padding-top: var(--space-2); }
.inlineform .field { min-width: 150px; }
.inlineform .field input {
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-xs); width: 100%;
}

@media (max-width: 768px) {
  /* Tabela vira cartões rotulados (sem scroll horizontal) */
  .rtable thead { display: none; }
  .rtable, .rtable tbody, .rtable tr, .rtable td { display: block; width: 100%; }
  .rtable tr { border-bottom: 1px solid var(--color-border-soft); padding: var(--space-2) 0; }
  .rtable td { border: none; display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-1) var(--space-4); }
  .rtable td.num { text-align: left; }
  .rtable td::before { content: attr(data-label); color: var(--color-text-muted); font-weight: var(--weight-bold); font-size: var(--text-xs); }
  .rtable td:empty { display: none; }
}
@media (min-width: 769px) {
  .adm { display: grid; grid-template-columns: 232px 1fr; }
  .adm__side {
    flex-direction: column; align-items: stretch; gap: var(--space-1);
    padding: var(--space-4) var(--space-3);
    position: sticky; top: 0; height: 100vh;
  }
  .adm__brand { margin: 0 0 var(--space-4) var(--space-2); }
  .adm__nav { flex-direction: column; }
  .adm__nav button { width: 100%; text-align: left; padding: var(--space-3) var(--space-3); }
  .adm__user { margin: auto 0 0 var(--space-2); flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .adm__main { padding: var(--space-6) var(--space-8); }
}

/* ============================================================
   APP EM TELA GRANDE (≥769px): o app do motorista MANTÉM o
   formato de celular em tela cheia (decisão do Fernando,
   2026-07-21): coluna central de altura total, com sombra de
   moldura. A experiência desktop do módulo é o Admin
   (frotas/admin.html); a regra dos dois layouts (§9) é atendida
   no nível do módulo.
   ============================================================ */
@media (min-width: 769px) {
  .app { box-shadow: var(--shadow-lg); }
}

/* ============================================================
   CENTRAL DE RELATÓRIOS (frotas/admin.html): documento imprimível.
   Na tela é uma "folha" branca (preview); ao imprimir (Salvar como
   PDF) o restante do Admin some e sobra só o documento, com quebras
   de página limpas e cabeçalho de tabela repetido a cada página.
   Usa .reltable (classe própria) para NÃO herdar o modo cartão do
   .rtable, que dispararia na largura da página A4 (~718px).
   ============================================================ */
.rel__toolbar { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; justify-content: space-between; }
.rel__controls { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.rel__toggles { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.rel__toggles label { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-muted); cursor: pointer; }
.rel__doc {
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
  width: 100%; max-width: 940px;
  display: grid; gap: var(--space-6);
}
.rel__doc[hidden] { display: none; }
.rel__dochead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); border-bottom: 2px solid var(--color-stone-800); padding-bottom: var(--space-4); }
.rel__brand { display: flex; align-items: center; gap: var(--space-3); }
.rel__brand img { height: 34px; }
.rel__brand h2 { font-size: var(--text-xl); font-weight: var(--weight-bold); }
.rel__brand p { font-size: var(--text-xs); color: var(--color-text-muted); }
.rel__docmeta { display: grid; gap: var(--space-1); font-size: var(--text-xs); text-align: right; }
.rel__docmeta dt { color: var(--color-text-muted); display: inline; }
.rel__docmeta dd { display: inline; font-weight: var(--weight-bold); }
.rel__section { display: grid; gap: var(--space-3); }
.rel__section[hidden] { display: none; }
.rel__section h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); border-left: 3px solid var(--color-zeus); padding-left: var(--space-3); }
.rel__note { font-size: var(--text-xs); color: var(--color-text-muted); }
.rel__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.rel__kpi { border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); padding: var(--space-3); display: grid; gap: 2px; }
.rel__kpi .k { font-size: var(--text-2xs); color: var(--color-text-muted); font-weight: var(--weight-bold); }
.rel__kpi .v { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.reltable-wrap { overflow-x: auto; }
.reltable { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.reltable th, .reltable td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--color-border-soft); vertical-align: top; }
.reltable th { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); background: var(--color-surface-2); white-space: nowrap; }
.reltable .num { text-align: right; white-space: nowrap; }
.reltable tfoot td { font-weight: var(--weight-bold); border-top: 2px solid var(--color-stone-300); border-bottom: none; }
.rel__docfoot { border-top: 1px solid var(--color-border-soft); padding-top: var(--space-3); font-size: var(--text-2xs); color: var(--color-text-faint); text-align: center; }

@media print {
  @page { size: A4; margin: 12mm 10mm; }
  html, body { background: var(--color-surface) !important; }
  .adm { display: block !important; }
  .adm__side { display: none !important; }
  .adm__main { display: block !important; padding: 0 !important; margin: 0 !important; }
  .adm__view:not(#adm-relatorios) { display: none !important; }
  #adm-relatorios .rel__toolbar, #adm-relatorios #rel-status { display: none !important; }
  .rel__doc {
    border: none !important; box-shadow: none !important; border-radius: 0 !important;
    padding: 0 !important; margin: 0 !important; max-width: none !important; gap: 14px !important;
    color: var(--color-stone-900) !important;  /* token, nao preto puro (§9) */
  }
  .rel__section { break-inside: auto; }
  .rel__section h3 { break-after: avoid; }
  .reltable-wrap { overflow: visible !important; }
  .reltable { font-size: 9.5pt !important; }
  .reltable thead { display: table-header-group; } /* repete o cabeçalho por página */
  .reltable tr { break-inside: avoid; }
  .reltable th { background: var(--color-stone-100) !important; color: var(--color-stone-800) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rel__kpis { break-inside: avoid; }
  .rel__dochead { break-after: avoid; }
}

/* Seta de ordenacao: SVG inline no cabecalho (o DS proibe glifo unicode como icone). */
.ord__seta {
  width: 0.85em;
  height: 0.85em;
  display: inline-block;
  vertical-align: -0.1em;
  margin-left: 0.25em;
  color: var(--color-zeus);
}

/* ---------- Regra geral de `hidden` (Plano 6) ----------
   `[hidden]` do navegador é `display: none`, mas QUALQUER classe que declare `display`
   ganha dele por especificidade, e o elemento continua visível mesmo escondido pelo JS.
   O projeto vinha resolvendo caso a caso (`.view[hidden]`, `.adm__view[hidden]`, ...) e
   a lacuna apareceu no Plano 6: `.adm`, `.tabbar`, `.app__driver` e `.iconbtn` declaram
   `display: flex`, então o shell do Admin aparecia atrás da tela de login. Esta regra
   fecha o caso para todo o front; ela é intencionalmente forte, porque `hidden` no HTML
   é uma afirmação sobre o elemento, não uma sugestão de layout. As regras específicas
   acima ficam onde estão: são inofensivas e documentam a intenção local.
   Um elemento que precise de `hidden` com display próprio deve usar outra marcação
   (classe de estado), não competir com esta. */
[hidden] { display: none !important; }

/* ---------- Acesso: portão de login (Plano 6) ----------
   O Admin esconde o shell inteiro atrás deste cartão enquanto a sessão não está pronta;
   o app do motorista usa as views normais (o layout dele já é uma coluna). */
.acesso {
  min-height: 100vh; display: grid; place-items: center;
  /* `--color-background`, não `--color-bg`: o segundo nunca existiu no design system,
     e o fundo do portão de login vinha caindo no vazio desde o Plano 6. */
  padding: var(--space-4); background: var(--color-background);
}
.acesso[hidden] { display: none; }
.acesso__cartao {
  width: 100%; max-width: 22rem; display: grid; gap: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-md);
}
.acesso__marca { display: flex; align-items: center; gap: var(--space-2); }
.acesso__marca img { height: 26px; width: auto; }
.acesso__marca span { font-weight: var(--weight-bold); }
.acesso__titulo { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-bold); }
/* Os blocos do cartão são grid; a regra de [hidden] vem DEPOIS e com a mesma
   especificidade, então ela vence e esconder de fato esconde. Enquanto o seletor era
   `> div:not(.acesso__marca)`, ele empatava com `div[hidden]` e, por vir por último,
   fazia o bloco "sem acesso" aparecer junto com o formulário de login. */
.acesso__cartao .form,
.acesso__cartao .acesso__bloco { display: grid; gap: var(--space-3); }
.acesso__cartao [hidden] { display: none; }

/* Âncora com aparência de botão não é texto de leitura: sem sublinhado. */
.btn { text-decoration: none; }

/* Botão secundário (sair, ações de baixa ênfase). */
.btn--ghost {
  background: transparent; color: var(--color-text-muted);
  border: 1px solid var(--color-border); box-shadow: none;
}
.btn--ghost:hover { color: var(--color-text); border-color: var(--color-text-faint); }

/* Quem está logado e o Sair, na barra do Admin. A barra é uma faixa horizontal com
   flex-wrap, então este bloco é empurrado para a direita com margin-left auto, não com
   margin-top (que não teria efeito nenhum aqui). */
.adm__rodape {
  margin-left: auto; display: flex; align-items: center; gap: var(--space-2);
}
.adm__rodape .btn { padding: var(--space-1) var(--space-3); }

/* Visor de documento/imagem sobreposto à tela (incremento de 2026-08-03: o documento da
   locadora chega ao motorista). Mesmo desenho do visor do Admin; vive aqui porque o app
   do motorista também abre imagem (o PDF vai para nova aba via Blob). */
.foto-visor { position: fixed; inset: 0; background: rgba(28,25,23,.82); display: flex;
  align-items: center; justify-content: center; padding: var(--space-4); z-index: 50; }
.foto-visor[hidden] { display: none; }
.foto-visor__cartao { background: var(--color-surface, #fff); border-radius: var(--radius-2xl, 16px);
  padding: var(--space-3); max-width: min(92vw, 720px); max-height: 92vh; display: flex; flex-direction: column; gap: var(--space-2); }
.foto-visor__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.foto-visor__nome { font-size: .85rem; color: var(--color-text-muted, #78716c); word-break: break-all; }
.foto-visor__fechar { border: 0; background: transparent; font-size: 1.1rem; cursor: pointer; color: var(--color-text, #292524); padding: 4px 8px; }
.foto-visor img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--radius-lg, 10px); }

/* ---------- A PORTA do Nexus (incremento onboarding-e-administracao, LEI-45) ----------
   O hub virou a porta: sem sessão, o cartão de entrar/criar conta ocupa o centro do
   `.hub__main`, sobre o mesmo ambiente de amanhecer. Reaproveita o vocabulário que já
   existe (`.form`, `.field`, `.btn`, `.feedback`) e acrescenta só o que é novo: o
   alternador de abas e o cartão em si.
   Nada aqui usa cor literal: a primeira versão desta tela inventou tokens que não
   existem no design system (`--color-white`, `--gradient-chrome-chip`) e metade das
   regras não resolvia, que foi exatamente o que deixou a tela feia. */
.porta {
  position: relative; z-index: 1;
  width: 100%; display: grid; place-items: center;
}
.porta__cartao {
  width: 100%; max-width: 24rem;
  display: grid; gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}
.porta__marca { display: flex; align-items: center; gap: var(--space-2); }
.porta__marca img { height: 26px; width: auto; }
.porta__marca span { font-weight: var(--weight-bold); font-size: var(--text-sm); }
.porta__titulo {
  margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}
.porta__dica { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* Alternar entre entrar e criar conta: o formulário manda, e a outra opção é uma
   ação DISCRETA embaixo do botão principal. A primeira versão pôs duas abas no
   topo, e o "Entrar" da aba competia com o "Entrar" do botão: dois controles com o
   mesmo rótulo na mesma tela, um deles sem efeito visível. */
.porta__troca {
  margin: 0; padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
  text-align: center; font-size: var(--text-sm); color: var(--color-text-muted);
}
.porta__link {
  border: none; background: none; padding: 0; margin-left: var(--space-1);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-bold);
  color: var(--color-zeus-deep); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.porta__link:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-sm); }

/* Quem está logado, no cabeçalho do hub. */
.hub__sessao {
  margin-left: auto; display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-xs); color: var(--color-text-muted);
}
.hub__sessao .btn { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }

/* A engrenagem do cabeçalho claro: a porta única das configurações (LEI-45). Quadrada
   e do tamanho do alvo de toque mínimo, para servir igual no celular e no PC. */
.hub__engrenagem {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); text-decoration: none;
}
.hub__engrenagem svg { width: 18px; height: 18px; }
.hub__engrenagem:hover { color: var(--color-zeus-deep); border-color: var(--color-zeus); }
.hub__engrenagem:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* Celular: o cartão ocupa a largura útil e o conteúdo começa no alto (o
   `.hub__main` já vira `flex-start` no mobile). A fonte dos campos permanece em
   `--text-base` (16px) de propósito: abaixo disso o iOS dá zoom sozinho ao focar,
   e a tela "pula" na cara de quem digita. */
@media (max-width: 768px) {
  .porta { align-items: start; }
  .porta__cartao {
    max-width: 26rem; padding: var(--space-4);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
  }
  .porta__titulo { font-size: var(--text-xl); }
  .hub__sessao span { display: none; }
  /* O cabeçalho do hub encolhe: 74px com padding de 24px aperta a marca no celular. */
  .hub__header { height: auto; min-height: 56px; padding: var(--space-2) var(--space-3); gap: var(--space-2); }
  .hub__header img { height: 24px; }
  .hub__header .sub, .hub__divisor { display: none; }
}

/* ---------- Configurações (kernel, LEI-45) ----------
   A tela usa o MESMO shell do Admin do Frotas (`.adm`, `.tablecard`, `.rtable`,
   `.adm__form`, `.badge`), que já é responsivo: barra lateral no desktop, barra
   superior no celular, e tabela que vira cartão rotulado abaixo de 768px.
   A primeira versão desta tela inventou um vocabulário paralelo (`.adminsis__*`,
   `.cartao`, `.tabela`, `.pill`) que duplicava tudo isso com aparência própria: por
   isso destoava do resto do sistema. O que sobrou aqui é só o que não existia.
   (Os botões de ícone da barra de cima são `.iconbtn`, o mesmo do app do motorista: um
   `.adm__icone` próprio chegou a existir por dois dias, para a barra escura, e morreu
   com a mudança dos controles para o topo.)

   O segredo da chave aparece UMA vez: caixa escura, monoespaçada, para copiar. */
.segredo {
  display: none; gap: var(--space-2); margin: 0 var(--space-4) var(--space-4);
  padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--color-stone-800); color: var(--color-stone-100);
  font-family: var(--font-mono); font-size: var(--text-sm); word-break: break-all;
}
.segredo.on { display: grid; }
.segredo small { font-family: var(--font-sans); color: var(--color-stone-400); }

/* Ação dentro de linha de tabela: menor que o `.btn`, para não roubar a atenção. */
.btn--mini { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }