/* Fuentes de Google Fonts - La Data */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Source+Sans+3:wght@400;600;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/alternate-gothic-no-2-d');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* La Data - Variables de colores oficiales */
  --color-ink: #000000;
  --color-midnight: #0A0A0A;
  --color-electric: #FFFF01;
  --color-gold: #FDEB03;
  --color-amber: #FECC1F;
  --color-bronze: #CD7F32;
  --color-neutral-100: #FFFFFF;
  --color-neutral-900: #000000;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Source Sans 3', 'Montserrat', 'Arial', sans-serif;
  color: var(--color-ink);
  background-color: #FFFFFF;
  line-height: 1.7;
  font-size: 1.05rem;
}

/* Clases de utilidad personalizadas */
@layer components {
  .badge-brand {
    /* simplified for standalone CSS */
    display:inline-flex; gap:0.5rem; padding:0.5rem 1rem; border-radius:999px; background:#FFFF01; color:#000; font-weight:700; font-size:0.75rem; text-transform:uppercase; border:2px solid #000;
  }

  .btn-brand {
    background:#FFFF01; color:#000; border-radius:8px; font-weight:700; padding:0.5rem 1rem; border:2px solid #000; text-transform:uppercase; display:inline-block;
  }

  .btn-brand:hover { transform:translateY(-4px); }

  .btn-outline-ink { border-radius:8px; padding:0.5rem 1rem; border:2px solid #FFFF01; color:#fff; }

  /* Alerts */
  .alert {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-weight: 600;
  }
  .alert-success { background: #e9f9e9; color: #0b6d0b; border: 1px solid #9ee29a; }
  .alert-error { background: #ffecec; color: #7a0b0b; border: 1px solid #f1a1a1; }
  .alert-info { background: #f0f6ff; color: #063a7a; border: 1px solid #bcd7ff; }

  /* Spinner (inline) */
  .spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(0,0,0,0.15);
    border-top-color: rgba(0,0,0,0.8);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-left: 0.5rem;
  }

  @keyframes spin { to { transform: rotate(360deg); } }

  /* Page-level loading overlay */
  .loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    color: #FFFF01;
    font-weight: 700;
    gap: 1rem;
  }

  .is-loading .btn-brand { opacity: 0.9; transform: translateY(0); }
}

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