/* ==========================================================================
   Efycontable Design System
   Fintech moderno · Marca Moicro (acento verde)
   ========================================================================== */

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

:root {
  /* Brand */
  --brand-50:  #ecfdf5;
  --brand-100: #d1fae5;
  --brand-200: #a7f3d0;
  --brand-300: #6ee7b7;
  --brand-400: #34d399;
  --brand-500: #10b981; /* Moicro */
  --brand-600: #059669;
  --brand-700: #047857;
  --brand-800: #065f46;
  --brand-900: #064e3b;
  --brand-gradient: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  --brand-gradient-soft: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);

  /* Neutrals (light) */
  --bg:         #f8fafc;
  --bg-card:    #ffffff;
  --bg-subtle:  #f1f5f9;
  --bg-hover:   #f8fafc;
  --border:     #e2e8f0;
  --border-strong: #cbd5e1;
  --text:       #0f172a;
  --text-muted: #64748b;
  --text-soft:  #94a3b8;

  /* Status */
  --success: #10b981;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --info:    #3b82f6;

  --success-bg: #ecfdf5;
  --warning-bg: #fef3c7;
  --danger-bg:  #fee2e2;
  --info-bg:    #dbeafe;

  /* Surfaces / Glass */
  --glass-bg:      rgba(255, 255, 255, 0.72);
  --glass-border:  rgba(255, 255, 255, 0.6);
  --glass-blur:    blur(14px) saturate(140%);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 4px 10px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 16px 32px -8px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
  --shadow-brand: 0 10px 30px -8px rgba(16, 185, 129, 0.35);

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;
}

/* Dark mode */
[data-theme="dark"] {
  --bg:         #0b1220;
  --bg-card:    #111a2e;
  --bg-subtle:  #172038;
  --bg-hover:   #1a2440;
  --border:     #1f2a44;
  --border-strong: #2a3656;
  --text:       #f1f5f9;
  --text-muted: #94a3b8;
  --text-soft:  #64748b;
  --glass-bg:      rgba(17, 26, 46, 0.72);
  --glass-border:  rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  font-feature-settings: 'cv11', 'ss01';
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
svg { flex-shrink: 0; }

/* Typography */
.h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; }
.h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.text-muted { color: var(--text-muted); }
.text-soft { color: var(--text-soft); }
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; }

/* Layout primitives */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: 20px; }
.card-pad-lg { padding: 24px; }

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grow { flex: 1; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-weight: 500;
  font-size: 14px;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 14px 36px -8px rgba(16,185,129,.45); }
.btn-ghost {
  background: var(--bg-subtle);
  color: var(--text);
}
.btn-ghost:hover { background: var(--bg-hover); }
.btn-outline {
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text);
}
.btn-outline:hover { background: var(--bg-subtle); }
.btn-icon {
  width: 38px; height: 38px; padding: 0; justify-content: center;
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.btn-icon:hover { background: var(--bg-hover); color: var(--text); }

/* Inputs */
.input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-card);
  color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px var(--brand-100);
}
[data-theme="dark"] .input:focus { box-shadow: 0 0 0 4px rgba(16,185,129,.15); }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--r-full);
  background: var(--bg-subtle);
  color: var(--text-muted);
}
.badge-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.badge-success { background: var(--success-bg); color: var(--brand-700); }
.badge-warning { background: var(--warning-bg); color: #a16207; }
.badge-danger  { background: var(--danger-bg); color: #b91c1c; }
.badge-info    { background: var(--info-bg); color: #1d4ed8; }
[data-theme="dark"] .badge-success { background: rgba(16,185,129,.12); color: #6ee7b7; }
[data-theme="dark"] .badge-warning { background: rgba(245,158,11,.12); color: #fbbf24; }
[data-theme="dark"] .badge-danger  { background: rgba(239,68,68,.12); color: #fca5a5; }
[data-theme="dark"] .badge-info    { background: rgba(59,130,246,.12); color: #93c5fd; }

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes pulse-brand {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.4); }
  50%      { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
}
.anim-in { animation: fadeInUp var(--dur-slow) var(--ease-out) both; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-soft); }

/* Utility */
.divider { height: 1px; background: var(--border); }
.chip-brand {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-full);
  background: var(--brand-gradient-soft);
  color: var(--brand-700);
  font-size: 12px; font-weight: 500;
}
[data-theme="dark"] .chip-brand { background: rgba(16,185,129,.12); color: #6ee7b7; }

.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; letter-spacing: -0.02em; font-size: 18px;
}
.logo-mark {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--brand-gradient);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: var(--shadow-brand);
}