/**
 * Advanced Travel Search - Base CSS v3.2.2-FIXED-HORIZONTAL
 * Variables CSS principales y estilos base del widget
 * 
 * 🔧 SISTEMA BASE COMPLETO SEGÚN IMAGEN IMPLEMENTADO:
 * ✅ Variables CSS personalizables para colores
 * ✅ Reset CSS robusto para el widget
 * ✅ Layout del contenedor principal horizontal
 * ✅ Colores exactos (verde activo #48bb78, gris inactivo #4a5568)
 * ✅ Tipografía base y sistema de fuentes
 * ✅ Sistema de spacing y medidas responsivas
 * ✅ Z-index hierarchy organizado
 * 
 * @package AdvancedTravelSearch
 * @version 3.2.2-FIXED-HORIZONTAL
 */

/* ==================== VARIABLES CSS PRINCIPALES (PERSONALIZABLES) ==================== */

:root {
    /* ========== COLORES PRINCIPALES ========== */
    
    /* Colores primarios (personalizables desde admin) */
    --ats-primary-color: #48bb78;              /* Verde principal - personalizable */
    --ats-primary-dark: #38a169;               /* Verde oscuro para hover */
    --ats-primary-light: #68d391;              /* Verde claro para estados */
    --ats-primary-contrast: #ffffff;           /* Texto sobre verde */
    
    /* Colores secundarios */
    --ats-secondary-color: #4a5568;            /* Gris oscuro para pestañas inactivas */
    --ats-secondary-light: #718096;            /* Gris medio */
    --ats-secondary-contrast: #ffffff;         /* Texto sobre gris oscuro */
    
    /* Escala de grises */
    --ats-gray-50: #f7fafc;
    --ats-gray-100: #edf2f7;
    --ats-gray-200: #e2e8f0;
    --ats-gray-300: #cbd5e0;
    --ats-gray-400: #a0aec0;
    --ats-gray-500: #718096;
    --ats-gray-600: #4a5568;
    --ats-gray-700: #2d3748;
    --ats-gray-800: #1a202c;
    --ats-gray-900: #171923;
    
    /* Colores de texto */
    --ats-text-primary: #2d3748;               /* Texto principal */
    --ats-text-secondary: #4a5568;             /* Texto secundario */
    --ats-text-muted: #718096;                 /* Texto deshabilitado */
    --ats-text-light: #ffffff;                 /* Texto sobre fondos oscuros */
    --ats-text-placeholder: #a0aec0;           /* Placeholders */
    
    /* Colores de fondo */
    --ats-bg-primary: #ffffff;                 /* Fondo principal */
    --ats-bg-secondary: #f7fafc;               /* Fondo secundario */
    --ats-bg-muted: #edf2f7;                   /* Fondo deshabilitado */
    --ats-bg-overlay: rgba(0, 0, 0, 0.5);      /* Overlay de modales */
    
    /* Colores de borde */
    --ats-border-color: #e2e8f0;               /* Borde principal */
    --ats-border-color-dark: #cbd5e0;          /* Borde más visible */
    --ats-border-color-focus: var(--ats-primary-color); /* Borde en focus */
    
    /* Colores de estado */
    --ats-success-color: #38a169;              /* Verde de éxito */
    --ats-warning-color: #ed8936;              /* Naranja de advertencia */
    --ats-error-color: #e53e3e;                /* Rojo de error */
    --ats-info-color: #4299e1;                 /* Azul de información */
    
    /* ========== TIPOGRAFÍA ========== */
    
    /* Familias de fuentes */
    --ats-font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ats-font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    
    /* Tamaños de fuente */
    --ats-font-size-xs: 12px;
    --ats-font-size-sm: 14px;
    --ats-font-size-base: 16px;
    --ats-font-size-lg: 18px;
    --ats-font-size-xl: 20px;
    --ats-font-size-2xl: 24px;
    --ats-font-size-3xl: 30px;
    
    /* Pesos de fuente */
    --ats-font-weight-light: 300;
    --ats-font-weight-normal: 400;
    --ats-font-weight-medium: 500;
    --ats-font-weight-semibold: 600;
    --ats-font-weight-bold: 700;
    --ats-font-weight-extrabold: 800;
    
    /* Alturas de línea */
    --ats-line-height-tight: 1.25;
    --ats-line-height-normal: 1.4;
    --ats-line-height-relaxed: 1.6;
    
    /* ========== SPACING ========== */
    
    /* Sistema de espaciado base 4px */
    --ats-spacing-0: 0;
    --ats-spacing-1: 4px;
    --ats-spacing-2: 8px;
    --ats-spacing-3: 12px;
    --ats-spacing-4: 16px;
    --ats-spacing-5: 20px;
    --ats-spacing-6: 24px;
    --ats-spacing-8: 32px;
    --ats-spacing-10: 40px;
    --ats-spacing-12: 48px;
    --ats-spacing-16: 64px;
    --ats-spacing-20: 80px;
    
    /* Alias de spacing comunes */
    --ats-spacing-xs: var(--ats-spacing-1);    /* 4px */
    --ats-spacing-sm: var(--ats-spacing-2);    /* 8px */
    --ats-spacing-md: var(--ats-spacing-4);    /* 16px */
    --ats-spacing-lg: var(--ats-spacing-6);    /* 24px */
    --ats-spacing-xl: var(--ats-spacing-8);    /* 32px */
    
    /* ========== DIMENSIONES ========== */
    
    /* Alturas estándar */
    --ats-height-xs: 32px;
    --ats-height-sm: 36px;
    --ats-height-md: 44px;
    --ats-height-lg: 48px;
    --ats-height-xl: 56px;
    
    /* Anchos máximos */
    --ats-max-width-xs: 320px;
    --ats-max-width-sm: 384px;
    --ats-max-width-md: 448px;
    --ats-max-width-lg: 512px;
    --ats-max-width-xl: 576px;
    --ats-max-width-2xl: 672px;
    --ats-max-width-3xl: 768px;
    --ats-max-width-4xl: 896px;
    --ats-max-width-5xl: 1024px;
    --ats-max-width-6xl: 1152px;
    --ats-max-width-7xl: 1280px;
    
    /* ========== BORDES ========== */
    
    /* Anchos de borde */
    --ats-border-width: 1px;
    --ats-border-width-2: 2px;
    --ats-border-width-4: 4px;
    
    /* Radios de borde */
    --ats-border-radius-none: 0;
    --ats-border-radius-sm: 4px;
    --ats-border-radius-md: 8px;
    --ats-border-radius-lg: 12px;
    --ats-border-radius-xl: 16px;
    --ats-border-radius-2xl: 20px;
    --ats-border-radius-full: 9999px;
    
    /* ========== SOMBRAS ========== */
    
    /* Sombras de caja */
    --ats-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --ats-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.1);
    --ats-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.1);
    --ats-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.1);
    
    /* Sombras de focus */
    --ats-shadow-focus-primary: 0 0 0 3px rgba(72, 187, 120, 0.2);
    --ats-shadow-focus-error: 0 0 0 3px rgba(229, 62, 62, 0.2);
    --ats-shadow-focus-warning: 0 0 0 3px rgba(237, 137, 54, 0.2);
    
    /* ========== TRANSICIONES ========== */
    
    /* Duraciones */
    --ats-duration-fast: 150ms;
    --ats-duration-normal: 250ms;
    --ats-duration-slow: 350ms;
    
    /* Funciones de tiempo */
    --ats-ease-linear: linear;
    --ats-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ats-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ats-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Transiciones comunes */
    --ats-transition-fast: all var(--ats-duration-fast) var(--ats-ease-out);
    --ats-transition-normal: all var(--ats-duration-normal) var(--ats-ease-out);
    --ats-transition-slow: all var(--ats-duration-slow) var(--ats-ease-out);
    
    /* ========== Z-INDEX HIERARCHY ========== */
    
    --ats-z-base: 1;
    --ats-z-docked: 10;
    --ats-z-dropdown: 1000;
    --ats-z-sticky: 1020;
    --ats-z-fixed: 1030;
    --ats-z-modal-backdrop: 1040;
    --ats-z-modal: 1050;
    --ats-z-popover: 1060;
    --ats-z-tooltip: 1070;
    --ats-z-toast: 1080;
    
    /* ========== BREAKPOINTS ========== */
    
    /* Breakpoints responsive */
    --ats-breakpoint-sm: 640px;
    --ats-breakpoint-md: 768px;
    --ats-breakpoint-lg: 1024px;
    --ats-breakpoint-xl: 1280px;
    --ats-breakpoint-2xl: 1536px;
}

