/* ===== Selector de Colores ===== */
.color-switcher {
    position: fixed;
    bottom: 90px;
    right: 30px;
    z-index: 1000;
}

.color-switcher-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-hover);
    transition: var(--transition);
}

.color-switcher-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
}

.color-menu {
    position: absolute;
    bottom: 60px;
    right: 0;
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-hover);
    padding: 15px;
    min-width: 180px;
    max-height: 400px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
}

.color-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.color-menu-title {
    display: block;
    font-size: 0.8rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gray-light);
}

.color-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    margin: 5px 0;
    border: none;
    background: var(--gray-light);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    text-align: left;
    transition: var(--transition);
    font-family: inherit;
}

.color-option::before {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--dot-color);
    flex-shrink: 0;
}

.color-option:hover {
    background: var(--accent-cream);
}

.color-option.active {
    background: var(--text-dark);
    color: var(--white);
}

.color-menu-divider {
    display: block;
    font-size: 0.7rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 12px 0 6px;
    padding-top: 8px;
    border-top: 1px solid var(--gray-light);
}

/* Variantes de Color - Intensos */
body.color-puro { --primary: #FF0000; --primary-dark: #CC0000; }
body.color-ferrari { --primary: #FF2800; --primary-dark: #CC2000; }
body.color-sangre { --primary: #C41E3A; --primary-dark: #9C182E; }
body.color-rubi { --primary: #E0115F; --primary-dark: #B30D4C; }

/* Variantes de Color - Cadmio */
body.color-cadmio-claro { --primary: #FF3333; --primary-dark: #E02020; }
body.color-cadmio { --primary: #E30022; --primary-dark: #B3001B; }
body.color-cadmio-medio { --primary: #C4001D; --primary-dark: #9A0017; }
body.color-cadmio-oscuro { --primary: #A30018; --primary-dark: #7D0012; }
body.color-cadmio-profundo { --primary: #800012; --primary-dark: #5C000D; }

/* Variantes de Color - Cálidos */
body.color-burdeos { --primary: #800020; --primary-dark: #5C0017; }
body.color-vino { --primary: #722F37; --primary-dark: #5A252C; }
body.color-granate { --primary: #6B1624; --primary-dark: #4D101A; }
body.color-borgona { --primary: #4C0013; --primary-dark: #33000D; }
body.color-terracota { --primary: #A04030; --primary-dark: #7D3226; }
body.color-oxido { --primary: #8B3A3A; --primary-dark: #6B2D2D; }
body.color-caoba { --primary: #5D1F1F; --primary-dark: #421616; }

@media (max-width: 480px) {
    .color-switcher {
        bottom: 85px;
        right: 20px;
    }

    .color-menu {
        right: -10px;
    }
}

/* ===== Selector de Tipografías ===== */
.font-switcher {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.font-switcher-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-hover);
    transition: var(--transition);
}

.font-switcher-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
}

.font-menu {
    position: absolute;
    bottom: 60px;
    right: 0;
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-hover);
    padding: 15px;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
}

.font-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.font-menu-title {
    display: block;
    font-size: 0.8rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gray-light);
}

.font-option {
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin: 5px 0;
    border: none;
    background: var(--gray-light);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    text-align: left;
    transition: var(--transition);
    font-family: inherit;
}

.font-option:hover {
    background: var(--accent-cream);
}

.font-option.active {
    background: var(--primary);
    color: var(--white);
}

/* ===== Variantes de Tipografía ===== */
body.font-playfair {
    font-family: 'Nunito', sans-serif;
}

body.font-playfair h1,
body.font-playfair h2,
body.font-playfair h3,
body.font-playfair h4,
body.font-playfair h5,
body.font-playfair h6,
body.font-playfair .logo-text {
    font-family: 'Playfair Display', serif;
}

body.font-cormorant {
    font-family: 'Lato', sans-serif;
}

body.font-cormorant h1,
body.font-cormorant h2,
body.font-cormorant h3,
body.font-cormorant h4,
body.font-cormorant h5,
body.font-cormorant h6,
body.font-cormorant .logo-text {
    font-family: 'Cormorant Garamond', serif;
}

body.font-baskerville {
    font-family: 'Open Sans', sans-serif;
}

body.font-baskerville h1,
body.font-baskerville h2,
body.font-baskerville h3,
body.font-baskerville h4,
body.font-baskerville h5,
body.font-baskerville h6,
body.font-baskerville .logo-text {
    font-family: 'Libre Baskerville', serif;
}

body.font-merriweather {
    font-family: 'Source Sans 3', sans-serif;
}

body.font-merriweather h1,
body.font-merriweather h2,
body.font-merriweather h3,
body.font-merriweather h4,
body.font-merriweather h5,
body.font-merriweather h6,
body.font-merriweather .logo-text {
    font-family: 'Merriweather', serif;
}

body.font-berkshire {
    font-family: 'Nunito', sans-serif;
}

body.font-berkshire h1,
body.font-berkshire h2,
body.font-berkshire h3,
body.font-berkshire h4,
body.font-berkshire h5,
body.font-berkshire h6,
body.font-berkshire .logo-text {
    font-family: 'Berkshire Swash', cursive;
}

@media (max-width: 480px) {
    .font-switcher {
        bottom: 20px;
        right: 20px;
    }

    .font-menu {
        right: -10px;
        min-width: 200px;
    }
}