/* ============================================================
   INOVE · Estilos base dos previews
   Densidade: mobile-first (apps) + compacta (portal web)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap");
@import url("tokens.css");

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-family);
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 18px;
  -webkit-font-smoothing: antialiased;
}

/* ----- Tipografia (espelha os estilos de texto do Figma) ----- */
.t-display  { font-size: 28px; line-height: 36px; font-weight: 700; }
.t-h1       { font-size: 22px; line-height: 28px; font-weight: 700; }
.t-h2       { font-size: 18px; line-height: 24px; font-weight: 600; }
.t-h3       { font-size: 15px; line-height: 22px; font-weight: 600; }
.t-body-md  { font-size: 13px; line-height: 18px; font-weight: 500; }
.t-body     { font-size: 13px; line-height: 18px; font-weight: 400; }
.t-small-md { font-size: 12px; line-height: 16px; font-weight: 500; }
.t-small    { font-size: 11px; line-height: 15px; font-weight: 400; }
.t-btn      { font-size: 13px; line-height: 18px; font-weight: 600; }
.t-overline { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.t-kpi      { font-size: 24px; line-height: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  font: 600 13px/18px var(--font-family);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  padding: 7px 14px;          /* md = 34px de altura */
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn svg { flex: 0 0 auto; }

.btn-sm { padding: 4px 10px; font-size: 12px; line-height: 16px; }   /* 26px */
.btn-lg { padding: 13px 18px; font-size: 15px; line-height: 20px; }  /* 48px — alvo de toque mobile */

.btn-primary { background: var(--bg-brand); color: var(--ink-900); font-weight: 700; }
.btn-primary:hover { background: var(--bg-brand-hover); }
.btn-primary:active { background: var(--yellow-600); color: #fff; }

.btn-secondary { background: var(--bg-surface); color: var(--ink-900); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-brand-subtle); border-color: var(--border-brand); }

.btn-ghost { background: transparent; color: var(--ink-900); }
.btn-ghost:hover { background: var(--bg-brand-subtle); }

.btn-danger { background: var(--bg-danger); color: #fff; }
.btn-danger:hover { background: var(--red-700); }

.btn-accent { background: var(--bg-accent); color: var(--yellow-400); }
.btn-accent:hover { background: var(--ink-800); }

.btn-success { background: var(--green-600); color: #fff; }
.btn-success:hover { background: var(--green-700); }

.btn:disabled, .btn.is-disabled {
  background: var(--slate-100); color: var(--text-muted);
  border-color: transparent; cursor: not-allowed;
}
.btn.is-focus { box-shadow: 0 0 0 3px var(--blue-200); }

.btn-icon { padding: 7px; }      /* 34px */
.btn-icon.btn-sm { padding: 4px; }

/* ============================================================
   CAMPOS DE FORMULÁRIO
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label { font: 500 12px/16px var(--font-family); color: var(--text-secondary); }
.field-label .req { color: var(--text-danger); }
.field-hint { font: 400 11px/15px var(--font-family); color: var(--text-muted); }
.field-error-msg { font: 400 11px/15px var(--font-family); color: var(--text-danger); display: flex; gap: 4px; align-items: center; }

.input, .select, .textarea {
  font: 400 13px/18px var(--font-family);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 7px 10px;            /* 34px de altura */
  outline: none;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--slate-400); }
.input:focus, .select:focus, .textarea:focus,
.input.is-focus { border-color: var(--border-brand); box-shadow: 0 0 0 3px var(--blue-100); }
.input.is-error, .select.is-error { border-color: var(--border-danger); }
.input.is-error:focus { box-shadow: 0 0 0 3px var(--red-100); }
.input:disabled, .input.is-disabled { background: var(--slate-100); color: var(--text-muted); cursor: not-allowed; }
.textarea { min-height: 68px; resize: vertical; }

.input-group { position: relative; }
.input-group .input { padding-left: 34px; }
.input-group > svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }

.select-wrap { position: relative; }
.select { appearance: none; padding-right: 34px; }
.select-wrap::after {
  content: ""; position: absolute; right: 12px; top: 50%;
  width: 7px; height: 7px; border-right: 2px solid var(--icon-muted); border-bottom: 2px solid var(--icon-muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

/* ============================================================
   BADGES DE STATUS
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11px/16px var(--font-family);
  border-radius: var(--radius-full);
  padding: 2px 9px;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--bg-success-subtle); color: var(--text-success); }
.badge-danger  { background: var(--bg-danger-subtle); color: var(--text-danger); }
.badge-warning { background: var(--bg-warning-subtle); color: #92400E; }
.badge-info    { background: var(--bg-info-subtle); color: var(--text-info); }
.badge-neutral { background: var(--slate-100); color: var(--text-secondary); }
.badge-brand   { background: var(--bg-brand-subtle); color: var(--text-brand); }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-card);
}
.card-pad { padding: var(--spacing-lg); }

/* ============================================================
   MENU SUPERIOR (TOP NAV)
   ============================================================ */
.topnav {
  background: var(--bg-topnav);
  height: 52px;
  display: flex; align-items: center;
  padding: 0 var(--spacing-lg);
  gap: var(--spacing-lg);
}
.topnav-logo { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.topnav-logo span { font: 700 16px/22px var(--font-family); color: #fff; }
.topnav-logo span em { font-style: normal; color: var(--orange-500); }

.topnav-menu { display: flex; align-items: center; gap: var(--spacing-xs); flex: 1; }
.topnav-item {
  display: flex; align-items: center; gap: 7px;
  font: 500 13px/18px var(--font-family);
  color: var(--blue-200);
  padding: 7px 12px; border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none;
  border: none; background: transparent;
}
.topnav-item:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.topnav-item.is-active { color: #fff; background: rgba(255, 255, 255, 0.14); font-weight: 600; box-shadow: inset 0 -2px 0 var(--orange-500); }
.topnav-item .caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }

.topnav-right { display: flex; align-items: center; gap: var(--spacing-sm); flex: 0 0 auto; }
.topnav-iconbtn {
  width: 36px; height: 36px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; position: relative;
}
.topnav-iconbtn:hover { background: rgba(255,255,255,.08); }
.topnav-iconbtn .dot {
  position: absolute; top: 7px; right: 7px; width: 8px; height: 8px;
  background: var(--orange-500); border-radius: 50%; border: 2px solid var(--blue-900);
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--blue-400); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 600 12px/1 var(--font-family);
}

/* ============================================================
   TABELA
   ============================================================ */
.table { width: 100%; border-collapse: collapse; }
.table th {
  font: 600 11px/16px var(--font-family); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-secondary); text-align: left;
  padding: 8px 12px; background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
.table td {
  font: 400 13px/18px var(--font-family); color: var(--text-primary);
  padding: 8px 12px; border-bottom: 1px solid var(--border-default);
  vertical-align: middle;
}
.table tbody tr:hover { background: var(--bg-brand-subtle); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   UTILITÁRIOS DE PREVIEW (specimen)
   ============================================================ */
.spec-page { max-width: 1280px; margin: 0 auto; padding: var(--spacing-3xl) var(--spacing-2xl); }
.spec-section { margin-bottom: var(--spacing-3xl); }
.spec-title { font: 700 24px/32px var(--font-family); margin-bottom: 4px; }
.spec-desc { color: var(--text-secondary); margin-bottom: var(--spacing-xl); max-width: 720px; }
.spec-row { display: flex; flex-wrap: wrap; gap: var(--spacing-lg); align-items: center; }
.spec-grid { display: grid; gap: var(--spacing-lg); }
.spec-label { font: 600 11px/16px var(--font-family); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: var(--spacing-lg) 0 var(--spacing-sm); }

/* ----- Ícones ----- */
.icon { width: 18px; height: 18px; flex: 0 0 auto; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 22px; height: 22px; }

/* ============================================================
   NAV DO DESIGN SYSTEM (entre páginas de preview)
   ============================================================ */
.ds-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-default);
  display: flex; align-items: center; gap: var(--spacing-sm);
  padding: 10px var(--spacing-2xl); flex-wrap: wrap;
}
.ds-nav .brand { display: flex; align-items: center; gap: 8px; font: 700 15px/1 var(--font-family); margin-right: var(--spacing-md); }
.ds-nav .brand em { font-style: normal; color: var(--text-accent); }
.ds-nav a {
  font: 600 13px/1 var(--font-family); color: var(--text-secondary);
  text-decoration: none; padding: 7px 12px; border-radius: var(--radius-md);
}
.ds-nav a:hover { background: var(--bg-subtle); color: var(--text-primary); }
.ds-nav a.is-active { background: var(--bg-brand-subtle); color: var(--text-brand); }

/* ============================================================
   LOGO (lockup reutilizável)
   ============================================================ */
.logo-lockup { display: flex; align-items: center; gap: 10px; }
.logo-lockup .word { font: 700 18px/1 var(--font-family); letter-spacing: -0.01em; }

/* ============================================================
   APP SHELL — moldura de aplicação com menu superior
   ============================================================ */
.app-shell {
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg-page);
  box-shadow: var(--elevation-card);
}
.app-body { padding: var(--spacing-lg); }
.app-body-lg { padding: var(--spacing-xl); }

/* sub-barra de contexto (breadcrumb + título + ações da página) */
.subbar {
  background: var(--bg-surface); border-bottom: 1px solid var(--border-default);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-lg);
  flex-wrap: wrap;
}
.breadcrumb { display: flex; align-items: center; gap: 6px; font: 500 12px/16px var(--font-family); color: var(--text-muted); margin-bottom: 3px; }
.breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--text-brand); }
.breadcrumb .sep { width: 5px; height: 5px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(-45deg); }
.page-title { font: 700 18px/24px var(--font-family); color: var(--text-primary); }
.page-actions { display: flex; align-items: center; gap: var(--spacing-sm); }

