* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;   background: linear-gradient(135deg, #04043d 0%, #0c08ff 100%); min-height: 100vh; }
        .landing-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 30px; text-align: center; color: white; }
        .landing-logo { margin-bottom: 10px; margin-top:-20px }
        .landing-logo span { display: inline-block; background: white; color: #0c08ff; padding: 10px 20px; border-radius: 10px; margin: 0 5px; }
        .landing-tagline { font-size: 1.2rem; margin-bottom: 40px; opacity: 0.95; }
        .landing-cta { padding: 25px 40px; background: #ec0404; color: white; border: none; border-radius: 25px; font-size: 1.5rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 20px rgba(255, 93, 158, 0.4); margin-bottom: 15px; }
        .landing-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255, 93, 158, 0.6); }
        .landing-signin { margin-top: 20px; color: white; font-size: 0.9rem; }
        .landing-signin a { color: white; text-decoration: underline; cursor: pointer; }
        .auth-container { display: none; }
        .auth-container.active { display: block; }
        .auth-header { text-align: center; margin-bottom: 30px; }
        .auth-header h2 { color: #0c08ff; margin-bottom: 10px; }
        .auth-header p { color: #666; font-size: 0.9rem; }
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; margin-bottom: 8px; color: #333; font-weight: 600; font-size: 0.9rem; }
        .form-group input { width: 100%; padding: 12px 15px; border: 2px solid #E5E5E5; border-radius: 10px; font-size: 1rem; transition: all 0.3s ease; }
        .form-group input:focus { outline: none; border-color: #0c08ff; }
        .form-actions { display: flex; gap: 10px; margin-top: 25px; }
        .auth-btn { flex: 1; padding: 12px; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
        .auth-btn-primary { background: #0c08ff; color: white; }
        .auth-btn-secondary { background: #FF5D9E; color: white; }
        .auth-btn:hover { transform: scale(1.05); }
        .auth-toggle { text-align: center; margin-top: 20px; color: #666; font-size: 0.9rem; }
        .auth-toggle a { color: #0c08ff; font-weight: 600; cursor: pointer; }
        .app-container { display: none; max-width: 1400px; margin: 0 auto; background: #F5F5F5; min-height: 100vh; }
        .app-container.active { display: block; }
        .main-header { background: #0c08ff; color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .header-logo { font-size: 1.5rem; font-weight: bold; letter-spacing: 2px; cursor: pointer; }
        .header-user { display: flex; align-items: center; gap: 15px; }
        .user-avatar { width: 40px; height: 40px; background: white; color: #0c08ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; cursor: pointer; }
        .main-nav { background: white; padding: 15px 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        .search-bar { max-width: 600px; margin: 0 auto; position: relative; display: flex; align-items: center; background: #F5F5F5; border-radius: 25px; padding: 5px 10px; }
        .search-icon { color: #666; margin: 0 10px; }
        .search-input { flex: 1; border: none; background: transparent; padding: 12px; font-size: 1rem; outline: none; }
        .main-content { padding: 20px; padding-bottom: 100px; }
        .categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 30px; }
        .category-card { background: white; border-radius: 15px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
        .category-card:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0,0,0,0.15); }
        .category-icon { font-size: 2.5rem; margin-bottom: 10px; }
        .category-name { font-weight: 600; color: #333; }
        .map-search-container { background: white; border-radius: 15px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); margin-bottom: 30px; }
        .section-title { font-size: 1.3rem; color: #333; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
        #barberMap { width: 100%; height: 500px; border-radius: 15px; margin-bottom: 20px; }
        .barbers-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; }
        .barber-card { background: white; border-radius: 15px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); transition: all 0.3s ease; cursor: pointer; }
        .barber-card:hover { transform: translateY(-3px); box-shadow: 0 5px 20px rgba(0,0,0,0.15); }
        .barber-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
        .barber-avatar { width: 60px; height: 60px; background: linear-gradient(135deg, #0c08ff, #00B87A); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 1.3rem; }
        .barber-info h4 { margin: 0 0 5px 0; color: #333; }
        .barber-specialty { color: #666; font-size: 0.9rem; }
        .barber-rating { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
        .stars { color: #FFD700; }
        .rating-text { color: #666; font-size: 0.9rem; }
        .barber-distance { color: #0c08ff; font-weight: 600; font-size: 0.9rem; }
        .barber-actions { display: flex; gap: 10px; margin-top: 15px; }
        .btn { flex: 1; padding: 10px; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
        .btn-primary { background: #FF5D9E; color: white; }
        .btn-secondary { background: #F5F5F5; color: #333; }
        .btn:hover { transform: scale(1.05); }
        .booking-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 2000; align-items: center; justify-content: center; }
        .booking-modal.active { display: flex; }
        .booking-content { background: white; border-radius: 20px; padding: 30px; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; }
        .booking-header { text-align: center; margin-bottom: 25px; }
        .booking-header h2 { color: #0c08ff; margin-bottom: 10px; }
        .date-selector { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 20px; }
        .date-item { padding: 10px; text-align: center; border: 2px solid #E5E5E5; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; }
        .date-item:hover, .date-item.selected { background: #0c08ff; color: white; border-color: #0c08ff; }
        .time-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
        .time-slot { padding: 12px; text-align: center; border: 2px solid #E5E5E5; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; }
        .time-slot:hover, .time-slot.selected { background: #FF5D9E; color: white; border-color: #FF5D9E; }
        .service-selector { margin-bottom: 20px; }
        .service-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; background: #F5F5F5; border-radius: 10px; margin-bottom: 10px; cursor: pointer; transition: all 0.3s ease; }
        .service-item:hover, .service-item.selected { background: #0c08ff; color: white; }
        .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
        .product-card { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.08); transition: all 0.3s ease; cursor: pointer; }
        .product-card:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0,0,0,0.15); }
        .product-image { width: 100%; height: 200px; background: linear-gradient(135deg, #E5E5E5, #D5D5D5); display: flex; align-items: center; justify-content: center; font-size: 3rem; }
        .product-info { padding: 15px; }
        .product-name { font-weight: 600; color: #333; margin-bottom: 5px; }
        .product-price { color: #0c08ff; font-size: 1.2rem; font-weight: bold; margin-bottom: 10px; }
        .add-to-cart { width: 100%; padding: 10px; background: #FF5D9E; color: white; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
        .add-to-cart:hover { background: #FF4D8E; }
        .cart-badge { position: absolute; top: -8px; right: -8px; background: #FF5D9E; color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: bold; }
        .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: white; display: flex; justify-content: space-around; padding: 10px 0; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 1000; }
        .nav-item { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 20px; cursor: pointer; color: #666; transition: all 0.3s ease; text-decoration: none; position: relative; }
        .nav-item.active { color: #0c08ff; }
        .nav-item i { font-size: 1.3rem; }
        .nav-item span { font-size: 0.75rem; }
        .user-menu { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 2000; align-items: center; justify-content: center; }
        .user-menu.active { display: flex; }
        .user-menu-content { background: white; max-height: 600px; border-radius: 20px; padding: 20px; max-width: 400px; width: 88%; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
        .user-menu-header { text-align: center; margin-bottom: 15px; }
        .user-menu-avatar { width: 80px; height: 80px; background: linear-gradient(135deg, #FF5D9E, #FF8E8E); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; font-weight: bold; margin: 0 auto 15px; }
        .user-menu-name { font-size: 1.3rem; font-weight: 600; color: #333; }
        .menu-options { display: flex; flex-direction: column; gap: 15px; }
        .menu-option { display: flex; align-items: center; gap: 15px; padding: 10px; background: #F5F5F5; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; }
        .menu-option:hover { background: #E5E5E5; transform: translateX(5px); }
        .menu-option i { font-size: 1.2rem; color: #0c08ff; }
        .close-menu { margin-top: 10px; padding: 10px; background: #FF5D9E; color: white; border: none; border-radius: 10px; width: 100%; font-weight: 600; cursor: pointer; }
        .barber-profile { display: none; background: white; min-height: 100vh; padding-bottom: 80px; }
        .barber-profile.active { display: block; }
        .profile-header { background: linear-gradient(135deg, #0c08ff, #00B87A); padding: 30px 20px; text-align: center; color: white; position: relative; }
        .profile-avatar { width: 100px; height: 100px; background: white; color: #0c08ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: bold; margin: 0 auto 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.2); }
        .profile-name { font-size: 1.5rem; margin-bottom: 5px; }
        .profile-title { opacity: 0.9; margin-bottom: 15px; }
        .profile-rating { display: flex; justify-content: center; align-items: center; gap: 10px; }
        .profile-content { padding: 20px; }
        .profile-section { margin-bottom: 30px; }
        .profile-section h3 { color: #333; margin-bottom: 15px; font-size: 1.1rem; }
        .profile-description { color: #666; line-height: 1.6; background: #F5F5F5; padding: 15px; border-radius: 10px; }
        .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .gallery-item { aspect-ratio: 1; background: linear-gradient(135deg, #E5E5E5, #D5D5D5); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #999; }
        .back-button { position: absolute; top: 20px; left: 20px; width: 40px; height: 40px; background: rgba(255,255,255,0.3); border: none; border-radius: 50%; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
        .loading-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 3000; align-items: center; justify-content: center; }
        .loading-overlay.active { display: flex; }
        .loading-spinner { width: 50px; height: 50px; border: 5px solid #F5F5F5; border-top-color: #0c08ff; border-radius: 50%; animation: spin 1s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }
    @media (max-width: 768px) { .landing-logo { font-size: 0.5rem; } img#logo_barber {
    width: 370px; height: 416px; } div#homeSuggestionsDropdown { top: 87% !important;left: 20px !important; max-width: 338px !important; } input#minPriceFilter { max-width: 99px; } input#maxPriceFilter {  max-width: 99px; } input#maxPrice {  max-width: 133px; } input#minPrice { max-width: 140px; } input#minPriceFilter { max-width: 99px;}  .ai-barber-avatar { width: 48px !important; height: 36px !important; } .landing-tagline { font-size: 1.0rem; margin-bottom: 18px;  margin-top: 22px;} .categories-grid { grid-template-columns: repeat(2, 1fr); } .barbers-list { grid-template-columns: 1fr; } #barberMap { height: 300px; } .time-slots { grid-template-columns: repeat(2, 1fr); } }



button#btn_as {
    padding: 25px 27px;
}

/* ============================================ */
/* LANDING PAGE MEJORADA                        */
/* ============================================ */
.landing-page {
    position: relative;
    overflow: hidden;
}
.landing-particles {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
}
.landing-page > *:not(.landing-particles) {
    position: relative;
    z-index: 1;
}
.landing-logo {
    margin-bottom: 10px;
    margin-top: -20px;
    animation: logoFloat 3s ease-in-out infinite;
}
@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.landing-features {
    display: flex;
    gap: 20px;
    margin-bottom: 35px;
    flex-wrap: wrap;
    justify-content: center;
}
.landing-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    padding: 10px 18px;
    border-radius: 25px;
    font-size: 0.85rem;
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}
.landing-feature-item:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-2px);
}
.landing-feature-item i {
    font-size: 1rem;
}

/* ============================================ */
/* MÓDULOS AUTH MEJORADOS                        */
/* ============================================ */
.auth-container {
    display: none;
    max-width: 440px;
    width: 92%;
    background: white;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3000;
    max-height: 92vh;
    overflow-y: auto;
    animation: authSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.auth-container.active {
    display: block;
}
@keyframes authSlideIn {
    from { opacity: 0; transform: translate(-50%, -45%) scale(0.95); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.auth-container::-webkit-scrollbar { width: 4px; }
.auth-container::-webkit-scrollbar-thumb { background: #0c08ff; border-radius: 2px; }

.auth-header-bar {
    background: linear-gradient(135deg, #04043d 0%, #0c08ff 100%);
    padding: 20px 25px;
    border-radius: 24px 24px 0 0;
    display: flex;
    align-items: center;
    gap: 15px;
    position: sticky;
    top: 0;
    z-index: 2;
}
.auth-header-bar h2 {
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
}
.auth-back-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.3s ease;
}
.auth-back-btn:hover {
    background: rgba(255,255,255,0.35);
}

.auth-body {
    padding: 25px;
}
.auth-subtitle {
    text-align: center;
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 22px;
}
.auth-welcome-icon {
    text-align: center;
    margin-bottom: 10px;
}
.welcome-avatar-circle {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #0c08ff, #021741);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    box-shadow: 0 8px 25px #0c08ff73;
}

/* Selector de tipo de usuario */
.user-type-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
    background: #F5F5F5;
    border-radius: 14px;
    padding: 5px;
}
.user-type-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: #666;
}
.user-type-btn.active {
    background: #0c08ff;
    color: white;
    box-shadow: 0 4px 15px #0c08ff87;
}

/* Form group mejorado */
.auth-body .form-group {
    margin-bottom: 16px;
}
.auth-body .form-group label {
    display: block;
    margin-bottom: 7px;
    color: #333;
    font-weight: 600;
    font-size: 0.85rem;
}
.auth-body .form-group label i {
    color: #0c08ff;
    margin-right: 6px;
    width: 16px;
    text-align: center;
}
.auth-body .form-group input[type="text"],
.auth-body .form-group input[type="email"],
.auth-body .form-group input[type="tel"],
.auth-body .form-group input[type="password"] {
    width: 100%;
    padding: 13px 16px;
    border: 2px solid #E8E8E8;
    border-radius: 14px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: #FAFAFA;
}
.auth-body .form-group input:focus {
    outline: none;
    border-color: #0c08ff;
    background: white;
    box-shadow: 0 0 0 4px rgba(0, 214, 143, 0.1);
}
.auth-body .form-group input.error {
    border-color: #FF4757;
    background: #FFF5F5;
}
.auth-body .form-group input.valid {
    border-color: #0c08ff;
    background: #F0FFF8;
}
.form-select {
    width: 100%;
    padding: 13px 16px;
    border: 2px solid #E8E8E8;
    border-radius: 14px;
    font-size: 0.95rem;
    background: #FAFAFA;
    transition: all 0.3s ease;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}
.form-select:focus {
    outline: none;
    border-color: #0c08ff;
    box-shadow: 0 0 0 4px rgba(0, 214, 143, 0.1);
}

/* Password wrapper */
.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.password-wrapper input {
    padding-right: 50px !important;
}
.toggle-pass {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 5px;
    font-size: 1rem;
    transition: color 0.3s;
}
.toggle-pass:hover {
    color: #0c08ff;
}

/* Password strength */
.password-strength {
    height: 5px;
    background: #E8E8E8;
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}
.strength-bar {
    height: 100%;
    border-radius: 3px;
    transition: all 0.4s ease;
    width: 0%;
}
.strength-text {
    font-size: 0.75rem;
    margin-top: 4px;
    display: block;
}

/* Error messages */
.field-error {
    color: #FF4757;
    font-size: 0.78rem;
    margin-top: 4px;
    display: block;
    min-height: 0;
}

/* Checkbox */
.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-weight: 400 !important;
    font-size: 0.85rem;
    color: #666;
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    width: 18px !important;
    height: 18px;
    accent-color: #0c08ff;
    cursor: pointer;
}

/* Botón principal auth */
.auth-btn-full {
    width: 100%;
    padding: 15px;
    background:linear-gradient(135deg, #04043d 0%, #0c08ff 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 5px 20px #0c08ff7a;
    margin-top: 10px;
}
.auth-btn-full:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px #1c2d4d;
}
.auth-btn-full:active {
    transform: translateY(0);
}
.auth-btn-full:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Divider */
.auth-divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}
.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #E8E8E8;
}
.auth-divider span {
    position: relative;
    background: white;
    padding: 0 15px;
    color: #999;
    font-size: 0.85rem;
}

/* Social buttons */
.social-auth-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 18px;
}
.social-btn {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    border: 2px solid #E8E8E8;
    background: white;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.google-btn { color: #DB4437; }
.google-btn:hover { border-color: #DB4437; background: #FFF5F4; }
.facebook-btn { color: #4267B2; }
.facebook-btn:hover { border-color: #4267B2; background: #F4F7FF; }

/* Auth overlay */
.auth-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2999;
    backdrop-filter: blur(4px);
}
/*.auth-overlay.active { display: block; }*/

/* Responsive auth */
@media (max-width: 768px) {
    .auth-container {
        width: 96%;
        max-height: 88vh;
        border-radius: 20px;
    }
    .auth-header-bar {
        border-radius: 20px 20px 0 0;
        padding: 16px 20px;
    }
    .auth-body {
        padding: 20px;
    }
    .landing-features {
        gap: 10px;
    }
    .landing-feature-item {
        font-size: 0.78rem;
        padding: 8px 14px;
    }
    .landing-logo svg {
        width: 260px;
        height: 100px;
    }
}




/* ================================ */
/* HOME MEJORADO - SECCIONES NUEVAS */
/* ================================ */

/* Hero Section */
.home-hero {
    background: linear-gradient(135deg, #0c08ff 0%, #00B87A 100%);
    border-radius: 20px;
    padding: 30px 20px;
    margin-bottom: 25px;
    color: white;
    text-align: center;
    box-shadow: 0 5px 25px rgba(0, 214, 143, 0.3);
}

.hero-content {
    margin-bottom: 25px;
}

.hero-title {
    font-size: 1.8rem;
    margin: 0 0 10px 0;
    font-weight: 700;
}

.hero-subtitle {
    font-size: 1rem;
    opacity: 0.95;
    margin: 0 0 20px 0;
}

.hero-cta {
    background: white;
    color: #0c08ff;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.hero-stats {
    display: flex;
    justify-content: space-around;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.3);
}

.hero-stat-item {
    text-align: center;
}

.hero-stat-number {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.hero-stat-label {
    font-size: 0.85rem;
    opacity: 0.9;
}

/* Búsqueda Rápida Home */
.home-quick-search {
    margin-bottom: 25px;
}

.quick-search-container {
    background: white;
    border-radius: 25px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
}

.quick-search-container i {
    color: #0c08ff;
    font-size: 1.2rem;
}

.quick-search-input {
    flex: 1;
    border: none;
    font-size: 1rem;
    outline: none;
}

/* Secciones Generales */
.home-section {
    margin-bottom: 30px;
}

.section-header-home {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.section-title-home {
    font-size: 1.2rem;
    color: #333;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-link {
    color: #0c08ff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Barberos Destacados */
.featured-barbers-slider {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
}

.featured-barbers-slider::-webkit-scrollbar {
    height: 6px;
}

.featured-barbers-slider::-webkit-scrollbar-track {
    background: #F5F5F5;
    border-radius: 3px;
}

.featured-barbers-slider::-webkit-scrollbar-thumb {
    background: #0c08ff;
    border-radius: 3px;
}

.featured-barber-card {
    min-width: 200px;
    background: white;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    scroll-snap-align: start;
}

.featured-barber-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.featured-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: white;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.featured-barber-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0c08ff, #00B87A);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0 auto 12px;
    box-shadow: 0 4px 15px rgba(0, 214, 143, 0.3);
}

.featured-barber-card h4 {
    margin: 0 0 5px 0;
    color: #333;
    font-size: 1rem;
}

.featured-specialty {
    color: #666;
    font-size: 0.85rem;
    margin: 0 0 10px 0;
}

.featured-rating {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.featured-rating .stars {
    color: #FFD700;
}

.featured-price {
    color: #0c08ff;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.btn-featured-book {
    width: 100%;
    padding: 10px;
    background: #FF5D9E;
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-featured-book:hover {
    background: #FF4D8E;
    transform: scale(1.05);
}

/* Barberos Cercanos */
.nearby-barbers-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nearby-barber-item {
    background: white;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.3s ease;
}

.nearby-barber-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}

.nearby-barber-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF5D9E, #FF8E8E);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
}

.nearby-barber-info {
    flex: 1;
}

.nearby-barber-info h5 {
    margin: 0 0 3px 0;
    color: #333;
    font-size: 0.95rem;
}

.nearby-specialty {
    color: #666;
    font-size: 0.8rem;
    margin: 0 0 5px 0;
}

.nearby-distance {
    color: #0c08ff;
    font-size: 0.8rem;
    font-weight: 600;
}

.nearby-barber-meta {
    text-align: right;
}

.nearby-rating {
    color: #FFD700;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.nearby-status {
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nearby-status.online {
    background: rgba(0, 214, 143, 0.1);
    color: #0c08ff;
}

.nearby-status.busy {
    background: rgba(255, 93, 158, 0.1);
    color: #FF5D9E;
}

.nearby-status i {
    font-size: 0.5rem;
}

/* Servicios Populares */
.popular-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.service-category-card {
    background: white;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.3s ease;
}

.service-category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.service-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.service-category-card h4 {
    margin: 0 0 5px 0;
    color: #333;
    font-size: 1rem;
}

.service-category-card p {
    color: #0c08ff;
    font-weight: 600;
    margin: 0 0 8px 0;
    font-size: 0.9rem;
}

.service-popularity {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 93, 158, 0.1);
    color: #FF5D9E;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.service-popularity i {
    font-size: 0.7rem;
}

/* Recomendaciones IA */
.ai-recommendations {
background: linear-gradient(135deg, rgba(0, 214, 143, 0.05), rgba(255, 93, 158, 0.05));
padding: 20px;
border-radius: 20px;
}
.ai-recommendations-subtitle {
color: #666;
font-size: 0.9rem;
margin: -5px 0 15px 0;
}
.ai-badge {
background: linear-gradient(135deg, #0c08ff, #00B87A);
color: white;
padding: 4px 12px;
border-radius: 15px;
font-size: 0.75rem;
font-weight: 600;
}
.ai-recommendations-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.ai-recommendation-card {
background: white;
border-radius: 15px;
padding: 15px;
box-shadow: 0 3px 15px rgba(0,0,0,0.08);
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.ai-recommendation-card:hover {
border-color: #0c08ff;
transform: translateY(-3px);
}
.ai-card-content {
display: flex;
gap: 15px;
margin-bottom: 12px;
}
.ai-match-score {
text-align: center;
}
.match-circle {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #0c08ff, #00B87A);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 5px;
}
.ai-match-score span {
font-size: 0.75rem;
color: #666;
}
.ai-barber-info {
display: flex;
gap: 12px;
flex: 1;
}
.ai-barber-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #FF5D9E, #FF8E8E);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.ai-barber-details h5 {
margin: 0 0 3px 0;
color: #333;
font-size: 0.95rem;
}
.ai-barber-details p {
color: #666;
font-size: 0.8rem;
margin: 0 0 8px 0;
}
.ai-match-reasons {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.match-tag {
background: rgba(0, 214, 143, 0.1);
color: #0c08ff;
padding: 3px 8px;
border-radius: 10px;
font-size: 0.7rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 3px;
}
.match-tag i {
font-size: 0.6rem;
}
.btn-ai-book {
width: 100%;
padding: 10px;
background: #0c08ff;
color: white;
border: none;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-ai-book:hover {
background: #00B87A;
}
/* Actividad Social */
.social-activity {
background: #F5F5F5;
padding: 20px;
border-radius: 20px;
}
.activity-feed {
display: flex;
flex-direction: column;
gap: 12px;
}
.activity-item {
background: white;
border-radius: 12px;
padding: 12px;
display: flex;
align-items: center;
gap: 12px;
}
.activity-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #0c08ff, #00B87A);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.9rem;
}
.activity-content {
flex: 1;
}
.activity-content p {
margin: 0 0 3px 0;
color: #333;
font-size: 0.9rem;
}
.activity-time {
color: #999;
font-size: 0.75rem;
}
.activity-preview img {
width: 50px;
height: 50px;
border-radius: 8px;
object-fit: cover;
}
.activity-action {
font-size: 1.2rem;
}
/* CTA Final */
.home-cta-section {
margin-top: 30px;
}
.home-cta-card {
background: linear-gradient(135deg, #FF5D9E, #FF8E8E);
color: white;
border-radius: 20px;
padding: 30px 20px;
text-align: center;
box-shadow: 0 5px 25px rgba(255, 93, 158, 0.3);
}
.home-cta-card h3 {
margin: 0 0 10px 0;
font-size: 1.5rem;
}
.home-cta-card p {
margin: 0 0 20px 0;
opacity: 0.95;
}
.btn-cta-join {
background: white;
color: #FF5D9E;
border: none;
padding: 12px 30px;
border-radius: 25px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-cta-join:hover {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
/* Responsive */
@media (max-width: 768px) {
.hero-title {
font-size: 1.5rem;
}
.popular-services-grid {
    grid-template-columns: 1fr;
}

.featured-barber-card {
    min-width: 180px;
}
}




/* BÚSQUEDA AVANZADA */
.advanced-search-bar {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

.search-input-container {
    position: relative;
    display: flex;
    align-items: center;
    background: #F5F5F5;
    border-radius: 25px;
    padding: 5px 10px;
    gap: 10px;
}

.filter-toggle-btn {
    background: #0c08ff;
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-toggle-btn:hover {
    background: #00B87A;
    transform: scale(1.1);
}

.advanced-filters-panel {
    position: absolute;
    top: 55px;
    left: 0;
    right: 0;
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    display: none;
    z-index: 1005;
    animation: slideDown 0.3s ease;
}

.advanced-filters-panel.active {
    display: block;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.filter-group {
    margin-bottom: 15px;
}

.filter-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.filter-input, .filter-select {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid #E5E5E5;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: border-color 0.3s ease;
}

.filter-input:focus, .filter-select:focus {
    outline: none;
    border-color: #0c08ff;
}

.filter-slider {
    width: 100%;
    height: 6px;
    border-radius: 5px;
    background: linear-gradient(to right, #0c08ff 0%, #0c08ff 25%, #E5E5E5 25%, #E5E5E5 100%);
    outline: none;
    -webkit-appearance: none;
}

.filter-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0c08ff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.price-range {
    display: flex;
    gap: 10px;
    align-items: center;
}

.price-input {
    flex: 1;
    padding: 10px;
    border: 2px solid #E5E5E5;
    border-radius: 10px;
    font-size: 0.9rem;
}

.filter-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn-filter-apply, .btn-filter-clear {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-filter-apply {
    background: #0c08ff;
    color: white;
}

.btn-filter-apply:hover {
    background: #00B87A;
    transform: scale(1.05);
}

.btn-filter-clear {
    background: #F5F5F5;
    color: #333;
}

.btn-filter-clear:hover {
    background: #E5E5E5;
}













/* PERFIL MEJORADO */
.barber-profile-enhanced {
    display: none;
    background: #F5F5F5;
    min-height: 100vh;
    padding-bottom: 100px;
}

.barber-profile-enhanced.active {
    display: block;
}

.profile-hero {
    position: relative;
    background: white;
    margin-bottom: 20px;
}

.profile-cover {
    height: 150px;
    overflow: hidden;
}

.profile-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-main-info {
    padding: 0 20px 20px;
    position: relative;
    margin-top: -50px;
}

.profile-photo-container {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
}

.profile-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0c08ff, #00B87A);
    border: 4px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.5rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.profile-status {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-status.online i {
    color: #0c08ff;
    font-size: 0.7rem;
}

.profile-header-text {
    text-align: center;
}

.profile-name-large {
    font-size: 1.6rem;
    color: #333;
    margin: 0 0 5px 0;
}

.profile-title-large {
    color: #666;
    margin: 0 0 15px 0;
}

.profile-stats {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #E5E5E5;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 1.3rem;
    font-weight: bold;
    color: #0c08ff;
}

.stat-label {
    font-size: 0.75rem;
    color: #666;
    margin-top: 2px;
}

/* Tabs */
.profile-tabs {
    background: white;
    display: flex;
    border-bottom: 2px solid #E5E5E5;
    overflow-x: auto;
}

.tab-item {
    flex: 1;
    padding: 15px 10px;
    text-align: center;
    cursor: pointer;
    color: #666;
    font-size: 0.85rem;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.tab-item.active {
    color: #0c08ff;
    border-bottom-color: #0c08ff;
}

.tab-item i {
    display: block;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

/* Contenido de tabs */
.profile-tab-content {
    background: white;
    min-height: 400px;
}

.tab-pane {
    display: none;
    padding: 25px;
    animation: fadeIn 0.3s ease;
}

.tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.section-heading {
    color: #333;
    font-size: 1.1rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-bio {
    color: #666;
    line-height: 1.6;
    background: #F5F5F5;
    padding: 15px;
    border-radius: 10px;
}

.specialties-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.specialty-tag {
    background: linear-gradient(135deg, #0c08ff, #00B87A);
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
}

.schedule-list {
    background: #F5F5F5;
    border-radius: 10px;
    overflow: hidden;
}

.schedule-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 15px;
    border-bottom: 1px solid #E5E5E5;
}

.schedule-item:last-child {
    border-bottom: none;
}

.schedule-day {
    font-weight: 600;
    color: #333;
}

.schedule-time {
    color: #666;
}

/* Servicios mejorados */
.services-list-enhanced .service-item {
    background: #F5F5F5;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.services-list-enhanced .service-item:hover {
    background: #0c08ff;
    color: white;
    transform: translateX(5px);
}

/* Galería mejorada */
.gallery-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.gallery-item-enhanced {
    aspect-ratio: 1;
    background: linear-gradient(135deg, #E5E5E5, #D5D5D5);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.gallery-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #999;
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 214, 143, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item-enhanced:hover .gallery-overlay {
    opacity: 1;
}

/* Reseñas */
.reviews-summary {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    margin-bottom: 25px;
    padding: 20px;
    background: #F5F5F5;
    border-radius: 12px;
}

.summary-rating {
    text-align: center;
}

.big-rating {
    font-size: 3rem;
    font-weight: bold;
    color: #0c08ff;
}

.stars-large {
    color: #FFD700;
    font-size: 1.2rem;
    margin: 5px 0;
}

.reviews-count {
    color: #666;
    font-size: 0.85rem;
}

.rating-bar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.bar-label {
    font-size: 0.85rem;
    width: 40px;
    color: #666;
}

.bar-container {
    flex: 1;
    height: 8px;
    background: #E5E5E5;
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: #FFD700;
    border-radius: 4px;
}

.bar-count {
    font-size: 0.85rem;
    color: #666;
    width: 30px;
    text-align: right;
}

.review-card {
    background: #F5F5F5;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
}

.review-header {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.reviewer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF5D9E, #FF8E8E);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
}

.reviewer-info h5 {
    margin: 0 0 4px 0;
    font-size: 0.95rem;
    color: #333;
}

.review-meta {
    display: flex;
    gap: 10px;
    font-size: 0.8rem;
}

.review-stars {
    color: #FFD700;
}

.review-date {
    color: #999;
}

.review-text {
    color: #666;
    line-height: 1.5;
    margin: 10px 0;
}

.review-actions {
    display: flex;
    gap: 10px;
}

.review-action-btn {
    background: none;
    border: 1px solid #E5E5E5;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.review-action-btn:hover {
    background: #0c08ff;
    color: white;
    border-color: #0c08ff;
}

.btn-load-more-reviews {
    width: 100%;
    padding: 12px;
    background: #F5F5F5;
    border: 2px dashed #E5E5E5;
    border-radius: 10px;
    color: #666;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-load-more-reviews:hover {
    background: #E5E5E5;
}

/* Barra de acciones */
.profile-action-bar {
    position: absolute;
    left: 0;
    right: 0;
    background: white;
    padding: 15px 20px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    display: flex;
    gap: 10px;
    z-index: 999;
}

.btn-action-primary, .btn-action-secondary {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.btn-action-primary {
    background: #0c08ff;
    color: white;
}

.btn-action-secondary {
    background: #F5F5F5;
    color: #333;
}

.btn-action-primary:hover {
    background: #00B87A;
    transform: scale(1.05);
}

.btn-action-secondary:hover {
    background: #E5E5E5;
}

@media (max-width: 768px) {
    .reviews-summary {
        grid-template-columns: 1fr;
    }
    
    .profile-action-bar {
        flex-direction: column;
    }
    
    .btn-action-secondary:first-child {
        display: none;
    }
}






/* ================================ */
/* RED SOCIAL - ESTILOS */
/* ================================ */

/* Tabs de Red Social */
.social-tabs {
    background: white;
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    border-bottom: 2px solid #E5E5E5;
    position: sticky;
    top: 0;
    z-index: 100;
}

.social-tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    color: #666;
    font-size: 0.85rem;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.social-tab.active {
    color: #0c08ff;
    border-bottom-color: #0c08ff;
}

.social-tab i {
    display: block;
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.social-tab-content {
    display: none;
    padding: 15px;
}

.social-tab-content.active {
    display: block;
}

/* Stories */
.stories-section {
    background: white;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 12px;
}

.social-section-title {
    font-size: 1rem;
    color: #333;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stories-slider {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.stories-slider::-webkit-scrollbar {
    height: 4px;
}

.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.story-ring {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #FF5D9E, #FFD700);
}

.story-ring.viewed {
    background: #E5E5E5;
}

.story-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #0c08ff, #00B87A);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    border: 3px solid white;
}

.story-name {
    font-size: 0.75rem;
    color: #666;
    max-width: 65px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Publicaciones */
.social-feed {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.post-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.post-header {
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.post-author-info {
    display: flex;
    gap: 10px;
    align-items: center;
}

.post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0c08ff, #00B87A);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.post-author-details h4 {
    margin: 0;
    font-size: 0.95rem;
    color: #333;
}

.post-time {
    font-size: 0.75rem;
    color: #999;
}

.post-time i {
    font-size: 0.7rem;
}

.post-options-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
}

.post-content {
    padding: 0 15px 12px;
}

.post-text {
    color: #333;
    line-height: 1.5;
    margin: 0;
}

.post-hashtag {
    color: #0c08ff;
    font-weight: 600;
    cursor: pointer;
}

.post-media {
    width: 100%;
    max-height: 500px;
    overflow: hidden;
}

.post-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.post-stats {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #E5E5E5;
    font-size: 0.85rem;
    color: #666;
}

.post-stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.post-stat-item i {
    font-size: 0.8rem;
}

.post-actions {
    padding: 8px 10px;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #E5E5E5;
}

.post-action-btn {
    flex: 1;
    background: none;
    border: none;
    color: #666;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.post-action-btn:hover {
    background: #F5F5F5;
}

.post-action-btn.liked {
    color: #FF5D9E;
}

.post-action-btn.liked i {
    animation: heartBeat 0.5s;
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(1.1); }
}

/* Comentarios */
.post-comments {
    border-top: 1px solid #E5E5E5;
    padding: 12px 15px;
}

.comments-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.comment-item {
    display: flex;
    gap: 10 px;
margin-bottom: 12px;
}


.comment-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #FF5D9E, #FF8E8E);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.8rem;
font-weight: bold;
flex-shrink: 0;
}
.comment-content {
flex: 1;
}
.comment-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.comment-header strong {
font-size: 0.9rem;
color: #333;
}
.comment-time {
font-size: 0.75rem;
color: #999;
}
.comment-content p {
margin: 0 0 6px 0;
font-size: 0.9rem;
color: #333;
line-height: 1.4;
}
.comment-actions {
display: flex;
gap: 12px;
}
.comment-actions button {
background: none;
border: none;
color: #666;
font-size: 0.8rem;
cursor: pointer;
padding: 2px 0;
}
.comment-input-area {
display: flex;
gap: 8px;
align-items: center;
}
.comment-avatar-small {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #0c08ff, #00B87A);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 0.8rem;
}
.comment-input {
flex: 1;
border: 1px solid #E5E5E5;
border-radius: 20px;
padding: 8px 15px;
font-size: 0.9rem;
outline: none;
}
.comment-input:focus {
border-color: #0c08ff;
}
.send-comment-btn {
background: #0c08ff;
border: none;
color: white;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.send-comment-btn:hover {
background: #00B87A;
transform: scale(1.1);
}
/* Promociones */
.post-service {
border: 2px solid #FFD700;
}
.service-promo {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 93, 158, 0.1));
padding: 20px;
text-align: center;
border-radius: 12px;
}

.service-promo h3 {
margin: 0 0 8px 0;
color: #333;
font-size: 1.2rem;
}
.service-promo p {
margin: 0 0 15px 0;
color: #666;
}
.btn-promo-book {
background: #FF5D9E;
color: white;
border: none;
padding: 12px 30px;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-promo-book:hover {
background: #FF4D8E;
transform: scale(1.05);
}
/* Botón cargar más */
.btn-load-more-posts {
width: 100%;
padding: 12px;
background: white;
border: 2px dashed #E5E5E5;
border-radius: 12px;
color: #666;
font-weight: 600;
cursor: pointer;
margin-top: 15px;
transition: all 0.3s ease;
}
.btn-load-more-posts:hover {
background: #F5F5F5;
border-color: #0c08ff;
}
/* Siguiendo */
.following-header {
background: white;
padding: 15px;
border-radius: 12px;
margin-bottom: 15px;
}
.following-header h3 {
margin: 0 0 5px 0;
color: #333;
}
.following-count {
margin: 0;
color: #666;
font-size: 0.9rem;
}
.following-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.following-item {
background: white;
border-radius: 12px;
padding: 15px;
display: flex;
align-items: center;
gap: 12px;
}
.following-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #0c08ff, #00B87A);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
cursor: pointer;
}
.following-info {
flex: 1;
}
.following-info h5 {
margin: 0 0 3px 0;
color: #333;
font-size: 0.95rem;
}
.following-info p {
margin: 0 0 5px 0;
color: #666;
font-size: 0.8rem;
}
.following-stats {
font-size: 0.75rem;
color: #999;
}
.btn-following {
background: #F5F5F5;
border: 1px solid #E5E5E5;
color: #666;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-following:hover {
background: #FF5D9E;
color: white;
border-color: #FF5D9E;
}
/* Tendencias */
.trending-header {
background: white;
padding: 15px;
border-radius: 12px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.trending-filter {
border: 1px solid #E5E5E5;
border-radius: 8px;
padding: 6px 12px;
font-size: 0.85rem;
background: white;
}
.trending-tags {
background: white;
border-radius: 12px;
padding: 10px;
margin-bottom: 15px;
}
.trending-tag-item {
padding: 12px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid #E5E5E5;
cursor: pointer;
transition: all 0.3s ease;
}
.trending-tag-item:last-child {
border-bottom: none;
}
.trending-tag-item:hover {
background: #F5F5F5;
}
.tag-rank {
width: 30px;
height: 30px;
background: linear-gradient(135deg, #FFD700, #FFA500);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.tag-info {
flex: 1;
}
.tag-info h5 {
margin: 0 0 3px 0;
color: #0c08ff;
font-size: 0.95rem;
}
.tag-info p {
margin: 0;
color: #666;
font-size: 0.8rem;
}
.trending-posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}
.trending-post-thumb {
aspect-ratio: 1;
position: relative;
cursor: pointer;
overflow: hidden;
}
.trending-post-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.thumb-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
opacity: 0;
transition: opacity 0.3s ease;
}
.trending-post-thumb:hover .thumb-overlay {
opacity: 1;
}
/* Guardados */
.saved-collections {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-bottom: 15px;
}
.collection-card {
background: white;
border-radius: 12px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.collection-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.collection-icon {
font-size: 2.5rem;
margin-bottom: 10px;
}
.collection-card h5 {
margin: 0 0 5px 0;
color: #333;
}
.collection-card p {
margin: 0;
color: #666;
font-size: 0.85rem;
}
/* Modales */
.image-viewer-modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.95);
z-index: 10000;
align-items: center;
justify-content: center;
}
.image-viewer-modal.active {
display: flex;
}
.close-viewer-btn {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255,255,255,0.2);
border: none;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 1.2rem;
cursor: pointer;
z-index: 10001;
}
#viewerImage {
max-width: 90%;
max-height: 90%;
object-fit: contain;
}
.viewer-actions {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 15px;
}
.viewer-actions button {
background: rgba(255,255,255,0.2);
border: none;
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 1.2rem;
cursor: pointer;
backdrop-filter: blur(10px);
}
/* Historias Modal */
.story-viewer-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: black;
z-index: 10000;
}
.story-viewer-container {
position: relative;
height: 100%;
max-width: 500px;
margin: 0 auto;
}
.close-story-btn {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255,255,255,0.3);
border: none;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 1.2rem;
cursor: pointer;
z-index: 10001;
}
.story-progress-bars {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
display: flex;
gap: 4px;
z-index: 10001;
}
.progress-bar {
flex: 1;
height: 3px;
background: rgba(255,255,255,0.3);
border-radius: 2px;
overflow: hidden;
}
.progress-bar.active {
background: white;
animation: progressFill 5s linear;
}
@keyframes progressFill {
from { width: 0%; }
to { width: 100%; }
}
.story-header {
position: absolute;
top: 25px;
left: 10px;
right: 10px;
z-index: 10001;
}
.story-author-info {
display: flex;
align-items: center;
gap: 10px;
}
.story-author-avatar {
width: 35px;
height: 35px;
border-radius: 50%;
background: linear-gradient(135deg, #0c08ff, #00B87A);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
border: 2px solid white;
}
.story-author-details h5 {
margin: 0;
color: white;
font-size: 0.9rem;
}
.story-author-details span {
color: rgba(255,255,255,0.8);
font-size: 0.75rem;
}
.story-content {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.story-content img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.story-navigation {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
}
.story-nav-btn {
background: rgba(255,255,255,0.2);
border: none;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 1.2rem;
cursor: pointer;
backdrop-filter: blur(10px);
}
@media (max-width: 768px) {
.social-tab span {
display: none;
}
.trending-posts-grid {
    grid-template-columns: repeat(2, 1fr);
}

}


/* Popup personalizado */
.custom-popup .leaflet-popup-content-wrapper {
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    padding: 0;
}

.custom-popup .leaflet-popup-tip {
    background: white;
}

.custom-popup .leaflet-popup-content {
    margin: 0;
}

.custom-marker {
    cursor: pointer;
}

.custom-marker:hover {
    transform: scale(1.1);
    z-index: 1000 !important;
}




/* ================================ */
/* FORO COMUNITARIO */
/* ================================ */

.forum-header {
    background: white;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.forum-title {
    margin: 0;
    font-size: 1.3rem;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-new-topic {
    background: linear-gradient(135deg, #0c08ff, #00B87A);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 214, 143, 0.3);
}

.btn-new-topic:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 214, 143, 0.4);
}

/* Categorías */
.forum-categories {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 0;
    margin-bottom: 15px;
}

.category-pill {
    background: white;
    border: 2px solid #E5E5E5;
    color: #666;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.category-pill:hover, .category-pill.active {
    background: #0c08ff;
    color: white;
    border-color: #0c08ff;
}

/* Lista de temas */
.forum-topics-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.forum-topic {
    background: white;
    border-radius: 15px;
    padding: 15px;
    display: flex;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: relative;
}

.forum-topic:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.forum-topic.pinned {
    border: 2px solid #FFD700;
}

.forum-topic.hot {
    border: 2px solid #FF5D9E;
}

.topic-pin-badge, .topic-hot-badge {
    position: absolute;
    top: -10px;
    right: 15px;
    background: #FFD700;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.topic-hot-badge {
    background: #FF5D9E;
    box-shadow: 0 2px 8px rgba(255, 93, 158, 0.3);
}

.topic-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    flex-shrink: 0;
}

.topic-content {
    flex: 1;
}

.topic-title {
    margin: 0 0 8px 0;
    font-size: 1rem;
    color: #333;
    line-height: 1.4;
}

.topic-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 0.8rem;
    color: #666;
}

.topic-author strong {
    color: #0c08ff;
}

.topic-category {
    background: rgba(0, 214, 143, 0.1);
    color: #0c08ff;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.topic-preview {
    margin: 0;
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.topic-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    align-items: center;
    border-left: 1px solid #E5E5E5;
    padding-left: 15px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    color: #666;
}

.stat-item i {
    color: #0c08ff;
}

/* Modal de tema completo */
.forum-topic-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.forum-modal-content {
    background: white;
    border-radius: 20px;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 30px;
}

.close-forum-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #F5F5F5;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    color: #666;
}

/* Modal nuevo tema */
.new-topic-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.new-topic-content {
    background: white;
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
    padding: 30px;
}

.new-topic-content h3 {
    margin: 0 0 20px 0;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.form-input, .form-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #E5E5E5;
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
}

.form-input:focus, .form-textarea:focus {
    outline: none;
    border-color: #0c08ff;
}

.form-textarea {
    resize: vertical;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 25px;
}

.btn-cancel, .btn-publish {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel {
    background: #F5F5F5;
    color: #666;
}

.btn-publish {
    background: #0c08ff;
    color: white;
}

.btn-publish:hover {
    background: #00B87A;
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .topic-stats {
        flex-direction: row;
        border-left: none;
        border-top: 1px solid #E5E5E5;
        padding: 10px 0 0 0;
        width: 100%;
    }

    .forum-topic {
        flex-wrap: wrap;
    }
}




/* ================================ */
/* TIENDA DE PRODUCTOS DE BARBERÍA */
/* ================================ */

/* Banner */
.store-banner {
    background: linear-gradient(135deg, #ff5d9e 0%, #0c08ff 100%);
    color: white;
    padding: 30px 20px;
    border-radius: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.banner-content h1 {
    margin: 0 0 10px 0;
    font-size: 2rem;
}

.banner-content p {
    margin: 0 0 15px 0;
    opacity: 0.9;
}

.banner-promo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.promo-badge {
background: #FFD700;
color: #333;
padding: 4px 12px;
border-radius: 15px;
font-size: 0.75rem;
font-weight: 700;
display: inline-block;
margin-bottom: 10px;
}

.promo-text {
    font-size: 0.9rem;
    opacity: 0.95;
}

/* Buscador Tienda */
.store-search-bar {
    background: white;
    border-radius: 15px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.store-search-bar i {
    color: #fff;
    font-size: 1.2rem;
}

h2#texti {
    margin-bottom: 17px;
}

#storeSearchInput {
    flex: 1;
    border: none;
    font-size: 1rem;
    outline: none;
}

.filter-btn {
    background: #0c08ff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background: #00B87A;
}

/* Filtros */
.store-filters {
    background: white;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.filter-group {
    margin-bottom: 15px;
}

.filter-group:last-child {
    margin-bottom: 0;
}

.filter-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.filter-select {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid #E5E5E5;
    border-radius: 10px;
    font-size: 0.95rem;
}

.price-range-filter {
    display: flex;
    gap: 8px;
    align-items: center;
}

.price-input-small {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid #E5E5E5;
    border-radius: 8px;
    font-size: 0.9rem;
}

.apply-price-btn {
    background: #0c08ff;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

/* Categorías Tienda */
.store-categories {
    margin-bottom: 30px;
}

.section-title-store {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.categories-grid-store {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.store-category-card {
    background: white;
    border-radius: 15px;
    padding: 20px 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border: 2px solid transparent;
}

.store-category-card:hover,
.store-category-card.active {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    border-color: #0c08ff;
}

.category-icon-store {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.category-name-store {
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.category-count {
    font-size: 0.8rem;
    color: #666;
}

/* Grid de Productos */
.products-grid-main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.product-card-store {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    cursor: pointer;
}

.product-card-store:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.product-image-store {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
    background: #f5f5f5;
}

.product-image-store img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card-store:hover .product-image-store img {
    transform: scale(1.1);
}

.product-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #FF5D9E;
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 700;
}

.product-stock-low {
    background: #FFD700;
    color: #333;
}

.product-info-store {
    padding: 15px;
}

.product-brand {
    color: #0c08ff;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.product-name-store {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    font-size: 1rem;
    line-height: 1.3;
}

.product-rating-store {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}

.product-stars {
    color: #FFD700;
    font-size: 0.9rem;
}

.product-rating-num {
    color: #666;
    font-size: 0.85rem;
}

.product-price-store {
    color: #0c08ff;
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.product-stock {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 12px;
}

.product-stock.low {
    color: #FF5D9E;
    font-weight: 600;
}

.add-to-cart-store {
    width: 100%;
    padding: 12px;
    background: #FF5D9E;
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.add-to-cart-store:hover {
    background: #FF4D8E;
    transform: scale(1.05);
}

/* Slider de Destacados */
.products-slider {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 15px;
    scroll-snap-type: x mandatory;
}

.products-slider::-webkit-scrollbar {
    height: 6px;
}

.products-slider::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.products-slider::-webkit-scrollbar-thumb {
    background: #0c08ff;
    border-radius: 10px;
}

.product-card-slider {
    min-width: 220px;
    scroll-snap-align: start;
}

/* Headers */
.section-header-store {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.view-all-link {
    color: #0c08ff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.results-count {
    color: #666;
    font-size: 0.9rem;
}

.featured-products-section,
.products-main-section {
    margin-bottom: 30px;
}

/* Responsive */
@media (max-width: 768px) {
    .banner-content h1 {
        font-size: 1.5rem;
    }
    
    .categories-grid-store {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .products-grid-main {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
    
    .product-image-store {
        height: 180px;
    }
}