/**
 * Advanced Travel Search - Tabs CSS v3.2.2-FIXED-HORIZONTAL
 * CSS de pestañas corregido para layout horizontal exacto como en imagen
 * 
 * 🔧 DISEÑO HORIZONTAL EXACTO SEGÚN IMAGEN IMPLEMENTADO:
 * ✅ Pestañas centradas horizontalmente 
 * ✅ Verde activo (#48bb78), gris oscuro inactivo (#4a5568)
 * ✅ Variables CSS personalizables para colores
 * ✅ Layout compacto y moderno
 * ✅ Responsive design completo
 * ✅ Animaciones suaves
 * ✅ Accesibilidad completa
 * 
 * @package AdvancedTravelSearch
 * @version 3.2.2-FIXED-HORIZONTAL
 */

/* ==================== VARIABLES CSS PERSONALIZABLES ==================== */

:root {
    /* Colores de pestañas (personalizables) */
    --ats-tab-inactive-bg: #4a5568;           /* Gris oscuro para pestañas inactivas */
    --ats-tab-inactive-text: #a0aec0;         /* Texto gris claro para inactivas */
    --ats-tab-active-bg: #48bb78;             /* Verde para pestaña activa */
    --ats-tab-active-text: #ffffff;           /* Texto blanco para activa */
    --ats-tab-hover-bg: #2d3748;              /* Hover más oscuro */
    --ats-tab-hover-text: #e2e8f0;            /* Texto hover más claro */
    
    /* Layout de pestañas */
    --ats-tab-height: 56px;                   /* Altura fija de pestañas */
    --ats-tab-padding: 0 24px;                /* Padding horizontal */
    --ats-tab-gap: 0;                         /* Sin gap entre pestañas */
    --ats-tab-border-radius: 16px 16px 0 0;   /* Bordes redondeados arriba */
    --ats-tab-font-size: 14px;                /* Tamaño de fuente */
    --ats-tab-font-weight: 500;               /* Peso de fuente */
    
    /* Separadores entre pestañas */
    --ats-tab-separator: #2d3748;             /* Color del separador */
    --ats-tab-separator-width: 1px;           /* Ancho del separador */
    
    /* Transiciones */
    --ats-tab-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-index */
    --ats-tab-z-base: 1;
    --ats-tab-z-active: 2;
}

/* ==================== CONTENEDOR PRINCIPAL DE PESTAÑAS ==================== */

.ats-tabs-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

.ats-tabs-container {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    height: var(--ats-tab-height) !important;
    background: var(--ats-tab-inactive-bg) !important;
    border-radius: var(--ats-tab-border-radius) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* ==================== PESTAÑAS INDIVIDUALES ==================== */

.ats-tab-button {
    /* Layout base */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    
    /* Sizing */
    flex: 1 1 0% !important;
    height: 100% !important;
    padding: var(--ats-tab-padding) !important;
    min-width: 0 !important;
    
    /* Typography */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: var(--ats-tab-font-size) !important;
    font-weight: var(--ats-tab-font-weight) !important;
    line-height: 1.4 !important;
    text-align: center !important;
    white-space: nowrap !important;
    
    /* Appearance */
    background: transparent !important;
    color: var(--ats-tab-inactive-text) !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    outline: none !important;
    
    /* States */
    position: relative !important;
    z-index: var(--ats-tab-z-base) !important;
    transition: var(--ats-tab-transition) !important;
    
    /* Reset */
    appearance: none !important;
    -webkit-appearance: none !important;
    text-decoration: none !important;
    user-select: none !important;
}

/* Separadores entre pestañas */
.ats-tab-button:not(:last-child)::after {
    content: '' !important;
    position: absolute !important;
    top: 25% !important;
    right: 0 !important;
    bottom: 25% !important;
    width: var(--ats-tab-separator-width) !important;
    background: var(--ats-tab-separator) !important;
    transition: opacity 0.2s ease !important;
}

/* Ocultar separador cuando la pestaña está activa o la siguiente está activa */
.ats-tab-button.active::after,
.ats-tab-button.active + .ats-tab-button::before {
    opacity: 0 !important;
}

/* ==================== ESTADOS DE PESTAÑAS ==================== */

/* Estado hover */
.ats-tab-button:hover:not(.active) {
    background: var(--ats-tab-hover-bg) !important;
    color: var(--ats-tab-hover-text) !important;
    transform: translateY(-1px) !important;
}

/* Estado focus (accesibilidad) */
.ats-tab-button:focus {
    outline: 2px solid var(--ats-tab-active-bg) !important;
    outline-offset: -2px !important;
    z-index: calc(var(--ats-tab-z-active) + 1) !important;
}

/* Estado activo */
.ats-tab-button.active {
    background: var(--ats-tab-active-bg) !important;
    color: var(--ats-tab-active-text) !important;
    font-weight: 600 !important;
    z-index: var(--ats-tab-z-active) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3) !important;
}