/* ============================================================
   TOOLBAR (busca + filtros + ações em listagens)
   ============================================================ */
.toolbar {
  display: flex; align-items: center; gap: var(--spacing-sm);
  padding: var(--spacing-md); border-bottom: 1px solid var(--border-default);
  flex-wrap: wrap;
}
.toolbar .grow { flex: 1; min-width: 200px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12px/16px var(--font-family); color: var(--text-secondary);
  background: var(--bg-surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-full); padding: 5px 10px; cursor: pointer;
}
.chip:hover { border-color: var(--border-brand); color: var(--text-brand); }
.chip.is-active { background: var(--bg-brand-subtle); border-color: var(--border-brand); color: var(--text-brand); }
.chip .x { width: 13px; height: 13px; opacity: .7; }

/* ============================================================
   TABS
   ============================================================ */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-default); }
.tab {
  font: 600 13px/18px var(--font-family); color: var(--text-secondary);
  padding: 9px 14px; cursor: pointer; border: none; background: transparent;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text-primary); }
.tab.is-active { color: var(--text-brand); border-bottom-color: var(--bg-brand); }

/* ============================================================
   PAGINAÇÃO
   ============================================================ */
.pagination {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md); border-top: 1px solid var(--border-default);
  font: 400 12px/16px var(--font-family); color: var(--text-secondary); flex-wrap: wrap;
}
.pager { display: flex; align-items: center; gap: 4px; }
.pager button {
  min-width: 28px; height: 28px; padding: 0 7px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default); background: var(--bg-surface);
  color: var(--text-secondary); font: 600 12px/1 var(--font-family); cursor: pointer;
}
.pager button:hover { border-color: var(--border-brand); color: var(--text-brand); }
.pager button.is-active { background: var(--bg-brand); border-color: var(--bg-brand); color: #fff; }
.pager button:disabled { opacity: .4; cursor: not-allowed; }

/* ============================================================
   KPI CARDS (dashboard / relatórios)
   ============================================================ */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-md); }