/* ==================== RESET CSS PARA EL WIDGET ==================== */

/* Reset específico del widget para evitar conflictos con el tema */
.ats-widget-container,
.ats-widget-container * {
    box-sizing: border-box !important;
}

.ats-widget-container {
    /* Reset de propiedades heredadas del tema */
    all: unset !important;
    
    /* Restablecer display y layout esencial */
    display: block !important;
    position: relative !important;
    isolation: isolate !important;
    
    /* Reset de tipografía */
    font-family: var(--ats-font-family-primary) !important;
    font-size: var(--ats-font-size-sm) !important;
    font-weight: var(--ats-font-weight-normal) !important;
    line-height: var(--ats-line-height-normal) !important;
    color: var(--ats-text-primary) !important;
    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    
    /* Reset de fondo y borde */
    background: var(--ats-bg-primary) !important;
    border: var(--ats-border-width) solid var(--ats-border-color) !important;
    border-radius: var(--ats-border-radius-xl) !important;
    
    /* Reset de espaciado */
    margin: var(--ats-spacing-md) auto !important;
    padding: 0 !important;
    
    /* Reset de dimensiones */
    width: 100% !important;
    max-width: var(--ats-max-width-4xl) !important;
    min-height: auto !important;
    
    /* Reset de overflow */
    overflow: visible !important;
    
    /* Reset de sombra */
    box-shadow: var(--ats-shadow-lg) !important;
    
    /* Reset de transformaciones */
    transform: none !important;
    transition: none !important;
    animation: none !important;
    
    /* Reset de flexbox/grid */
    display: block !important;
    flex: none !important;
    grid: none !important;
    
    /* Reset de z-index */
    z-index: var(--ats-z-base) !important;
    
    /* Contención para mejor performance */
    contain: layout style !important;
}

