@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-sidebar: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --card-bg: #ffffff;
  --card-bg-hover: #f8fafc;
  --accent: #f97316;
  --accent-hover: #ea580c;
  --header-bg: rgba(255, 255, 255, 0.95);
  --input-bg: #f1f5f9;
  --shadow: rgba(0, 0, 0, 0.05);

  --stat-blue-bg: #eff6ff;
  --stat-blue-border: #bfdbfe;
  --stat-blue-icon-from: #3b82f6;
  --stat-blue-icon-to: #2563eb;
  --stat-blue-text: #1d4ed8;

  --stat-purple-bg: #faf5ff;
  --stat-purple-border: #e9d5ff;
  --stat-purple-icon-from: #a855f7;
  --stat-purple-icon-to: #7e22ce;
  --stat-purple-text: #9333ea;

  --stat-green-bg: #ecfdf5;
  --stat-green-border: #a7f3d0;
  --stat-green-icon-from: #10b981;
  --stat-green-icon-to: #059669;
  --stat-green-text: #047857;

  --stat-orange-bg: #fff7ed;
  --stat-orange-border: #fed7aa;
  --stat-orange-icon-from: #f97316;
  --stat-orange-icon-to: #ea580c;
  --stat-orange-text: #c2410c;

  --status-red-bg: #fef2f2;
  --status-red-border: #fecaca;
  --status-red-icon-from: #ef4444;
  --status-red-icon-to: #b91c1c;
  --status-red-text: #dc2626;

  --status-green-bg: #f0fdf4;
  --status-green-border: #bbf7d0;
  --status-green-icon-from: #22c55e;
  --status-green-icon-to: #15803d;
  --status-green-text: #16a34a;
}

.dark {
  --bg-primary: #050914;
  --bg-secondary: #080f1f;
  --bg-sidebar: #0a0e17;
  --text-primary: #ffffff;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border: rgba(255, 255, 255, 0.1);
  --card-bg: #0a0e17;
  --card-bg-hover: #0f172a;
  --accent: #f97316;
  --accent-hover: #fb923c;
  --header-bg: rgba(5, 9, 20, 0.95);
  --input-bg: #0c1220;
  --shadow: rgba(0, 0, 0, 0.2);

  --stat-blue-bg: #0c1a3a;
  --stat-blue-border: rgba(59, 130, 246, 0.25);
  --stat-blue-icon-from: #2563eb;
  --stat-blue-icon-to: #1d4ed8;
  --stat-blue-text: #60a5fa;

  --stat-purple-bg: #1e0b33;
  --stat-purple-border: rgba(168, 85, 247, 0.25);
  --stat-purple-icon-from: #9333ea;
  --stat-purple-icon-to: #7e22ce;
  --stat-purple-text: #c084fc;

  --stat-green-bg: #052818;
  --stat-green-border: rgba(16, 185, 129, 0.25);
  --stat-green-icon-from: #059669;
  --stat-green-icon-to: #047857;
  --stat-green-text: #34d399;

  --stat-orange-bg: #331303;
  --stat-orange-border: rgba(249, 115, 22, 0.25);
  --stat-orange-icon-from: #ea580c;
  --stat-orange-icon-to: #c2410c;
  --stat-orange-text: #fb923c;

  --status-red-bg: #1a0505;
  --status-red-border: rgba(239, 68, 68, 0.25);
  --status-red-icon-from: #dc2626;
  --status-red-icon-to: #b91c1c;
  --status-red-text: #f87171;

  --status-green-bg: #051a0a;
  --status-green-border: rgba(34, 197, 94, 0.25);
  --status-green-icon-from: #16a34a;
  --status-green-icon-to: #15803d;
  --status-green-text: #4ade80;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  width: 100%;
}

/* Select nativo: heredar colores del tema en el desplegable */
select {
  color-scheme: light;
}

.dark select {
  color-scheme: dark;
}

select option {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* Scrollbar consistente */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}