@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════
   CONTROLMAX — Design System Clean
═══════════════════════════════════════ */
:root {
  /* Brand */
  --blue:    #2563eb;
  --blue-d:  #1d4ed8;
  --blue-l:  #3b82f6;
  --blue-bg: #eff6ff;
  --blue-b:  #bfdbfe;

  /* Neutrals */
  --navy:    #0f172a;
  --navy-2:  #1e293b;
  --bg:      #f8fafc;
  --bg2:     #f1f5f9;
  --card:    #ffffff;
  --border:  #e2e8f0;
  --border2: #cbd5e1;
  --text:    #0f172a;
  --text-2:  #334155;
  --text-3:  #64748b;
  --text-4:  #94a3b8;

  /* Status */
  --ok:      #059669; --ok-bg: #ecfdf5; --ok-b: #a7f3d0;
  --warn:    #d97706; --warn-bg:#fffbeb; --warn-b:#fde68a;
  --err:     #dc2626; --err-bg: #fef2f2; --err-b: #fecaca;

  /* Shape */
  --r: 10px;
  --r-sm: 6px;
  --r-lg: 14px;
  --r-xl: 18px;

  /* Shadow */
  --s1: 0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --s2: 0 4px 16px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05);
  --s3: 0 12px 40px rgba(15,23,42,.14), 0 4px 12px rgba(15,23,42,.07);
  --s4: 0 24px 64px rgba(15,23,42,.18), 0 8px 24px rgba(15,23,42,.08);

  /* Sidebar */
  --sw: 220px;
}

/* ─── Reset ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

/* ─── Utilities ──────────────────────── */
.hint { color: var(--text-3); font-size: 12px; margin: 0 0 8px; line-height: 1.55; }
.empty {
  padding: 32px 20px; color: var(--text-4);
  background: var(--bg); border: 1.5px dashed var(--border2);
  border-radius: var(--r); text-align: center; font-size: 12.5px;
}

/* ═══════════════════════════════════════
   LOGIN
═══════════════════════════════════════ */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 460px;
}
.login-hero {
  background: var(--navy);
  color: #fff;
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.login-hero::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.22) 0%, transparent 68%);
  top: -220px; right: -160px; pointer-events: none;
}
.login-hero::after {
  content: '';
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8,145,178,.14) 0%, transparent 68%);
  bottom: -180px; left: -120px; pointer-events: none;
}
.logo-big {
  width: 52px; height: 52px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--blue), var(--blue-l));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; color: #fff;
  margin-bottom: 28px;
  box-shadow: 0 8px 24px rgba(37,99,235,.4);
  position: relative; z-index: 1;
}
.login-hero h1 {
  font-size: 28px; font-weight: 800;
  letter-spacing: -.6px; margin-bottom: 14px;
  position: relative; z-index: 1;
}
.login-hero p {
  font-size: 14px; line-height: 1.7;
  color: rgba(255,255,255,.58); max-width: 520px;
  position: relative; z-index: 1;
}
.login-card {
  background: var(--card);
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px 52px;
  box-shadow: -20px 0 60px rgba(0,0,0,.18);
}
.login-card h2 { font-size: 22px; font-weight: 800; margin-bottom: 6px; letter-spacing: -.4px; }
.login-card > p { color: var(--text-3); margin-bottom: 28px; font-size: 12.5px; }

/* ═══════════════════════════════════════
   APP SHELL
═══════════════════════════════════════ */
.app-shell { display: flex; min-height: 100vh; }
.content { margin-left: var(--sw); flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ═══════════════════════════════════════
   SIDEBAR — mais limpa, ícone + label
═══════════════════════════════════════ */
.sidebar {
  width: var(--sw);
  background: var(--navy);
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0;
  z-index: 30;
}
.brand {
  padding: 16px 14px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  min-height: 66px; position: relative;
}
.brand-mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--blue), var(--blue-l));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; color: #fff;
  flex: 0 0 auto;
  box-shadow: 0 4px 12px rgba(37,99,235,.45);
}
.brand-text h1 {
  font-size: 13.5px; font-weight: 700;
  color: #fff; letter-spacing: -.2px; line-height: 1.2;
}
.brand-text span {
  font-size: 10px; color: rgba(255,255,255,.35);
  display: block; margin-top: 2px;
}
.menu-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.45);
  border-radius: var(--r-sm); width: 22px; height: 22px;
  font-size: 13px; display: flex; align-items: center; justify-content: center;
  transition: .15s;
}
.menu-toggle:hover { background: rgba(255,255,255,.12); color: #fff; }

.nav {
  padding: 8px 6px; overflow-y: auto; flex: 1;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent;
}
.nav::-webkit-scrollbar { width: 3px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }

.nav-section { margin-bottom: 2px; }
.nav-title {
  padding: 10px 10px 4px;
  color: rgba(255,255,255,.25); font-size: 9.5px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  display: flex; align-items: center; gap: 7px;
}
.nav-icon {
  width: 18px; height: 18px; border-radius: 5px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.35);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.nav-icon svg { width: 11px; height: 11px; }

.nav-group { display: grid; gap: 1px; }
.nav-item {
  width: 100%; border: 0; background: transparent;
  color: rgba(255,255,255,.52); text-align: left;
  padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 400;
  display: flex; gap: 8px; align-items: center;
  transition: all .12s; position: relative;
}
.nav-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.2); flex: 0 0 auto;
}
.nav-text { flex: 1; }
.nav-item:hover {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
}
.nav-item.active {
  background: rgba(37,99,235,.28);
  color: #fff; font-weight: 600;
  border-left: 2px solid var(--blue-l);
  padding-left: 8px;
}
.nav-item.active .nav-dot { background: var(--blue-l); }