/* ==================== LAYOUT HORIZONTAL DEL WIDGET ==================== */

.ats-widget-container.ats-horizontal-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: var(--ats-spacing-md) auto !important;
    max-width: var(--ats-max-width-5xl) !important;
    background: var(--ats-bg-primary) !important;
    border-radius: var(--ats-border-radius-xl) !important;
    box-shadow: var(--ats-shadow-lg) !important;
    overflow: hidden !important;
}

/* Wrapper de pestañas */
.ats-tabs-wrapper {
    flex-shrink: 0 !important;
    width: 100% !important;
    position: relative !important;
    z-index: var(--ats-z-docked) !important;
}

/* Wrapper de contenido */
.ats-content-wrapper {
    flex: 1 !important;
    width: 100% !important;
    position: relative !important;
    background: var(--ats-bg-secondary) !important;
    border-radius: 0 0 var(--ats-border-radius-xl) var(--ats-border-radius-xl) !important;
}

/* ==================== UTILIDADES DE LAYOUT ==================== */

/* Flexbox utilities */
.ats-flex {
    display: flex !important;
}

.ats-inline-flex {
    display: inline-flex !important;
}

.ats-flex-col {
    flex-direction: column !important;
}

.ats-flex-row {
    flex-direction: row !important;
}

.ats-items-center {
    align-items: center !important;
}

.ats-items-start {
    align-items: flex-start !important;
}

.ats-items-end {
    align-items: flex-end !important;
}

.ats-justify-center {
    justify-content: center !important;
}

.ats-justify-between {
    justify-content: space-between !important;
}

.ats-justify-start {
    justify-content: flex-start !important;
}

.ats-justify-end {
    justify-content: flex-end !important;
}

/* Grid utilities */
.ats-grid {
    display: grid !important;
}

.ats-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.ats-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.ats-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.ats-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.ats-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* Gap utilities */
.ats-gap-0 { gap: var(--ats-spacing-0) !important; }
.ats-gap-1 { gap: var(--ats-spacing-1) !important; }
.ats-gap-2 { gap: var(--ats-spacing-2) !important; }
.ats-gap-3 { gap: var(--ats-spacing-3) !important; }
.ats-gap-4 { gap: var(--ats-spacing-4) !important; }
.ats-gap-5 { gap: var(--ats-spacing-5) !important; }
.ats-gap-6 { gap: var(--ats-spacing-6) !important; }

