/* 
PALETA EL MÉTODO 4P's - SIEMPRE USAR ESTAS VARIABLES
Negro: #1a1a1a | Naranja: #FF6B35 | Naranja hover: #FF8C61
Gris texto: #666666 | Fondo claro: #f8f9fa
Tipografía: Montserrat (títulos) + Inter (cuerpo)
*/

/* ===========================
   VARIABLES CSS - MÉTODO 4P'S
   =========================== */

:root {
  /* ===== Colores Primarios ===== */
  --color-negro-profundo: #1a1a1a;
  --color-naranja-energetico: #FF6B35;
  --color-blanco-puro: #FFFFFF;

  /* ===== Colores Secundarios ===== */
  --color-gris-oscuro: #2d2d2d;
  --color-naranja-claro: #FF8C61;
  --color-gris-medio: #666666;

  /* ===== Colores de Soporte ===== */
  --color-gris-claro: #f8f9fa;
  --color-gris-suave: #e9ecef;
  --color-naranja-pastel: #fff8f5;

  /* ===== Colores de Estado ===== */
  --color-exito: #28a745;
  --color-alerta: #dc3545;
  --color-info: #17a2b8;
  --color-advertencia: #ffc107;

  /* ===== Gradientes ===== */
  --gradiente-naranja: linear-gradient(135deg, var(--color-naranja-energetico) 0%, var(--color-naranja-claro) 100%);
  --gradiente-oscuro: linear-gradient(135deg, var(--color-negro-profundo) 0%, var(--color-gris-oscuro) 100%);

  /* ===== Tipografía ===== */
  --fuente-principal: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fuente-headings: 'Montserrat', 'Inter', sans-serif;

  /* ===== Espaciado ===== */
  --espaciado-xs: 0.25rem;
  /* 4px */
  --espaciado-sm: 0.5rem;
  /* 8px */
  --espaciado-md: 1rem;
  /* 16px */
  --espaciado-lg: 1.5rem;
  /* 24px */
  --espaciado-xl: 2rem;
  /* 32px */
  --espaciado-2xl: 3rem;
  /* 48px */
  --espaciado-3xl: 4rem;
  /* 64px */

  /* ===== Bordes y Sombras ===== */
  --radio-sm: 0.25rem;
  /* 4px */
  --radio-md: 0.5rem;
  /* 8px */
  --radio-lg: 0.75rem;
  /* 12px */
  --radio-xl: 1rem;
  /* 16px */

  --sombra-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --sombra-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --sombra-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --sombra-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* ===== Transiciones ===== */
  --transicion-rapida: 0.15s ease-in-out;
  --transicion-normal: 0.3s ease-in-out;
  --transicion-lenta: 0.5s ease-in-out;

  /* ===== Breakpoints (para JavaScript) ===== */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* ===== Clases de Utilidad usando Variables ===== */

/* Colores de texto */
.text-primary {
  color: var(--color-naranja-energetico);
}

.text-secondary {
  color: var(--color-gris-medio);
}

.text-dark {
  color: var(--color-negro-profundo);
}

.text-light {
  color: var(--color-gris-claro);
}

/* Colores de fondo */
.bg-primary {
  background-color: var(--color-naranja-energetico);
}

.bg-secondary {
  background-color: var(--color-gris-suave);
}

.bg-dark {
  background-color: var(--color-negro-profundo);
}

.bg-light {
  background-color: var(--color-blanco-puro);
}

/* Gradientes */
.bg-gradient-orange {
  background: var(--gradiente-naranja);
}

.bg-gradient-dark {
  background: var(--gradiente-oscuro);
}

/* Botones con variables */
.btn-primary {
  background-color: var(--color-naranja-energetico);
  color: var(--color-blanco-puro);
  border: none;
  padding: var(--espaciado-sm) var(--espaciado-lg);
  border-radius: var(--radio-md);
  font-family: var(--fuente-principal);
  font-weight: 600;
  transition: all var(--transicion-normal);
  box-shadow: var(--sombra-sm);
}

.btn-primary:hover {
  background-color: var(--color-naranja-claro);
  box-shadow: var(--sombra-md);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-naranja-energetico);
  border: 2px solid var(--color-naranja-energetico);
  padding: var(--espaciado-sm) var(--espaciado-lg);
  border-radius: var(--radio-md);
  font-family: var(--fuente-principal);
  font-weight: 600;
  transition: all var(--transicion-normal);
}

.btn-secondary:hover {
  background-color: var(--color-naranja-energetico);
  color: var(--color-blanco-puro);
}

/* Cards usando variables */
.card {
  background-color: var(--color-blanco-puro);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md);
  padding: var(--espaciado-xl);
  transition: all var(--transicion-normal);
}

.card:hover {
  box-shadow: var(--sombra-lg);
  transform: translateY(-2px);
}

/* ===== Modo Oscuro (Opcional) ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-blanco-puro: #1a1a1a;
    --color-negro-profundo: #ffffff;
    --color-gris-claro: #2d2d2d;
    --color-gris-suave: #333333;
  }
}

/* ===== Responsive Variables ===== */
@media (max-width: 768px) {
  :root {
    --espaciado-lg: 1rem;
    --espaciado-xl: 1.5rem;
    --espaciado-2xl: 2rem;
  }
}