/**
 * VanYou Corporate Theme
 * Paleta de colores oficial de VanYou
 * Extraído de: VanyouPublicSite/assets/css/colour-vanyou.css
 * 
 * Colores principales (HSLA corporativo):
 * - Verde primario: hsla(73, 83.1%, 39.4%, 1) = #94B811
 * - Verde oscuro (hover): hsla(73, 83.1%, 20%, 1) = #5E7600
 * - Borde acento: #666700
 */

:root {
  /* ========================================
     COLORES PRIMARIOS - Verde VanYou Corporativo
     Fuente: colour-vanyou.css
     ======================================== */
  --vanyou-primary: hsla(73, 83.1%, 39.4%, 1);        /* Verde VanYou - botones CTA, acentos */
  --vanyou-primary-dark: hsla(73, 83.1%, 20%, 1);     /* Verde oscuro - hover estados */
  --vanyou-primary-light: hsla(73, 83.1%, 50%, 1);    /* Verde claro - highlights */
  --vanyou-primary-border: #666700;                   /* Borde de botones primarios */
  
  /* ========================================
     COLORES SECUNDARIOS
     ======================================== */
  --vanyou-secondary: #292B2C;         /* Fondo negro VanYou - header, footer */
  --vanyou-secondary-dark: #292900;    /* Negro oscuro corporativo */
  
  /* ========================================
     COLORES NEUTROS
     ======================================== */
  --vanyou-white: #FFFFFF;
  --vanyou-gray-50: #F9FAFB;           /* Fondo claro */
  --vanyou-gray-100: #F3F4F6;          /* Fondo alternativo */
  --vanyou-gray-200: #E5E7EB;          /* Bordes suaves */
  --vanyou-gray-300: #D1D5DB;          /* Bordes */
  --vanyou-gray-400: #9CA3AF;          /* Texto deshabilitado */
  --vanyou-gray-500: #6B7280;          /* Texto secundario */
  --vanyou-gray-600: #4B5563;          /* Texto principal */
  --vanyou-gray-700: #374151;          /* Títulos */
  --vanyou-gray-800: #1F2937;          /* Texto oscuro */
  --vanyou-gray-900: #111827;          /* Negro suave */
  
  /* ========================================
     COLORES DE ESTADO
     ======================================== */
  --vanyou-success: #22C55E;           /* Verde éxito */
  --vanyou-success-light: #86EFAC;
  --vanyou-warning: #F59E0B;           /* Amarillo advertencia */
  --vanyou-warning-light: #FCD34D;
  --vanyou-error: #EF4444;             /* Rojo error */
  --vanyou-error-light: #FCA5A5;
  --vanyou-info: #3B82F6;              /* Azul info */
  --vanyou-info-light: #93C5FD;
  
  /* ========================================
     TIPOGRAFÍA
     ======================================== */
  --vanyou-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --vanyou-font-size-xs: 0.75rem;      /* 12px */
  --vanyou-font-size-sm: 0.875rem;     /* 14px */
  --vanyou-font-size-base: 1rem;       /* 16px */
  --vanyou-font-size-lg: 1.125rem;     /* 18px */
  --vanyou-font-size-xl: 1.25rem;      /* 20px */
  --vanyou-font-size-2xl: 1.5rem;      /* 24px */
  --vanyou-font-size-3xl: 1.875rem;    /* 30px */
  --vanyou-font-size-4xl: 2.25rem;     /* 36px */
  
  /* ========================================
     ESPACIADO
     ======================================== */
  --vanyou-spacing-xs: 0.25rem;        /* 4px */
  --vanyou-spacing-sm: 0.5rem;         /* 8px */
  --vanyou-spacing-md: 1rem;           /* 16px */
  --vanyou-spacing-lg: 1.5rem;         /* 24px */
  --vanyou-spacing-xl: 2rem;           /* 32px */
  --vanyou-spacing-2xl: 3rem;          /* 48px */
  
  /* ========================================
     BORDES
     ======================================== */
  --vanyou-radius-sm: 0.25rem;         /* 4px */
  --vanyou-radius-md: 0.5rem;          /* 8px */
  --vanyou-radius-lg: 0.75rem;         /* 12px */
  --vanyou-radius-xl: 1rem;            /* 16px */
  --vanyou-radius-full: 9999px;        /* Pill shape */
  
  /* ========================================
     SOMBRAS
     ======================================== */
  --vanyou-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --vanyou-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --vanyou-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --vanyou-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  /* ========================================
     TRANSICIONES
     ======================================== */
  --vanyou-transition-fast: 150ms ease;
  --vanyou-transition-normal: 250ms ease;
  --vanyou-transition-slow: 350ms ease;
  
  /* ========================================
     Z-INDEX
     ======================================== */
  --vanyou-z-dropdown: 100;
  --vanyou-z-sticky: 200;
  --vanyou-z-modal: 300;
  --vanyou-z-toast: 400;
}