.side-box {
  padding: 8px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.side-logout { width: 100%; }

/* Collapsed */
.menu-collapsed { --sw: 54px; }
.menu-collapsed .content { margin-left: 54px; }
.menu-collapsed .brand { justify-content: center; padding: 14px 8px; }
.menu-collapsed .brand-text,
.menu-collapsed .nav-title span,
.menu-collapsed .nav-text,
.menu-collapsed .side-box { display: none; }
.menu-collapsed .nav-icon { display: none; }
.menu-collapsed .nav { padding: 8px 4px; }
.menu-collapsed .nav-item { justify-content: center; padding: 9px 5px; }
.menu-collapsed .nav-dot { width: 6px; height: 6px; }
.menu-collapsed .brand-mark { margin: 0; }
.menu-collapsed .menu-toggle { right: 7px; }

/* ═══════════════════════════════════════
   TOPBAR
═══════════════════════════════════════ */
.topbar {
  min-height: 58px; background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 22px;
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 1px 0 var(--border), 0 2px 8px rgba(0,0,0,.04);
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar h2 { font-size: 15px; font-weight: 700; letter-spacing: -.3px; line-height: 1.2; }
.topbar p { color: var(--text-3); font-size: 11.5px; margin-top: 2px; }
.actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.main { padding: 20px 22px; flex: 1; }

/* ═══════════════════════════════════════
   BUTTONS — 3 níveis claros
═══════════════════════════════════════ */
.btn {
  border: 0; border-radius: var(--r-sm);
  background: var(--blue); color: #fff;
  font-weight: 600; font-size: 12.5px;
  padding: 8px 14px; line-height: 1;
  display: inline-flex; align-items: center; gap: 5px;
  transition: all .15s; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(37,99,235,.25), 0 2px 8px rgba(37,99,235,.18);
  letter-spacing: -.1px;
}
.btn:hover { background: var(--blue-d); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,99,235,.35); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn.secondary {
  background: var(--blue-bg); color: var(--blue-d);
  box-shadow: none; border: 1.5px solid var(--blue-b);
}
.btn.secondary:hover { background: #dbeafe; transform: translateY(-1px); }
.btn.ghost {
  background: var(--card); color: var(--text-2);
  border: 1.5px solid var(--border2); box-shadow: var(--s1);
}
.btn.ghost:hover { background: var(--bg2); transform: translateY(-1px); }
.btn.danger { background: var(--err); color: #fff; box-shadow: none; }
.btn.danger:hover { background: #b91c1c; transform: translateY(-1px); }
.btn.warn { background: var(--warn); color: #fff; box-shadow: none; }
.btn.warn:hover { background: #b45309; transform: translateY(-1px); }
.btn-xs { border:0; border-radius:5px; font-size:11px; font-weight:600; padding:4px 8px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:3px; line-height:1; transition:opacity .15s; }
.btn-xs:hover { opacity:.82; }
.btn-xs.secondary { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.btn-xs.ok, .btn-xs.success { background:#16a34a; color:#fff; }
.btn-xs.danger { background:#dc2626; color:#fff; }
.btn-xs.warn { background:#d97706; color:#fff; }
.btn:active { transform: none; }
.back-btn {
  background: var(--bg2) !important; color: var(--text-2) !important;
  border: 1.5px solid var(--border2) !important;
  box-shadow: var(--s1) !important; padding: 7px 12px !important;
  font-weight: 500 !important;
}
.back-btn:hover { background: var(--card) !important; transform: translateY(-1px) !important; }

/* ═══════════════════════════════════════
   LAYOUT GRID
═══════════════════════════════════════ */
.grid { display: grid; gap: 14px; }
.grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compact-grid { gap: 12px; }
.page-stack { display: grid; gap: 14px; }

/* ═══════════════════════════════════════
   CARDS
═══════════════════════════════════════ */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--s1);
  padding: 16px; min-width: 0;
}
.compact-card { padding: 14px 16px; }
.card h3 { font-size: 14px; font-weight: 700; margin-bottom: 12px; letter-spacing: -.2px; }

/* KPI — números que chamam atenção */
.kpi {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--s1);
  transition: all .18s;
  position: relative; overflow: hidden;
}
.kpi::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--blue-l));
  opacity: 0; transition: opacity .18s;
}
.kpi:hover { box-shadow: var(--s2); transform: translateY(-2px); }
.kpi:hover::after { opacity: 1; }
.kpi span { color: var(--text-3); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.kpi strong { display: block; font-size: 24px; font-weight: 800; margin-top: 8px; letter-spacing: -.7px; color: var(--text); line-height: 1; }
.kpi small { display: block; color: var(--text-4); margin-top: 8px; font-size: 11px; }

/* Section title */
.section-title {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 10px;
}
.section-title h3 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -.2px; }
.section-title > div { display: flex; gap: 6px; flex-wrap: wrap; }

/* ═══════════════════════════════════════
   TABLE — limpa, densidade certa
═══════════════════════════════════════ */
.table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card);
}
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th, td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: middle; white-space: nowrap;
}
th {
  background: var(--bg2); color: var(--text-3);
  font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 700;
  border-bottom: 1.5px solid var(--border2);
  position: sticky; top: 0; z-index: 1;
}
tr:last-child td { border-bottom: 0; }
tr { transition: background .1s; }
tbody tr:hover td { background: #f8fbff; }
.table-wrap td small { color: var(--text-4); font-size: 10.5px; display: block; margin-top: 2px; }
.table-wrap td:nth-child(1), .table-wrap td:nth-child(2) { white-space: normal; }
.table-wrap tbody tr td { padding-top: 12px; padding-bottom: 12px; vertical-align: top; }
.table-wrap .empty { border: none; }

/* ═══════════════════════════════════════
   BADGES — status bem visíveis
═══════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center;
  border-radius: 999px; padding: 3px 9px;
  font-weight: 700; font-size: 10.5px;
  border: 1px solid transparent;
  letter-spacing: .01em;
}
.badge.ok     { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-b); }
.badge.warn   { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-b); }
.badge.danger { background: var(--err-bg);  color: var(--err);  border-color: var(--err-b); }
.badge.info   { background: var(--blue-bg); color: var(--blue-d); border-color: var(--blue-b); }

/* ═══════════════════════════════════════
   FIELDS / FORM
═══════════════════════════════════════ */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.field label { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1.5px solid var(--border2);
  background: var(--card);
  border-radius: var(--r-sm);
  padding: 8px 11px; font-size: 13px; outline: none; color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 72px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.form-grid-compact { grid-template-columns: repeat(4, 1fr); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: 1 / -1; }

.form-section {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px; margin-bottom: 12px;
  background: var(--card); box-shadow: var(--s1);
}
.form-section h4 {
  margin-bottom: 12px; color: var(--navy-2); font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border); padding-bottom: 9px;
}
.form-section h4::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); display: inline-block; flex: 0 0 auto;
}
.destaque-section { border-color: var(--blue-b); background: #fafcff; }
.api-section { border-left: 3px solid var(--blue); }
.admin-note {
  margin-top: 10px; padding: 10px 13px; border-radius: var(--r-sm);
  background: #fffbeb; border: 1px solid var(--warn-b);
  color: #78350f; font-size: 12px; line-height: 1.5;
}
.admin-lock {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; border-left: 3px solid var(--blue);
}
.admin-lock span { display: block; color: var(--text-3); font-size: 12px; margin-top: 3px; }
.admin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.admin-grid > div {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 12px; background: var(--bg);
}
.admin-grid b { display: block; margin-bottom: 5px; font-size: 12.5px; }
.admin-grid span { color: var(--text-3); font-size: 12px; line-height: 1.4; }

/* ═══════════════════════════════════════
   MODAL
═══════════════════════════════════════ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.7);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 20px; z-index: 50; overflow: auto;
  backdrop-filter: blur(4px);
  animation: fadeIn .18s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: min(1180px, 100%);
  background: var(--card);
  border-radius: var(--r-xl);
  box-shadow: var(--s4);
  overflow: hidden;
  animation: slideUp .2s ease;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 22px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--card); z-index: 3;
}
.modal-header h3 { font-size: 17px; font-weight: 800; letter-spacing: -.4px; }
.modal-body {
  padding: 18px; max-height: calc(100vh - 140px);
  overflow: auto; background: var(--bg);
}
.modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 22px; border-top: 1px solid var(--border);
  background: var(--card); position: sticky; bottom: 0; z-index: 2;
}
.modal-footer .btn { min-width: 120px; justify-content: center; }

/* ═══════════════════════════════════════
   ALERTS
═══════════════════════════════════════ */
.alert-list { display: grid; gap: 8px; }
.alert-item {
  border-radius: var(--r);
  padding: 12px 16px; border: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 12px;
  background: var(--card); align-items: center; transition: box-shadow .15s;
}
.alert-item:hover { box-shadow: var(--s2); }
.alert-item b { font-size: 13px; }
.alert-item span { font-size: 12px; color: var(--text-3); }
.alert-item.danger { background: var(--err-bg); border-color: var(--err-b); }
.alert-item.warn   { background: var(--warn-bg); border-color: var(--warn-b); }
.alert-item.ok     { background: var(--ok-bg);  border-color: var(--ok-b); }

/* ── Cobrança rows ── */
.cob-list { display: grid; gap: 6px; }
.cob-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 10px 14px; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--card);
  transition: box-shadow .15s;
}
.cob-row:hover { box-shadow: var(--s2); }
.cob-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cob-info b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cob-info span { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cob-valor { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.cob-valor b { font-size: 13px; }
.cob-valor span { font-size: 11px; color: var(--text-3); }
.cob-actions { display: flex; gap: 5px; align-items: center; flex-wrap: nowrap; }
.cob-row.cob-danger { background: var(--err-bg); border-color: var(--err-b); }
.cob-row.cob-warn   { background: var(--warn-bg); border-color: var(--warn-b); }
.cob-row.cob-ok     { background: var(--ok-bg);  border-color: var(--ok-b); }
@media (max-width: 640px) {
  .cob-row { grid-template-columns: 1fr; }
  .cob-valor, .cob-actions { flex-direction: row; justify-content: space-between; }
}

/* ═══════════════════════════════════════
   SEARCH / TOOLBAR
═══════════════════════════════════════ */
.toolbar {
  display: flex; justify-content: space-between; gap: 10px;
  align-items: center; margin-bottom: 12px; flex-wrap: wrap;
}
.search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.search input, .search select {
  border: 1.5px solid var(--border2); border-radius: var(--r-sm);
  padding: 8px 11px; background: var(--card);
  min-width: 200px; font-size: 12.5px; outline: none; color: var(--text);
  transition: border-color .15s;
}
.search input:focus, .search select:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.client-toolbar { margin: 8px 0 12px; }
.client-toolbar .search { width: 100%; }
.client-toolbar .search input { min-width: 300px; }
.vehicle-toolbar .search { width: 100%; }
.vehicle-toolbar .search input { min-width: 280px; }

/* ═══════════════════════════════════════
   CHECK LIST (emissão em lote)
═══════════════════════════════════════ */
.check-list {
  display: grid; gap: 6px; max-height: 300px; overflow: auto;
  padding: 8px; border: 1px solid var(--border);
  border-radius: var(--r); background: var(--bg);
}
.check-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 13px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  transition: border-color .12s, box-shadow .12s;
}
.check-row:hover { border-color: var(--blue-b); box-shadow: var(--s1); }
.check-row input[type=checkbox] { margin-top: 2px; accent-color: var(--blue); width: 15px; height: 15px; }
.fiscal-row em { display: block; margin-top: 4px; color: var(--blue-d); font-style: normal; font-size: 11px; }
.lote-list { max-height: 360px; }
.lote-list em { display: block; color: var(--blue-d); font-style: normal; font-size: 11px; margin-top: 4px; }

/* ═══════════════════════════════════════
   ACTIONS
═══════════════════════════════════════ */
.mini-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.mini-actions .btn { padding: 6px 10px; font-size: 11.5px; }
.ss-wrap { position: relative; }
.ss-wrap input[type="text"] { width: 100%; box-sizing: border-box; }
.ss-dropdown { position: absolute; top: calc(100% + 2px); left: 0; right: 0; background: var(--card); border: 1.5px solid var(--primary); border-radius: 6px; z-index: 200; max-height: 200px; overflow-y: auto; box-shadow: 0 6px 20px rgba(0,0,0,0.13); }
.ss-option { padding: 8px 12px; cursor: pointer; font-size: 12.5px; color: var(--text-1); border-bottom: 1px solid var(--border); }
.ss-option:last-child { border-bottom: none; }
.ss-option:hover, .ss-option.ss-active { background: #eff6ff; color: var(--primary); }
.ss-option.ss-none { color: var(--text-3); font-style: italic; cursor: default; }
.table-wrap th.col-acoes, .table-wrap td.col-acoes { position: sticky; right: 0; background: var(--card); z-index: 2; box-shadow: -2px 0 6px rgba(0,0,0,0.06); }
.action-stack {
  display: grid; grid-template-columns: repeat(2, minmax(82px, 1fr));
  gap: 4px; min-width: 185px;
}
.action-stack .btn { width: 100%; justify-content: center; padding: 6px 7px; font-size: 11.5px; }
.action-stack .btn.danger { box-shadow: none; }
.row-actions { min-width: 185px; white-space: normal !important; }
.inline-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ═══════════════════════════════════════
   MODULE / OP / CLIENT CARDS
═══════════════════════════════════════ */
.module-grid { align-items: stretch; }
.module-card { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.module-card p { margin: 6px 0 0; color: var(--text-3); font-size: 12px; line-height: 1.5; }
.module-card .mini-actions { justify-content: flex-end; }
.op-card { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.op-card h3 { font-size: 13.5px; font-weight: 700; margin-bottom: 5px; }
.op-card p { margin: 0; color: var(--text-3); font-size: 12px; line-height: 1.5; }
.stats-inline { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.stats-inline span {
  display: inline-flex; align-items: center;
  padding: 4px 9px; border-radius: 999px;
  background: var(--blue-bg); border: 1px solid var(--blue-b);
  color: var(--blue-d); font-size: 11px; font-weight: 600;
}

/* ═══════════════════════════════════════
   CLIENT CARDS — melhorados
═══════════════════════════════════════ */
.client-list { display: grid; gap: 10px; }
.client-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 14px 18px;
  box-shadow: var(--s1); transition: all .18s;
}
.client-card:hover { box-shadow: var(--s2); border-color: var(--border2); transform: translateY(-1px); }
.client-main {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.client-main b { font-size: 14px; font-weight: 700; letter-spacing: -.2px; }
.client-main span { display: block; color: var(--text-3); font-size: 11.5px; margin-top: 3px; }
.client-grid {
  display: grid; grid-template-columns: 1.1fr 1.1fr 1fr .9fr .9fr; gap: 10px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 11px 0;
}
.client-grid div { min-width: 0; }
.client-grid small { display: block; color: var(--text-4); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.client-grid b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-grid span { display: block; color: var(--text-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }

/* ═══════════════════════════════════════
   API BOXES
═══════════════════════════════════════ */
.api-box { border: 1.5px dashed var(--border2); background: var(--bg); border-radius: var(--r); padding: 14px; }
.api-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.api-result { border: 1px solid var(--blue-b); background: var(--blue-bg); border-radius: var(--r); padding: 12px; font-size: 12px; line-height: 1.5; color: var(--navy-2); }
.api-result.success { border-color: var(--ok-b); background: var(--ok-bg); color: var(--ok); }
.api-result.empty { background: var(--card); border-style: dashed; color: var(--text-3); }
.api-result-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.api-result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.api-result-grid > div { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px; }

/* ═══════════════════════════════════════
   FISCAL / FINANCEIRO
═══════════════════════════════════════ */
.fiscal-step-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fiscal-step-mini span {
  padding: 11px 12px; border: 1px solid var(--blue-b);
  background: var(--blue-bg); border-radius: var(--r-sm);
  font-size: 12px; font-weight: 600; color: var(--blue-d);
}
.flow-card { display: grid; gap: 5px; min-height: 78px; }
.flow-card b { font-size: 13px; font-weight: 700; }
.flow-card span { color: var(--text-3); font-size: 12px; line-height: 1.4; }
.fiscal-flow-grid .flow-card { padding: 13px 14px; }
.fiscal-flow-grid .flow-card b { display: block; margin-bottom: 6px; }
.fiscal-flow-grid .flow-card span { display: block; }
.finance-action { display: grid; gap: 12px; }
.finance-action h3 { margin: 0; }
.quick-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.report-card { display: grid; gap: 10px; align-content: space-between; }
.report-card h3 { margin-bottom: 0; }
.report-actions .mini-actions { justify-content: flex-start; }
.report-actions .btn { min-width: 110px; }

/* ═══════════════════════════════════════
   ADMIN
═══════════════════════════════════════ */
.quick-admin-box {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 12px 16px;
  border: 1px solid var(--blue-b); background: var(--blue-bg);
  border-radius: var(--r); margin-bottom: 12px;
}
.quick-admin-box b { display: block; font-size: 13px; color: var(--navy-2); }
.quick-admin-box span { display: block; font-size: 12px; color: var(--text-3); margin-top: 3px; }
.quick-admin-box .btn { white-space: nowrap; }
.etapa-lote { border-left: 3px solid var(--blue); }
.etapa-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.etapa-title { display: flex; align-items: center; gap: 12px; }
.etapa-num {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: var(--blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; flex: 0 0 auto; font-size: 13px;
}
.etapa-lote h3 { margin: 0 0 3px; }
.etapa-lote p { margin: 0; color: var(--text-3); font-size: 12px; }

/* ═══════════════════════════════════════
   TOAST
═══════════════════════════════════════ */
.toast-area { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: grid; gap: 8px; pointer-events: none; }
.toast {
  background: var(--navy); color: #fff;
  border-radius: var(--r); padding: 12px 16px;
  box-shadow: var(--s3); max-width: 340px; font-size: 13px;
  border: 1px solid rgba(255,255,255,.08);
  animation: toastin .2s cubic-bezier(.16,1,.3,1);
}

.toast b { display:block; font-size:12px; margin-bottom:2px; letter-spacing:.01em; }
.toast span { display:block; }
.toast-ok { background:#064e3b; border-color:rgba(16,185,129,.35); }
.toast-aviso { background:#78350f; border-color:rgba(245,158,11,.35); }
.toast-erro { background:#7f1d1d; border-color:rgba(239,68,68,.35); }
.global-toast-area { z-index: 9999; }

@keyframes toastin {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═══════════════════════════════════════
   PRINT
═══════════════════════════════════════ */
.print-area { display: none; }
@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { display: block; position: absolute; inset: 0; padding: 28px; background: #fff; }
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media(max-width: 1100px) {
  .grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-2 { grid-template-columns: 1fr; }
  .form-grid, .form-grid-compact { grid-template-columns: repeat(2, 1fr); }
  .span-2, .span-3, .span-4 { grid-column: auto; }
  .api-result-grid, .fiscal-step-mini { grid-template-columns: repeat(2, 1fr); }
  .admin-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width: 900px) {
  .op-card, .module-card { display: block; }
  .client-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width: 780px) {
  .sidebar { position: relative; width: 100%; height: auto; }
  .app-shell { display: block; }
  .content { margin-left: 0 !important; }
  .menu-collapsed .sidebar { width: 100%; }
  .nav { display: block; }
  .grid.cols-5, .grid.cols-4, .grid.cols-3, .grid.cols-2,
  .form-grid, .form-grid-compact { grid-template-columns: 1fr; }
  .login-page { grid-template-columns: 1fr; }
  .login-hero { display: none; }
  .login-card { padding: 36px 24px; }
  .modal-body { max-height: none; }
  .modal-header, .modal-footer { position: static; }
  .quick-admin-box { display: grid; }
  .client-grid { grid-template-columns: 1fr; }
  .client-main { display: block; }
  .fiscal-step-mini, .admin-grid { grid-template-columns: 1fr; }
  .span-2, .span-3, .span-4 { grid-column: auto; }
  .main { padding: 14px 16px; }
  .topbar { padding: 10px 16px; }
}

.api-simple-section{border-left:4px solid #156fd1}.api-simple-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.api-simple-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px solid #e7eef8;padding-top:10px;margin-top:2px}.api-simple-actions .hint{margin:0;max-width:760px}.api-simple-section .admin-note{margin-bottom:10px}.api-simple-section input[readonly]{background:#f8fafc;color:#667085}@media(max-width:900px){.api-simple-grid{grid-template-columns:1fr}.api-simple-grid .span-2,.api-simple-grid .span-4{grid-column:auto}}
.integration-import-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.integration-import-grid>div{border:1px solid var(--line);background:#fbfdff;border-radius:12px;padding:12px}.integration-import-grid b{display:block;margin-bottom:4px}.integration-import-grid span{display:block;color:var(--muted);font-size:12px;line-height:1.4}.admin-lock .badge{white-space:nowrap}@media(max-width:900px){.integration-import-grid{grid-template-columns:1fr}}

.mini-btn{padding:3px 6px!important;font-size:10px!important;margin-top:2px}.integration-import-grid span{line-height:1.35}.admin-note code{background:#fff;border:1px solid #fed7aa;border-radius:5px;padding:1px 4px}

.next-step-box{padding:12px;border:1px solid #b8d3f6;background:#f0f6ff;border-radius:10px;color:#183b65;font-size:12px;line-height:1.5}.contract-vehicles{display:grid;gap:8px}.vehicle-check{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);background:#fbfdff;border-radius:10px;padding:10px}.vehicle-check input{margin-top:3px}.vehicle-check small{color:#667085}.contratos-page .hint{margin-top:3px}

/* ===============================
   ControlMax v48 - Visual profissional
   Camada de acabamento global sem alterar regras de negócio
   =============================== */
:root{
  --navy:#07182c;
  --navy2:#0b2542;
  --blue:#0f6bdc;
  --blue2:#0a55b5;
  --sky:#eaf4ff;
  --bg:#eef3f9;
  --card:#ffffff;
  --text:#101828;
  --muted:#667085;
  --line:#d8e2ef;
  --softline:#edf2f7;
  --radius:16px;
  --shadow:0 14px 38px rgba(16,24,40,.08);
}
body{
  background:radial-gradient(circle at top left,#f7fbff 0,#eef3f9 38%,#e9eff7 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.app-shell{background:transparent}
.sidebar{
  width:236px;
  background:linear-gradient(180deg,#07182c 0%,#09213b 45%,#06182d 100%);
  border-right:1px solid rgba(255,255,255,.06);
  box-shadow:10px 0 34px rgba(7,24,44,.12);
}
.content{margin-left:236px}.menu-collapsed .content{margin-left:68px}.menu-collapsed .sidebar{width:68px}
.brand{
  min-height:88px;
  padding:16px 12px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0));
}
.brand-mark{
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(135deg,#2b8cff,#0f6bdc);
  box-shadow:0 14px 26px rgba(15,107,220,.32);
}
.brand h1{font-size:17px;font-weight:800}.brand span{color:#c7dcf5;font-size:10.5px}
.menu-toggle{background:#12395f;border-color:rgba(255,255,255,.16);color:#fff}
.nav{padding:12px 10px 8px}.nav-section{margin-bottom:12px}
.nav-title{color:#9fc4ee!important;font-size:10.5px!important;font-weight:700!important;letter-spacing:.11em!important;padding:0 8px 7px!important}
.nav-icon{background:rgba(37,137,255,.16)!important;border:1px solid rgba(146,190,245,.25)!important;color:#dbeafe!important}
.nav-group{gap:4px}.nav-item{
  min-height:34px;
  color:#dce8f6!important;
  padding:8px 10px!important;
  border:1px solid transparent!important;
  border-radius:11px!important;
  font-weight:500!important;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.nav-item:hover{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.08)!important;transform:translateX(1px)}
.nav-item.active{background:linear-gradient(135deg,#166fd5,#0b5ec1)!important;color:#fff!important;box-shadow:0 10px 20px rgba(15,107,220,.28)!important}
.nav-dot{background:#6c9ed2!important}.nav-item.active .nav-dot{background:#fff!important}
.side-box{padding:10px}.side-logout{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.12)!important}
.topbar{
  min-height:66px;
  padding:12px 20px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);
  box-shadow:0 8px 24px rgba(16,24,40,.05);
}
.topbar h2{font-size:18px;font-weight:800;color:#0b1f35}.topbar p{font-size:11.5px;color:#667085}.main{padding:18px}
.btn{
  border-radius:11px!important;
  padding:9px 13px!important;
  font-weight:700!important;
  letter-spacing:.01em;
  box-shadow:0 10px 22px rgba(15,107,220,.16)!important;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{transform:translateY(-1px);filter:brightness(.98)}
.btn.secondary{background:#eaf4ff!important;color:#0b5ec1!important;border:1px solid #cfe3ff!important;box-shadow:0 8px 16px rgba(15,107,220,.08)!important}
.btn.ghost{background:#fff!important;color:#344054!important;border:1px solid #d7e2ee!important;box-shadow:0 6px 14px rgba(16,24,40,.05)!important}
.btn.danger{background:#d92d20!important}.btn.warn{background:#f79009!important}
.back-btn{background:#0f6bdc!important;color:#fff!important;border:1px solid #0f6bdc!important;box-shadow:0 10px 20px rgba(15,107,220,.20)!important}
.card{
  border:1px solid rgba(216,226,239,.95)!important;
  border-radius:18px!important;
  box-shadow:var(--shadow)!important;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important;
}
.compact-card{padding:16px!important}.card h3{font-size:15.5px!important;color:#102033;font-weight:800!important}
.kpi{position:relative;overflow:hidden}.kpi:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#0f6bdc,#58b7ff)}
.kpi span{font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#667085!important}.kpi strong{font-size:23px!important;color:#0b1f35}.kpi small{color:#667085!important}
.section-title{border-bottom:1px solid #eef3f8;padding-bottom:10px;margin-bottom:14px!important}.section-title h3{font-size:16px!important;color:#0b1f35}
.table-wrap{border:1px solid #dbe6f2!important;border-radius:14px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);background:#fff!important}
table{font-size:11.5px!important}th{background:#f5f8fc!important;color:#526071!important;font-weight:800!important;padding:11px 12px!important}td{padding:11px 12px!important;color:#253142!important}tbody tr:hover td{background:#f6faff!important}
.badge{padding:5px 9px!important;font-weight:800!important}.badge.info{background:#e9f3ff!important}.badge.ok{background:#e9fbf1!important}.badge.warn{background:#fff4df!important}.badge.danger{background:#ffedeb!important}
.field label{font-size:11px!important;color:#344054!important;font-weight:800!important}.field input,.field select,.field textarea{
  border-radius:11px!important;border:1px solid #cfd9e8!important;padding:10px 11px!important;background:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#0f6bdc!important;box-shadow:0 0 0 4px rgba(15,107,220,.10)!important}
.form-section{border-radius:16px!important;border:1px solid #d9e4f1!important;background:#fff!important;padding:15px!important;box-shadow:0 6px 18px rgba(16,24,40,.04)}
.form-section h4{font-size:14px!important;color:#0b2f55!important;font-weight:900!important;border-bottom:1px solid #eef3f8;padding-bottom:8px;margin-bottom:12px!important}
.modal{border-radius:20px!important;box-shadow:0 30px 90px rgba(7,24,44,.32)!important}.modal-header{background:linear-gradient(180deg,#fff,#f8fbff)}.modal-header h3{font-weight:900;color:#0b1f35}.modal-footer{position:sticky;bottom:0;z-index:3;background:rgba(255,255,255,.95)!important;backdrop-filter:blur(10px)}
.alert-item{border-radius:14px!important}.action-stack{gap:7px!important}.action-stack .btn{font-size:11.2px!important}.report-card{min-height:118px}.report-card h3{font-size:16px!important}
.api-box,.api-result,.quick-admin-box,.admin-note,.invoice-box{border-radius:14px!important}.empty{border-radius:14px!important;background:#f7fafd!important;border-color:#e1eaf5!important}
.login-page{background:radial-gradient(circle at 15% 20%,#1d7bea 0,#0b3763 42%,#061b31 100%)}.login-card{border-radius:24px;box-shadow:0 28px 90px rgba(0,0,0,.25)}
@media(max-width:780px){.content{margin-left:0!important}.sidebar{width:100%!important}.topbar{position:relative}.main{padding:12px}.btn{padding:8px 11px!important}}

/* v49 - fluxo principal estabilizado */
.flow-steps{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:10px;margin-top:8px}.flow-step-card{border:1px solid var(--line);border-radius:16px;padding:12px;background:#fff;display:grid;gap:10px;align-content:space-between;min-height:172px;box-shadow:0 10px 24px rgba(15,23,42,.05)}.flow-step-card.done{border-color:#b7ebc6;background:linear-gradient(180deg,#f6fff9,#fff)}.flow-step-card.pending{border-color:#fed7aa;background:linear-gradient(180deg,#fffaf3,#fff)}.flow-step-head{display:grid;gap:8px}.flow-step-head>span{width:34px;height:34px;border-radius:12px;background:#0f5fb8;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800}.flow-step-head b{display:block;font-size:13px;color:#071426}.flow-step-head small{display:block;font-size:11px;color:#667085;line-height:1.35;margin-top:3px}.flow-step-status{min-height:25px}.fluxo-page .alert-item{align-items:center}.fluxo-page .table-wrap{max-height:360px}@media(max-width:1300px){.flow-steps{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.flow-steps{grid-template-columns:1fr}}

.version-pill{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;background:#eaf3ff;color:#0b5ec1;border:1px solid #bfdbfe;font-size:11px;margin-left:8px;font-weight:800}

/* Tabela de contratos - layout flex sem overflow */
.ctr-list{border:1px solid #dbe6f2;border-radius:10px;overflow:hidden;width:100%}
.ctr-row{display:flex;align-items:stretch;width:100%;border-bottom:1px solid #f1f5f9;background:#fff;transition:background .12s}
.ctr-row:last-child{border-bottom:0}
.ctr-row:hover{background:#f8fbff}
.ctr-row.ctr-hdr{background:#f1f5f9;border-bottom:1.5px solid #dbe6f2;border-radius:10px 10px 0 0}
.ctr-row.ctr-hdr .cc{font-size:10px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.06em;padding:10px 10px}
.cc{display:flex;align-items:center;padding:12px 10px;font-size:13px;flex-shrink:0;overflow:hidden}
.cc-sel{width:40px;flex-shrink:0}
.cc-num{width:116px;flex-shrink:0}
.cc-cli{flex:1;min-width:120px;flex-direction:column;align-items:flex-start!important;gap:2px}
.cc-vc{width:60px;flex-shrink:0;color:#475569}
.cc-vei{width:56px;flex-shrink:0;color:#475569;font-weight:600}
.cc-tot{width:100px;flex-shrink:0;flex-direction:column;align-items:flex-start!important;gap:1px}
.cc-sts{width:90px;flex-shrink:0}
.cc-act{flex-shrink:0;width:auto;min-width:0;display:flex;align-items:center;gap:4px;padding:8px 10px}
.cc-act .btn{padding:5px 10px!important;font-size:11.5px!important;white-space:nowrap}

/* v61 - destaque do CNPJ da empresa */
.cnpj-empresa-field{grid-column:span 2}.cnpj-action-row{display:flex;gap:8px;align-items:center}.cnpj-action-row input{flex:1}.cnpj-btn{white-space:nowrap;background:#0f6bdc!important;box-shadow:0 10px 20px rgba(15,107,220,.18)}@media(max-width:900px){.cnpj-empresa-field{grid-column:1/-1}.cnpj-action-row{flex-direction:column;align-items:stretch}}

/* v75 - contas a receber com blocos separados e leitura profissional */
.receber-list{display:grid;gap:14px;margin-top:8px}
.receber-card{border:1px solid #d8e6f7;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);border-radius:16px;box-shadow:0 12px 28px rgba(15,23,42,.06);overflow:hidden}
.receber-main{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;padding:14px 16px;border-bottom:1px solid #e4edf8;align-items:stretch}
.receber-client,.receber-money,.receber-statusbox,.doc-pill,.receber-actions{background:#fff;border:1px solid #e4edf8;border-radius:14px;padding:12px;min-height:76px}
.receber-client span,.receber-money span,.receber-statusbox span,.doc-pill span,.receber-actions span{display:block;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin-bottom:6px}

/* ── v87 — nav badges ───────────────────────────── */
.nav-badge{margin-left:auto;background:var(--err);color:#fff;border-radius:999px;font-size:9px;font-weight:800;padding:1px 5px;min-width:16px;height:16px;line-height:16px;text-align:center;flex:0 0 auto}
.nav-badge.ok{background:var(--ok)}
.nav-badge.warn{background:var(--warn)}

/* ── v87 — ciclo do mês (step flow) ─────────────── */
.cycle-flow{display:flex;align-items:stretch;gap:6px;padding:4px 0}
.cycle-step{flex:1;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);border:1.5px solid var(--border);cursor:pointer;transition:all .15s;background:var(--bg2)}
.cycle-step:hover{transform:translateY(-2px);box-shadow:var(--s2)}
.cycle-step.s-ok{background:var(--ok-bg);border-color:var(--ok-b)}
.cycle-step.s-warn{background:var(--warn-bg);border-color:var(--warn-b)}
.cycle-step.s-action{background:var(--blue-bg);border-color:var(--blue-b)}
.step-num{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto}
.s-ok .step-num{background:var(--ok-b)}
.s-warn .step-num{background:var(--warn-b)}
.s-action .step-num{background:var(--blue-b)}
.cycle-step b{font-size:12px;font-weight:700;display:block;line-height:1.2;color:var(--text)}
.cycle-step span{font-size:11px;color:var(--text-3);margin-top:2px;display:block}
.step-conn{flex:0 0 14px;display:flex;align-items:center;justify-content:center;color:var(--text-4);font-size:16px;font-weight:300}

/* ── v87 — KPI slide-in ao carregar ─────────────── */
@keyframes kpiSlideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.kpi-anim{animation:kpiSlideIn .32s ease-out both}
.kpi-anim:nth-child(2){animation-delay:.07s}
.kpi-anim:nth-child(3){animation-delay:.14s}
.kpi-anim:nth-child(4){animation-delay:.21s}

/* ── v87 — modal de confirmação customizado ─────── */
.confirm-overlay{position:fixed;inset:0;z-index:200;background:rgba(15,23,42,.48);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);animation:fadeInOv .15s ease}
.confirm-box{background:var(--card);border-radius:var(--r-xl);padding:24px 24px 18px;box-shadow:var(--s4);max-width:400px;width:92%;animation:slideUpBox .18s ease}
.confirm-box h4{font-size:15px;font-weight:800;margin-bottom:8px;letter-spacing:-.2px;color:var(--text)}
.confirm-box p{color:var(--text-3);font-size:13px;line-height:1.55;margin-bottom:18px}
.confirm-btns{display:flex;gap:8px;justify-content:flex-end}
@keyframes fadeInOv{from{opacity:0}to{opacity:1}}
@keyframes slideUpBox{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ── v87 — gráfico de receita mensal ────────────── */
.bar-chart{display:flex;align-items:flex-end;gap:10px;height:100px}
.bar-group{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;min-width:0}
.bar-cols{display:flex;align-items:flex-end;gap:3px;height:90px}

/* ── v88 — feedback visual em botões ─── */
.btn{transition:transform .08s ease,box-shadow .08s ease,opacity .08s ease}
.btn:active,.btn-feedback{transform:scale(0.94)!important;opacity:.82!important;box-shadow:none!important}

/* ── v89 — notas fiscais — visual aprimorado ─── */
.nf-sbadge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;white-space:nowrap;letter-spacing:.3px}
.nf-sbadge.ok{background:#dcfce7;color:#15803d;border:1.5px solid #86efac}
.nf-sbadge.warn{background:#fef9c3;color:#a16207;border:1.5px solid #fde047}
.nf-sbadge.danger{background:#fee2e2;color:#b91c1c;border:1.5px solid #fca5a5}
.nf-sbadge.neutral{background:#f1f5f9;color:#64748b;border:1.5px solid #cbd5e1}
/* KPI cards coloridos */
.kpi-ok{background:linear-gradient(135deg,#f0fdf4,#dcfce7)!important;border-left:4px solid #22c55e!important}
.kpi-ok strong{color:#15803d!important}
.kpi-warn{background:linear-gradient(135deg,#fffbeb,#fef9c3)!important;border-left:4px solid #f59e0b!important}
.kpi-warn strong{color:#b45309!important}
.kpi-danger-full{background:linear-gradient(135deg,#fef2f2,#fee2e2)!important;border-left:4px solid #ef4444!important}
.kpi-danger-full strong{color:#dc2626!important}
.kpi-neutral{background:linear-gradient(135deg,#f8fafc,#f1f5f9)!important;border-left:4px solid #94a3b8!important}
.kpi-neutral strong{color:#475569!important}
.kpi-alert{border-left:3px solid #f59e0b!important}
.kpi-danger{border-left:3px solid #ef4444!important}
/* Note cards */
.nf-list{display:flex;flex-direction:column;gap:6px}
.nf-card{border-radius:8px;border:1px solid #e2e8f0;overflow:hidden;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:box-shadow .2s}
.nf-card:hover{box-shadow:0 3px 8px rgba(0,0,0,.09)}
.nf-card.nf-ok{border-left:4px solid #22c55e;background:linear-gradient(to right,#f0fdf4 0%,#fff 160px)}
.nf-card.nf-warn{border-left:4px solid #f59e0b;background:linear-gradient(to right,#fffbeb 0%,#fff 160px)}
.nf-card.nf-danger{border-left:4px solid #ef4444;background:linear-gradient(to right,#fef2f2 0%,#fff 160px)}
.nf-card.nf-neutral{border-left:4px solid #94a3b8;background:linear-gradient(to right,#f8fafc 0%,#fff 160px);opacity:.85}
.nf-card-main{display:grid;grid-template-columns:140px 1fr auto;gap:10px;padding:9px 12px;align-items:start}
.nf-num{display:flex;flex-direction:column;gap:4px}
.nf-numero{font-size:16px;font-weight:800;color:#0f172a;letter-spacing:-0.5px}
.nf-info{display:flex;flex-direction:column;gap:2px}
.nf-info b{font-size:13px;color:#0f172a;font-weight:700}
.nf-info span{font-size:11px;color:#64748b}
.nf-info small{font-size:10px;color:#94a3b8}
.nf-erro-msg{font-size:10px;color:#dc2626;background:#fef2f2;padding:4px 8px;border-radius:4px;margin-top:3px;border:1px solid #fecaca;font-weight:500}
.nf-envio{display:flex;align-items:flex-start}
.nf-card-acts{display:flex;gap:5px;padding:6px 12px;background:#f8fafc;border-top:1px solid #f1f5f9;flex-wrap:wrap}
/* Timeline de emissão */
.nf-timeline{display:flex;align-items:center;gap:0;padding:6px 12px 8px;background:rgba(0,0,0,.02);border-top:1px solid #f1f5f9;overflow-x:auto}
.nf-tl-step{display:flex;align-items:center;gap:0;flex-shrink:0}
.nf-tl-dot{display:flex;flex-direction:column;align-items:center;gap:2px}
.nf-tl-circle{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;border:2px solid #e2e8f0;background:#fff;color:#94a3b8}
.nf-tl-circle.done{background:#22c55e;border-color:#22c55e;color:#fff}
.nf-tl-circle.active{background:#3b82f6;border-color:#3b82f6;color:#fff;box-shadow:0 0 0 2px rgba(59,130,246,.2)}
.nf-tl-circle.error{background:#ef4444;border-color:#ef4444;color:#fff}
.nf-tl-circle.cancelled{background:#94a3b8;border-color:#94a3b8;color:#fff}
.nf-tl-label{font-size:9px;color:#64748b;white-space:nowrap;font-weight:500;text-align:center;max-width:56px}
.nf-tl-label.done{color:#15803d;font-weight:600}
.nf-tl-label.active{color:#1d4ed8;font-weight:600}
.nf-tl-label.error{color:#dc2626;font-weight:600}
.nf-tl-label.cancelled{color:#64748b}
.nf-tl-line{width:28px;height:2px;background:#e2e8f0;flex-shrink:0}
.nf-tl-line.done{background:#22c55e}
.nf-tl-line.active{background:linear-gradient(to right,#22c55e,#e2e8f0)}
@media(max-width:900px){.nf-card-main{grid-template-columns:1fr}}

/* ── v88 — checklist fiscal com status por título ─── */
.ttl-row{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-bottom:1px solid #f1f5f9;background:#fff;transition:background .12s}
.ttl-row:last-child{border-bottom:0}
.ttl-row:hover{background:#f8fbff}
.ttl-row-check{padding-top:2px;flex-shrink:0}
.ttl-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ttl-row-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ttl-row-head b{font-size:13.5px;color:#0f172a}
.ttl-desc{font-size:12px;color:#64748b}
.ttl-row-meta{font-size:12px;color:#475569}
.ttl-row-status{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.ttl-st{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;padding:3px 8px;border-radius:20px;border:1px solid transparent;white-space:nowrap}
.ttl-st.ok{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}
.ttl-st.danger{background:#fef2f2;color:#dc2626;border-color:#fecaca}
.ttl-st.pending{background:#fffbeb;color:#b45309;border-color:#fde68a}
.ttl-st.neutral{background:#f8fafc;color:#94a3b8;border-color:#e2e8f0}
.ttl-row-acts{display:flex;flex-direction:column;gap:4px;flex-shrink:0;align-items:flex-end}
.ttl-row-acts .btn{font-size:11.5px!important;padding:4px 10px!important;white-space:nowrap}
.ttl-cancel-btn{color:#dc2626!important;border-color:#fca5a5!important}
.ttl-cancel-btn:hover{background:#fef2f2!important}

/* ── v88 — linha clicável na tabela de clientes ─── */
.cli-row{cursor:pointer;transition:background .12s}
.cli-row:hover td{background:#eff6ff!important}
.cli-row:hover td:first-child{border-left:3px solid #3b82f6}

/* ── v88 — cores diferenciadas por seção do menu ─── */
/* INÍCIO — azul celeste */
.nav-section[data-sec="dashboard"] .nav-title{color:#93c5fd!important}
.nav-section[data-sec="dashboard"] .nav-icon{background:rgba(59,130,246,.22)!important;border-color:rgba(59,130,246,.35)!important;color:#93c5fd!important}
/* CADASTROS — violeta */
.nav-section[data-sec="cadastros"] .nav-title{color:#c4b5fd!important}
.nav-section[data-sec="cadastros"] .nav-icon{background:rgba(139,92,246,.22)!important;border-color:rgba(139,92,246,.35)!important;color:#c4b5fd!important}
/* OPERACIONAL — âmbar */
.nav-section[data-sec="operacional"] .nav-title{color:#fbbf24!important}
.nav-section[data-sec="operacional"] .nav-icon{background:rgba(245,158,11,.22)!important;border-color:rgba(245,158,11,.35)!important;color:#fbbf24!important}
/* FISCAL — teal */
.nav-section[data-sec="fiscal"] .nav-title{color:#2dd4bf!important}
.nav-section[data-sec="fiscal"] .nav-icon{background:rgba(20,184,166,.22)!important;border-color:rgba(20,184,166,.35)!important;color:#2dd4bf!important}
/* FINANCEIRO — verde esmeralda */
.nav-section[data-sec="financeiro"] .nav-title{color:#4ade80!important}
.nav-section[data-sec="financeiro"] .nav-icon{background:rgba(34,197,94,.22)!important;border-color:rgba(34,197,94,.35)!important;color:#4ade80!important}
/* RELATÓRIOS — rosa */
.nav-section[data-sec="relatorios"] .nav-title{color:#f0abfc!important}
.nav-section[data-sec="relatorios"] .nav-icon{background:rgba(217,70,239,.22)!important;border-color:rgba(217,70,239,.35)!important;color:#f0abfc!important}
/* SISTEMA — slate cinza */
.nav-section[data-sec="sistema"] .nav-title{color:#94a3b8!important}
.nav-section[data-sec="sistema"] .nav-icon{background:rgba(100,116,139,.22)!important;border-color:rgba(100,116,139,.35)!important;color:#94a3b8!important}

/* ── nav-title: fundo colorido + borda lateral por seção ─── */
.nav-title{
  border-radius:8px!important;
  padding:6px 10px 6px 10px!important;
  margin:2px 0 5px!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.1em!important;
  border-left:3px solid transparent;
  background:rgba(255,255,255,.06)!important;
}
.nav-section[data-sec="dashboard"] .nav-title{background:rgba(59,130,246,.20)!important;border-left-color:#3b82f6!important}
.nav-section[data-sec="cadastros"] .nav-title{background:rgba(139,92,246,.20)!important;border-left-color:#8b5cf6!important}
.nav-section[data-sec="operacional"] .nav-title{background:rgba(245,158,11,.20)!important;border-left-color:#f59e0b!important}
.nav-section[data-sec="fiscal"] .nav-title{background:rgba(20,184,166,.20)!important;border-left-color:#14b8a6!important}
.nav-section[data-sec="financeiro"] .nav-title{background:rgba(34,197,94,.20)!important;border-left-color:#22c55e!important}
.nav-section[data-sec="relatorios"] .nav-title{background:rgba(217,70,239,.20)!important;border-left-color:#d946ef!important}
.nav-section[data-sec="sistema"] .nav-title{background:rgba(100,116,139,.20)!important;border-left-color:#64748b!important}

/* ── v88 — logo no topbar (canto superior direito) ─── */
.topbar-logo{height:36px;width:auto;object-fit:contain;flex-shrink:0;margin-left:12px;opacity:.9;border-radius:8px}

/* ── v89 — notas fiscais: ISS + spinner emissão + modal cancelamento ─── */
.nf-iss-detalhe{display:inline-block;margin-top:3px;font-size:11px;color:#0284c7;background:#e0f2fe;padding:2px 8px;border-radius:4px;border:1px solid #bae6fd;font-weight:500}
.nf-emitindo-aviso{display:inline-block;margin-top:2px;font-size:11px;color:#b45309;font-style:italic;background:#fffbeb;padding:2px 7px;border-radius:4px;border:1px solid #fde68a}
.nf-spin{display:inline-block;animation:nfSpin 1s linear infinite}
@keyframes nfSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.canc-motivos{display:flex;flex-direction:column;gap:6px;margin:6px 0}
.canc-opt{display:flex;align-items:center;gap:10px;padding:9px 13px;border:1.5px solid #e2e8f0;border-radius:8px;cursor:pointer;transition:background .12s,border-color .12s;font-size:13px;color:#1e293b;user-select:none}
.canc-opt:hover{background:#f8fafc;border-color:#94a3b8}
.canc-opt input[type=radio]{accent-color:#dc2626;width:15px;height:15px;flex-shrink:0}
.canc-opt:has(input:checked){background:#fef2f2;border-color:#fca5a5}
.canc-opt:has(input:checked) span{font-weight:600;color:#dc2626}

/* ── v88 — etapa 4: info de canal de envio ─── */
.envio-acoes-wrap{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.envio-canal-info{display:flex;align-items:center;gap:8px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:8px 12px;max-width:420px;text-align:right}
.envio-canal-dica{font-size:11.5px;color:#475569;line-height:1.4}
.bar{border-radius:4px 4px 0 0;width:11px;min-height:3px;transition:height .55s cubic-bezier(.4,0,.2,1)}
.b-ger{background:var(--blue-l)}
.b-pago{background:var(--ok)}
.b-atr{background:var(--err)}
.bar-month{font-size:9px;color:var(--text-4);font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.bar-legend{display:flex;gap:14px;margin-top:10px;padding-top:8px;border-top:1px solid var(--border);justify-content:flex-end}
.bar-legend span{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-3)}
.bar-legend b{width:10px;height:10px;border-radius:2px;display:inline-block;flex:0 0 auto}
.receber-client b,.receber-money b,.doc-pill b{display:block;font-size:15px;color:#071426;line-height:1.25}
.receber-money b{font-size:20px;color:#0f5fb8}.receber-client small,.receber-money small,.receber-statusbox small,.doc-pill small{display:block;margin-top:5px;font-size:11px;color:#667085;line-height:1.35}.receber-docs{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:12px;padding:14px 16px;background:#f3f7fc}.doc-pill{border-left:4px solid #60a5fa}.receber-actions{border-left:4px solid #f59e0b}.receber-actions .btn-stack{display:grid;grid-template-columns:repeat(2,minmax(130px,1fr));gap:8px}.receber-actions .btn{width:100%;justify-content:center}.receber-empty{padding:22px;border:1px dashed #cbd5e1;border-radius:14px;background:#fff;text-align:center;color:#667085}@media(max-width:1000px){.receber-main,.receber-docs{grid-template-columns:1fr}.receber-actions .btn-stack{grid-template-columns:1fr}}

/* ── v86 — recrow: linha compacta por título ─────── */
.btn.sm{padding:5px 10px!important;font-size:11px!important;line-height:1.4;height:auto!important}
.recrow-list{display:flex;flex-direction:column;border:1px solid #dbe6f2;border-radius:14px;overflow:hidden;background:#fff;margin-top:8px}
.recrow-header{display:grid;grid-template-columns:2fr 130px 165px 100px auto;align-items:center;gap:10px;padding:7px 14px;background:linear-gradient(135deg,#f0f6ff,#f8fafc);border-bottom:2px solid #dbe6f2;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b}
.recrow-header span:last-child{text-align:right}
.recrow{display:grid;grid-template-columns:2fr 130px 165px 100px auto;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #eef3f8}
.recrow:last-child{border-bottom:none}
.recrow:hover{background:#f6faff}
.recrow-client b{font-size:13px;font-weight:700;color:#0b1f35;display:block;line-height:1.3}
.recrow-client small{font-size:11px;color:#667085;display:block;line-height:1.35;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.recrow-val b{font-size:14px;font-weight:800;color:#0f5fb8;display:block}
.recrow-val small{font-size:11px;color:#667085;display:block}
.recrow-docs{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.recrow-status{display:flex;align-items:center}
.recrow-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.recrow-empty{padding:20px;text-align:center;color:#667085;font-size:13px}
@media(max-width:920px){.recrow-header{display:none}.recrow{grid-template-columns:1fr 1fr;row-gap:6px}.recrow-docs,.recrow-status,.recrow-actions{grid-column:1/-1}}

/* ── v86 — checklist de setup ─────────────────────── */
.setup-checklist{background:#fffbeb;border:1px solid #fed7aa;border-radius:14px;padding:12px 16px}
.setup-checklist-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.setup-checklist-head b{font-size:13px;font-weight:700;color:#92400e}
.setup-items{display:flex;flex-wrap:wrap;gap:7px}
.setup-item{font-size:11.5px;padding:4px 11px;border-radius:999px;cursor:pointer;font-weight:600;transition:background .12s}
.setup-item.ok{background:#dcfce7;color:#166534}
.setup-item.pend{background:#fef3c7;color:#92400e;border:1px solid #fcd34d}
.setup-item.pend:hover{background:#fed7aa}

/* ── v86 — aging de inadimplência ───────────────── */
.aging-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px}
.aging-col{border-radius:12px;padding:12px;border:1px solid var(--border)}
.aging-col.aging-warn{background:#fffbeb;border-color:#fcd34d}
.aging-col.aging-danger{background:#fff5f5;border-color:#fca5a5}
.aging-col.aging-empty{opacity:.5}
.aging-head{margin-bottom:8px}
.aging-head b{display:block;font-size:12px;font-weight:800;color:#374151}
.aging-head span{display:block;font-size:11px;color:#667085;margin:2px 0}
.aging-head strong{display:block;font-size:16px;font-weight:800;color:#0b1f35}
.aging-rows{display:flex;flex-direction:column;gap:4px}
.aging-row{display:flex;justify-content:space-between;align-items:center;padding:5px 7px;background:rgba(255,255,255,.7);border-radius:8px;cursor:pointer;font-size:11.5px;transition:background .12s}
.aging-row:hover{background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.aging-row span{color:#374151;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aging-row b{color:#0b1f35;font-weight:700;flex:0 0 auto;margin-left:8px}
.aging-more{font-size:11px;color:#667085;margin-top:4px;text-align:center}
@media(max-width:900px){.aging-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.aging-grid{grid-template-columns:1fr}}

/* ── v86 — portal do cliente ─────────────────────── */
.portal-shell{max-width:960px;margin:0 auto;padding:24px 16px;min-height:100vh;background:var(--bg)}
.portal-header-card{display:flex;align-items:center;justify-content:space-between;padding:18px 20px}
.portal-cliente .kpi{cursor:default}