/* static/css/custom_css.css - DESIGN SYSTEM "OPÇÃO A" */
:root {
  /* === BACKGROUNDS === */
  --bg-base: #F7F8FB;
  --bg-surface: #FFFFFF;
  --bg-surface-hover: #F9FAFB;
  --bg-surface-border: #E5E7EB;

  /* === TEXT === */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-tertiary: #94A3B8;
  --text-disabled: #CBD5E1;

  /* === BRAND === */
  --brand-primary: #4F46E5;
  --brand-primary-hover: #4338CA;
  --brand-primary-active: #3730A3;
  --brand-secondary: #06B6D4;
  --brand-secondary-hover: #0891B2;

  /* === SEMANTIC (FEEDBACK) === */
  --success: #10B981;
  --success-bg: #D1FAE5;
  --warning: #F59E0B;
  --warning-bg: #FEF3C7;
  --error: #EF4444;
  --error-bg: #FEE2E2;
  --info: #3B82F6;
  --info-bg: #DBEAFE;

  /* === CHIPS / BADGES BG === */
  --chip-indigo: #EEF2FF;
  --chip-cyan: #ECFEFF;
  --chip-green: #D1FAE5;
  --chip-red: #FEE2E2;
  --chip-purple: #F3E8FF;
  --chip-amber: #FEF3C7;

  /* === STROKES (BORDAS) === */
  --stroke-light: #E5E7EB;
  --stroke-medium: #CBD5E1;
  --stroke-strong: #94A3B8;

  /* === SHADOWS === */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.12);

  /* === TRANSITIONS === */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
}

/* === BODY BASE === */
body {
  background-color: var(--bg-base) !important;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--stroke-medium); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--stroke-strong); }

/* === COMPONENTES GLOBAIS === */
/* CARD */
.vx-card {
  background: var(--bg-surface);
  border: 1px solid var(--stroke-light);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal);
}
.vx-card:hover { box-shadow: var(--shadow-md); }

/* BUTTONS */
.vx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; font-weight: 500; font-size: 14px;
  border-radius: 8px; transition: all var(--transition-normal);
  cursor: pointer; border: none;
}
.vx-btn-primary { background: var(--brand-primary); color: white; }
.vx-btn-primary:hover { background: var(--brand-primary-hover); }
.vx-btn-primary:active { background: var(--brand-primary-active); }
.vx-btn-secondary { background: transparent; border: 1px solid var(--stroke-light); color: var(--text-secondary); }
.vx-btn-secondary:hover { background: var(--bg-surface-hover); border-color: var(--stroke-medium); }
.vx-btn-ghost { background: transparent; color: var(--text-secondary); }
.vx-btn-ghost:hover { background: var(--bg-surface-hover); color: var(--text-primary); }

/* KPI CARDS */
.vx-kpi-card { background: var(--bg-surface); border: 1px solid var(--stroke-light); border-radius: 12px; padding: 24px; display: flex; align-items: center; gap: 12px; transition: box-shadow var(--transition-normal); }
.vx-kpi-card:hover { box-shadow: var(--shadow-md); }
.vx-kpi-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vx-kpi-icon-indigo { background: var(--chip-indigo); }
.vx-kpi-icon-cyan { background: var(--chip-cyan); }
.vx-kpi-icon-green { background: var(--chip-green); }
.vx-kpi-icon-red { background: var(--chip-red); }
.vx-kpi-icon-purple { background: var(--chip-purple); }
.vx-kpi-label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.vx-kpi-value { font-size: 24px; font-weight: 700; color: var(--text-primary); margin-top: 4px; }

/* BADGES */
.vx-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; }
.vx-badge-neutral { background: var(--bg-surface-hover); color: var(--text-secondary); border: 1px solid var(--stroke-light); }
.vx-badge-success { background: var(--success-bg); color: var(--success); }
.vx-badge-warning { background: var(--warning-bg); color: var(--warning); }
.vx-badge-error { background: var(--error-bg); color: var(--error); }
.vx-badge-info { background: var(--info-bg); color: var(--info); }

/* INPUTS */
.vx-input {
  width: 100%; padding: 10px 14px; border: 1px solid var(--stroke-light);
  border-radius: 8px; font-size: 14px; color: var(--text-primary);
  background: var(--bg-surface); transition: all var(--transition-fast);
}
.vx-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }

/* MARKDOWN PREVIEW (prose) */
.prose ul { list-style: disc; padding-left: 1.25rem; margin: 0.5rem 0; }
.prose ol { list-style: decimal; padding-left: 1.25rem; margin: 0.5rem 0; }
.prose li { margin: 0.25rem 0; }
.prose blockquote { border-left: 4px solid var(--stroke-light); padding-left: 0.75rem; color: var(--text-secondary); }
.prose code { background: #f1f5f9; padding: 2px 4px; border-radius: 4px; }
.prose pre { background: #0f172a; color: #e2e8f0; padding: 12px; border-radius: 8px; overflow-x: auto; }
.prose a { color: #2563eb; text-decoration: underline; }