/* ========================================
   RESET Y BASE
   ======================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--vanyou-font-family);
  font-size: var(--vanyou-font-size-base);
  line-height: 1.6;
  color: var(--vanyou-gray-700);
  background-color: var(--vanyou-gray-50);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* ========================================
   COMPONENTES BASE
   ======================================== */

/* Botón primario - Estilo corporativo VanYou */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vanyou-spacing-sm);
  padding: var(--vanyou-spacing-sm) var(--vanyou-spacing-lg);
  background-color: var(--vanyou-primary);
  color: var(--vanyou-white);
  border: 1px solid var(--vanyou-primary-border);
  border-radius: var(--vanyou-radius-md);
  font-size: var(--vanyou-font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--vanyou-transition-fast);
  text-decoration: none;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--vanyou-primary-dark);
  border-color: var(--vanyou-secondary-dark);
  transform: translateY(-1px);
  box-shadow: var(--vanyou-shadow-md);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary:disabled {
  background-color: var(--vanyou-gray-400);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Botón secundario */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vanyou-spacing-sm);
  padding: var(--vanyou-spacing-sm) var(--vanyou-spacing-lg);
  background-color: var(--vanyou-white);
  color: var(--vanyou-primary);
  border: 2px solid var(--vanyou-primary);
  border-radius: var(--vanyou-radius-md);
  font-size: var(--vanyou-font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--vanyou-transition-fast);
  text-decoration: none;
}

.btn-secondary:hover {
  background-color: var(--vanyou-primary);
  color: var(--vanyou-white);
}

/* Card */
.card {
  background: var(--vanyou-white);
  border-radius: var(--vanyou-radius-lg);
  box-shadow: var(--vanyou-shadow-md);
  overflow: hidden;
  transition: transform var(--vanyou-transition-fast), box-shadow var(--vanyou-transition-fast);
}

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

/* Input */
.input {
  width: 100%;
  padding: var(--vanyou-spacing-sm) var(--vanyou-spacing-md);
  border: 1px solid var(--vanyou-gray-300);
  border-radius: var(--vanyou-radius-md);
  font-size: var(--vanyou-font-size-base);
  font-family: inherit;
  transition: border-color var(--vanyou-transition-fast), box-shadow var(--vanyou-transition-fast);
}

.input:focus {
  outline: none;
  border-color: var(--vanyou-primary);
  box-shadow: 0 0 0 3px hsla(73, 83.1%, 39.4%, 0.2);
}

/* Links - Estilo corporativo VanYou */
a {
  color: var(--vanyou-primary);
  text-decoration: none;
}

a:hover {
  color: var(--vanyou-primary-dark);
  text-decoration: underline;
}

.input:disabled {
  background-color: var(--vanyou-gray-100);
  color: var(--vanyou-gray-400);
  cursor: not-allowed;
}

/* Label */
.label {
  display: block;
  margin-bottom: var(--vanyou-spacing-xs);
  font-size: var(--vanyou-font-size-sm);
  font-weight: 600;
  color: var(--vanyou-gray-700);
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--vanyou-spacing-xs) var(--vanyou-spacing-sm);
  font-size: var(--vanyou-font-size-xs);
  font-weight: 600;
  border-radius: var(--vanyou-radius-full);
}

.badge-primary {
  background-color: var(--vanyou-primary-light);
  color: var(--vanyou-secondary-dark);
}