.kpi {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--spacing-md) var(--spacing-lg);
  box-shadow: var(--elevation-card); display: flex; flex-direction: column; gap: 5px;
}
.kpi-head { display: flex; align-items: center; justify-content: space-between; }
.kpi-ico { width: 32px; height: 32px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.kpi-label { font: 600 11px/16px var(--font-family); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.kpi-value { font: 600 24px/30px var(--font-family); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.kpi-delta { display: inline-flex; align-items: center; gap: 4px; font: 600 12px/16px var(--font-family); }
.kpi-delta.up { color: var(--text-success); }
.kpi-delta.down { color: var(--text-danger); }

/* ============================================================
   FORMULÁRIO EM GRID (criar / editar)
   ============================================================ */
.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--spacing-md); }
.col-12 { grid-column: span 12; } .col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; } .col-3 { grid-column: span 3; } .col-8 { grid-column: span 8; }
.section-head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--spacing-md); }
.section-head .n { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-brand-subtle); color: var(--text-brand); display: flex; align-items: center; justify-content: center; font: 700 12px/1 var(--font-family); }

/* barra de ações fixa (rodapé de formulário) */
.form-footer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg); background: var(--bg-surface);
  border-top: 1px solid var(--border-default); flex-wrap: wrap;
}

/* ============================================================
   MODAL / CONFIRMAÇÃO
   ============================================================ */
