/* =============================================================================
   AGUIRRESYSTEM - Base: variables de tema, reset, tipografía
   Replica los tokens de tailwind.config.ts + :root de globals.css del sistema
   original (Next.js) sin usar Tailwind.
   ============================================================================= */

:root {
  color-scheme: light;

  /* Paleta de marca Aguirre */
  --aguirre-blue: #003DA5;
  --aguirre-blue-dark: #002d7a;
  --aguirre-blue-light: #1a5dd0;
  --aguirre-red: #E30613;
  --aguirre-red-dark: #b30410;
  --aguirre-ink: #0A0E1A;

  --aguirre-gradient: linear-gradient(135deg, #003DA5 0%, #1a5dd0 100%);
  --aguirre-radial: radial-gradient(circle at top right, #1a5dd0 0%, #003DA5 50%, #002d7a 100%);

  /* Tema claro (default) */
  --background: #f8fafc;
  --foreground: #0a0e14;
  --muted: #f1f5f9;
  --muted-foreground: #64748b;
  --border: #e2e8f0;
  --card: #ffffff;
  --card-foreground: #0a0e14;
  --primary: var(--aguirre-blue);
  --primary-foreground: #ffffff;
  --accent: var(--aguirre-red);
  --accent-foreground: #ffffff;
  --ring: var(--aguirre-blue);

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --background: #0A0E1A;
    --foreground: #fafafa;
    --muted: #131826;
    --muted-foreground: #94a3b8;
    --border: #1f2937;
    --card: #0d1220;
    --card-foreground: #fafafa;
    --primary: #0d5fff;
    --primary-foreground: #ffffff;
    --accent: #ff2d3d;
    --accent-foreground: #ffffff;
    --ring: #0d5fff;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #0A0E1A;
  --foreground: #fafafa;
  --muted: #131826;
  --muted-foreground: #94a3b8;
  --border: #1f2937;
  --card: #0d1220;
  --card-foreground: #fafafa;
  --primary: #0d5fff;
  --primary-foreground: #ffffff;
  --accent: #ff2d3d;
  --accent-foreground: #ffffff;
  --ring: #0d5fff;
}

* { box-sizing: border-box; }
dt, dd { margin: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  margin: 0;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
code, .mono { font-family: var(--font-mono); }

img { max-width: 100%; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.5); }

/* Animaciones (reemplazan framer-motion) */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }

.fade-in { animation: fadeIn 0.4s ease-out; }
.slide-up { animation: slideUp 0.4s ease-out; }
.slide-down { animation: slideDown 0.3s ease-out; }
.scale-in { animation: scaleIn 0.2s ease-out; }
.spin { animation: spin 1s linear infinite; }

.text-muted { color: var(--muted-foreground); }
.hidden { display: none !important; }

.container-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

@media (max-width: 768px) {
  .container-page { padding: 16px 16px 32px; }
}