/* ==================== UTILIDADES DE TEXTO ==================== */

.ats-text-xs { font-size: var(--ats-font-size-xs) !important; }
.ats-text-sm { font-size: var(--ats-font-size-sm) !important; }
.ats-text-base { font-size: var(--ats-font-size-base) !important; }
.ats-text-lg { font-size: var(--ats-font-size-lg) !important; }
.ats-text-xl { font-size: var(--ats-font-size-xl) !important; }

.ats-font-light { font-weight: var(--ats-font-weight-light) !important; }
.ats-font-normal { font-weight: var(--ats-font-weight-normal) !important; }
.ats-font-medium { font-weight: var(--ats-font-weight-medium) !important; }
.ats-font-semibold { font-weight: var(--ats-font-weight-semibold) !important; }
.ats-font-bold { font-weight: var(--ats-font-weight-bold) !important; }

.ats-text-primary { color: var(--ats-text-primary) !important; }
.ats-text-secondary { color: var(--ats-text-secondary) !important; }
.ats-text-muted { color: var(--ats-text-muted) !important; }
.ats-text-light { color: var(--ats-text-light) !important; }

.ats-text-left { text-align: left !important; }
.ats-text-center { text-align: center !important; }
.ats-text-right { text-align: right !important; }

/* ==================== UTILIDADES DE ESPACIADO ==================== */

/* Margin utilities */
.ats-m-0 { margin: var(--ats-spacing-0) !important; }
.ats-m-1 { margin: var(--ats-spacing-1) !important; }
.ats-m-2 { margin: var(--ats-spacing-2) !important; }
.ats-m-3 { margin: var(--ats-spacing-3) !important; }
.ats-m-4 { margin: var(--ats-spacing-4) !important; }

.ats-mt-0 { margin-top: var(--ats-spacing-0) !important; }
.ats-mt-1 { margin-top: var(--ats-spacing-1) !important; }
.ats-mt-2 { margin-top: var(--ats-spacing-2) !important; }
.ats-mt-3 { margin-top: var(--ats-spacing-3) !important; }
.ats-mt-4 { margin-top: var(--ats-spacing-4) !important; }

.ats-mb-0 { margin-bottom: var(--ats-spacing-0) !important; }
.ats-mb-1 { margin-bottom: var(--ats-spacing-1) !important; }
.ats-mb-2 { margin-bottom: var(--ats-spacing-2) !important; }
.ats-mb-3 { margin-bottom: var(--ats-spacing-3) !important; }
.ats-mb-4 { margin-bottom: var(--ats-spacing-4) !important; }

/* Padding utilities */
.ats-p-0 { padding: var(--ats-spacing-0) !important; }
.ats-p-1 { padding: var(--ats-spacing-1) !important; }
.ats-p-2 { padding: var(--ats-spacing-2) !important; }
.ats-p-3 { padding: var(--ats-spacing-3) !important; }
.ats-p-4 { padding: var(--ats-spacing-4) !important; }

.ats-pt-0 { padding-top: var(--ats-spacing-0) !important; }
.ats-pt-1 { padding-top: var(--ats-spacing-1) !important; }
.ats-pt-2 { padding-top: var(--ats-spacing-2) !important; }
.ats-pt-3 { padding-top: var(--ats-spacing-3) !important; }
.ats-pt-4 { padding-top: var(--ats-spacing-4) !important; }

.ats-pb-0 { padding-bottom: var(--ats-spacing-0) !important; }
.ats-pb-1 { padding-bottom: var(--ats-spacing-1) !important; }
.ats-pb-2 { padding-bottom: var(--ats-spacing-2) !important; }
.ats-pb-3 { padding-bottom: var(--ats-spacing-3) !important; }
.ats-pb-4 { padding-bottom: var(--ats-spacing-4) !important; }

/* ==================== RESPONSIVE DESIGN ==================== */

/* Smartphone portrait */
@media (max-width: 480px) {
    :root {
        --ats-spacing-md: var(--ats-spacing-3);
        --ats-spacing-lg: var(--ats-spacing-4);
        --ats-spacing-xl: var(--ats-spacing-5);
    }
    
    .ats-widget-container {
        margin: var(--ats-spacing-2) var(--ats-spacing-2) !important;
        border-radius: var(--ats-border-radius-lg) !important;
    }
    
    .ats-widget-container.ats-horizontal-layout {
        border-radius: var(--ats-border-radius-lg) !important;
    }
    
    .ats-content-wrapper {
        border-radius: 0 0 var(--ats-border-radius-lg) var(--ats-border-radius-lg) !important;
    }
}