.modal-scrim { background: rgba(15,23,42,.45); border-radius: var(--radius-lg); padding: var(--spacing-2xl); display: flex; align-items: center; justify-content: center; }
.modal {
  background: var(--bg-surface); border-radius: var(--radius-lg);
  box-shadow: var(--elevation-modal); width: 100%; max-width: 440px; overflow: hidden;
}
.modal-head { display: flex; gap: var(--spacing-md); padding: var(--spacing-lg); }
.modal-ico { width: 40px; height: 40px; border-radius: var(--radius-md); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg); background: var(--bg-subtle); }

/* ============================================================
   RELATÓRIO (cabeçalho + folha de impressão)
   ============================================================ */
.report-sheet {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--elevation-card);
  max-width: 820px; margin: 0 auto; overflow: hidden;
}
.report-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--spacing-xl); padding: var(--spacing-xl); border-bottom: 2px solid var(--bg-topnav);
}
.report-meta { text-align: right; font: 400 12px/18px var(--font-family); color: var(--text-secondary); }
.report-meta b { color: var(--text-primary); }
.report-filters { display: flex; flex-wrap: wrap; gap: var(--spacing-md) var(--spacing-2xl); padding: var(--spacing-md) var(--spacing-xl); background: var(--bg-subtle); font: 400 12px/16px var(--font-family); }
.report-filters .k { color: var(--text-muted); display: block; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 10px; margin-bottom: 2px; }
.report-foot { display: flex; justify-content: space-between; padding: var(--spacing-md) var(--spacing-xl); border-top: 1px solid var(--border-default); font: 400 11px/16px var(--font-family); color: var(--text-muted); }

/* barras de gráfico simples (mock de dados) */
.bars { display: flex; align-items: flex-end; gap: var(--spacing-md); height: 160px; padding-top: var(--spacing-md); }
.bars .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.bars .bar-fill { width: 70%; background: var(--bg-brand); border-radius: 6px 6px 0 0; min-height: 4px; }
.bars .bar-fill.accent { background: var(--bg-accent); }
.bars .bar-cap { font: 500 11px/14px var(--font-family); color: var(--text-muted); }
.legend { display: flex; gap: var(--spacing-lg); font: 500 12px/16px var(--font-family); color: var(--text-secondary); }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
.progress { height: 8px; border-radius: var(--radius-full); background: var(--bg-subtle); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--bg-brand); }

/* ============================================================
   DEVICE FRAMES (preview responsivo)
   ============================================================ */