.badge-success {
  background-color: var(--vanyou-success-light);
  color: #166534;
}

.badge-warning {
  background-color: var(--vanyou-warning-light);
  color: #92400E;
}

.badge-error {
  background-color: var(--vanyou-error-light);
  color: #991B1B;
}

/* ========================================
   UTILIDADES
   ======================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

.text-primary { color: var(--vanyou-primary); }
.text-secondary { color: var(--vanyou-gray-500); }
.text-muted { color: var(--vanyou-gray-400); }

.bg-primary { background-color: var(--vanyou-primary); }
.bg-secondary { background-color: var(--vanyou-secondary); }
.bg-white { background-color: var(--vanyou-white); }

/* ========================================
   ANIMACIONES
   ======================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-fadeIn {
  animation: fadeIn var(--vanyou-transition-normal) ease-out forwards;
}

.animate-slideUp {
  animation: slideUp var(--vanyou-transition-normal) ease-out forwards;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--vanyou-gray-200) 25%,
    var(--vanyou-gray-100) 50%,
    var(--vanyou-gray-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--vanyou-radius-md);
}

/* ========================================
   PROGRESS BAR
   ======================================== */
.progress-bar {
  width: 100%;
  height: 8px;
  background-color: var(--vanyou-gray-200);
  border-radius: var(--vanyou-radius-full);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background-color: var(--vanyou-primary);
  border-radius: var(--vanyou-radius-full);
  transition: width var(--vanyou-transition-normal) ease-out;
}

/* ========================================
   FLATPICKR CUSTOM THEME
   Personalización del datepicker con colores VanYou
   ======================================== */
.flatpickr-calendar {
  border-radius: var(--vanyou-radius-lg);
  box-shadow: var(--vanyou-shadow-xl);
  border: none;
}

.flatpickr-months {
  background-color: var(--vanyou-primary);
  border-radius: var(--vanyou-radius-lg) var(--vanyou-radius-lg) 0 0;
  padding: var(--vanyou-spacing-sm) 0;
}

.flatpickr-months .flatpickr-month {
  background-color: transparent;
  color: white;
  fill: white;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: white;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  fill: white;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background-color: transparent;
  color: white;
  font-weight: 600;
}

.flatpickr-current-month input.cur-year {
  color: white;
  font-weight: 600;
}

span.flatpickr-weekday {
  color: var(--vanyou-gray-600);
  font-weight: 600;
}

.flatpickr-day {
  color: var(--vanyou-gray-700);
  border-radius: var(--vanyou-radius-md);
}

.flatpickr-day:hover {
  background: var(--vanyou-primary-light);
  border-color: var(--vanyou-primary-light);
  color: var(--vanyou-secondary-dark);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--vanyou-primary);
  border-color: var(--vanyou-primary);
  color: white;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: var(--vanyou-primary-dark);
  border-color: var(--vanyou-primary-dark);
}

.flatpickr-day.inRange {
  background: rgba(149, 193, 31, 0.15);
  border-color: transparent;
  box-shadow: -5px 0 0 rgba(149, 193, 31, 0.15), 5px 0 0 rgba(149, 193, 31, 0.15);
}

.flatpickr-day.today {
  border-color: var(--vanyou-primary);
}

.flatpickr-day.today:hover {
  background: var(--vanyou-primary);
  color: white;
}

.flatpickr-day.disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--vanyou-gray-400);
}

.progress-bar-fill {
  height: 100%;
  background-color: var(--vanyou-primary);
  border-radius: var(--vanyou-radius-full);
  transition: width var(--vanyou-transition-normal) ease-out;
}

/* ========================================
   TOOLTIP
   ======================================== */
.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--vanyou-spacing-xs) var(--vanyou-spacing-sm);
  background-color: var(--vanyou-gray-800);
  color: var(--vanyou-white);
  font-size: var(--vanyou-font-size-xs);
  white-space: nowrap;
  border-radius: var(--vanyou-radius-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--vanyou-transition-fast), visibility var(--vanyou-transition-fast);
  z-index: var(--vanyou-z-tooltip, 50);
  margin-bottom: var(--vanyou-spacing-xs);
}

.tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}