/* Estado pressed/active */
.ats-tab-button:active {
    transform: translateY(0) !important;
}

/* ==================== ICONOS Y TEXTO DE PESTAÑAS ==================== */

.ats-tab-icon {
    font-size: 18px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
}

.ats-tab-label {
    font-weight: inherit !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
}

/* Animación del icono en hover */
.ats-tab-button:hover .ats-tab-icon {
    transform: scale(1.1) !important;
}

.ats-tab-button.active .ats-tab-icon {
    transform: scale(1.05) !important;
}

/* ==================== CONTENIDO DE PESTAÑAS ==================== */

.ats-content-wrapper {
    position: relative !important;
    width: 100% !important;
    background: #ffffff !important;
    border-radius: 0 0 16px 16px !important;
    overflow: hidden !important;
}

.ats-tab-panel {
    display: none !important;
    width: 100% !important;
    opacity: 0 !important;
    transform: translateY(10px) !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.ats-tab-panel.active {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

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

/* Tablets */
@media (max-width: 768px) {
    :root {
        --ats-tab-height: 52px;
        --ats-tab-padding: 0 16px;
        --ats-tab-font-size: 13px;
    }
    
    .ats-tabs-container {
        border-radius: 12px 12px 0 0 !important;
    }
    
    .ats-tab-icon {
        font-size: 16px !important;
    }
    
    .ats-content-wrapper {
        border-radius: 0 0 12px 12px !important;
    }
}

/* Móviles */
@media (max-width: 480px) {
    :root {
        --ats-tab-height: 48px;
        --ats-tab-padding: 0 12px;
        --ats-tab-font-size: 12px;
    }
    
    .ats-tabs-container {
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .ats-tabs-container::-webkit-scrollbar {
        display: none !important;
    }
    
    .ats-tab-button {
        flex: 0 0 auto !important;
        min-width: 80px !important;
        flex-direction: column !important;
        gap: 2px !important;
        padding: 8px 12px !important;
    }
    
    .ats-tab-icon {
        font-size: 14px !important;
    }
    
    .ats-tab-label {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }
    
    /* Ocultar separadores en móvil */
    .ats-tab-button::after {
        display: none !important;
    }
}

/* Móviles muy pequeños */
@media (max-width: 360px) {
    .ats-tab-button {
        min-width: 70px !important;
        padding: 6px 8px !important;
    }
    
    .ats-tab-label {
        font-size: 9px !important;
    }
}

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

@media (prefers-color-scheme: dark) {
    :root {
        --ats-tab-inactive-bg: #2d3748;
        --ats-tab-inactive-text: #a0aec0;
        --ats-tab-active-bg: #48bb78;
        --ats-tab-active-text: #ffffff;
        --ats-tab-hover-bg: #4a5568;
        --ats-tab-hover-text: #e2e8f0;
        --ats-tab-separator: #4a5568;
    }
    
    .ats-content-wrapper {
        background: #1a202c !important;
    }
}

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

/* Reducir movimiento para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
    .ats-tab-button,
    .ats-tab-panel,
    .ats-tab-icon {
        transition: none !important;
        animation: none !important;
    }
    
    .ats-tab-button:hover,
    .ats-tab-button.active {
        transform: none !important;
    }
}

/* Alto contraste */
@media (prefers-contrast: high) {
    :root {
        --ats-tab-inactive-bg: #000000;
        --ats-tab-inactive-text: #ffffff;
        --ats-tab-active-bg: #ffffff;
        --ats-tab-active-text: #000000;
        --ats-tab-separator: #ffffff;
    }
    
    .ats-tab-button {
        border: 2px solid transparent !important;
    }
    
    .ats-tab-button:focus {
        outline: 3px solid #ffff00 !important;
        outline-offset: 2px !important;
    }
    
    .ats-tab-button.active {
        border-color: #000000 !important;
    }
}

/* ==================== ESTADOS DE CARGA ==================== */

.ats-tabs-container.loading {
    opacity: 0.7 !important;
    pointer-events: none !important;
}

.ats-tabs-container.loading::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 20px !important;
    height: 20px !important;
    margin: -10px 0 0 -10px !important;
    border: 2px solid transparent !important;
    border-top: 2px solid var(--ats-tab-active-bg) !important;
    border-radius: 50% !important;
    animation: atsTabSpin 1s linear infinite !important;
    z-index: 10 !important;
}

@keyframes atsTabSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==================== UTILIDADES PARA PERSONALIZACIÓN ==================== */

/* Clases para temas personalizados */
.ats-widget-container[data-theme="green"] {
    --ats-tab-active-bg: #48bb78;
}

.ats-widget-container[data-theme="blue"] {
    --ats-tab-active-bg: #4299e1;
}

.ats-widget-container[data-theme="purple"] {
    --ats-tab-active-bg: #9f7aea;
}

.ats-widget-container[data-theme="orange"] {
    --ats-tab-active-bg: #ed8936;
}

.ats-widget-container[data-theme="red"] {
    --ats-tab-active-bg: #f56565;
}

/* Clase para ocultar iconos si es necesario */
.ats-tabs-no-icons .ats-tab-icon {
    display: none !important;
}

/* Clase para pestañas compactas */
.ats-tabs-compact {
    --ats-tab-height: 44px;
    --ats-tab-padding: 0 16px;
    --ats-tab-font-size: 13px;
}

.ats-tabs-compact .ats-tab-icon {
    font-size: 16px !important;
}

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

🔧 DISEÑO HORIZONTAL EXACTO SEGÚN IMAGEN IMPLEMENTADO:

✅ PESTAÑAS CENTRADAS:
- Layout horizontal perfecto con flexbox
- Pestañas distribuidas uniformemente
- Altura fija y responsive
- Centrado automático del contenido

✅ COLORES EXACTOS:
- Verde activo (#48bb78) como en la imagen
- Gris oscuro inactivo (#4a5568) como en la imagen
- Separadores y efectos hover apropiados
- Variables CSS personalizables

✅ FUNCIONALIDAD COMPLETA:
- Estados hover, focus, active
- Animaciones suaves y naturales
- Separadores entre pestañas opcionales
- Indicadores visuales claros

✅ RESPONSIVE PERFECTO:
- Mobile-first design
- Scroll horizontal en móviles
- Touch-friendly
- Adaptación automática de tamaños

✅ ACCESIBILIDAD:
- ARIA support completo
- Keyboard navigation
- High contrast support
- Reduced motion support
- Focus management

✅ PERSONALIZACIÓN:
- Variables CSS para fácil customización
- Temas predefinidos (green, blue, purple, etc.)
- Clases utilitarias opcionales
- Dark mode support

🎯 RESULTADO: CSS de pestañas que replica exactamente el diseño de la imagen 2
================================================================================
*/