.devices { display: flex; gap: var(--spacing-2xl); align-items: flex-start; flex-wrap: wrap; }
.device { display: flex; flex-direction: column; gap: var(--spacing-md); }
.device .cap { font: 600 12px/16px var(--font-family); color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.device .cap small { color: var(--text-muted); font-weight: 400; }
.screen {
  background: var(--bg-page); border: 8px solid var(--slate-800);
  border-radius: 28px; overflow: hidden; box-shadow: var(--elevation-modal);
}
.screen.web { border-radius: 12px; border-width: 1px; border-color: var(--border-strong); }
.screen-scroll { overflow-y: auto; }

/* topnav compacta para mobile */
.topnav-mobile { height: 52px; padding: 0 var(--spacing-md); gap: var(--spacing-md); }
.topnav-mobile .topnav-logo span { font-size: 15px; }

/* bottom nav (mobile) */
.bottomnav {
  display: flex; background: var(--bg-surface); border-top: 1px solid var(--border-default);
}
.bottomnav a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 0; text-decoration: none; color: var(--text-muted);
  font: 500 10px/12px var(--font-family);
}
.bottomnav a.is-active { color: var(--text-brand); }

/* lista em cards (mobile) — substitui tabela */
.m-list { display: flex; flex-direction: column; }
.m-card { padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--border-default); background: var(--bg-surface); }
.m-card .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.m-card .meta { display: flex; justify-content: space-between; font: 400 12px/16px var(--font-family); color: var(--text-secondary); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty { text-align: center; padding: var(--spacing-3xl); color: var(--text-secondary); }
.empty .ico { width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--bg-brand-subtle); color: var(--icon-brand); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--spacing-md); }

/* ============================================================
   CONTEXT BAR — empresa / filial / data de movimentação
   Faixa global logo abaixo do menu superior. Define o "contexto
   de trabalho": todos os lançamentos herdam empresa, filial e data.
   ============================================================ */
.contextbar {
  display: flex; align-items: center; gap: var(--spacing-sm);
  padding: 6px var(--spacing-lg);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  flex-wrap: wrap;
}
.contextbar .ctx-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/16px var(--font-family); letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); padding-right: 4px;
}
.ctx-item {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--bg-surface);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.ctx-item:hover { border-color: var(--border-brand); background: var(--bg-brand-subtle); }
.ctx-item .ctx-ico { color: var(--icon-brand); flex: 0 0 auto; }
.ctx-item .ctx-text { display: flex; flex-direction: column; line-height: 1; }
.ctx-item .ctx-text .k { font: 600 10px/12px var(--font-family); letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; }
.ctx-item .ctx-text .v { font: 600 12px/15px var(--font-family); color: var(--text-primary); }
.ctx-item .caret-d { width: 7px; height: 7px; border-right: 1.5px solid var(--icon-muted); border-bottom: 1.5px solid var(--icon-muted); transform: rotate(45deg); margin-top: -2px; }
.ctx-sep { width: 1px; height: 26px; background: var(--border-default); }

/* faixa de contexto compacta (tablet/celular) */
.contextbar-compact {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-default);
  font: 600 11px/14px var(--font-family); color: var(--text-secondary);
  white-space: nowrap; overflow: hidden;
}
.contextbar-compact .c-ico { color: var(--icon-brand); flex: 0 0 auto; }

/* ============================================================
   CAMPO DE BUSCA "LOOKUP" — substitui o autocomplete
   Campo pequeno (código) + botão lupa + campo grande (descrição)
   ============================================================ */
.lookup { display: flex; gap: var(--spacing-sm); align-items: flex-start; }
.lookup-code { position: relative; width: 118px; flex: 0 0 auto; }
.lookup-code .input { padding-right: 36px; font-variant-numeric: tabular-nums; }
.lookup-code .lupa-btn {
  position: absolute; top: 1px; right: 1px; bottom: 1px; width: 32px;
  border: none; border-left: 1px solid var(--border-strong);
  background: var(--bg-subtle); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--icon-default); transition: background .15s ease, color .15s ease;
}
.lookup-code .lupa-btn:hover { background: var(--bg-brand-subtle); color: var(--icon-brand); }
.lookup-desc { flex: 1; min-width: 0; }
.lookup-desc .input { background: var(--slate-50); color: var(--text-primary); }
.lookup-desc .input.is-empty { color: var(--text-muted); font-style: italic; }
.lookup-desc .input.is-loading { color: var(--text-muted); }