/* Tablet portrait */
@media (max-width: 768px) {
    .ats-widget-container {
        margin: var(--ats-spacing-3) var(--ats-spacing-3) !important;
        max-width: none !important;
    }
}

/* ==================== MODO OSCURO ==================== */

@media (prefers-color-scheme: dark) {
    :root {
        /* Colores invertidos para modo oscuro */
        --ats-text-primary: #e2e8f0;
        --ats-text-secondary: #cbd5e0;
        --ats-text-muted: #a0aec0;
        
        --ats-bg-primary: #1a202c;
        --ats-bg-secondary: #2d3748;
        --ats-bg-muted: #4a5568;
        
        --ats-border-color: #4a5568;
        --ats-border-color-dark: #718096;
        
        /* Mantener colores primarios para consistencia */
        --ats-primary-color: #48bb78;
        --ats-primary-dark: #38a169;
        --ats-primary-light: #68d391;
    }
}

/* ==================== ACCESIBILIDAD ==================== */

/* Reducir movimiento para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
    :root {
        --ats-transition-fast: none;
        --ats-transition-normal: none;
        --ats-transition-slow: none;
    }
    
    .ats-widget-container,
    .ats-widget-container * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Alto contraste */
@media (prefers-contrast: high) {
    :root {
        --ats-border-color: #000000;
        --ats-border-color-dark: #000000;
        --ats-text-primary: #000000;
        --ats-bg-primary: #ffffff;
    }
}

/* ==================== FOCUS MANAGEMENT ==================== */

/* Focus outline personalizado para el widget */
.ats-widget-container *:focus {
    outline: 2px solid var(--ats-primary-color) !important;
    outline-offset: 2px !important;
}

/* Ocultar outline en elementos que manejan focus internamente */
.ats-widget-container .ats-tab-button:focus,
.ats-widget-container .ats-field-input:focus,
.ats-widget-container .ats-field-select:focus,
.ats-widget-container .ats-search-button:focus {
    outline: none !important;
}

/* ==================== PRINT STYLES ==================== */

@media print {
    .ats-widget-container {
        box-shadow: none !important;
        border: 1px solid #000000 !important;
        page-break-inside: avoid !important;
    }
    
    .ats-widget-container * {
        color: #000000 !important;
        background: transparent !important;
    }
}

/*
================================================================================
BASE CSS v3.2.2-FIXED-HORIZONTAL ✅
================================================================================

🔧 SISTEMA BASE COMPLETO IMPLEMENTADO:

✅ VARIABLES CSS PERSONALIZABLES:
- Colores principales totalmente configurables
- Sistema de espaciado base 4px consistente
- Tipografía modular y escalable
- Z-index hierarchy organizado
- Breakpoints responsive definidos

✅ RESET CSS ROBUSTO:
- Reset específico del widget sin afectar el tema
- Contención para mejor performance
- Isolation para evitar conflictos CSS
- Reset de flexbox/grid heredados

✅ LAYOUT HORIZONTAL:
- Contenedor principal optimizado para layout horizontal
- Wrapper de pestañas y contenido separados
- Estructura semántica y accesible
- Overflow control apropiado

✅ UTILIDADES DE LAYOUT:
- Flexbox utilities completas
- Grid utilities responsivas
- Spacing utilities consistentes
- Text utilities modulares

✅ RESPONSIVE DESIGN:
- Mobile-first approach
- Breakpoints específicos del widget
- Adaptación automática de espaciado
- Touch-friendly en dispositivos móviles

✅ ACCESIBILIDAD:
- Focus management apropiado
- Reduced motion support
- High contrast mode
- Print styles optimizados
- Screen reader friendly

✅ PERSONALIZACIÓN:
- Variables CSS para fácil customización desde admin
- Dark mode support automático
- Temas predefinidos extensibles
- Sistema modular y mantenible

🎯 RESULTADO: Sistema base robusto que sirve como fundación para el widget horizontal
================================================================================
*/