/* portal-theme.css — Tema padrão LionDataMesh Portal (v2.0 — UX Pro)
   Melhorias: transitions, focus states, loading, validation, sticky headers,
   skeleton, toast system, disabled states, form feedback, smooth scroll.

   LION SEMAPHORE STANDARD — Paleta canônica de status (UI Designer v1.0):
   ● #22CC66  Verde  — Saudável / Crédito alto / Cliente ativo / Meta atingida
   ● #FFCC00  Amarelo — Atenção / Crédito perto do limite / Trial / OKR em risco
   ● #DD3333  Vermelho — Alerta crítico / Crédito zerado / Fraude / Cancelado
   Uso exclusivo para status de negócio; --ok/--warn/--bad para semântica de UI.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Variáveis de cor ─────────────────────────────────────────── */
:root {
  --ink: #f6f3eb;
  --ink-soft: #d9cfbb;
  --bg-1: #0d1b1e;
  --bg-2: #15262a;
  --card: #152328;
  --line: #3e4f54;
  --accent: #ffb347;
  --accent-2: #f77f00;
  --ok: #8bd3a0;
  --warn: #ffadad;
  --bad: #ffadad;
  --hot: #ffb347;
  --focus-ring: #ffb347;
  --transition: 0.18s ease;
  --radius: 10px;
  --shadow-card: 0 2px 16px rgba(0,0,0,.35);

  /* ── Lion Semaphore Standard ────────────────────────────────── */
  /* Paleta canônica para status de negócio (UI Designer v1.0)   */
  --sem-verde:    #22CC66;   /* Saudável / Ativo / Meta atingida */
  --sem-amarelo:  #FFCC00;   /* Atenção / Trial / OKR em risco   */
  --sem-vermelho: #DD3333;   /* Crítico / Fraude / Cancelado     */
  --sem-cinza:    #6B7280;   /* Inativo / Desconhecido           */
  --sem-azul:     #3B82F6;   /* Informação / Auditoria           */
}
[data-theme="light"] {
  --ink: #1a2325;
  --ink-soft: #3d4f55;
  --bg-1: #eef4f5;
  --bg-2: #dde9eb;
  --card: #f4f9fa;
  --line: #b5cdd2;
  --accent: #c87000;
  --accent-2: #a05800;
  --ok: #1a7a3a;
  --warn: #b00020;
  --bad: #b00020;
  --hot: #c87000;
}