/* ============================================================
   MODAL LARGO (busca / listagem dentro de modal)
   ============================================================ */
.modal-lg { max-width: 760px; }
.modal-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--border-default);
}
.modal-titlebar h3 { display: flex; align-items: center; gap: 10px; }
.modal-close { width: 30px; height: 30px; border-radius: var(--radius-md); border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--icon-default); }
.modal-close:hover { background: var(--bg-subtle); }

/* ============================================================
   DRAWER (painel lateral) — usado por "Mais filtros"
   ============================================================ */
.drawer-scrim { background: rgba(15,23,42,.45); border-radius: var(--radius-lg); display: flex; justify-content: flex-end; overflow: hidden; }
.drawer {
  width: 360px; max-width: 90%; background: var(--bg-surface);
  display: flex; flex-direction: column; box-shadow: var(--elevation-modal);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--border-default); }
.drawer-body { padding: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-lg); overflow-y: auto; }
.drawer-foot { display: flex; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg); border-top: 1px solid var(--border-default); background: var(--bg-subtle); }
.filter-group { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.filter-group > .gl { font: 600 11px/16px var(--font-family); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.check-row { display: flex; align-items: center; gap: 8px; font: 400 13px/18px var(--font-family); color: var(--text-primary); }
.range-row { display: flex; align-items: center; gap: 8px; }
.range-row span { color: var(--text-muted); }

/* dropdown genérico (popover) — ex.: trocar empresa */
.popover { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--elevation-dropdown); width: 300px; overflow: hidden; }
.popover-head { padding: 8px var(--spacing-md); font: 600 11px/16px var(--font-family); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-default); }
.popover-item { display: flex; align-items: center; gap: 10px; padding: 8px var(--spacing-md); cursor: pointer; }
.popover-item:hover { background: var(--bg-subtle); }
.popover-item.is-active { background: var(--bg-brand-subtle); }
.popover-item .pi-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); flex: 0 0 auto; }
.popover-item.is-active .pi-radio { border-color: var(--bg-brand); box-shadow: inset 0 0 0 3px var(--bg-brand); }

/* ============================================================
   FICHA DE ESPECIFICAÇÕES — documentação técnica recolhível
   ============================================================ */
.specs { margin-top: var(--spacing-lg); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-surface); }
.specs > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 10px;
  padding: 12px var(--spacing-lg); background: var(--bg-subtle);
  font: 600 13px/16px var(--font-family); color: var(--text-secondary);
}
.specs > summary::-webkit-details-marker { display: none; }
.specs > summary .chev { width: 8px; height: 8px; border-right: 2px solid var(--icon-muted); border-bottom: 2px solid var(--icon-muted); transform: rotate(-45deg); transition: transform .15s ease; }
.specs[open] > summary .chev { transform: rotate(45deg); }
.specs > summary .tag-spec { margin-left: auto; font: 600 10px/14px var(--font-family); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }

.spec-table { width: 100%; border-collapse: collapse; font: 400 12px/17px var(--font-family); }
.spec-table th {
  text-align: left; font: 600 10px/14px var(--font-family); letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted); padding: 8px 12px; background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default); white-space: nowrap; position: sticky; top: 0;
}
.spec-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-default); color: var(--text-secondary); vertical-align: top; }
.spec-table tr:last-child td { border-bottom: none; }
.spec-table td:first-child { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.spec-table code, .spec code {
  font: 500 11px/16px ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--bg-subtle); color: var(--text-brand);
  padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}
.spec-table .sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; border: 1px solid rgba(0,0,0,.12); vertical-align: -1px; margin-right: 5px; }
.spec-note { padding: 10px var(--spacing-lg); font: 400 12px/18px var(--font-family); color: var(--text-secondary); background: var(--bg-info-subtle); border-top: 1px solid var(--border-default); }
.spec-scroll { overflow-x: auto; }

