/* ========================================
   PALETA DE COLORES OFICIAL - CAMELLA.COM.CO
   Inspirada en la bandera de Colombia
   ======================================== */

:root {
  /* ========================================
     PALETA SIMPLIFICADA - SOLO 8 COLORES
     Inspirada en la bandera de Colombia
     ======================================== */
  
  /* Colores principales (4) */
  --color-azul: #002b47;       /* Azul principal - textos y navegación */
  --color-amarillo: #FFD200;   /* Amarillo - acentos y hover */
  --color-rojo: #CE1126;       /* Rojo - botones de acción */
  --color-blanco: #FAFAFA;     /* Blanco - fondos principales */
  
  /* Grises minimalistas (2) */
  --color-gris: #666666;       /* Gris medio - textos secundarios */
  --gris-claro: #F5F5F5;       /* Gris claro - fondos suaves */
  
  /* Estados esenciales (3) */
  --success: #28A745;          /* Verde - éxito y confirmaciones */
  --shadow-color: rgba(0, 0, 0, 0.1);  /* Sombra universal */
  --azul-fondo: #3a8be8;       /* Azul para fondos y elementos decorativos */
  
  /* Variables adicionales para páginas de error */
  --azul-oscuro: #1a365d;      /* Azul oscuro para gradientes */
  --amarillo-colombia: #FFD200; /* Alias para amarillo Colombia */
  --rojo-colombia: #CE1126;     /* Alias para rojo Colombia */
  
  /* Gradientes minimalistas (2) */
  --gradiente-header: linear-gradient(135deg, var(--color-azul), #2a7bd4);
  --gradiente-fondo: linear-gradient(to bottom, var(--color-blanco), var(--gris-claro));
  
  /* Sombras universales (1) */
  --sombra-suave: 0 2px 8px var(--shadow-color);
  
  /* Tipografía */
  --font-principal: 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  --font-secundaria: 'Georgia', 'Times New Roman', serif;
  
  /* Espaciados consistentes */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  
  /* Border radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 20px;
  --border-radius-full: 50%;
  
  /* Transiciones */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ========================================
   UTILIDADES DE COLORES
   ======================================== */

/* ========================================
   UTILIDADES SIMPLIFICADAS - SOLO ESENCIALES
   ======================================== */

/* Colores de texto (4 principales) */
.text-azul { color: var(--color-azul) !important; }
.text-amarillo { color: var(--color-amarillo) !important; }
.text-rojo { color: var(--color-rojo) !important; }
.text-gris { color: var(--color-gris) !important; }

/* Colores de fondo (3 principales) */
.bg-azul { background-color: var(--color-azul) !important; }
.bg-blanco { background-color: var(--color-blanco) !important; }
.bg-gris-claro { background-color: var(--gris-claro) !important; }

/* Sombra universal */
.shadow { box-shadow: var(--sombra-suave) !important; }

/* ========================================
   COMPONENTES MINIMALISTAS
   ======================================== */

/* Corazón colombiano simplificado */
.heart-colombia {
  color: var(--color-amarillo);
}

/* Botón principal */
.btn-primary {
  background: var(--color-azul);
  color: var(--color-blanco);
  border: none;
}

.btn-primary:hover {
  background: var(--color-amarillo);
  color: var(--color-azul);
}

/* Botón de acción */
.btn-action {
  background: var(--color-rojo);
  color: var(--color-blanco);
}

/* Tarjeta simple */
.card {
  background: var(--color-blanco);
  border: 1px solid var(--gris-claro);
  box-shadow: var(--sombra-suave);
}

.card:hover {
  border-color: var(--color-amarillo);
}

/* Enlaces simples */
.link {
  color: var(--color-azul);
  text-decoration: none;
}

.link:hover {
  color: var(--color-amarillo);
}

/* ========================================
   COLORES UNIFICADOS - DESKTOP Y MÓVIL
   ======================================== */
/* 
  IMPORTANTE: Los colores son idénticos en todas las resoluciones
  No se aplican variaciones por tamaño de pantalla o preferencia del sistema
  La identidad visual se mantiene consistente en todos los dispositivos
*/