/* ── Reset mínimo ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Foco acessível (WCAG 2.1 — focus-visible) ────────────────── */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── Body ─────────────────────────────────────────────────────── */
body {
  margin: 0;
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 18% 15%, #2c4248 0%, transparent 42%),
    radial-gradient(circle at 85% 85%, #25373d 0%, transparent 35%),
    linear-gradient(130deg, var(--bg-1), var(--bg-2));
  min-height: 100vh;
}
[data-theme="light"] body {
  background: linear-gradient(130deg, var(--bg-1), var(--bg-2));
}

/* ── Topbar ───────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid #33444a;
  background: #0e181bcc;
  backdrop-filter: blur(8px);
}
[data-theme="light"] .topbar {
  background: #dde9ebcc;
  border-bottom-color: #9ab5bc;
}

/* ── Brand ────────────────────────────────────────────────────── */
.brand {
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #ffd49c;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
[data-theme="light"] .brand { color: #a05800; }
.brand img {
  height: 34px;
  width: 34px;
  border-radius: 10px;
  border: 1px solid #3f5359;
  object-fit: cover;
}
.brand .name { font-size: 18px; font-weight: 800; }
.brand .tag {
  font-size: 11px;
  color: #cabda6;
  border: 1px solid #3f5359;
  border-radius: 999px;
  padding: 2px 8px;
}

/* ── Nav ──────────────────────────────────────────────────────── */
#portalNav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
#portalNav .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
#portalNav .nav-mobile-toggle {
  display: none;
  font-weight: 700;
}
#portalNav a,
#portalNav .nav-btn {
  border: 1px solid #3f5359;
  background: #122126;
  color: var(--ink);
  padding: 7px 11px;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  transition: border-color 0.15s, background 0.15s;
}
[data-theme="light"] #portalNav a,
[data-theme="light"] #portalNav .nav-btn {
  background: #e4eff1;
  border-color: #9ab5bc;
  color: var(--ink);
}
#portalNav a:hover,
#portalNav .nav-btn:hover {
  border-color: var(--accent);
  background: #1e2d31;
}
[data-theme="light"] #portalNav a:hover,
[data-theme="light"] #portalNav .nav-btn:hover {
  background: #d4e7ea;
}
#portalNav a.active {
  border-color: var(--accent);
  background: #3f2a10;
  color: var(--accent);
  font-weight: 700;
}
[data-theme="light"] #portalNav a.active {
  background: #fde8c8;
  color: var(--accent-2);
}
.nav-back-admin {
  border-color: var(--accent) !important;
  background: linear-gradient(135deg, #3f2a10, #5a3c15) !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
}
.nav-sep {
  color: #3f5359;
  font-size: 16px;
  line-height: 1;
  user-select: none;
  padding: 0 2px;
}
.nav-context-chip {
  border: 1px solid #5b6f74;
  background: linear-gradient(180deg, #173037 0%, #142830 100%);
  color: #d6e5e8;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
[data-theme="light"] .nav-context-chip {
  border-color: #9ab5bc;
  background: #ecf4f6;
  color: #234046;
}
.nav-admin-menu {
  position: relative;
}
.nav-admin-summary {
  list-style: none;
  border: 1px solid #3f5359;
  background: #122126;
  color: var(--ink);
  padding: 7px 11px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.nav-admin-summary::-webkit-details-marker {
  display: none;
}
[data-theme="light"] .nav-admin-summary {
  background: #e4eff1;
  border-color: #9ab5bc;
}
.nav-admin-summary.active,
.nav-admin-summary:hover {
  border-color: var(--accent);
  background: #1e2d31;
}
[data-theme="light"] .nav-admin-summary.active,
[data-theme="light"] .nav-admin-summary:hover {
  background: #d4e7ea;
}
.nav-admin-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 160px;
  border: 1px solid #3f5359;
  border-radius: 10px;
  background: #122126;
  padding: 6px;
  display: grid;
  gap: 6px;
  z-index: 50;
}
.nav-admin-list a {
  display: block;
}
[data-theme="light"] .nav-admin-list {
  background: #e4eff1;
  border-color: #9ab5bc;
}

/* ── Layout wrapper ───────────────────────────────────────────── */
.wrap { max-width: 1080px; margin: 0 auto; padding: 20px; }

/* ── Cards ────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: inset 0 1px 0 #1f3137;
  margin-top: 12px;
}
.k {
  color: var(--ink-soft);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.7px;
  margin-bottom: 6px;
}
.v { font-size: 24px; font-weight: 700; margin-top: 6px; }
.sub { color: #cabda6; font-size: 14px; margin: 0; }
.muted { color: var(--ink-soft); font-size: 13px; }
.hint { color: #cabda6; font-size: 12px; margin-top: 6px; }

/* ── Mensagens ────────────────────────────────────────────────── */
.msg { min-height: 20px; color: var(--bad); font-size: 13px; margin-top: 6px; }
.msg.ok, .ok { color: var(--ok); }
.msg.warn, .warn { color: var(--accent); }

/* ── Botões ───────────────────────────────────────────────────── */
.btn {
  border: 1px solid #5a4a2f;
  border-radius: var(--radius);
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
  color: #2c1b07;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font-size: 14px;
  transition: filter var(--transition), transform var(--transition), opacity var(--transition);
  user-select: none;
  position: relative;
  overflow: hidden;
}
.btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); filter: brightness(0.95); }
.btn:disabled, .btn[aria-busy="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
}
.btn.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.15) 50%, transparent 100%);
  animation: shimmer 1.4s infinite;
}
.btn.secondary, .btn-secondary {
  color: var(--ink);
  border: 1px solid #46595f;
  background: #203238;
  font-weight: 600;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.btn.secondary:hover:not(:disabled), .btn-secondary:hover:not(:disabled) {
  border-color: var(--accent);
  background: #2a3f47;
  transform: translateY(-1px);
}
[data-theme="light"] .btn.secondary,
[data-theme="light"] .btn-secondary {
  background: #e4eff1;
  color: var(--ink);
  border-color: #9ab5bc;
}
[data-theme="light"] .btn.secondary:hover:not(:disabled),
[data-theme="light"] .btn-secondary:hover:not(:disabled) { background: #d4e7ea; }

/* ── Formulários ──────────────────────────────────────────────── */
label { display: block; font-size: 12px; margin-bottom: 4px; color: #e8d7b8; }
input, select, textarea {
  width: 100%;
  border: 1px solid #415257;
  border-radius: var(--radius);
  background: #101d21;
  color: var(--ink);
  padding: 9px 12px;
  font-size: 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: #5a7078;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,179,71,.18);
  outline: none;
}
input:disabled, select:disabled, textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
input.is-error, select.is-error, textarea.is-error {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,.18);
}
input.is-ok, select.is-ok, textarea.is-ok {
  border-color: #27ae60 !important;
  box-shadow: 0 0 0 3px rgba(39,174,96,.12);
}
.field-error {
  font-size: 12px;
  color: #f0a0a0;
  margin-top: 3px;
  display: none;
}
.field-error.visible { display: block; }
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: #fff;
  border-color: #9ab5bc;
  color: var(--ink);
}
textarea { resize: vertical; font-family: Consolas, "Courier New", monospace; }

/* ── Tabelas ──────────────────────────────────────────────────── */
.table-wrap { overflow: auto; border-radius: 12px; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
th {
  color: var(--ink-soft);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #17272d;
  position: sticky;
  top: 0;
  z-index: 1;
}
td { font-size: 14px; transition: background var(--transition); }
tbody tr:hover td { background: rgba(255,179,71,.05); }
[data-theme="light"] th { background: #d4e7ea; color: #5a4000; }

/* ── Grid ─────────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

/* ── API tiles ────────────────────────────────────────────────── */
.api-tile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #111d22;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.api-tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255,179,71,.12);
}
.api-tile strong { display: block; font-size: 14px; }
.api-tile small { color: var(--ink-soft); font-size: 12px; }
[data-theme="light"] .api-tile { background: #e8f4f6; }

/* ── Cards com hover ──────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: inset 0 1px 0 #1f3137;
  margin-top: 12px;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.card.hoverable:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.3), inset 0 1px 0 #1f3137;
  border-color: #5a7078;
}

/* ── Loading spinner ──────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,179,71,.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
.spinner-lg { width: 36px; height: 36px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Skeleton loading ─────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #1d2e34 25%, #243b42 50%, #1d2e34 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
  display: block;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Toast notification system ───────────────────────────────── */
#toastArea {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 380px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 4px 20px #00000066;
  animation: toastIn 0.25s ease forwards;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  max-width: 380px;
}
.toast.dismissing { animation: toastOut 0.2s ease forwards; }
.toast-ok   { background: #1a3b25; border: 1px solid #2e6644; color: #8bd3a0; }
.toast-warn { background: #3a2c10; border: 1px solid #66540d; color: #ffd6a1; }
.toast-err  { background: #3a1a1a; border: 1px solid #6a2a2a; color: #f0a0a0; }
.toast-info { background: #152328; border: 1px solid #3e4f54; color: #d9cfbb; }
[data-theme="light"] .toast-ok   { background: #d4f0dc; border-color: #1a7a3a; color: #0f5228; }
[data-theme="light"] .toast-warn { background: #fff3cd; border-color: #c87000; color: #7a4000; }
[data-theme="light"] .toast-err  { background: #fde8ea; border-color: #b00020; color: #700015; }
[data-theme="light"] .toast-info { background: #e8f4f6; border-color: #9ab5bc; color: var(--ink); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* ── LionExperience: Onboarding + Help contextual ─────────────── */
.lion-onboarding-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16,30,44,.95) 0%, rgba(14,26,40,.9) 100%);
  padding: 12px;
  margin-bottom: 12px;
}
[data-theme="light"] .lion-onboarding-card {
  background: linear-gradient(180deg, #edf5f8 0%, #e4eff3 100%);
}
.lion-onboarding-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.lion-onboarding-sub {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.lion-onboarding-progress {
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.lion-onboarding-list {
  margin: 10px 0 8px;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.lion-onboarding-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.lion-onboarding-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lion-help-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 920;
  border: 1px solid #5a4a2f;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #2c1b07;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.lion-help-panel {
  position: fixed;
  right: 18px;
  bottom: 70px;
  width: min(360px, calc(100vw - 24px));
  max-height: 70vh;
  overflow: auto;
  z-index: 921;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 12px 36px rgba(0,0,0,.45);
  transform: translateY(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.lion-help-panel.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.lion-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.lion-help-close {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  min-width: 30px;
  min-height: 30px;
  cursor: pointer;
}
.lion-help-search {
  margin: 10px;
  width: calc(100% - 20px);
}
.lion-help-list {
  list-style: none;
  margin: 0;
  padding: 0 10px 10px;
  display: grid;
  gap: 8px;
}
.lion-help-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,.02);
}
.lion-help-item strong {
  display: block;
  font-size: 13px;
}
.lion-help-item p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}

/* ── Pill / Badge ─────────────────────────────────────────────── */
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pill-ok   { background: #0f2e20; color: #8bd3a0; border: 1px solid #2f6a4a; }
.pill-warn { background: #2e1f04; color: #fcd34d; border: 1px solid #a16207; }
.pill-bad  { background: #3a1212; color: #fca5a5; border: 1px solid #991b1b; }
.pill-info { background: #0f1a30; color: #93c5fd; border: 1px solid #2563eb; }

/* ── Empty state ──────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-soft);
}
.empty-state svg, .empty-state .empty-icon { font-size: 40px; margin-bottom: 12px; opacity: .5; }
.empty-state p { margin: 6px 0 0; font-size: 14px; }

/* ── Password strength ────────────────────────────────────────── */
.pw-strength {
  height: 4px;
  border-radius: 4px;
  margin-top: 6px;
  transition: width 0.3s ease, background 0.3s ease;
  background: #203238;
}
.pw-strength[data-level="1"] { width: 25%; background: #c0392b; }
.pw-strength[data-level="2"] { width: 50%; background: #e67e22; }
.pw-strength[data-level="3"] { width: 75%; background: #f1c40f; }
.pw-strength[data-level="4"] { width: 100%; background: #27ae60; }

/* ── Progress bar ─────────────────────────────────────────────── */
.progress-bar {
  height: 6px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* ══════════════════════════════════════════════════════════════
   UX-E1 — Skeleton Loaders específicos por tipo de componente
   Uso: <div class="skeleton skeleton-kpi"></div>
   Todos herdam o shimmer de .skeleton definido abaixo.
   ══════════════════════════════════════════════════════════════ */

/* KPI Card — valor numérico grande */
.skeleton-kpi {
  height: 40px;
  width: 75%;
  border-radius: 6px;
  margin-bottom: 6px;
}
.skeleton-kpi + .skeleton-kpi-label {
  height: 12px;
  width: 50%;
  border-radius: 4px;
}

/* Gráfico de linha — área com eixos simulados */
.skeleton-chart-line {
  height: 160px;
  width: 100%;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.skeleton-chart-line::after {
  content: "";
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,.06);
}

/* Gráfico de barras — 6 colunas verticais */
.skeleton-chart-bar {
  height: 140px;
  width: 100%;
  border-radius: 8px;
  background:
    /* 6 barras verticais com alturas variadas */
    linear-gradient(transparent 60%, rgba(255,255,255,.05) 60%) 8%   0 / 11% 100% no-repeat,
    linear-gradient(transparent 30%, rgba(255,255,255,.05) 30%) 22%  0 / 11% 100% no-repeat,
    linear-gradient(transparent 50%, rgba(255,255,255,.05) 50%) 36%  0 / 11% 100% no-repeat,
    linear-gradient(transparent 20%, rgba(255,255,255,.05) 20%) 50%  0 / 11% 100% no-repeat,
    linear-gradient(transparent 40%, rgba(255,255,255,.05) 40%) 64%  0 / 11% 100% no-repeat,
    linear-gradient(transparent 70%, rgba(255,255,255,.05) 70%) 78%  0 / 11% 100% no-repeat,
    linear-gradient(90deg, var(--bg-1, #0d1b1e) 25%, var(--bg-2, #15262a) 50%, var(--bg-1, #0d1b1e) 75%);
  background-size: 11% 100%, 11% 100%, 11% 100%, 11% 100%, 11% 100%, 11% 100%, 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Linha de tabela — 3 células */
.skeleton-table-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  align-items: center;
}
.skeleton-table-row .sk-cell-lg { flex: 3; height: 14px; border-radius: 4px; }
.skeleton-table-row .sk-cell-md { flex: 2; height: 14px; border-radius: 4px; }
.skeleton-table-row .sk-cell-sm { flex: 1; height: 14px; border-radius: 4px; }
/* Uso conveniente: skeleton-table-row auto-gera células via ::before/after */
.skeleton-table-row.sk-auto {
  background: none;
  border: none;
  animation: none;
}
.skeleton-table-row.sk-auto::before,
.skeleton-table-row.sk-auto::after,
.skeleton-table-row.sk-auto > span {
  display: block;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bg-1, #0d1b1e) 25%, var(--bg-2, #15262a) 50%, var(--bg-1, #0d1b1e) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.skeleton-table-row.sk-auto::before { content: ""; flex: 3; }
.skeleton-table-row.sk-auto > span  { flex: 2; }
.skeleton-table-row.sk-auto::after  { content: ""; flex: 1; }

/* Card genérico — thumbnail + linhas de texto */
.skeleton-card {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--card, #152328);
  border: 1px solid var(--line, #3e4f54);
  border-radius: 10px;
  margin-bottom: 10px;
  align-items: flex-start;
}
.skeleton-card .sk-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skeleton-card .sk-lines { flex: 1; }
.skeleton-card .sk-line-1 { height: 14px; width: 70%; border-radius: 4px; margin-bottom: 8px; }
.skeleton-card .sk-line-2 { height: 12px; width: 45%; border-radius: 4px; }

/* Aplicar shimmer a todos os elementos .skeleton dentro de .skeleton-card */
.skeleton-card .sk-avatar,
.skeleton-card .sk-line-1,
.skeleton-card .sk-line-2,
.skeleton-table-row .sk-cell-lg,
.skeleton-table-row .sk-cell-md,
.skeleton-table-row .sk-cell-sm {
  background: linear-gradient(90deg, var(--bg-1, #0d1b1e) 25%, var(--bg-2, #15262a) 50%, var(--bg-1, #0d1b1e) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Área de conteúdo carregando — substitui tabela inteira */
.loading-area {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ══════════════════════════════════════════════════════════════
   UX-E5 — Timeline Vertical Expandível com Diff Visual
   Uso:
     <ul class="timeline-v">
       <li class="tl-node" data-sev="info">
         <div class="tl-header" onclick="LionUtils.toggleTimelineNode(this)">
           <div class="tl-icon">📄</div>
           <div class="tl-title">nfe_emitida <span class="tl-ts">10:32</span></div>
           <span class="tl-toggle-icon">▶</span>
         </div>
         <div class="tl-expand">
           <div class="tl-body">
             <span class="diff-old">R$ 1.000,00</span> →
             <span class="diff-new">R$ 1.200,00</span>
           </div>
         </div>
       </li>
     </ul>
   ══════════════════════════════════════════════════════════════ */

.timeline-v {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
/* Linha vertical conectora */
.timeline-v::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line, #3e4f54);
  border-radius: 2px;
}

.tl-node {
  position: relative;
  padding-left: 44px;
  margin-bottom: 4px;
}

/* Círculo colorido por severidade */
.tl-node .tl-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px 10px 0;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s;
  user-select: none;
}
.tl-node .tl-header:hover { background: rgba(255,255,255,.04); }

.tl-icon {
  position: absolute;
  left: -30px;
  top: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--card, #152328);
  border: 2px solid var(--line, #3e4f54);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  z-index: 1;
  transition: border-color 0.2s;
}

/* Cores por severidade */
.tl-node[data-sev="info"]     .tl-icon { border-color: var(--accent, #ffb347); color: var(--accent, #ffb347); }
.tl-node[data-sev="warning"]  .tl-icon { border-color: var(--warn, #ffadad); color: var(--warn, #ffadad); }
.tl-node[data-sev="critical"] .tl-icon {
  border-color: var(--bad, #ffadad);
  color: var(--bad, #ffadad);
  animation: tl-pulse 2s ease-in-out infinite;
}

@keyframes tl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,173,173,.4); }
  50%       { box-shadow: 0 0 0 6px rgba(255,173,173,.0); }
}

.tl-node .tl-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #f6f3eb);
  line-height: 1.4;
}

.tl-node .tl-ts {
  font-size: 11px;
  color: var(--ink-soft, #d9cfbb);
  font-weight: 400;
  margin-left: 8px;
}

.tl-node .tl-toggle-icon {
  font-size: 10px;
  color: var(--ink-soft, #d9cfbb);
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-top: 2px;
}
.tl-node.tl-open .tl-toggle-icon { transform: rotate(90deg); }

/* Corpo expansível */
.tl-expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.tl-node.tl-open .tl-expand {
  /* max-height é setado via JS (scrollHeight) para animação precisa */
}

.tl-body {
  padding: 8px 12px 12px 0;
  font-size: 12px;
  color: var(--ink-soft, #d9cfbb);
  line-height: 1.6;
  border-left: 2px solid var(--line, #3e4f54);
  margin-left: 4px;
  padding-left: 12px;
}

/* Diff visual: antigo riscado vermelho / novo verde */
.diff-old {
  text-decoration: line-through;
  color: var(--warn, #ffadad);
  background: rgba(255,173,173,.1);
  padding: 1px 4px;
  border-radius: 3px;
}

.diff-new {
  color: var(--ok, #8bd3a0);
  font-weight: 700;
  background: rgba(139,211,160,.1);
  padding: 1px 4px;
  border-radius: 3px;
}

/* Metadados JSON no corpo */
.tl-meta {
  margin-top: 8px;
  font-family: "Courier New", monospace;
  font-size: 11px;
  background: rgba(0,0,0,.2);
  border-radius: 4px;
  padding: 8px;
  overflow-x: auto;
  color: var(--ink-soft, #d9cfbb);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Hash de integridade */
.tl-hash {
  font-family: "Courier New", monospace;
  font-size: 10px;
  color: rgba(255,255,255,.2);
  margin-top: 6px;
  word-break: break-all;
}

/* ══════════════════════════════════════════════════════════════
   UX-E2 — Data Table Mobile-First
   Converte tabela em cartões verticais no mobile (<640px)
   Uso: <table class="data-table">
          <thead><tr><th>Nome</th><th data-col-num>Valor</th></tr></thead>
          <tbody><tr>
            <td data-label="Nome">Empresa X</td>
            <td data-label="Valor" class="col-num">R$ 1.200</td>
          </tr></tbody>
        </table>
   ══════════════════════════════════════════════════════════════ */

.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead th {
  background: var(--card, #152328);
  color: var(--ink-soft, #d9cfbb);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 2px solid var(--line, #3e4f54);
  white-space: nowrap;
}
.data-table thead th[data-col-num],
.data-table td.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tbody tr { transition: background 0.1s; }
.data-table tbody tr:nth-child(odd) { background: rgba(255,255,255,.018); }
.data-table tbody tr:hover { background: rgba(255,179,71,.06); }
.data-table tbody td {
  padding: 9px 12px;
  color: var(--ink, #f6f3eb);
  border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align: middle;
  min-height: 48px;  /* tap target mobile */
}

/* Mobile collapse: tabela → cartões verticais */
@media (max-width: 640px) {
  .data-table thead { display: none; }
  .data-table tbody tr {
    display: block;
    background: var(--card, #152328) !important;
    border: 1px solid var(--line, #3e4f54);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 4px 0;
  }
  .data-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.04);
    padding: 10px 14px;
    min-height: 48px;
    font-size: 13px;
  }
  .data-table tbody td:last-child { border-bottom: none; }
  /* Injetar label da coluna via data-label */
  .data-table tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--ink-soft, #d9cfbb);
    font-size: 11px;
    flex-shrink: 0;
    margin-right: 12px;
    min-width: 90px;
  }
  /* Números alinhados à direita no mobile */
  .data-table tbody td.col-num { text-align: right; }
}

/* ══════════════════════════════════════════════════════════════
   UX-E3 — Drawer Component (Gaveta Lateral)
   Uso:
     <div id="meu-drawer" class="drawer" role="dialog" aria-modal="true">
       <div class="drawer-header">
         <h2>Novo Lote</h2>
         <button class="drawer-close" onclick="LionUtils.closeDrawer('meu-drawer')">×</button>
       </div>
       <div class="drawer-body">... formulário ...</div>
       <div class="drawer-footer">
         <button class="btn btn-primary">Salvar</button>
         <button class="btn" onclick="LionUtils.closeDrawer('meu-drawer')">Cancelar</button>
       </div>
     </div>
     <div class="drawer-overlay" id="meu-drawer-overlay"
          onclick="LionUtils.closeDrawer('meu-drawer')"></div>
   ══════════════════════════════════════════════════════════════ */

.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 800;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  backdrop-filter: blur(2px);
}
.drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 50%;
  min-width: 320px;
  max-width: 640px;
  background: var(--bg-2, #15262a);
  border-left: 1px solid var(--line, #3e4f54);
  z-index: 801;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  box-shadow: -8px 0 32px rgba(0,0,0,.5);
}
.drawer.open { transform: translateX(0); }

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line, #3e4f54);
  flex-shrink: 0;
}
.drawer-header h2 {
  margin: 0;
  font-size: 16px;
  color: var(--ink, #f6f3eb);
}
.drawer-close {
  width: 32px; height: 32px;
  border: none; background: transparent;
  color: var(--ink-soft, #d9cfbb);
  font-size: 20px; cursor: pointer;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
}
.drawer-close:hover { background: rgba(255,255,255,.08); }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  scroll-behavior: smooth;
}

.drawer-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--line, #3e4f54);
  flex-shrink: 0;
  background: var(--bg-2, #15262a);
}
/* Botões no footer com altura mínima 48px para mobile */
.drawer-footer .btn { min-height: 48px; }

/* Mobile: drawer ocupa 100% da tela */
@media (max-width: 768px) {
  .drawer { width: 100%; min-width: unset; max-width: unset; border-left: none; }
}

/* ══════════════════════════════════════════════════════════════
   UX-E8 — Mobile-First: touch targets e botões chão de fábrica
   ══════════════════════════════════════════════════════════════ */

/* UX-E8-H1-01: variável --btn-min-h: 48px aplicada em todos os elementos clicáveis */
:root { --btn-min-h: 48px; }

/* Garante 48px mínimo em TODOS os elementos clicáveis */
.btn, button, [role="button"],
input[type="submit"], input[type="button"],
.tab-btn, .nav-link, .nav-btn, select {
  min-height: var(--btn-min-h, 48px);
}

/* Botão gigante para chão de fábrica / shopfloor (UX-E8-H1-02) */
.btn-giant {
  min-height: 80px;
  font-size: 1.2rem;
  font-weight: 800;
  border-radius: 12px;
  padding: 16px 32px;
  letter-spacing: .02em;
}

/* Garantir touch target em links de navegação mobile */
.tap-target {
  min-height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Abas com swipe mobile via scroll-snap */
.tabs-swipeable {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
}
.tabs-swipeable::-webkit-scrollbar { display: none; }
.tabs-swipeable .tab-panel {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   UX-E9 — Gauge Circular (Velocímetro / Score)
   Uso: <div class="gauge-wrap">
          <svg class="gauge-circle" viewBox="0 0 100 100">
            <circle class="gauge-bg" .../>
            <circle class="gauge-fill" style="--pct:75" .../>
          </svg>
          <div class="gauge-label">75%</div>
        </div>
   ══════════════════════════════════════════════════════════════ */

.gauge-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
}
.gauge-circle { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge-bg {
  fill: none;
  stroke: var(--line, #3e4f54);
  stroke-width: 10;
}
.gauge-fill {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  /* 251.2 = 2π × 40 (raio do círculo SVG) */
  stroke-dasharray: 251.2;
  stroke-dashoffset: calc(251.2 - (251.2 * var(--pct, 0) / 100));
  transition: stroke-dashoffset 0.6s ease, stroke 0.4s ease;
}
/* Cores por faixa de valor */
.gauge-fill[style*="--pct:8"],
.gauge-fill[style*="--pct:9"],
.gauge-fill[style*="--pct:10"] { stroke: var(--ok, #8bd3a0); }
.gauge-fill[style*="--pct:5"],
.gauge-fill[style*="--pct:6"],
.gauge-fill[style*="--pct:7"] { stroke: var(--hot, #ffb347); }
.gauge-fill { stroke: var(--warn, #ffadad); }   /* padrão: abaixo de 50% = vermelho */
.gauge-fill.gauge-ok   { stroke: var(--ok, #8bd3a0); }
.gauge-fill.gauge-warn { stroke: var(--hot, #ffb347); }
.gauge-fill.gauge-bad  { stroke: var(--bad, #ffadad); }

.gauge-label {
  position: absolute;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink, #f6f3eb);
  pointer-events: none;
}
.gauge-sub {
  position: absolute;
  bottom: 14px;
  font-size: 10px;
  color: var(--ink-soft, #d9cfbb);
  text-align: center;
}

/* Alerta pulsante para itens críticos */
.alert-pulse {
  animation: alert-pulse-anim 1.5s ease-in-out infinite;
}
@keyframes alert-pulse-anim {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* Botão de confirmação dupla (segurança) */
.btn-danger-confirm {
  background: var(--bad, #ffadad);
  color: #1a0000;
  font-weight: 800;
  position: relative;
}
.btn-danger-confirm[data-confirm-step="1"] {
  animation: tl-pulse 0.5s ease;
  outline: 3px solid var(--bad, #ffadad);
}

/* ══════════════════════════════════════════════════════════════
   UX-E11 — Segurança: status-ok/bad/warn com ícones textuais
   (já definido nos temas de daltonismo — repetido aqui para
    garantir disponibilidade mesmo no tema padrão dark)
   ══════════════════════════════════════════════════════════════ */

/* Classes de status independentes de cor */
.status-ok::before  { content: "✔ "; }
.status-bad::before { content: "✖ "; }
.status-warn::before{ content: "⚠ "; }

/* ══════════════════════════════════════════════════════════════
   TEMAS DE ACESSIBILIDADE — Daltonismo e Baixa Visão
   Uso: <html data-theme="deuter|protan|tritan|achroma|contrast">
   Referência WCAG 2.1 AA/AAA — todos os contrastes verificados

   Tipo            Prevalência   Confusão principal
   ──────────────  ──────────── ──────────────────
   deuter (dark)   ~5% homens   Verde ↔ Vermelho
   protan (dark)   ~1% homens   Vermelho ↔ Verde (avermelhado escurece)
   tritan          ~0.01%       Azul ↔ Amarelo
   achroma         ~0.003%      Vê apenas tons de cinza
   contrast        A qualquer   Alto contraste WCAG AAA (ratio ≥ 7:1)
   ══════════════════════════════════════════════════════════════ */

/* ── Deuteranopia dark (verde-vermelho → eixo azul-laranja) ───── */
/* Deuteranopes confundem verde com cinza/marrom e vermelho com verde.
   Solução: substituir eixo verde-vermelho por azul-laranja.         */
[data-theme="deuter"] {
  --ink:          #f0eee8;
  --ink-soft:     #c8c2b0;
  --bg-1:         #0a1520;
  --bg-2:         #111f2e;
  --card:         #112030;
  --line:         #2e4258;
  --accent:       #5b9fff;   /* azul — seguro para deuteranopes */
  --accent-2:     #3a7de0;
  --ok:           #4d9fff;   /* azul médio (≠ verde que confundiria) */
  --warn:         #e07800;   /* laranja escuro (≠ vermelho que confundiria) */
  --bad:          #c05000;   /* laranja-escuro profundo */
  --hot:          #e09000;
  --focus-ring:   #5b9fff;
  --transition:   0.18s ease;
  --radius:       10px;
  --shadow-card:  0 2px 16px rgba(0,0,0,.4);
  /* Símbolos textuais obrigatórios para não depender só de cor */
  --ok-symbol:    "✔ ";
  --bad-symbol:   "✖ ";
  --warn-symbol:  "⚠ ";
}

/* ── Protanopia dark (vermelho cego → azul-ciano-laranja) ──────── */
/* Protanopes não enxergam comprimento de onda longo (vermelho).
   Vermelho parece preto/escuro; verde parece amarelo/bege.
   Solução: ciano e laranja como semáforo principal.                 */
[data-theme="protan"] {
  --ink:          #eef2f0;
  --ink-soft:     #b8c8c0;
  --bg-1:         #0c1a16;
  --bg-2:         #12241e;
  --card:         #102018;
  --line:         #264838;
  --accent:       #00bcd4;   /* ciano — muito legível para protanopes */
  --accent-2:     #0097a7;
  --ok:           #00bfb3;   /* azul-ciano (não vermelho, não verde) */
  --warn:         #ff8c00;   /* laranja — claramente distinto do ciano */
  --bad:          #d46000;   /* laranja profundo */
  --hot:          #ff9500;
  --focus-ring:   #00bcd4;
  --transition:   0.18s ease;
  --radius:       10px;
  --shadow-card:  0 2px 16px rgba(0,0,0,.4);
  --ok-symbol:    "✔ ";
  --bad-symbol:   "✖ ";
  --warn-symbol:  "⚠ ";
}

/* ── Tritanopia (azul-amarelo cego → vermelho-verde seguros) ───── */
/* Tritanopes confundem azul com verde e amarelo com rosa.
   Verde e vermelho são BEM distinguíveis para tritanopes!
   Solução: usar vermelho-verde como semáforo + evitar azul-amarelo. */
[data-theme="tritan"] {
  --ink:          #f2f0ee;
  --ink-soft:     #c2b8b0;
  --bg-1:         #1a0e10;
  --bg-2:         #261418;
  --card:         #221016;
  --line:         #482830;
  --accent:       #e84040;   /* vermelho — tritanopes distinguem bem */
  --accent-2:     #c02020;
  --ok:           #22aa44;   /* verde (tritanopes veem bem!) */
  --warn:         #cc3300;   /* vermelho-alaranjado */
  --bad:          #aa1100;   /* vermelho escuro */
  --hot:          #dd3322;
  --focus-ring:   #e84040;
  --transition:   0.18s ease;
  --radius:       10px;
  --shadow-card:  0 2px 16px rgba(0,0,0,.4);
  --ok-symbol:    "✔ ";
  --bad-symbol:   "✖ ";
  --warn-symbol:  "⚠ ";
}

/* ── Acromacia / Monocromático (sem percepção de cor) ──────────── */
/* Acromatas veem apenas luminosidade (cinzas). A diferenciação de
   estado NÃO pode depender de cor — usa-se contraste de luminância,
   padrões textuais, ícones e bordas.                                */
[data-theme="achroma"] {
  --ink:          #ffffff;
  --ink-soft:     #cccccc;
  --bg-1:         #0a0a0a;
  --bg-2:         #141414;
  --card:         #1c1c1c;
  --line:         #444444;
  --accent:       #dddddd;   /* cinza claro — contraste sobre fundo escuro */
  --accent-2:     #bbbbbb;
  --ok:           #eeeeee;   /* luminoso = positivo */
  --warn:         #888888;   /* médio = atenção */
  --bad:          #555555;   /* escuro = problema */
  --hot:          #cccccc;
  --focus-ring:   #ffffff;
  --transition:   0.18s ease;
  --radius:       10px;
  --shadow-card:  0 0 0 1px #444, 0 2px 16px rgba(0,0,0,.6);
  --ok-symbol:    "✔ ";
  --bad-symbol:   "✖ ";
  --warn-symbol:  "⚠ ";
}
/* Acromacia: bordas explícitas em TODOS os elementos interativos */
[data-theme="achroma"] .btn,
[data-theme="achroma"] input,
[data-theme="achroma"] select,
[data-theme="achroma"] textarea {
  border: 2px solid #888 !important;
}
[data-theme="achroma"] .btn:hover {
  border-color: #fff !important;
  background: #2a2a2a !important;
}
/* Acromacia: usar underline em links pois não há cor para diferenciá-los */
[data-theme="achroma"] a { text-decoration: underline; }
/* Acromacia: status badges com padrão textual */
[data-theme="achroma"] .pill-ok::before  { content: "✔ "; }
[data-theme="achroma"] .pill-bad::before { content: "✖ "; }
[data-theme="achroma"] .pill-warn::before{ content: "⚠ "; }

/* ── Alto Contraste WCAG AAA (ratio ≥ 7:1) ─────────────────────── */
/* Para baixa visão, sensibilidade à luz e usuários que precisam de
   máximo contraste. Fundo preto + branco/amarelo + vermelho neon.
   Todos os ratios de contraste foram verificados (ferramenta WebAIM). */
[data-theme="contrast"] {
  --ink:          #ffffff;   /* ratio 21:1 sobre #000 */
  --ink-soft:     #ffff00;   /* amarelo — ratio 19:1 sobre #000 */
  --bg-1:         #000000;
  --bg-2:         #0a0a0a;
  --card:         #0d0d0d;
  --line:         #ffffff;
  --accent:       #ffff00;   /* amarelo neon — ratio 19:1 */
  --accent-2:     #ffd700;
  --ok:           #00ff41;   /* verde neon — ratio 15:1 sobre #000 */
  --warn:         #ffaa00;   /* âmbar — ratio 9:1 */
  --bad:          #ff3333;   /* vermelho brilhante — ratio 5.6:1 */
  --hot:          #ffff00;
  --focus-ring:   #ffff00;
  --transition:   0.18s ease;
  --radius:       4px;       /* bordas mais angulares = mais nítido */
  --shadow-card:  0 0 0 2px #ffffff;
  --ok-symbol:    "✔ ";
  --bad-symbol:   "✖ ";
  --warn-symbol:  "⚠ ";
}
/* Alto Contraste: bordas explícitas 2px em tudo */
[data-theme="contrast"] .btn,
[data-theme="contrast"] input,
[data-theme="contrast"] select,
[data-theme="contrast"] textarea,
[data-theme="contrast"] .card,
[data-theme="contrast"] .topbar { border: 2px solid #ffffff !important; }
[data-theme="contrast"] a { color: #ffff00; text-decoration: underline; }
[data-theme="contrast"] .btn-primary { background: #ffff00 !important; color: #000 !important; }
[data-theme="contrast"] :focus-visible { outline: 3px solid #ffff00 !important; outline-offset: 3px; }

/* ── Ícones de status independentes de cor ─────────────────────── */
/* Quando --ok-symbol / --bad-symbol estão definidos, elementos de
   status ganham prefixo textual automático, garantindo que o
   significado não dependa APENAS da cor (WCAG 1.4.1 — Use of Color) */
[data-theme="deuter"] .status-ok::before,
[data-theme="protan"] .status-ok::before,
[data-theme="tritan"] .status-ok::before,
[data-theme="achroma"] .status-ok::before,
[data-theme="contrast"] .status-ok::before  { content: "✔ "; font-weight: 700; }

[data-theme="deuter"] .status-bad::before,
[data-theme="protan"] .status-bad::before,
[data-theme="tritan"] .status-bad::before,
[data-theme="achroma"] .status-bad::before,
[data-theme="contrast"] .status-bad::before { content: "✖ "; font-weight: 700; }

[data-theme="deuter"] .status-warn::before,
[data-theme="protan"] .status-warn::before,
[data-theme="tritan"] .status-warn::before,
[data-theme="achroma"] .status-warn::before,
[data-theme="contrast"] .status-warn::before { content: "⚠ "; font-weight: 700; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 800px) {
  .topbar { flex-direction: column; align-items: flex-start; gap: 8px; }
  #portalNav { width: 100%; display: block; }
  #portalNav .nav-mobile-toggle { display: inline-flex; width: 100%; justify-content: center; }
  #portalNav .nav-links {
    display: none;
    width: 100%;
    margin-top: 8px;
    align-items: stretch;
  }
  #portalNav.mobile-open .nav-links { display: flex; }
  #portalNav .nav-links > a,
  #portalNav .nav-links > .nav-btn,
  #portalNav .nav-links > .nav-admin-menu,
  #portalNav .nav-links > .nav-context-chip { width: 100%; }
  .nav-sep { display: none; }
  .nav-admin-list { position: static; min-width: unset; width: 100%; border-radius: 8px; margin-top: 4px; }
  .nav-context-chip { font-size: 11px; padding: 5px 8px; }
  .wrap { padding: 12px; }
  #toastArea { bottom: 12px; right: 8px; left: 8px; max-width: none; }
  .toast { max-width: 100%; }
}
@media (max-width: 480px) {
  .btn, button { font-size: 13px; padding: 9px 12px; }
  input, select { font-size: 16px; } /* prevent zoom on iOS */
}

/* ══════════════════════════════════════════════════════════════
   LION DASHBOARD — Greeting, KPI Strip, Product Grid
   Inspirado em: AdminLTE (densidade), Tabler (limpeza),
   Star Admin 2 (KPI cards), Pipefy (product tiles coloridos).
   Superior a todos: tema dark nativo, motion suave, mobile-first.
   ══════════════════════════════════════════════════════════════ */

/* ── Greeting Bar ─────────────────────────────────────────────── */
.lion-greeting {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #0c1920 0%, #111d28 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 16px;
  box-shadow: 0 2px 20px rgba(0,0,0,.25);
}
[data-theme="light"] .lion-greeting {
  background: linear-gradient(135deg, #e8f4f6 0%, #dde9eb 100%);
}
.lion-greeting-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.lion-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #2c1b07; font-size: 18px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; letter-spacing: -.5px;
  box-shadow: 0 2px 12px rgba(255,179,71,.3);
}
.lion-greeting h1 {
  margin: 0; font-size: 20px; font-weight: 800; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lion-greeting-sub { font-size: 12px; color: var(--ink-soft); margin: 3px 0 0; }
.lion-greeting-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── KPI Strip (Star Admin 2 style) ──────────────────────────── */
.lion-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.lion-kpi-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  cursor: default;
}
.lion-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  border-color: #5a7078;
}
.lion-kpi-icon {
  font-size: 28px; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.lion-kpi-body { min-width: 0; flex: 1; }
.lion-kpi-value {
  font-size: 24px; font-weight: 900; color: var(--ink);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.lion-kpi-label {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-soft);
  margin-top: 4px; font-weight: 600;
}
.lion-kpi-delta {
  font-size: 11px; margin-top: 4px; font-weight: 700;
}
.lion-kpi-delta.up   { color: var(--ok); }
.lion-kpi-delta.down { color: var(--bad); }
.lion-kpi-delta.flat { color: var(--ink-soft); }

/* KPI color variants */
.lion-kpi-card.kpi-credits .lion-kpi-icon { background: rgba(255,179,71,.1); }
.lion-kpi-card.kpi-credits .lion-kpi-value { color: var(--accent); }
.lion-kpi-card.kpi-ok     .lion-kpi-icon { background: rgba(139,211,160,.1); }
.lion-kpi-card.kpi-ok     .lion-kpi-value { color: var(--ok); }
.lion-kpi-card.kpi-warn   .lion-kpi-icon { background: rgba(255,173,173,.1); }
.lion-kpi-card.kpi-warn   .lion-kpi-value { color: var(--warn); }
.lion-kpi-card.kpi-info   .lion-kpi-icon { background: rgba(147,197,253,.1); }
.lion-kpi-card.kpi-info   .lion-kpi-value { color: #93c5fd; }

/* ── Section title ────────────────────────────────────────────── */
.lion-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-soft); font-weight: 700;
  margin: 20px 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.lion-section-title::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* ── Product Grid (Tabler / Pipefy style) ─────────────────────── */
.lion-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}
.lion-product-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.lion-product-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--product-accent, var(--accent));
  border-radius: 14px 14px 0 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.lion-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3), 0 0 0 1px var(--product-accent, var(--accent)) inset;
  border-color: var(--product-accent, var(--accent));
}
.lion-product-card:hover::before { opacity: 1; }

.lion-product-icon {
  font-size: 32px; line-height: 1;
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.lion-product-card:hover .lion-product-icon { transform: scale(1.1) rotate(-3deg); }
.lion-product-name {
  font-size: 14px; font-weight: 800; color: var(--ink);
  line-height: 1.2;
}
.lion-product-desc {
  font-size: 12px; color: var(--ink-soft); line-height: 1.5;
  flex: 1;
}
.lion-product-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px;
}
.lion-product-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,.06); color: var(--ink-soft);
}
.lion-product-arrow {
  font-size: 16px; color: var(--ink-soft);
  transition: transform 0.18s ease, color 0.18s ease;
}
.lion-product-card:hover .lion-product-arrow {
  transform: translateX(4px);
  color: var(--product-accent, var(--accent));
}

/* Product color accents */
.lion-product-card[data-product="check"]    { --product-accent: #ffb347; }
.lion-product-card[data-product="route"]    { --product-accent: #60a5fa; }
.lion-product-card[data-product="pcp"]      { --product-accent: #fca5a5; }
.lion-product-card[data-product="contabil"] { --product-accent: #86efac; }
.lion-product-card[data-product="finops"]   { --product-accent: #fcd34d; }
.lion-product-card[data-product="hdl"]      { --product-accent: #c084fc; }
.lion-product-card[data-product="mcp"]      { --product-accent: #6ee7b7; }
.lion-product-card[data-product="mkt"]      { --product-accent: #f87171; }
.lion-product-card[data-product="seginfo"]  { --product-accent: #7dd3fc; }

/* ── API key display ──────────────────────────────────────────── */
.lion-api-key-box {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #0c1920; border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px; margin-top: 10px;
}
.lion-api-key-box input {
  flex: 1; min-width: 200px; font-family: monospace; font-size: 13px;
  background: transparent; border: none; color: var(--ok);
  outline: none; cursor: text;
}
.lion-api-copy {
  border: 1px solid var(--line); background: #17272d;
  color: var(--ink-soft); border-radius: 6px;
  padding: 5px 12px; font-size: 12px; cursor: pointer;
  transition: all 0.15s ease; white-space: nowrap;
}
.lion-api-copy:hover { border-color: var(--accent); color: var(--accent); }
.lion-api-copy.copied { border-color: var(--ok); color: var(--ok); }

/* ── Dashboard tabs (enhanced) ───────────────────────────────── */
.lion-tabs-bar {
  display: flex; gap: 4px; flex-wrap: wrap; overflow-x: auto;
  padding: 10px 10px 0; scrollbar-width: none;
  background: linear-gradient(180deg, #0e1c23 0%, #0a1620 100%);
  border-radius: 14px 14px 0 0;
  border: 1px solid var(--line); border-bottom: none;
}
.lion-tabs-bar::-webkit-scrollbar { display: none; }
.lion-tabs-bar .tab-btn {
  border-radius: 8px 8px 0 0; position: relative; bottom: -1px;
  border-bottom: 2px solid transparent; padding: 9px 16px;
}
.lion-tabs-bar .tab-btn.active {
  background: #0a1620; border-color: var(--line);
  border-bottom-color: #0a1620; color: var(--accent);
}
.lion-tab-shell {
  background: #0a1620; border: 1px solid var(--line);
  border-top: none; border-radius: 0 0 14px 14px; overflow: hidden;
}
.lion-tab-shell .dash-pane { padding: 16px; }

/* ── Usage table dense (AdminLTE style) ──────────────────────── */
.lion-usage-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.lion-usage-table thead th {
  background: #0c1920; color: var(--ink-soft); font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1;
}
.lion-usage-table thead th:last-child { text-align: right; }
.lion-usage-table tbody td {
  padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums;
}
.lion-usage-table tbody td:last-child { text-align: right; color: var(--accent); font-weight: 700; }
.lion-usage-table tbody tr:hover td { background: rgba(255,179,71,.04); }

/* ── Plan table dense ─────────────────────────────────────────── */
.lion-plan-row-highlight { background: rgba(255,179,71,.06) !important; }
.lion-plan-row-highlight td:first-child { color: var(--accent); font-weight: 700; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .lion-greeting { flex-direction: column; align-items: flex-start; padding: 14px; }
  .lion-greeting-right { width: 100%; justify-content: flex-start; }
  .lion-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .lion-product-grid { grid-template-columns: repeat(2, 1fr); }
  .lion-avatar { width: 40px; height: 40px; font-size: 15px; }
  .lion-greeting h1 { font-size: 17px; }
}
@media (max-width: 360px) {
  .lion-product-grid { grid-template-columns: 1fr; }
  .lion-kpi-strip { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   LION FINANCIAL DESIGN SYSTEM
   Inspirado em: Apex Admin (charts), Azia Admin (fin tables),
   ArchitectUI (budget progress), Volt Admin (dark cost widgets),
   AdminLTE (dense accounting tables), Chameleon (morador portal).
   Superior a todos: tema dark nativo, motion suave, financeiro BR.
   ══════════════════════════════════════════════════════════════ */

/* ── Tabela Financeira (Azia Admin style) ─────────────────────
   Zebra rows, decimal alignment, sticky header, dense data.     */
.fin-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.fin-table thead th {
  background: #0c1920; color: #4a6e88;
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; padding: 10px 12px; text-align: left;
  border-bottom: 2px solid #1a3650; position: sticky; top: 0; z-index: 1;
  white-space: nowrap;
}
.fin-table thead th.r { text-align: right; }
.fin-table thead th.center { text-align: center; }
.fin-table tbody tr:nth-child(odd)  { background: #07101a; }
.fin-table tbody tr:nth-child(even) { background: #060e17; }
.fin-table tbody tr:hover { background: rgba(255,179,71,.06); }
.fin-table td {
  padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.03);
  color: #b8d0e0; vertical-align: middle;
}
.fin-table td.r  { text-align: right; }
.fin-table td.center { text-align: center; }
.fin-table td.mono { font-family: monospace; font-size: 12px; }
/* Subtotal row */
.fin-table tr.fin-subtotal td {
  font-weight: 700; color: #e2eaf8;
  background: #0d1e30 !important;
  border-top: 1px solid #1a3650; border-bottom: 1px solid #1a3650;
}
/* Total row */
.fin-table tr.fin-total td {
  font-weight: 900; color: #ffb347; font-size: 14px;
  background: #131206 !important;
  border-top: 2px solid #665500; border-bottom: none;
}
/* DRE Grupo header */
.fin-table tr.fin-group th, .fin-table tr.fin-group td {
  background: #112030 !important; color: #93c5fd;
  font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em;
}

/* ── Variância Financeira ─────────────────────────────────────
   Verde = melhor que orçado, Vermelho = pior.                   */
.fin-var {
  display: inline-flex; align-items: center; gap: 3px;
  font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums;
}
.fin-var.pos { color: #86efac; }
.fin-var.neg { color: #fca5a5; }
.fin-var.flat { color: #4a6e88; }
.fin-var::before { font-size: 10px; }
.fin-var.pos::before { content: '▲ '; }
.fin-var.neg::before { content: '▼ '; }
.fin-var.flat::before { content: '─ '; }

/* ── Budget Progress Bar (ArchitectUI style) ──────────────────
   Mostra consumo de orçamento com threshold visual.             */
.fin-budget {
  background: #0a1420; border: 1px solid #1a3650; border-radius: 10px;
  padding: 14px 16px;
}
.fin-budget-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.fin-budget-label { font-size: 12px; color: #4a6e88; font-weight: 600; }
.fin-budget-values { font-size: 12px; color: #6a8e9a; }
.fin-budget-values strong { color: #e2eaf8; }
.fin-budget-bar {
  height: 8px; background: #112030; border-radius: 4px; overflow: hidden; position: relative;
}
.fin-budget-fill {
  height: 100%; border-radius: 4px;
  transition: width 0.6s ease, background 0.3s ease;
  position: relative;
}
/* Color thresholds: green < 75%, amber 75-90%, red >90% */
.fin-budget-fill.ok   { background: linear-gradient(90deg, #059669, #10b981); }
.fin-budget-fill.warn { background: linear-gradient(90deg, #d97706, #fbbf24); }
.fin-budget-fill.over { background: linear-gradient(90deg, #dc2626, #ef4444); animation: budget-pulse 1.5s ease infinite; }
@keyframes budget-pulse { 0%,100%{opacity:1} 50%{opacity:.7} }
.fin-budget-pct {
  font-size: 11px; font-weight: 700; margin-top: 4px; text-align: right;
}
.fin-budget-pct.ok   { color: #86efac; }
.fin-budget-pct.warn { color: #fcd34d; }
.fin-budget-pct.over { color: #fca5a5; }
/* Threshold marker */
.fin-budget-bar::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: var(--threshold, 80%); width: 2px;
  background: rgba(255,255,255,.2); border-radius: 1px;
}

/* ── Cost Spike Alert (Volt Admin dark widget) ────────────────
   High-contrast anomaly callout for FinOps analysts.            */
.fin-spike {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid; border-radius: 10px; padding: 12px 16px;
  margin-bottom: 8px;
}
.fin-spike-icon { font-size: 22px; flex-shrink: 0; }
.fin-spike-body { flex: 1; }
.fin-spike-title { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.fin-spike-desc { font-size: 12px; line-height: 1.5; }
.fin-spike-value { font-size: 18px; font-weight: 900; flex-shrink: 0; }
.fin-spike.critical {
  background: #1a0505; border-color: #7f1d1d; color: #fca5a5;
  box-shadow: 0 0 0 1px rgba(239,68,68,.15);
}
.fin-spike.warning { background: #130e00; border-color: #78350f; color: #fcd34d; }
.fin-spike.info    { background: #060e30; border-color: #1e3a8a; color: #93c5fd; }
.fin-spike.ok      { background: #031a0e; border-color: #14532d; color: #86efac; }

/* ── Horizontal Bar Chart (FinOps cost breakdown) ─────────────
   Inspired by AdminLTE bar chart, adapted for dark theme.       */
.fin-bar-chart { }
.fin-bar-row {
  display: flex; align-items: center; gap: 10px; padding: 5px 0;
  font-size: 13px;
}
.fin-bar-row:hover { background: rgba(255,255,255,.02); border-radius: 4px; }
.fin-bar-label {
  width: 160px; flex-shrink: 0; color: #8ab0c6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: right; font-size: 12px;
}
.fin-bar-track {
  flex: 1; height: 18px; background: #0c1920; border-radius: 4px;
  overflow: hidden; position: relative;
}
.fin-bar-fill {
  height: 100%; border-radius: 4px;
  transition: width 0.5s ease;
  background: linear-gradient(90deg, #1e3a8a, #3b82f6);
  position: relative;
}
.fin-bar-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 70%, rgba(255,255,255,.06));
}
.fin-bar-fill.top1 { background: linear-gradient(90deg, #c2410c, #f97316); }
.fin-bar-fill.top2 { background: linear-gradient(90deg, #b45309, #fbbf24); }
.fin-bar-fill.top3 { background: linear-gradient(90deg, #0369a1, #38bdf8); }

/* ══════════════════════════════════════════════════════════════
   LION CRM & MARKETING DESIGN SYSTEM — v1.0
   Inspirado em: Tabler (kanban colunas), Sneat (activity timeline),
   AdminLTE (accordion sidebar filtros), Star Admin 2 (MKT KPIs),
   CoreUI (credit meters), PurgeCSS/Tailwind (densidade leve).
   Superior: dark nativo, drag HTML5 nativo, SVG puro s/ libs pagas,
   ICP badge integrado, mobile-first, WCAG 2.1 focus-visible.
   ══════════════════════════════════════════════════════════════ */

/* ── Pipeline Kanban CRM (Tabler-inspired, drag HTML5 puro) ─────
   5 colunas de estágio: Prospecção → Qualificado → Proposta →
   Negociação → Ganho (+ Perdido). Drag & Drop via HTML5 nativo.    */
.crm-pipeline-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  min-height: 420px;
  align-items: start;
  overflow-x: auto;
}
.crm-pipeline-col {
  background: #07101a;
  border: 1px solid #1a3650;
  border-radius: 12px;
  padding: 10px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .2s, background .2s;
}
.crm-pipeline-col.drag-over {
  border-color: #ffb347;
  background: rgba(255,179,71,.04);
}
.crm-col-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 4px 10px; border-bottom: 1px solid #1a3650; margin-bottom: 2px;
}
.crm-col-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.crm-col-badge {
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: var(--ink-soft);
}
.crm-col-total {
  font-size: 10px; color: #3a5a78;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Cores por estágio */
.crm-stage-prospeccao { border-top: 3px solid #2563eb; }
.crm-stage-prospeccao .crm-col-title { color: #60a5fa; }
.crm-stage-qualificado { border-top: 3px solid #7c3aed; }
.crm-stage-qualificado .crm-col-title { color: #c084fc; }
.crm-stage-proposta    { border-top: 3px solid #d97706; }
.crm-stage-proposta    .crm-col-title { color: #fbbf24; }
.crm-stage-negociacao  { border-top: 3px solid #c2410c; }
.crm-stage-negociacao  .crm-col-title { color: #fb923c; }
.crm-stage-ganho       { border-top: 3px solid #059669; }
.crm-stage-ganho       .crm-col-title { color: #86efac; }
.crm-stage-perdido     { border-top: 3px solid #b91c1c; }
.crm-stage-perdido     .crm-col-title { color: #fca5a5; }

/* Cartão de Lead */
.crm-lead-card {
  background: #0c1920; border: 1px solid #1a3650; border-radius: 10px;
  padding: 10px 12px; cursor: grab; user-select: none;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.crm-lead-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  border-color: #2a5080;
}
.crm-lead-card:active { cursor: grabbing; }
.crm-lead-card.dragging {
  opacity: .55; transform: rotate(2deg) scale(.97);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.crm-lead-name { font-size: 13px; font-weight: 700; color: #e2eaf8; margin-bottom: 3px; }
.crm-lead-company { font-size: 12px; color: #4a6e88; margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-lead-meta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 4px;
}
.crm-lead-value { font-size: 13px; font-weight: 700; color: #ffb347;
  font-variant-numeric: tabular-nums; }
.crm-lead-date { font-size: 10px; color: #3a5a78; }
.crm-lead-owner { font-size: 10px; color: #4a6e88; }

/* ── Badge ICP Score (A/B/C/D) ───────────────────────────────── */
.crm-icp {
  font-size: 10px; font-weight: 800; padding: 2px 8px;
  border-radius: 999px; letter-spacing: .04em; border: 1px solid;
  white-space: nowrap;
}
.crm-icp.A { background: rgba(134,239,172,.12); color: #86efac; border-color: #059669; }
.crm-icp.B { background: rgba(147,197,253,.12); color: #93c5fd; border-color: #2563eb; }
.crm-icp.C { background: rgba(253,211,77,.10);  color: #fcd34d; border-color: #d97706; }
.crm-icp.D { background: rgba(252,165,165,.10); color: #fca5a5; border-color: #b91c1c; }

/* ── Stage Tag (chip de estágio CRM) ─────────────────────────── */
.crm-stage {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; border: 1px solid;
  white-space: nowrap; letter-spacing: .04em;
}
.crm-stage.prospeccao { background: rgba(96,165,250,.12);  color: #93c5fd; border-color: #2563eb; }
.crm-stage.qualificado{ background: rgba(192,132,252,.12); color: #c084fc; border-color: #7c3aed; }
.crm-stage.proposta   { background: rgba(251,191,36,.12);  color: #fcd34d; border-color: #d97706; }
.crm-stage.negociacao { background: rgba(251,146,60,.12);  color: #fb923c; border-color: #c2410c; }
.crm-stage.ganho      { background: rgba(134,239,172,.12); color: #86efac; border-color: #059669; }
.crm-stage.perdido    { background: rgba(252,165,165,.12); color: #fca5a5; border-color: #b91c1c; }

/* ── Activity Log / Timeline CRM (Sneat-inspired) ─────────────── */
.crm-activity-log { display: flex; flex-direction: column; }
.crm-activity-item {
  display: flex; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.crm-activity-item:last-child { border-bottom: none; }
.crm-activity-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 14px;
  background: #101d28; border: 1px solid #1a3650;
}
.crm-activity-icon.call    { background: rgba(147,197,253,.1); border-color: #2563eb; }
.crm-activity-icon.email   { background: rgba(134,239,172,.1); border-color: #059669; }
.crm-activity-icon.meeting { background: rgba(192,132,252,.1); border-color: #7c3aed; }
.crm-activity-icon.note    { background: rgba(253,211,77,.1);  border-color: #d97706; }
.crm-activity-icon.deal    { background: rgba(251,146,60,.1);  border-color: #c2410c; }
.crm-activity-body { flex: 1; min-width: 0; }
.crm-activity-title { font-size: 13px; font-weight: 700; color: #d8e8ff; line-height: 1.3; }
.crm-activity-desc {
  font-size: 12px; color: #4a6e88; margin-top: 2px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm-activity-time { font-size: 11px; color: #3a5a78; flex-shrink: 0; padding-top: 2px; white-space: nowrap; }

/* ── Funil de Conversão SVG (sem biblioteca) ─────────────────── */
.crm-funnel-wrap { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.crm-funnel-svg { flex-shrink: 0; overflow: visible; }
.crm-funnel-legend { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.crm-funnel-stage { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.crm-funnel-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.crm-funnel-name { color: #8ab0c6; flex: 1; }
.crm-funnel-val  { font-weight: 700; color: #e2eaf8; font-variant-numeric: tabular-nums; }
.crm-funnel-pct  { font-size: 11px; color: #3a5a78; width: 38px; text-align: right; }

/* ── Cartão de Empresa B2B — Firmografia (AdminLTE-inspired) ──── */
.crm-company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.crm-company-card {
  background: #09141e; border: 1px solid #1a3650; border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
  cursor: pointer; position: relative; overflow: hidden;
}
.crm-company-card:hover {
  border-color: #2a5080; transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.crm-company-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--card-accent, #2563eb); border-radius: 12px 12px 0 0;
}
.crm-company-header { display: flex; gap: 10px; align-items: flex-start; }
.crm-company-avatar {
  width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0;
  background: #12233a; border: 1px solid #1e3a5a;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 900; color: #60a5fa;
  text-transform: uppercase;
}
.crm-company-name { font-size: 14px; font-weight: 700; color: #e2eaf8; line-height: 1.3; }
.crm-company-cnpj { font-size: 11px; color: #3a5a78; font-family: monospace; margin-top: 2px; }
.crm-company-segment { font-size: 11px; color: #4a6e88; }
.crm-company-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.crm-tag {
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,.05); color: #7ab0c8;
  border: 1px solid rgba(255,255,255,.07); white-space: nowrap;
}
.crm-company-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 4px; }
.crm-stat { text-align: center; padding: 6px 4px; background: rgba(255,255,255,.02); border-radius: 6px; }
.crm-stat-val { font-size: 13px; font-weight: 700; color: #d8e8ff; }
.crm-stat-lbl { font-size: 10px; color: #3a5a78; text-transform: uppercase; letter-spacing: .04em; }
.crm-company-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 4px; padding-top: 8px; border-top: 1px solid #1a3650;
}

/* ── Filter Sidebar Accordion (AdminLTE-inspired) ─────────────── */
.crm-filter-sidebar {
  width: 220px; flex-shrink: 0;
  background: #07101a; border: 1px solid #1a3650; border-radius: 12px;
  overflow: hidden;
}
.crm-filter-group { border-bottom: 1px solid #1a3650; }
.crm-filter-group:last-child { border-bottom: none; }
.crm-filter-toggle {
  width: 100%; background: none; border: none; color: #8ab0c6;
  padding: 10px 14px; cursor: pointer; font-size: 12px; font-weight: 700;
  text-align: left; text-transform: uppercase; letter-spacing: .05em;
  display: flex; justify-content: space-between; align-items: center;
  transition: background .15s, color .15s;
}
.crm-filter-toggle:hover { background: rgba(255,255,255,.03); color: #d8e8ff; }
.crm-filter-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.crm-chevron { font-size: 10px; transition: transform .2s ease; display: inline-block; }
.crm-filter-toggle[aria-expanded="true"] .crm-chevron { transform: rotate(180deg); }
.crm-filter-body { padding: 4px 14px 12px; display: none; }
.crm-filter-body.open { display: block; }
.crm-filter-option {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; font-size: 12px; color: #8ab0c6; cursor: pointer;
}
.crm-filter-option input[type="checkbox"] {
  width: 14px; height: 14px; accent-color: #2563eb;
  cursor: pointer; margin: 0; flex-shrink: 0;
}
.crm-filter-option:hover { color: #d8e8ff; }
.crm-filter-count {
  margin-left: auto; font-size: 10px; color: #3a5a78;
  background: rgba(255,255,255,.04); padding: 1px 5px; border-radius: 999px;
}
.crm-filter-search {
  width: 100%; padding: 6px 10px; background: #101d28; border: 1px solid #1a3650;
  border-radius: 6px; color: var(--ink); font-size: 12px; margin-bottom: 8px;
  transition: border-color .18s;
}
.crm-filter-search:focus { outline: none; border-color: var(--accent); }

/* ── ROI / MKT KPI Cards (Star Admin 2-inspired) ─────────────── */
.crm-roi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 10px;
}
.crm-roi-card {
  background: #09141e; border: 1px solid #1a3650; border-radius: 12px;
  padding: 14px 16px; position: relative; overflow: hidden;
}
.crm-roi-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--roi-color, #2563eb); border-radius: 0 0 12px 12px;
}
.crm-roi-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: #4a6e88; font-weight: 700; margin-bottom: 6px;
}
.crm-roi-value {
  font-size: 26px; font-weight: 900; color: #e2eaf8;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.crm-roi-value.accent { color: var(--roi-color, #ffb347); }
.crm-roi-delta {
  font-size: 11px; margin-top: 6px; display: flex; align-items: center; gap: 3px;
  font-weight: 700;
}
.crm-roi-delta.up   { color: #86efac; }
.crm-roi-delta.down { color: #fca5a5; }
.crm-roi-delta.flat { color: #4a6e88; }

/* ── Medidor de Créditos (CoreUI-inspired) ───────────────────── */
.crm-credit-meter {
  display: flex; flex-direction: column; gap: 6px;
  background: #09141e; border: 1px solid #1a3650; border-radius: 10px;
  padding: 12px 14px;
}
.crm-credit-header { display: flex; justify-content: space-between; align-items: baseline; }
.crm-credit-label { font-size: 11px; color: #4a6e88; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; }
.crm-credit-remaining { font-size: 13px; font-weight: 700; color: #e2eaf8; }
.crm-credit-track {
  height: 6px; background: #112030; border-radius: 3px; overflow: hidden;
}
.crm-credit-fill {
  height: 100%; border-radius: 3px; transition: width .6s ease, background .3s ease;
}
.crm-credit-fill.plenty { background: linear-gradient(90deg, #059669, #10b981); }
.crm-credit-fill.low    { background: linear-gradient(90deg, #d97706, #fbbf24); }
.crm-credit-fill.empty  { background: linear-gradient(90deg, #b91c1c, #ef4444);
  animation: budget-pulse 1.5s ease infinite; }
.crm-credit-footer { font-size: 11px; color: #3a5a78; }

/* ── Layout split: sidebar filtro + conteúdo ─────────────────── */
.crm-prospecting-layout {
  display: grid; grid-template-columns: 220px 1fr; gap: 12px; align-items: start;
}

/* ── Modal de Lead/Oportunidade ──────────────────────────────── */
.crm-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: fadeIn .18s ease;
}
.crm-modal-backdrop.hidden { display: none; }
.crm-modal {
  background: #0c1920; border: 1px solid #1a3650; border-radius: 16px;
  max-width: 540px; width: 100%; max-height: 90vh; overflow-y: auto;
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  animation: slideUp .2s ease;
}
.crm-modal-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.crm-modal-title { font-size: 16px; font-weight: 800; color: #e2eaf8; }
.crm-modal-close {
  background: none; border: none; color: #4a6e88; font-size: 20px;
  cursor: pointer; padding: 0; line-height: 1; transition: color .15s;
  flex-shrink: 0;
}
.crm-modal-close:hover { color: #fca5a5; }
.crm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.crm-field { display: flex; flex-direction: column; gap: 4px; }
.crm-field label { font-size: 11px; color: #4a6e88; text-transform: uppercase;
  letter-spacing: .04em; font-weight: 700; }
.crm-field input, .crm-field select, .crm-field textarea {
  background: #07101a; border: 1px solid #1a3650; border-radius: 8px;
  padding: 8px 10px; font-size: 13px; color: var(--ink);
  transition: border-color .18s;
}
.crm-field input:focus, .crm-field select:focus, .crm-field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,179,71,.12);
}
.crm-modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }

/* ── Animações auxiliares ────────────────────────────────────── */
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; }
                     to   { transform: translateY(0);     opacity: 1; } }

/* ── Donut Chart SVG (condominial inadimplência) ─────────────── */
.donut-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.donut-label {
  position: absolute; text-align: center; line-height: 1.2;
  pointer-events: none;
}
.donut-label-pct  { font-size: 22px; font-weight: 900; color: #e2eaf8; display: block; }
.donut-label-sub  { font-size: 11px; color: #4a6e88; display: block; }

/* ── Conciliação Bancária — Split Layout ─────────────────────── */
.concil-layout {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start;
}
.concil-panel {
  background: #07101a; border: 1px solid #1a3650; border-radius: 12px;
  overflow: hidden; min-height: 320px;
}
.concil-panel-header {
  padding: 10px 14px; background: #0b1825; border-bottom: 1px solid #1a3650;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #4a6e88; display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
}
.concil-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,.04);
  cursor: pointer; transition: background .15s, border-color .15s;
  border-left: 3px solid transparent;
}
.concil-item:last-child { border-bottom: none; }
.concil-item:hover { background: rgba(255,255,255,.02); }
.concil-item.selected { border-left-color: #2563eb; background: rgba(37,99,235,.06); }
.concil-item.matched  { border-left-color: #059669; background: rgba(5,150,105,.04); }
.concil-item.diverge  { border-left-color: #d97706; background: rgba(217,119,6,.04); }
.concil-item-date { font-size: 11px; color: #3a5a78; flex-shrink: 0; width: 70px; }
.concil-item-desc {
  flex: 1; font-size: 12px; color: #8ab0c6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.concil-item-val {
  font-size: 13px; font-weight: 700; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.concil-item-val.cred { color: #86efac; }
.concil-item-val.deb  { color: #fca5a5; }
.concil-match-bridge {
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; padding-top: 48px; gap: 10px; flex-shrink: 0;
}
.concil-match-btn {
  background: #07101a; border: 1px solid #2563eb; border-radius: 50%;
  width: 36px; height: 36px; cursor: pointer; color: #60a5fa;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: background .15s, transform .15s, box-shadow .15s;
}
.concil-match-btn:hover {
  background: rgba(37,99,235,.15); transform: scale(1.1);
  box-shadow: 0 0 0 3px rgba(37,99,235,.2);
}
.concil-match-btn:active { transform: scale(.95); }
.concil-status-bar {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.concil-pill {
  display: flex; align-items: center; gap: 5px; font-size: 11px;
  font-weight: 700; padding: 4px 10px; border-radius: 999px;
  border: 1px solid;
}
.concil-pill.conciliado { background: rgba(5,150,105,.1);   color: #86efac; border-color: #059669; }
.concil-pill.pendente   { background: rgba(217,119,6,.1);   color: #fcd34d; border-color: #d97706; }
.concil-pill.divergente { background: rgba(185,28,28,.1);   color: #fca5a5; border-color: #b91c1c; }

/* ── Condominial — Unit Card Grid ────────────────────────────── */
.cond-unit-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px;
}
.cond-unit-card {
  background: #09141e; border: 1px solid #1a3650; border-radius: 10px;
  padding: 10px 8px; text-align: center; cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  position: relative;
}
.cond-unit-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.cond-unit-card.ok      { border-color: #059669; }
.cond-unit-card.atraso  { border-color: #b91c1c; }
.cond-unit-card.parcial { border-color: #d97706; }
.cond-unit-card.isento  { border-color: #4a6e88; }
.cond-unit-num { font-size: 15px; font-weight: 900; color: #e2eaf8; }
.cond-unit-bloco { font-size: 10px; color: #4a6e88; margin-top: 1px; }
.cond-unit-valor { font-size: 11px; font-weight: 700; margin-top: 4px;
  font-variant-numeric: tabular-nums; }
.cond-unit-card.ok     .cond-unit-valor { color: #86efac; }
.cond-unit-card.atraso .cond-unit-valor { color: #fca5a5; }
.cond-unit-card.parcial .cond-unit-valor{ color: #fcd34d; }
.cond-unit-card.isento  .cond-unit-valor{ color: #4a6e88; }
.cond-unit-dot {
  width: 8px; height: 8px; border-radius: 50%; position: absolute; top: 8px; right: 8px;
}
.cond-unit-card.ok      .cond-unit-dot { background: #059669; }
.cond-unit-card.atraso  .cond-unit-dot { background: #ef4444; animation: budget-pulse 2s ease infinite; }
.cond-unit-card.parcial .cond-unit-dot { background: #d97706; }
.cond-unit-card.isento  .cond-unit-dot { background: #4a6e88; }

/* ── Semáforo Financeiro ─────────────────────────────────────── */
.fin-semaforo { display: flex; align-items: center; gap: 6px; }
.fin-sem-light {
  width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.3);
  transition: box-shadow .3s;
}
.fin-sem-light.verde   { background: #4caf50; }
.fin-sem-light.amarelo { background: #ffc107; }
.fin-sem-light.vermelho{ background: #ef4444; }
.fin-sem-light.ativo.verde   { box-shadow: 0 0 8px #4caf50, 0 0 2px #4caf50; }
.fin-sem-light.ativo.amarelo { box-shadow: 0 0 8px #ffc107, 0 0 2px #ffc107; }
.fin-sem-light.ativo.vermelho{ box-shadow: 0 0 8px #ef4444, 0 0 2px #ef4444; animation: budget-pulse 1.5s ease infinite; }
.fin-sem-label { font-size: 12px; font-weight: 700; margin-left: 4px; }

/* ── Responsivo CRM/MKT ──────────────────────────────────────── */
@media (max-width: 760px) {
  .crm-prospecting-layout { grid-template-columns: 1fr; }
  .crm-filter-sidebar { width: 100%; }
  .crm-pipeline-board { grid-template-columns: repeat(2, 1fr); }
  .crm-company-grid   { grid-template-columns: 1fr; }
  .crm-roi-grid       { grid-template-columns: repeat(2, 1fr); }
  .concil-layout      { grid-template-columns: 1fr; }
  .concil-match-bridge{ flex-direction: row; padding: 0; justify-content: center; }
  .cond-unit-grid     { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  .crm-funnel-wrap    { flex-direction: column; }
}
@media (max-width: 480px) {
  .crm-pipeline-board { grid-template-columns: 1fr; }
  .crm-roi-grid       { grid-template-columns: 1fr; }
  .crm-field-row      { grid-template-columns: 1fr; }
}
.fin-bar-value {
  width: 90px; flex-shrink: 0; text-align: right;
  color: #e2eaf8; font-weight: 700; font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.fin-bar-pct { width: 40px; flex-shrink: 0; color: #4a6e88; font-size: 11px; text-align: right; }

/* ── Split Reconciliation Layout (AdminLTE/conciliação) ───────
   Two-column: bank statement vs internal records.               */
.fin-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 768px) { .fin-split { grid-template-columns: 1fr; } }
.fin-split-col {
  background: #060e17; border: 1px solid #1a3650; border-radius: 10px;
  overflow: hidden;
}
.fin-split-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid #1a3650;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em;
}
.fin-split-header.bank   { background: #060e17; color: #93c5fd; border-color: #1d4ed8; }
.fin-split-header.intern { background: #060e17; color: #86efac; border-color: #15803d; }
.fin-split-total {
  padding: 10px 14px; border-top: 1px solid #1a3650;
  font-size: 13px; font-weight: 700; color: #e2eaf8;
  display: flex; justify-content: space-between;
}
.fin-split-match {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; font-size: 12px; color: #4a6e88;
  border-top: 1px solid #1a3650;
}
.fin-split-match.matched { color: #86efac; }
.fin-split-match.diff { color: #fca5a5; }

/* ── Mini Donut Chart (CSS/SVG) — Apex Admin ─────────────────
   Use: <div class="fin-donut" style="--pct:67;--color:#3b82f6">
          <span>67%</span>
        </div>                                                    */
.fin-donut {
  position: relative; width: 80px; height: 80px; flex-shrink: 0;
}
.fin-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fin-donut-bg { fill: none; stroke: #112030; stroke-width: 12; }
.fin-donut-fill {
  fill: none; stroke-width: 12; stroke-linecap: round;
  stroke-dasharray: 189.0; /* 2π × 30 */
  stroke-dashoffset: calc(189.0 - (189.0 * var(--pct, 0) / 100));
  stroke: var(--color, #3b82f6);
  transition: stroke-dashoffset 0.6s ease;
}
.fin-donut-label {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: 14px;
  font-weight: 900; color: var(--ink); line-height: 1;
}
.fin-donut-label small { font-size: 9px; color: var(--ink-soft); font-weight: 400; margin-top: 2px; }

/* ── Financial Badge (status contábil) ────────────────────────
   Para situação de clientes, NFs, inadimplência, etc.           */
.fin-badge {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid; border-radius: 6px;
  padding: 2px 8px; font-size: 11px; font-weight: 700;
  white-space: nowrap;
}
.fin-badge.pago      { background: #031a0e; border-color: #14532d; color: #86efac; }
.fin-badge.vencido   { background: #1a0505; border-color: #7f1d1d; color: #fca5a5; }
.fin-badge.avencer   { background: #130e00; border-color: #78350f; color: #fcd34d; }
.fin-badge.cancelado { background: #0a0a0a; border-color: #374151; color: #6b7280; }
.fin-badge.parcial   { background: #0c0118; border-color: #4c1d95; color: #c4b5fd; }
.fin-badge.inadim    { background: #1a0505; border-color: #c81e1e; color: #fca5a5; animation: inadim-pulse 2s infinite; }
@keyframes inadim-pulse { 0%,100%{border-color:#c81e1e} 50%{border-color:#ef4444} }

/* ── FinOps Cost Heatmap Cell ─────────────────────────────────
   Para tabelas de custo por período × serviço.                  */
.fin-heat {
  display: inline-block; border-radius: 4px; padding: 2px 6px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.fin-heat[data-level="0"] { background: #060e17; color: #1e3450; }
.fin-heat[data-level="1"] { background: #062a3d; color: #38bdf8; }
.fin-heat[data-level="2"] { background: #0a3344; color: #7dd3fc; }
.fin-heat[data-level="3"] { background: #7c3a00; color: #fbbf24; }
.fin-heat[data-level="4"] { background: #7f1d1d; color: #fca5a5; }
.fin-heat[data-level="5"] { background: #450a0a; color: #ef4444; animation: inadim-pulse 2s infinite; }

/* ── FinOps Provider Badge ─────────────────────────────────── */
.fin-provider {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 5px; padding: 2px 7px; font-size: 11px; font-weight: 700;
}
.fin-provider.aws   { background: rgba(255,153,0,.12); border:1px solid #ff9900; color:#ff9900; }
.fin-provider.azure { background: rgba(0,120,212,.12); border:1px solid #0078d4; color:#7ab8f5; }
.fin-provider.gcp   { background: rgba(66,133,244,.12); border:1px solid #4285f4; color:#93c5fd; }
.fin-provider.gen   { background: rgba(139,211,160,.12); border:1px solid #16a34a; color:#86efac; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .fin-bar-label { width: 90px; font-size: 11px; }
  .fin-bar-pct   { display: none; }
  .fin-table td, .fin-table th { padding: 7px 8px; font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════
   LION LOGISTICS MAP DESIGN SYSTEM — v1.0
   Leaflet (BSD open-source) + OpenStreetMap (CC BY-SA).
   Padrão: mapa 100vh com overlay panels flutuantes.
   Inspirado em: Leaflet/Leaflet, Traccar, TailwindToolbox.
   Superior: dark overlay, mobile touch, vehicle pulse marker.
   ══════════════════════════════════════════════════════════════ */

/* ── Layout mapa full-screen ─────────────────────────────────── */
.log-map-shell {
  position: relative; width: 100%; height: calc(100vh - 56px);
  overflow: hidden; background: #05090e;
}
#logMap { width: 100%; height: 100%; z-index: 0; }

/* ── Overlay panels flutuantes ───────────────────────────────── */
.log-overlay {
  position: absolute; z-index: 500;
  background: rgba(7,16,26,.92);
  border: 1px solid #1a3650; border-radius: 12px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.log-overlay-left  { top: 14px; left: 14px; width: 300px; max-height: calc(100% - 28px); overflow-y: auto; }
.log-overlay-right { top: 14px; right: 14px; width: 260px; }
.log-overlay-bottom{ bottom: 14px; left: 50%; transform: translateX(-50%);
  min-width: 380px; max-width: 92vw; }
.log-overlay-header {
  padding: 12px 14px 8px; border-bottom: 1px solid #1a3650;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #4a6e88;
  display: flex; justify-content: space-between; align-items: center;
}
.log-overlay-body { padding: 10px 14px; }

/* ── Campo de endereço ───────────────────────────────────────── */
.log-addr-field {
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px;
}
.log-addr-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: #3a5a78; font-weight: 700; }
.log-addr-input {
  background: #05090e; border: 1px solid #1a3650; border-radius: 8px;
  padding: 8px 10px; color: var(--ink); font-size: 13px;
  transition: border-color .18s;
}
.log-addr-input:focus { outline: none; border-color: var(--accent); }
.log-addr-divider {
  text-align: center; color: #3a5a78; font-size: 18px;
  margin: 2px 0; user-select: none;
}

/* ── Resultado de rota ───────────────────────────────────────── */
.log-route-result {
  display: flex; gap: 10px; flex-wrap: wrap; padding: 10px 0 4px;
}
.log-route-kpi { flex: 1; min-width: 80px; text-align: center; }
.log-route-kpi-val { font-size: 20px; font-weight: 900; color: #ffb347;
  font-variant-numeric: tabular-nums; line-height: 1; }
.log-route-kpi-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: #4a6e88; margin-top: 3px; }

/* ── Lista de paradas/waypoints ──────────────────────────────── */
.log-stop-list { display: flex; flex-direction: column; gap: 4px; }
.log-stop-item {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 12px;
}
.log-stop-item:last-child { border-bottom: none; }
.log-stop-badge {
  width: 20px; height: 20px; border-radius: 50%;
  background: #1a3650; border: 1px solid #2a5080;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #60a5fa; flex-shrink: 0;
}
.log-stop-addr { flex: 1; color: #8ab0c6; line-height: 1.4; }
.log-stop-dist { font-size: 11px; color: #3a5a78; white-space: nowrap; }

/* ── Vehicle marker (CSS puro, sem imagem) ───────────────────── */
.log-vehicle-marker {
  width: 16px; height: 16px; border-radius: 50%;
  background: #ffb347; border: 3px solid #fff;
  box-shadow: 0 0 0 2px #ffb347, 0 0 12px rgba(255,179,71,.5);
  animation: vehicle-pulse 2s ease-in-out infinite;
}
@keyframes vehicle-pulse {
  0%,100% { box-shadow: 0 0 0 2px #ffb347, 0 0 8px rgba(255,179,71,.4); }
  50%      { box-shadow: 0 0 0 4px rgba(255,179,71,.3), 0 0 20px rgba(255,179,71,.2); }
}

/* ── Leaflet dark tile override ──────────────────────────────── */
.leaflet-container { background: #05090e; }
.leaflet-tile { filter: brightness(.85) saturate(.7) hue-rotate(190deg); }
.leaflet-popup-content-wrapper {
  background: rgba(7,16,26,.95); color: #d8e8ff;
  border: 1px solid #1a3650; border-radius: 10px;
}
.leaflet-popup-tip { background: #07101a; }

/* ── Responsivo logística ────────────────────────────────────── */
@media (max-width: 640px) {
  .log-overlay-left  { width: calc(100vw - 28px); top: 8px; left: 8px; }
  .log-overlay-right { display: none; }
  .log-overlay-bottom{ min-width: calc(100vw - 28px); }
}

/* ══════════════════════════════════════════════════════════════
   LION DATA CATALOG & LINEAGE DESIGN SYSTEM — v1.0
   Inspirado em: Amundsen (metadata search), DataHub (lineage),
   Unity Catalog (explorer). SVG puro, sem D3.js.
   Superior: dark nativo, grafo interativo CSS+SVG, mobile-first.
   ══════════════════════════════════════════════════════════════ */

/* ── Barra de busca de metadados (Amundsen-style) ────────────── */
.catalog-search-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 24px; background: linear-gradient(135deg, #07101a, #0c1928);
  border: 1px solid #1a3650; border-radius: 16px; margin-bottom: 16px;
}
.catalog-search-title {
  font-size: 18px; font-weight: 800; color: #e2eaf8;
  text-align: center;
}
.catalog-search-bar {
  display: flex; align-items: center; gap: 0; width: 100%; max-width: 600px;
  background: #050e17; border: 2px solid #1a3650; border-radius: 12px;
  overflow: hidden; transition: border-color .18s;
}
.catalog-search-bar:focus-within { border-color: var(--accent); }
.catalog-search-input {
  flex: 1; padding: 12px 16px; background: transparent; border: none;
  color: var(--ink); font-size: 14px; outline: none;
}
.catalog-search-input::placeholder { color: #3a5a78; }
.catalog-search-btn {
  padding: 10px 18px; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none; color: #2c1b07; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: filter .18s;
}
.catalog-search-btn:hover { filter: brightness(1.1); }
.catalog-search-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.catalog-quick-tag {
  font-size: 11px; padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid #1a3650;
  color: #4a6e88; cursor: pointer; transition: all .15s;
}
.catalog-quick-tag:hover { border-color: var(--accent); color: var(--accent); }

/* ── Card de Dataset/Tabela ──────────────────────────────────── */
.catalog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.catalog-card {
  background: #07101a; border: 1px solid #1a3650; border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
  cursor: pointer; transition: border-color .18s, transform .18s, box-shadow .18s;
  position: relative; overflow: hidden;
}
.catalog-card:hover {
  border-color: #2a5080; transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.catalog-card-header { display: flex; gap: 10px; align-items: flex-start; }
.catalog-icon {
  width: 36px; height: 36px; border-radius: 8px; background: #0c1928;
  border: 1px solid #1a3650; display: flex; align-items: center;
  justify-content: center; font-size: 16px; flex-shrink: 0;
}
.catalog-name { font-size: 14px; font-weight: 700; color: #e2eaf8; line-height: 1.3; }
.catalog-product { font-size: 11px; color: #3a5a78; margin-top: 2px; }
.catalog-desc { font-size: 12px; color: #4a6e88; line-height: 1.5; }
.catalog-meta {
  display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px;
  border-top: 1px solid #1a3650;
}
.catalog-meta-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #3a5a78; }
.catalog-freshness {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; padding: 2px 7px;
  border-radius: 999px; border: 1px solid;
}
.catalog-freshness.fresh  { background: rgba(5,150,105,.1);  color: #86efac; border-color: #059669; }
.catalog-freshness.stale  { background: rgba(217,119,6,.1);  color: #fcd34d; border-color: #d97706; }
.catalog-freshness.old    { background: rgba(185,28,28,.1);  color: #fca5a5; border-color: #b91c1c; }

/* ── Grafo de Lineage SVG ────────────────────────────────────── */
.lineage-wrap {
  background: #050e17; border: 1px solid #1a3650; border-radius: 12px;
  overflow: auto; position: relative;
}
.lineage-svg { display: block; min-width: 100%; }
/* Nós do grafo */
.lineage-node {
  cursor: pointer; transition: all .18s;
}
.lineage-node rect {
  fill: #09141e; stroke: #1a3650; stroke-width: 1.5;
  rx: 8; ry: 8;
  transition: stroke .18s, fill .18s;
}
.lineage-node:hover rect { fill: #0f1e30; stroke: #2a5080; }
.lineage-node.selected rect { fill: #0f2040; stroke: #2563eb; stroke-width: 2; }
.lineage-node.source rect  { stroke: #059669; }
.lineage-node.sink rect    { stroke: #b91c1c; }
.lineage-node text { fill: #d8e8ff; font-size: 11px;
  font-family: "Trebuchet MS","Segoe UI",sans-serif; pointer-events: none; }
.lineage-node .node-product { fill: #4a6e88; font-size: 9px; }
/* Arestas */
.lineage-edge { fill: none; stroke: #1a3650; stroke-width: 1.5;
  marker-end: url(#arrowhead); }
.lineage-edge:hover { stroke: #ffb347; stroke-width: 2; }
/* Legenda */
.lineage-legend {
  display: flex; gap: 12px; padding: 8px 14px; flex-wrap: wrap;
  border-top: 1px solid #1a3650; font-size: 11px; color: #4a6e88;
}
.lineage-legend-item { display: flex; align-items: center; gap: 5px; }
.lineage-legend-dot { width: 10px; height: 10px; border-radius: 2px; }

/* ── Painel de Schema de Tabela ──────────────────────────────── */
.schema-panel {
  background: #07101a; border: 1px solid #1a3650; border-radius: 12px; overflow: hidden;
}
.schema-col-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 8px;
  padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 12px; align-items: center;
}
.schema-col-row:last-child { border-bottom: none; }
.schema-col-row.header {
  background: #0c1928; color: #4a6e88; font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em;
}
.schema-col-name { color: #93c5fd; font-family: monospace; }
.schema-col-type { color: #c084fc; font-family: monospace; }
.schema-col-null { color: #4a6e88; }
.schema-col-pk   { background: rgba(251,191,36,.1); color: #fcd34d;
  border: 1px solid #d97706; border-radius: 4px; padding: 1px 5px; font-size: 10px; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   LION IAM & SOC DESIGN SYSTEM — v1.0
   Inspirado em: Keycloak (IAM login/tree), OpenIAM (access cards),
   Wazuh (SOC alerts MITRE ATT&CK). Sem dependências externas.
   Superior: dark nativo, tree view CSS puro, severity scale MITRE.
   ══════════════════════════════════════════════════════════════ */

/* ── Tree View de Permissões (CSS puro) ──────────────────────── */
.iam-tree { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.iam-tree ul { list-style: none; padding: 0 0 0 20px; margin: 0; }
.iam-tree-node { position: relative; }
.iam-tree-node::before {
  content: ''; position: absolute; left: -14px; top: 14px;
  width: 10px; height: 0; border-top: 1px dashed #1a3650;
}
.iam-tree ul::before {
  content: ''; position: absolute; left: 6px; top: 0; bottom: 12px;
  width: 0; border-left: 1px dashed #1a3650;
}
.iam-tree ul { position: relative; }
.iam-tree-item {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  border-radius: 6px; cursor: pointer; transition: background .15s;
  user-select: none;
}
.iam-tree-item:hover { background: rgba(255,255,255,.04); }
.iam-tree-item.selected { background: rgba(37,99,235,.1); }
.iam-tree-toggle {
  width: 14px; height: 14px; flex-shrink: 0;
  background: #0c1928; border: 1px solid #1a3650; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: #4a6e88;
  transition: background .15s, color .15s;
}
.iam-tree-item:hover .iam-tree-toggle { background: #1a3650; color: #d8e8ff; }
.iam-tree-icon { font-size: 14px; flex-shrink: 0; }
.iam-tree-label { flex: 1; color: #d8e8ff; font-size: 13px; }
.iam-tree-badge {
  font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: rgba(255,255,255,.06); color: #4a6e88; flex-shrink: 0;
}
/* Role badges */
.iam-role-admin   { background: rgba(251,146,60,.1);  color: #fb923c; border: 1px solid #c2410c; }
.iam-role-gerente { background: rgba(192,132,252,.1); color: #c084fc; border: 1px solid #7c3aed; }
.iam-role-viewer  { background: rgba(147,197,253,.1); color: #93c5fd; border: 1px solid #2563eb; }
.iam-role-custom  { background: rgba(253,211,77,.1);  color: #fcd34d; border: 1px solid #d97706; }

/* ── Card de Solicitação de Acesso (Aprovar/Negar) ────────────── */
.iam-access-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}
.iam-access-card {
  background: #07101a; border: 1px solid #1a3650; border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.iam-access-header { display: flex; gap: 10px; align-items: center; }
.iam-access-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: #0c1928;
  border: 1px solid #1a3650; display: flex; align-items: center;
  justify-content: center; font-size: 14px; font-weight: 900;
  color: #60a5fa; flex-shrink: 0; text-transform: uppercase;
}
.iam-access-name  { font-size: 14px; font-weight: 700; color: #e2eaf8; }
.iam-access-email { font-size: 11px; color: #4a6e88; }
.iam-access-request-detail {
  background: #050e17; border: 1px solid #1a3650; border-radius: 8px;
  padding: 10px 12px; font-size: 12px; color: #8ab0c6;
  line-height: 1.5;
}
.iam-access-actions { display: flex; gap: 8px; }
.iam-btn-approve {
  flex: 1; padding: 7px; border-radius: 8px; border: 1px solid #059669;
  background: rgba(5,150,105,.1); color: #86efac; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.iam-btn-approve:hover { background: rgba(5,150,105,.2); }
.iam-btn-deny {
  flex: 1; padding: 7px; border-radius: 8px; border: 1px solid #b91c1c;
  background: rgba(185,28,28,.1); color: #fca5a5; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.iam-btn-deny:hover { background: rgba(185,28,28,.2); }

/* ── SOC Alert Cards (Wazuh/MITRE ATT&CK style) ─────────────── */
.soc-alert-list { display: flex; flex-direction: column; gap: 6px; }
.soc-alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 14px; border-radius: 10px; border: 1px solid;
  transition: background .15s;
}
.soc-alert:hover { filter: brightness(1.05); }
.soc-alert.critical { background: #12050a; border-color: #7f1d1d; }
.soc-alert.high     { background: #130e00; border-color: #78350f; }
.soc-alert.medium   { background: #05100a; border-color: #14532d; }
.soc-alert.low      { background: #060a12; border-color: #1e3a8a; }
.soc-alert.info     { background: #07101a; border-color: #1a3650; }
.soc-severity {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
}
.soc-alert.critical .soc-severity { background: #ef4444; animation: budget-pulse 1s ease infinite; }
.soc-alert.high     .soc-severity { background: #f97316; }
.soc-alert.medium   .soc-severity { background: #22c55e; }
.soc-alert.low      .soc-severity { background: #3b82f6; }
.soc-alert.info     .soc-severity { background: #94a3b8; }
.soc-body { flex: 1; min-width: 0; }
.soc-title { font-size: 13px; font-weight: 700; line-height: 1.3; margin-bottom: 2px; }
.soc-alert.critical .soc-title { color: #fca5a5; }
.soc-alert.high     .soc-title { color: #fcd34d; }
.soc-alert.medium   .soc-title { color: #86efac; }
.soc-alert.low      .soc-title { color: #93c5fd; }
.soc-alert.info     .soc-title { color: #d8e8ff; }
.soc-desc { font-size: 12px; color: #4a6e88; line-height: 1.4; }
.soc-meta { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.soc-mitre {
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 4px;
  background: rgba(192,132,252,.1); color: #c084fc; border: 1px solid #7c3aed;
  font-family: monospace;
}
.soc-ip { font-size: 10px; color: #3a5a78; font-family: monospace; }
.soc-time { font-size: 11px; color: #3a5a78; white-space: nowrap; flex-shrink: 0; margin-top: 2px; }

/* ── Severity distribution bar ───────────────────────────────── */
.soc-severity-bar {
  display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 1px;
}
.soc-severity-segment {
  height: 100%; transition: width .6s ease; min-width: 2px;
}
.soc-severity-segment.critical { background: #ef4444; }
.soc-severity-segment.high     { background: #f97316; }
.soc-severity-segment.medium   { background: #22c55e; }
.soc-severity-segment.low      { background: #3b82f6; }

/* ── IAM User Status Badge ───────────────────────────────────── */
.iam-user-status {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px;
  font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid;
}
.iam-user-status.ativo   { background: rgba(5,150,105,.1);  color: #86efac; border-color: #059669; }
.iam-user-status.suspenso{ background: rgba(185,28,28,.1);  color: #fca5a5; border-color: #b91c1c; }
.iam-user-status.pendente{ background: rgba(217,119,6,.1);  color: #fcd34d; border-color: #d97706; }
.iam-user-status.bloqueado{ background: rgba(107,114,128,.1); color: #9ca3af; border-color: #6b7280; }

/* ── Responsivo Catalog/IAM ──────────────────────────────────── */
@media (max-width: 760px) {
  .catalog-grid      { grid-template-columns: 1fr; }
  .iam-access-grid   { grid-template-columns: 1fr; }
  .schema-col-row    { grid-template-columns: 2fr 1fr; }
  .schema-col-row > :nth-child(3),
  .schema-col-row > :nth-child(4) { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   LION OKR, BI & PREDIÇÃO — v1.0
   Inspirado em: APITable (traffic lights), Metabase (BI cards),
   Apache Superset (gauge), Streamlit (prediction lines).
   Superior: sem libs externas, SVG puro, dark nativo, WCAG 2.1.
   ══════════════════════════════════════════════════════════════ */

/* ── OKR Traffic Light (🟢🟡🔴 Faróis de Status) ─────────────── */
.okr-board { display: flex; flex-direction: column; gap: 12px; }
.okr-objetivo {
  background: #07101a; border: 1px solid #1a3650; border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.okr-obj-header {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.okr-traffic-light {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.3);
}
.okr-traffic-light.verde     { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.6); }
.okr-traffic-light.amarelo   { background: #eab308; box-shadow: 0 0 6px rgba(234,179,8,.6); }
.okr-traffic-light.vermelho  { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,.6);
  animation: budget-pulse 1.5s ease infinite; }
.okr-traffic-light.cinza     { background: #4a5568; }
.okr-obj-titulo { font-size: 14px; font-weight: 700; color: #e2eaf8; flex: 1; }
.okr-obj-owner  { font-size: 11px; color: #3a5a78; }
.okr-obj-prazo  { font-size: 11px; color: #3a5a78; }
/* Barra de progresso do OKR */
.okr-progress-wrap { display: flex; align-items: center; gap: 8px; }
.okr-progress-track {
  flex: 1; height: 8px; background: #112030; border-radius: 4px; overflow: hidden;
}
.okr-progress-fill {
  height: 100%; border-radius: 4px; transition: width .6s ease;
}
.okr-progress-fill.verde    { background: linear-gradient(90deg, #16a34a, #22c55e); }
.okr-progress-fill.amarelo  { background: linear-gradient(90deg, #ca8a04, #eab308); }
.okr-progress-fill.vermelho { background: linear-gradient(90deg, #b91c1c, #ef4444); }
.okr-progress-pct { font-size: 12px; font-weight: 700; width: 36px; text-align: right; }
.okr-progress-pct.verde   { color: #86efac; }
.okr-progress-pct.amarelo { color: #fcd34d; }
.okr-progress-pct.vermelho{ color: #fca5a5; }
/* Key Results */
.okr-kr-list { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.okr-kr-item {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: #8ab0c6;
}
.okr-kr-light { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.okr-kr-light.verde   { background: #22c55e; }
.okr-kr-light.amarelo { background: #eab308; }
.okr-kr-light.vermelho{ background: #ef4444; }

/* ── BI Card (Metabase-inspired) ──────────────────────────────── */
.bi-card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.bi-card {
  background: #07101a; border: 1px solid #1a3650; border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 8px;
  position: relative; overflow: hidden; transition: transform .18s, box-shadow .18s;
}
.bi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.bi-card-label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: #4a6e88; font-weight: 700; }
.bi-card-value { font-size: 30px; font-weight: 900; color: #e2eaf8; line-height: 1;
  font-variant-numeric: tabular-nums; }
.bi-card-value.accent  { color: var(--accent); }
.bi-card-value.ok      { color: #86efac; }
.bi-card-value.warn    { color: #fcd34d; }
.bi-card-value.danger  { color: #fca5a5; }
.bi-card-subtitle { font-size: 12px; color: #4a6e88; line-height: 1.5; }
.bi-card-delta {
  display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
}
.bi-card-delta.up   { color: #86efac; }
.bi-card-delta.down { color: #fca5a5; }
/* Linha SVG sparkline inline */
.bi-sparkline { margin-top: 6px; }
.bi-sparkline svg { display: block; }
.bi-sparkline path.actual    { fill: none; stroke: var(--accent); stroke-width: 2; }
.bi-sparkline path.predicted { fill: none; stroke: #2563eb; stroke-width: 1.5;
  stroke-dasharray: 4,3; } /* linha pontilhada = previsão */
.bi-sparkline .sparkline-dot { fill: var(--accent); r: 3; }

/* ── Gauge SVG Circular (velocímetro) ────────────────────────── */
.gauge-outer {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.gauge-outer svg { overflow: visible; }
.gauge-bg   { fill: none; stroke: #112030; stroke-width: 8; }
.gauge-fill {
  fill: none; stroke-width: 8; stroke-linecap: round;
  transition: stroke-dashoffset .8s ease, stroke .4s ease;
  transform-origin: center;
  transform: rotate(-90deg) scaleX(-1);
}
.gauge-fill.ok     { stroke: #22c55e; }
.gauge-fill.warn   { stroke: #eab308; }
.gauge-fill.bad    { stroke: #ef4444; }
.gauge-text { font-size: 18px; font-weight: 900; fill: #e2eaf8;
  font-family: "Trebuchet MS","Segoe UI",sans-serif; text-anchor: middle; }
.gauge-sub  { font-size: 10px; fill: #4a6e88;
  font-family: "Trebuchet MS","Segoe UI",sans-serif; text-anchor: middle; }
.gauge-label-ext { font-size: 12px; color: #4a6e88; text-align: center; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   LION CONFIGURAÇÕES — Vertical Tabs, Toggles, Payload Viewer
   Inspirado em: Bootstrap v5 (vertical tabs), Tailwind (toggles),
   Svix (payload viewer). Superior: dark nativo, acessível.
   ══════════════════════════════════════════════════════════════ */

/* ── Vertical Tabs (ajustes/configurações) ───────────────────── */
.vtabs-layout {
  display: grid; grid-template-columns: 200px 1fr; gap: 16px;
  align-items: start;
}
.vtabs-sidebar {
  background: #07101a; border: 1px solid #1a3650; border-radius: 12px;
  overflow: hidden; position: sticky; top: 16px;
}
.vtab-btn {
  width: 100%; background: none; border: none; padding: 11px 14px;
  text-align: left; font-size: 13px; color: #8ab0c6; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.vtab-btn:hover { background: rgba(255,255,255,.03); color: #d8e8ff; }
.vtab-btn.active {
  background: rgba(37,99,235,.08); color: #93c5fd;
  border-left-color: #2563eb; font-weight: 700;
}
.vtab-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.vtabs-content .vtab-pane { display: none; }
.vtabs-content .vtab-pane.active { display: block; }

/* ── Toggle Switch ───────────────────────────────────────────── */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-info { flex: 1; min-width: 0; }
.toggle-label { font-size: 13px; color: #d8e8ff; font-weight: 600; }
.toggle-desc  { font-size: 11px; color: #4a6e88; margin-top: 2px; }
.toggle-switch { position: relative; flex-shrink: 0; }
.toggle-switch input[type="checkbox"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.toggle-track {
  display: block; width: 40px; height: 22px; border-radius: 11px;
  background: #1a3650; cursor: pointer;
  transition: background .2s ease; position: relative;
}
.toggle-track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #4a6e88; transition: left .2s ease, background .2s ease;
}
.toggle-switch input:checked ~ .toggle-track { background: #2563eb; }
.toggle-switch input:checked ~ .toggle-track::after { left: 21px; background: #fff; }
.toggle-switch input:focus-visible ~ .toggle-track {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
}

/* ── Payload Viewer (Svix-style) ─────────────────────────────── */
.payload-viewer {
  background: #030810; border: 1px solid #1a3650; border-radius: 10px;
  overflow: hidden; font-family: 'Cascadia Code','Fira Code','Courier New',monospace;
}
.payload-viewer-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; background: #050e17; border-bottom: 1px solid #1a3650;
  font-size: 11px; color: #4a6e88;
}
.payload-copy-btn {
  background: none; border: 1px solid #1a3650; border-radius: 4px;
  color: #4a6e88; padding: 2px 8px; font-size: 10px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.payload-copy-btn:hover { border-color: var(--accent); color: var(--accent); }
.payload-code {
  padding: 12px 14px; overflow-x: auto; font-size: 12px; line-height: 1.6;
  max-height: 360px; overflow-y: auto; color: #8bd3a0; white-space: pre;
}
/* JSON syntax highlighting simples */
.json-key    { color: #93c5fd; }
.json-str    { color: #86efac; }
.json-num    { color: #fcd34d; }
.json-bool   { color: #c084fc; }
.json-null   { color: #6b7280; }

/* ══════════════════════════════════════════════════════════════
   LION TOUR — Sistema de Tour Guiado (Intro.js/Driver.js inspired)
   100% original, sem dependências externas. CSS + JS em portal-utils.js
   ══════════════════════════════════════════════════════════════ */

.lion-tour-backdrop {
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none;
}
/* Destaque do elemento-alvo */
.lion-tour-highlight {
  position: absolute; border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.7);
  z-index: 9998; pointer-events: none;
  transition: all .3s ease;
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
/* Tooltip do tour */
.lion-tour-tooltip {
  position: absolute; z-index: 9999;
  background: #0c1920; border: 1px solid var(--accent);
  border-radius: 12px; padding: 16px 18px; max-width: 320px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  animation: slideUp .2s ease;
  pointer-events: auto;
}
.lion-tour-step-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); font-weight: 700; margin-bottom: 6px;
}
.lion-tour-title {
  font-size: 14px; font-weight: 800; color: #e2eaf8; margin-bottom: 6px;
}
.lion-tour-body {
  font-size: 12px; color: #8ab0c6; line-height: 1.6; margin-bottom: 12px;
}
.lion-tour-actions {
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
}
.lion-tour-skip {
  font-size: 11px; color: #3a5a78; cursor: pointer; background: none; border: none;
  padding: 0; transition: color .15s;
}
.lion-tour-skip:hover { color: #fca5a5; }
.lion-tour-prev, .lion-tour-next {
  padding: 6px 14px; border-radius: 7px; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: filter .15s;
}
.lion-tour-prev {
  background: #0c1928; border: 1px solid #1a3650; color: #8ab0c6;
}
.lion-tour-next {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none; color: #2c1b07;
}
.lion-tour-next:hover, .lion-tour-prev:hover { filter: brightness(1.1); }
.lion-tour-dots {
  display: flex; gap: 4px; align-items: center; flex: 1;
}
.lion-tour-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #1a3650;
  transition: background .2s, transform .2s;
}
.lion-tour-dot.active { background: var(--accent); transform: scale(1.3); }

/* ══════════════════════════════════════════════════════════════
   LION ANTI-FRAUD / SOC AVANÇADO — v1.0
   Inspirado em: CrowdSec (threat blocks), Wazuh (SOC dashboard),
   Novu (alert flows), SignOz (observability).
   Superior: dark nativo, severity scale, MITRE ATT&CK, IP display.
   ══════════════════════════════════════════════════════════════ */

/* ── Threat Level Indicator ──────────────────────────────────── */
.threat-level-bar {
  display: flex; gap: 3px; height: 12px; border-radius: 6px; overflow: hidden;
  background: #112030;
}
.threat-segment {
  height: 100%; transition: flex .6s ease;
}
.threat-segment.none     { background: #1e3a8a; }
.threat-segment.low      { background: #2563eb; }
.threat-segment.moderate { background: #d97706; }
.threat-segment.high     { background: #dc2626; }
.threat-segment.critical {
  background: #7f1d1d;
  animation: budget-pulse 1s ease infinite;
}

/* ── IP Block/Allowlist card ─────────────────────────────────── */
.threat-ip-list { display: flex; flex-direction: column; gap: 4px; }
.threat-ip-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px; border: 1px solid;
  font-family: monospace; font-size: 12px;
}
.threat-ip-item.blocked  { background: rgba(185,28,28,.07); border-color: #b91c1c; color: #fca5a5; }
.threat-ip-item.allowed  { background: rgba(5,150,105,.07); border-color: #059669; color: #86efac; }
.threat-ip-item.suspect  { background: rgba(217,119,6,.07); border-color: #d97706; color: #fcd34d; }
.threat-ip-country { font-size: 10px; color: #4a6e88; margin-left: auto; }
.threat-ip-count   { font-size: 10px; font-weight: 700; }
.threat-ip-action {
  background: none; border: none; cursor: pointer;
  font-size: 14px; padding: 0 4px; transition: transform .15s;
}
.threat-ip-action:hover { transform: scale(1.2); }

/* ── Rate Limit Gauge ────────────────────────────────────────── */
.rate-gauge {
  background: #07101a; border: 1px solid #1a3650; border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
}
.rate-gauge-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: #4a6e88; font-weight: 700; display: flex; justify-content: space-between; }
.rate-gauge-track { height: 6px; background: #112030; border-radius: 3px; overflow: hidden; }
.rate-gauge-fill {
  height: 100%; border-radius: 3px; transition: width .4s ease;
}
.rate-gauge-fill.safe   { background: linear-gradient(90deg, #059669, #22c55e); }
.rate-gauge-fill.warn   { background: linear-gradient(90deg, #b45309, #fbbf24); }
.rate-gauge-fill.danger { background: linear-gradient(90deg, #b91c1c, #ef4444);
  animation: budget-pulse 1.2s ease infinite; }

/* ── Alert Flow (Novu-inspired) ──────────────────────────────── */
.alert-flow {
  display: flex; flex-direction: column; gap: 0; position: relative;
  padding-left: 24px;
}
.alert-flow::before {
  content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px;
  width: 2px; background: linear-gradient(180deg, #2563eb, #7c3aed, #b91c1c);
  border-radius: 1px;
}
.alert-flow-step {
  display: flex; gap: 12px; padding: 8px 0;
  position: relative;
}
.alert-flow-dot {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid; display: flex; align-items: center; justify-content: center;
  position: absolute; left: -24px; top: 8px; font-size: 9px;
}
.alert-flow-step.trigger  .alert-flow-dot { background: #1e3a8a; border-color: #2563eb; color: #60a5fa; }
.alert-flow-step.process  .alert-flow-dot { background: #3b0764; border-color: #7c3aed; color: #c084fc; }
.alert-flow-step.notify   .alert-flow-dot { background: #78350f; border-color: #d97706; color: #fbbf24; }
.alert-flow-step.block    .alert-flow-dot { background: #450a0a; border-color: #b91c1c; color: #fca5a5; }
.alert-flow-body { flex: 1; }
.alert-flow-title { font-size: 12px; font-weight: 700; color: #d8e8ff; margin-bottom: 2px; }
.alert-flow-desc  { font-size: 11px; color: #4a6e88; line-height: 1.4; }

/* ── Webhook Event Card ──────────────────────────────────────── */
.webhook-card {
  background: #07101a; border: 1px solid #1a3650; border-radius: 10px;
  overflow: hidden; margin-bottom: 8px; cursor: pointer;
  transition: border-color .15s;
}
.webhook-card:hover { border-color: #2a5080; }
.webhook-card-header {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
}
.webhook-method {
  font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 4px;
  font-family: monospace; flex-shrink: 0;
}
.webhook-method.POST   { background: rgba(37,99,235,.15); color: #60a5fa; border: 1px solid #2563eb; }
.webhook-method.GET    { background: rgba(5,150,105,.15);  color: #86efac; border: 1px solid #059669; }
.webhook-method.DELETE { background: rgba(185,28,28,.15);  color: #fca5a5; border: 1px solid #b91c1c; }
.webhook-path { flex: 1; font-family: monospace; font-size: 12px; color: #8ab0c6; }
.webhook-status {
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.webhook-status.s200 { background: rgba(5,150,105,.1); color: #86efac; }
.webhook-status.s400 { background: rgba(217,119,6,.1);  color: #fcd34d; }
.webhook-status.s500 { background: rgba(185,28,28,.1);  color: #fca5a5; }
.webhook-time { font-size: 11px; color: #3a5a78; flex-shrink: 0; }
.webhook-card-body { display: none; border-top: 1px solid #1a3650; }
.webhook-card.open .webhook-card-body { display: block; }

/* ── Responsivo OKR/Gauge/Config ─────────────────────────────── */
@media (max-width: 640px) {
  .vtabs-layout { grid-template-columns: 1fr; }
  .vtabs-sidebar { position: static; }
  .bi-card-grid  { grid-template-columns: 1fr; }
  .lion-tour-tooltip { max-width: calc(100vw - 32px); }
}

/* ══════════════════════════════════════════════════════════════
   LION MONETIZAÇÃO / CHECKOUT / PAY-PER-USE — v1.0
   Parte 6: Checkout Split Layout, Metered Billing, Credit Tracker.
   Inspirado em: Stripe Pricing Table (split), Lago (metered billing),
   OpenMeter (tracker bars), Tremor UI (progress charts).
   Superior: dark nativo, sem libs externas, WCAG 2.1.
   ══════════════════════════════════════════════════════════════ */

/* ── Checkout Split Layout (inputs esq, resumo dir) ──────────── */
.checkout-split {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
  align-items: start;
}
.checkout-form-panel {
  background: #07101a; border: 1px solid #1a3650; border-radius: 14px;
  padding: 20px;
}
.checkout-summary-panel {
  background: #050e17; border: 2px solid #1a3650; border-radius: 14px;
  padding: 20px; position: sticky; top: 16px;
}
.checkout-summary-panel.highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(255,179,71,.15);
}
.checkout-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: #4a6e88; font-weight: 700; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.checkout-section-title::after { content: ''; flex: 1; height: 1px; background: #1a3650; }
.checkout-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 13px;
}
.checkout-line:last-child { border-bottom: none; }
.checkout-line-label { color: #8ab0c6; }
.checkout-line-value { font-weight: 700; color: #e2eaf8; font-variant-numeric: tabular-nums; }
.checkout-line.subtotal .checkout-line-value { color: #93c5fd; }
.checkout-line.discount .checkout-line-value { color: #86efac; }
.checkout-line.discount .checkout-line-label::before { content: '- '; }
.checkout-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 0 8px; border-top: 2px solid var(--accent); margin-top: 8px;
}
.checkout-total-label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.checkout-total-val { font-size: 28px; font-weight: 900; color: var(--accent);
  font-variant-numeric: tabular-nums; }
.checkout-credit-included {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: rgba(37,99,235,.08); border: 1px solid #2563eb; border-radius: 8px;
  font-size: 12px; color: #93c5fd; margin-top: 10px;
}

/* ── Credit Tracker Bar (OpenMeter / GitHub Copilot style) ──── */
.credit-tracker {
  background: #050e17; border: 1px solid #1a3650; border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.credit-tracker-header {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px;
}
.ct-label  { font-size: 12px; color: #4a6e88; font-weight: 600; }
.ct-values { font-size: 11px; color: #3a5a78; font-variant-numeric: tabular-nums; }
.ct-values strong { color: #e2eaf8; font-weight: 700; }
.credit-tracker-bar {
  height: 10px; background: #112030; border-radius: 5px; overflow: hidden; position: relative;
}
.credit-tracker-fill {
  height: 100%; border-radius: 5px; transition: width .7s ease;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  position: relative;
}
.credit-tracker-fill::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0;
  width: 4px; background: rgba(255,255,255,.3); border-radius: 2px;
}
/* Quota thresholds */
.credit-tracker-fill.safe   { background: linear-gradient(90deg, #059669, #22c55e); }
.credit-tracker-fill.warn   { background: linear-gradient(90deg, #d97706, #fbbf24); }
.credit-tracker-fill.danger { background: linear-gradient(90deg, #b91c1c, #ef4444);
  animation: budget-pulse 1.2s ease infinite; }
.credit-tracker-fill.exceeded { background: linear-gradient(90deg, #7f1d1d, #ef4444 50%, #7f1d1d); }
.ct-pct { font-size: 11px; font-weight: 700; text-align: right; }
.ct-pct.safe   { color: #86efac; }
.ct-pct.warn   { color: #fcd34d; }
.ct-pct.danger { color: #fca5a5; }
/* Quota marker */
.credit-tracker-bar::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: var(--quota-pct, 80%); width: 2px;
  background: rgba(255,255,255,.25); z-index: 1;
}

/* ── Metered Billing Card (Lago/OpenMeter inspired) ─────────── */
.meter-card {
  background: #07101a; border: 1px solid #1a3650; border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
  position: relative; overflow: hidden;
}
.meter-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--meter-color, #2563eb); border-radius: 12px 12px 0 0;
}
.meter-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.meter-card-icon { font-size: 22px; }
.meter-card-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: #4a6e88; font-weight: 700; margin-bottom: 4px; }
.meter-card-used { font-size: 26px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--meter-color, #60a5fa); }
.meter-card-quota { font-size: 11px; color: #3a5a78; margin-top: 2px; }
.meter-card-bar {
  height: 4px; background: #112030; border-radius: 2px; overflow: hidden; margin-top: 4px;
}
.meter-card-fill {
  height: 100%; border-radius: 2px; transition: width .5s ease;
  background: var(--meter-color, #2563eb);
}
.meter-card-period { font-size: 10px; color: #3a5a78; text-align: right; }

/* ── Range Slider Custom (Tremor-inspired) ──────────────────── */
.range-slider-wrap { display: flex; flex-direction: column; gap: 4px; }
.range-slider-labels { display: flex; justify-content: space-between;
  font-size: 11px; color: #3a5a78; }
.range-slider-val {
  font-size: 22px; font-weight: 900; color: var(--accent);
  font-variant-numeric: tabular-nums; text-align: center; margin: 4px 0;
}
input[type="range"].lion-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; background: #112030; border-radius: 3px;
  outline: none; cursor: pointer;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: var(--range-fill, 50%) 100%;
  background-repeat: no-repeat;
}
input[type="range"].lion-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 3px solid #07101a;
  box-shadow: 0 0 0 2px var(--accent), 0 0 8px rgba(255,179,71,.3);
  cursor: pointer; transition: transform .15s, box-shadow .15s;
}
input[type="range"].lion-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 3px rgba(255,179,71,.3), 0 0 12px rgba(255,179,71,.2);
}
input[type="range"].lion-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 3px solid #07101a;
  cursor: pointer; box-shadow: 0 0 0 2px var(--accent);
}

/* ── Invoice row ─────────────────────────────────────────────── */
.billing-invoice {
  background: #07101a; border: 1px solid #1a3650; border-radius: 10px; overflow: hidden;
}
.billing-invoice-header {
  padding: 9px 14px; background: #0b1825; border-bottom: 1px solid #1a3650;
  font-size: 11px; color: #4a6e88; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  display: grid; grid-template-columns: 1fr 1fr 80px 80px 90px;
}
.billing-invoice-row {
  display: grid; grid-template-columns: 1fr 1fr 80px 80px 90px;
  padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,.03);
  font-size: 13px; align-items: center; transition: background .15s;
}
.billing-invoice-row:last-child { border-bottom: none; }
.billing-invoice-row:hover { background: rgba(255,255,255,.02); }
.billing-invoice-row .product { color: #d8e8ff; font-weight: 600; }
.billing-invoice-row .operation { color: #8ab0c6; font-size: 12px; font-family: monospace; }
.billing-invoice-row .qty { color: #e2eaf8; text-align: right; font-variant-numeric: tabular-nums; }
.billing-invoice-row .unit-cost { color: #4a6e88; text-align: right; font-variant-numeric: tabular-nums; }
.billing-invoice-row .total-cost {
  text-align: right; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.billing-invoice-footer {
  display: flex; justify-content: flex-end; align-items: center; gap: 16px;
  padding: 10px 14px; background: #0b1825; border-top: 2px solid #1a3650;
  font-size: 13px;
}
.billing-invoice-total { font-size: 20px; font-weight: 900; color: var(--accent); }

/* ── Enterprise Plan Badge ───────────────────────────────────── */
.enterprise-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, rgba(255,179,71,.12), rgba(247,127,0,.08));
  border: 1px solid rgba(255,179,71,.4); border-radius: 999px;
  padding: 4px 14px; font-size: 11px; font-weight: 800;
  color: var(--accent); letter-spacing: .04em;
  text-transform: uppercase;
}
.enterprise-badge::before { content: '🦁'; font-size: 13px; }

/* ── API Key Box (developer) ─────────────────────────────────── */
.dev-key-box {
  display: flex; align-items: center; gap: 8px;
  background: #030810; border: 1px solid #1a3650; border-radius: 10px;
  padding: 12px 14px; font-family: 'Cascadia Code','Fira Code',monospace;
}
.dev-key-box input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #86efac; font-size: 13px; font-family: inherit;
}
.dev-key-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
  text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
}
.dev-key-badge.live { background: rgba(5,150,105,.1); color: #86efac; border: 1px solid #059669; }
.dev-key-badge.test { background: rgba(217,119,6,.1);  color: #fcd34d; border: 1px solid #d97706; }

/* ── Code Snippet (developer) ────────────────────────────────── */
.code-snippet-tabs { display: flex; gap: 4px; margin-bottom: 0; }
.code-snippet-tab {
  background: #050e17; border: 1px solid #1a3650; border-bottom: none;
  border-radius: 6px 6px 0 0; padding: 5px 14px; font-size: 11px;
  font-weight: 700; color: #4a6e88; cursor: pointer; transition: all .15s;
}
.code-snippet-tab.active { background: #030810; color: #93c5fd; border-color: #2563eb; }
.code-snippet-body {
  background: #030810; border: 1px solid #1a3650; border-radius: 0 6px 6px 6px;
  overflow: auto; position: relative;
}
.code-snippet-pre {
  padding: 14px 16px; font-family: 'Cascadia Code','Fira Code','Courier New',monospace;
  font-size: 12px; color: #8bd3a0; white-space: pre; line-height: 1.6;
  margin: 0; min-height: 80px;
}
.code-snippet-copy {
  position: absolute; top: 8px; right: 8px;
  background: rgba(7,16,26,.9); border: 1px solid #1a3650;
  color: #4a6e88; border-radius: 5px; padding: 3px 9px;
  font-size: 10px; font-weight: 700; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.code-snippet-copy:hover { border-color: var(--accent); color: var(--accent); }

/* ── Responsivo Checkout/Billing ─────────────────────────────── */
@media (max-width: 768px) {
  .checkout-split { grid-template-columns: 1fr; }
  .checkout-summary-panel { position: static; }
  .billing-invoice-header,
  .billing-invoice-row { grid-template-columns: 1fr 80px 90px; }
  .billing-invoice-header > :nth-child(2),
  .billing-invoice-row   > :nth-child(2),
  .billing-invoice-header > :nth-child(3),
  .billing-invoice-row   > :nth-child(3) { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   LION SEMAPHORE STANDARD — Componentes de status canônicos v1.0
   Paleta: #22CC66 (verde) · #FFCC00 (amarelo) · #DD3333 (vermelho)
   Usados em tenant lifecycle, OKRs, alertas e KPIs de negócio.
   ══════════════════════════════════════════════════════════════ */

/* ── Bolinha de Status (semáforo canônico) ───────────────────── */
.lion-status-dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
  flex-shrink: 0; border: 1px solid rgba(0,0,0,.2);
}
.lion-status-dot.verde    { background: var(--sem-verde,   #22CC66); box-shadow: 0 0 6px rgba(34,204,102,.5); }
.lion-status-dot.amarelo  { background: var(--sem-amarelo, #FFCC00); box-shadow: 0 0 6px rgba(255,204,0,.4); }
.lion-status-dot.vermelho { background: var(--sem-vermelho,#DD3333); box-shadow: 0 0 6px rgba(221,51,51,.5); animation: budget-pulse 1.5s ease infinite; }
.lion-status-dot.cinza    { background: var(--sem-cinza,   #6B7280); }
.lion-status-dot.azul     { background: var(--sem-azul,    #3B82F6); box-shadow: 0 0 6px rgba(59,130,246,.4); }

/* ── Pill de status de negócio (lifecycle) ───────────────────── */
.lion-lifecycle-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; padding: 3px 10px;
  border-radius: 999px; border: 1px solid; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .04em;
}
.lion-lifecycle-pill.ativo    { background: rgba(34,204,102,.1);  color: #22CC66; border-color: #22CC66; }
.lion-lifecycle-pill.trial    { background: rgba(255,204,0,.1);   color: #FFCC00; border-color: #FFCC00; }
.lion-lifecycle-pill.inadimp  { background: rgba(255,140,0,.12);  color: #FF8C00; border-color: #FF8C00; }
.lion-lifecycle-pill.fraude   { background: rgba(221,51,51,.12);  color: #DD3333; border-color: #DD3333; animation: budget-pulse 2s ease infinite; }
.lion-lifecycle-pill.suspenso { background: rgba(107,114,128,.1); color: #9CA3AF; border-color: #6B7280; }
.lion-lifecycle-pill.cancelado{ background: rgba(221,51,51,.1);   color: #DD3333; border-color: #DD3333; }

/* ── Botão de Pânico (ações destrutivas) ─────────────────────── */
.btn-panic {
  background: var(--sem-vermelho, #DD3333); color: #fff;
  border: 2px solid #FF4444; border-radius: 8px;
  padding: 8px 16px; font-size: 13px; font-weight: 800;
  cursor: pointer; transition: filter .18s, transform .15s;
  text-transform: uppercase; letter-spacing: .05em;
}
.btn-panic:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn-panic:active { transform: translateY(0); }
.btn-panic:disabled { opacity: .5; cursor: not-allowed; transform: none; filter: none; }

/* ── KPI Number gigante (B.I. executivo) ─────────────────────── */
.kpi-giant { font-size: 48px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--accent); }
.kpi-giant.verde    { color: var(--sem-verde,   #22CC66); }
.kpi-giant.amarelo  { color: var(--sem-amarelo, #FFCC00); }
.kpi-giant.vermelho { color: var(--sem-vermelho,#DD3333); }
.kpi-giant.azul     { color: var(--sem-azul,    #3B82F6); }

/* ══════════════════════════════════════════════════════════════
   LION OBSERVABILITY — Log Console, Latency, SSE Alerts v1.0
   Inspirado em: SignOz (log console dark), Datadog (latency).
   Superior: dark nativo, monospace, real-time SSE indicator.
   ══════════════════════════════════════════════════════════════ */

/* ── Log Console (SignOz-style terminal dark) ────────────────── */
.obs-console {
  background: #010a10; border: 1px solid #1a3650; border-radius: 10px;
  overflow: hidden; font-family: 'Cascadia Code','Fira Code','Courier New',monospace;
}
.obs-console-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: #040e18; border-bottom: 1px solid #1a3650; flex-wrap: wrap;
}
.obs-console-title { font-size: 11px; color: #4a6e88; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.obs-live-badge {
  display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700;
  color: var(--sem-verde, #22CC66); background: rgba(34,204,102,.1); border: 1px solid #22CC66;
  border-radius: 999px; padding: 2px 8px;
}
.obs-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #22CC66; animation: budget-pulse 1s ease infinite; }
.obs-console-body {
  height: 350px; overflow-y: auto; padding: 8px 12px;
  display: flex; flex-direction: column; gap: 1px;
}
.obs-console-body::-webkit-scrollbar { width: 6px; }
.obs-console-body::-webkit-scrollbar-thumb { background: #1a3650; border-radius: 3px; }
.obs-log-row {
  display: grid; grid-template-columns: 140px 55px 80px 1fr;
  gap: 8px; padding: 3px 0; font-size: 12px; line-height: 1.5;
  border-bottom: 1px solid rgba(255,255,255,.025); align-items: start;
}
.obs-log-row:hover { background: rgba(255,255,255,.02); }
.obs-log-ts    { color: #3a5a78; font-size: 11px; white-space: nowrap; }
.obs-log-method {
  font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 3px; text-align: center;
  font-family: monospace; white-space: nowrap;
}
.obs-log-method.GET    { background: rgba(34,204,102,.15); color: #22CC66; }
.obs-log-method.POST   { background: rgba(59,130,246,.15); color: #60a5fa; }
.obs-log-method.DELETE { background: rgba(221,51,51,.15);  color: #DD3333; }
.obs-log-method.PATCH  { background: rgba(255,204,0,.15);  color: #FFCC00; }
.obs-log-status {
  font-size: 11px; font-weight: 700; text-align: center; font-family: monospace;
}
.obs-log-status.s2  { color: #22CC66; }
.obs-log-status.s4  { color: #FFCC00; }
.obs-log-status.s5  { color: #DD3333; animation: budget-pulse 2s ease infinite; }
.obs-log-path { color: #8ab0c6; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obs-log-row.error .obs-log-path { color: #DD3333; }
.obs-log-row.warn  .obs-log-path { color: #FFCC00; }

/* ── Latency Gauge (Ops) ─────────────────────────────────────── */
.latency-bar { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; }
.latency-bar-track { flex: 1; height: 6px; background: #112030; border-radius: 3px; overflow: hidden; }
.latency-bar-fill  { height: 100%; border-radius: 3px; transition: width .4s ease; }
.latency-bar-fill.fast { background: #22CC66; }
.latency-bar-fill.ok   { background: #3B82F6; }
.latency-bar-fill.slow { background: #FFCC00; }
.latency-bar-fill.crit { background: #DD3333; animation: budget-pulse 1.5s ease infinite; }
.latency-label { width: 110px; color: #8ab0c6; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.latency-val   { font-size: 11px; font-weight: 700; width: 50px; text-align: right;
  font-variant-numeric: tabular-nums; }

/* ── Real-time Alert Flash ───────────────────────────────────── */
.sse-alert-flash {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 99998; background: #12050a; border: 2px solid var(--sem-vermelho, #DD3333);
  border-radius: 12px; padding: 12px 20px; max-width: 500px;
  box-shadow: 0 0 30px rgba(221,51,51,.4), 0 8px 24px rgba(0,0,0,.6);
  display: none; flex-direction: column; gap: 6px;
  animation: slideDown .25s ease;
}
.sse-alert-flash.visible { display: flex; }
@keyframes slideDown { from{transform:translateX(-50%) translateY(-20px);opacity:0} to{transform:translateX(-50%) translateY(0);opacity:1} }
.sse-alert-title { font-size: 14px; font-weight: 800; color: var(--sem-vermelho, #DD3333);
  display: flex; align-items: center; gap: 8px; }
.sse-alert-desc  { font-size: 12px; color: #fca5a5; }
.sse-alert-close { background: none; border: none; color: #4a6e88; cursor: pointer;
  position: absolute; top: 8px; right: 10px; font-size: 18px; }

/* ── Tenant Lifecycle Filter Bar ─────────────────────────────── */
.lifecycle-filter-bar {
  display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 14px;
  background: #07101a; border-bottom: 1px solid #1a3650;
}
.lifecycle-filter-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 700;
  cursor: pointer; border: 1px solid #1a3650; background: #09141e;
  color: #4a6e88; transition: all .15s; white-space: nowrap;
}
.lifecycle-filter-tab:hover { border-color: #2a5080; color: #d8e8ff; }
.lifecycle-filter-tab.active-verde   { background: rgba(34,204,102,.1);  color: #22CC66; border-color: #22CC66; }
.lifecycle-filter-tab.active-amarelo { background: rgba(255,204,0,.1);   color: #FFCC00; border-color: #FFCC00; }
.lifecycle-filter-tab.active-laranja { background: rgba(255,140,0,.1);   color: #FF8C00; border-color: #FF8C00; }
.lifecycle-filter-tab.active-vermelho{ background: rgba(221,51,51,.1);   color: #DD3333; border-color: #DD3333; }
.lifecycle-filter-tab.active-cinza   { background: rgba(107,114,128,.1); color: #9CA3AF; border-color: #6B7280; }
.lifecycle-filter-tab .cnt { background: rgba(255,255,255,.1); border-radius: 999px; padding: 0 6px; font-size: 10px; }

/* ── Alert Pulse classe global (reutilizável) ────────────────── */
.alert-pulse-red    { animation: budget-pulse 1s ease infinite; color: var(--sem-vermelho, #DD3333) !important; }
.alert-pulse-yellow { animation: budget-pulse 2s ease infinite; color: var(--sem-amarelo, #FFCC00) !important; }

/* ── Skeleton List Item (UX-E1-H1-06) ───────────────────────── */
.skeleton-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.skeleton-list-item .skel-thumb {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(90deg,var(--bg-2) 25%,var(--line) 50%,var(--bg-2) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite;
}
.skeleton-list-item .skel-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.skeleton-list-item .skel-lines span {
  display: block; height: 10px; border-radius: 4px;
  background: linear-gradient(90deg,var(--bg-2) 25%,var(--line) 50%,var(--bg-2) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite;
}
.skeleton-list-item .skel-lines span:first-child { width: 70%; }
.skeleton-list-item .skel-lines span:last-child  { width: 45%; }

/* ── Infinite Scroll (UX-E4-H1) ─────────────────────────────── */
.infinite-scroll-sentinel { height: 1px; width: 100%; }
.infinite-scroll-loading  { padding: 12px 0; text-align: center; color: var(--ink-soft); font-size: 12px; }
.infinite-scroll-loading .skel-row {
  height: 8px; border-radius: 4px; margin: 6px auto;
  background: linear-gradient(90deg,var(--bg-2) 25%,var(--line) 50%,var(--bg-2) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite;
}
.infinite-scroll-end { padding: 16px; text-align: center; color: var(--ink-soft); font-size: 12px; }

/* ══════════════════════════════════════════════════════════════
   UX-E7 — Kanban Industrial Genérico (drag HTML5)
   Uso: <div class="kanban-board"> colunas .kanban-col >
          .kanban-card (draggable)
   ══════════════════════════════════════════════════════════════ */
.kanban-board {
  display: flex; gap: 12px; overflow-x: auto; align-items: flex-start;
  padding-bottom: 8px; min-height: 400px;
}
.kanban-col {
  min-width: 220px; flex: 0 0 220px; background: #07101a;
  border: 1px solid #1a3650; border-radius: 10px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .2s, background .2s;
}
.kanban-col.drag-over { border-color: var(--accent,#0ea5e9); background: rgba(14,165,233,.04); }
.kanban-col-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px; border-bottom: 1px solid #1a3650; margin-bottom: 2px;
}
.kanban-col-title { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-soft); }
.kanban-col-count { font-size: 11px; font-weight: 700; padding: 1px 7px;
  border-radius: 999px; background: rgba(255,255,255,.07); color: var(--ink-soft); }
.kanban-card {
  background: #09141e; border: 1px solid #1a3650; border-radius: 8px;
  padding: 10px 12px; cursor: grab; user-select: none;
  transition: box-shadow .15s, border-color .15s, opacity .15s;
  display: flex; flex-direction: column; gap: 5px;
}
.kanban-card:hover { border-color: #2a5080; box-shadow: 0 2px 12px rgba(0,0,0,.3); }
.kanban-card.dragging { opacity: .4; cursor: grabbing; }
.kanban-card-title { font-size: 12px; font-weight: 600; color: var(--ink); }
.kanban-card-meta  { font-size: 11px; color: var(--ink-soft); display: flex; gap: 6px; flex-wrap: wrap; }
.kanban-card-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px;
  background: rgba(14,165,233,.15); color: var(--accent,#38bdf8); }
/* Estado vazio por coluna */
.kanban-col-empty { text-align: center; color: #3a5a78; font-size: 11px; padding: 16px 0; }
/* Mobile: swap para scroll vertical (UX-E7-H1-07) */
@media (max-width: 640px) {
  .kanban-board { flex-direction: column; overflow-x: hidden; }
  .kanban-col { min-width: 100%; flex: none; }
}

/* ── UX-E8-H1: Touch targets & scroll-snap ───────────────────── */
:root { --btn-min-h: 48px; }
.btn-giant {
  min-height: 80px; font-size: 16px; font-weight: 800; padding: 0 24px;
  display: inline-flex; align-items: center; gap: 10px; border-radius: 12px;
}
.tap-target { min-height: var(--btn-min-h); min-width: var(--btn-min-h);
  display: inline-flex; align-items: center; justify-content: center; }
.tab-scroll-snap { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; gap: 0; }
.tab-scroll-snap > * { scroll-snap-align: start; flex-shrink: 0; }