body { font-family: 'Inter', sans-serif; font-size: 14px; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideUp { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        
        .animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }
        .animate-slide-up { animation: slideUp 0.3s ease-out forwards; }
        
        /* Botones de Horario: Azul Pleno al seleccionar */
        .time-btn:hover {
            background-color: #EFF6FF; /* blue-50 */
            color: #2563EB !important; /* blue-600 */
            border-color: #60A5FA; /* blue-400 */
        }
        .time-btn.selected {
            background-color: #2563EB !important; /* blue-600 */
            color: white !important;
            border-color: #2563EB !important;
            box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.4); /* Sombra suave */
            font-weight: 600;
        }

        /* Día seleccionado en calendario */
        .day-btn.selected {
            background-color: #2563EB; /* blue-600 */
            color: white !important;
            font-weight: 700;
            box-shadow: 0 2px 4px -1px rgba(37, 99, 235, 0.3);
        }

        pre{
            white-space: normal;
        }

        /* Excluir #tags-container para no romper el layout flex de los chips */
        #profile-details span:not(#tags-container span){
            text-indent: 0 !important;
            display: block !important;
        }

        .input-field:focus {
            border-color: #3B82F6;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
        }

        /* Estrellas de calificación final */
        .rate-star:hover { fill: #FACC15; color: #FACC15; transform: scale(1.1); }
        .rate-star.active { fill: #FACC15; color: #FACC15; }

        /* Filtro de Reviews Activo */
        .review-filter-btn.active {
            background-color: #111827; /* gray-900 */
            color: white;
            border-color: #111827;
        }

        /* intl-tel-input customization */
        .iti {
            width: 100%;
            position: relative;
        }
        .iti__flag-container {
            padding: 0;
        }
        .iti__selected-flag {
            padding: 0 8px 0 12px;
            background-color: #F9FAFB;
            border-right: 1px solid #E5E7EB;
        }
        .iti__selected-flag:hover {
            background-color: #F3F4F6;
        }
        
        /* Dropdown sin overlay - se abre debajo del input */
        .iti__country-list {
            position: absolute !important;
            top: 100% !important;
            left: 0 !important;
            right: auto !important;
            margin-top: 4px;
            border: 1px solid #E5E7EB;
            border-radius: 8px;
            background-color: white;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            max-height: 200px;
            overflow-y: auto;
            z-index: 1000;
        }
        
        /* Eliminar cualquier overlay/backdrop */
        .iti__country-list::before,
        .iti__country-list::after {
            display: none !important;
        }
        
        .iti__country {
            padding: 8px 12px;
        }
        .iti__country:hover {
            background-color: #EFF6FF;
        }
        .iti__country.iti__highlight {
            background-color: #DBEAFE;
        }
        .iti__country.iti__active {
            background-color: #2563EB;
            color: white;
        }
        
        #phone {
            padding-left: 60px !important;
        }

        .calendar-day.active, .time-slot.active, .service-item.active { background-color: #2563eb; color: white !important; font-weight: bold; }
        .service-item.active span,
        .service-item.active p {
            color: white !important;
        }

        .calendar-day.active:hover, .service-item.active:hover{
            color: #2563eb !important;
        }

        .service-item.active .duration-span{
            color: #111827 !important;
        }

        /* ============================================
   FIX PARA SELECTS E INPUTS EN SAFARI/iOS
   ============================================ */

    /* Estilos base para todos los selects */
    select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    }

    /* Estilos base para inputs tipo date */
    input[type="date"] {
    -webkit-appearance: none !important;
    -moz-appearance: none;
    appearance: none;
    max-width: 100%;
    box-sizing: border-box;
    }

    /* Fix específico para Safari (desktop y mobile) */
    @supports (-webkit-touch-callout: none) {
    /* Solo para dispositivos iOS/Safari */
    
    /* Todos los selects en Safari */
    select {
        -webkit-appearance: none !important;
        appearance: none !important;
        background-image: none;
        padding-right: 2.5rem !important;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    
    /* Selects con icono a la izquierda (pl-10) */
    select[class*="pl-10"] {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }
    
    /* Inputs tipo date con icono a la izquierda */
    input[type="date"][class*="pl-10"] {
        -webkit-appearance: none !important;
        appearance: none !important;
        padding-left: 2.5rem !important;
        padding-right: 0.75rem !important;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    
    /* Ocultar el icono nativo del calendario en Safari */
    input[type="date"]::-webkit-calendar-picker-indicator {
        opacity: 0;
        position: absolute;
        right: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    
    /* Asegurar que el contenedor del select/input tenga overflow hidden */
    .relative:has(select),
    .relative:has(input[type="date"]) {
        overflow: hidden;
    }
    
    /* Ajustar iconos Lucide dentro de selects e inputs */
    .relative > select + i[data-lucide],
    .relative > input[type="date"] + i[data-lucide] {
        pointer-events: none;
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
    }
    }

    /* Ajustes adicionales para Safari en cualquier dispositivo */
    @media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        select {
        padding-right: 2.5rem !important;
        }
        
        select[class*="pl-10"] {
        padding-left: 2.5rem !important;
        }
    }
    }

    /* Ajustes para dispositivos móviles en general */
    @media (max-width: 768px) {
    /* Todos los selects en mobile */
    select {
        font-size: 0.875rem !important;
        line-height: 1.25rem !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    
    /* Todos los inputs tipo date en mobile */
    input[type="date"] {
        font-size: 0.875rem !important;
        line-height: 1.25rem !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    
    /* Selects con icono izquierdo */
    select[class*="pl-10"] {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }
    
    /* Inputs tipo date con icono izquierdo */
    input[type="date"][class*="pl-10"] {
        padding-left: 2.5rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Selects sin icono izquierdo */
    select:not([class*="pl-10"]) {
        padding-left: 0.75rem !important;
        padding-right: 2.5rem !important;
    }
    
    /* Ajustar posición de iconos en contenedores relativos */
    .relative > i[data-lucide]:first-of-type {
        left: 0.75rem !important;
    }
    
    .relative > i[data-lucide]:last-of-type {
        right: 0.75rem !important;
    }
    }