/* ============================================================
   RESPONSIVO — previews encolhem em telas estreitas
   ============================================================ */
@media (max-width: 720px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid > [class^="col-"] { grid-column: span 12; }
  .topnav-menu { display: none; }
}

/* ============================================================
   PHONE FRAME · mockups de app mobile
   ============================================================ */
.phone {
  width: 320px; background: #0A0A0A; border-radius: 36px;
  padding: 10px; box-shadow: var(--elevation-modal); flex: 0 0 auto;
}
.phone-screen {
  background: var(--bg-page); border-radius: 28px; overflow: hidden;
  height: 640px; position: relative; display: flex; flex-direction: column;
}
.phone-notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 22px; background: #0A0A0A; border-radius: 12px; z-index: 5;
}
.phone-status {
  height: 36px; padding: 10px 18px 0; display: flex; justify-content: space-between;
  font: 600 11px/1 var(--font-family); color: var(--text-primary); flex: 0 0 auto; z-index: 2;
}
.phone-homebar {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 108px; height: 4px; background: rgba(0,0,0,.35); border-radius: 4px; z-index: 5;
}
.phones-row { display: flex; flex-wrap: wrap; gap: var(--spacing-2xl); align-items: flex-start; }
.map-fake {
  flex: 1; background:
    linear-gradient(180deg, rgba(245,197,24,.08), transparent 40%),
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(0,0,0,.04) 28px, rgba(0,0,0,.04) 29px),
    repeating-linear-gradient(90deg, transparent, transparent 28px, rgba(0,0,0,.04) 28px, rgba(0,0,0,.04) 29px),
    #E8EDE8;
  position: relative; min-height: 220px;
}
.map-pin-user {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: var(--yellow-400); border: 3px solid #0A0A0A;
  box-shadow: 0 0 0 8px rgba(245,197,24,.25);
}
.map-pin-driver {
  position: absolute; width: 36px; height: 36px; border-radius: 50%;
  background: #0A0A0A; color: var(--yellow-400);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.route-line {
  position: absolute; border: 2px dashed #0A0A0A; border-radius: 40px;
  opacity: .35; pointer-events: none;
}
.sheet {
  background: var(--bg-surface); border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 28px rgba(0,0,0,.12); padding: 12px 16px 28px; z-index: 3;
}
.sheet .handle { width: 40px; height: 4px; border-radius: 4px; background: var(--ink-200); margin: 0 auto 12px; }
.status-toggle {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: 14px; background: var(--bg-surface); border: 1px solid var(--border-default);
}
.status-dot { width: 10px; height: 10px; border-radius: 50%; }
.status-dot.off { background: var(--ink-400); }
.status-dot.on { background: var(--green-600); box-shadow: 0 0 0 4px rgba(5,150,105,.2); }
.status-dot.busy { background: var(--amber-500); box-shadow: 0 0 0 4px rgba(245,158,11,.2); }
.switch {
  width: 48px; height: 28px; border-radius: 999px; background: var(--ink-200);
  position: relative; flex: 0 0 auto; transition: background .2s;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .2s;
}
.switch.is-on { background: var(--green-600); }
.switch.is-on::after { left: 23px; }
.vehicle-card {
  flex: 1; border: 2px solid var(--border-default); border-radius: 14px;
  padding: 12px; text-align: center; cursor: pointer; background: #fff;
}
.vehicle-card.is-active { border-color: var(--yellow-400); background: var(--yellow-50); }
.vehicle-card .price { font: 800 18px/1 var(--font-family); margin-top: 6px; }
.pulse-banner {
  background: var(--yellow-400); color: var(--ink-900); font: 700 13px/1 var(--font-family);
  padding: 10px 14px; display: flex; align-items: center; gap: 8px; animation: pulseSoft 1.6s ease infinite;
}
@keyframes pulseSoft { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.08); } }