/* =========================================
   ?? SISTEMA DE TEMAS - KINGS BANE II
   Cambios sutiles con sinergia entre temas
   Solo se modifican los acentos, no la base
   ========================================= */

/* =========================================
   BASE COMÚN (no cambia entre temas)
   ========================================= */
:root {
    /* Colores base que NO cambian */
    --bg-main: #0a0e1a;
    --card: #0d1220;
    --text: #c8d4e8;
    --text-light: #e8ecf5;
    --sidebar-bg: #060a14;
    --header-bg: #060a14;
    --input-bg: rgba(10, 14, 26, 0.7);
    --input-border: #1f2a42;
    --panel-bg: rgba(10, 14, 26, 0.85);
    
    /* Estados que NO cambian */
    --success: #5fb4a8;
    --success-soft: #7ecfc4;
    --error: #ff6b6b;
    --warning: #ffa500;
    
    /* Acentos que SÍ cambian según tema */
    --gold: #c5a059;
    --gold-soft: #d8b874;
    --blue-deep: #1a2a4a;
    --blue-accent: #4a6fa5;
    --blue-light: #6b8fc7;
    --blue-glow: rgba(74, 111, 165, 0.4);
    --border-color: rgba(74, 111, 165, 0.25);
    --accent-gradient: linear-gradient(180deg, var(--gold-soft), var(--gold));
    --shadow-accent: rgba(197, 160, 89, 0.3);
    --theme-name: "Asgardian";
}

/* =========================================
   TEMA 1: ASGARDIAN (Por defecto)
   Azul profundo + Dorado clásico
   ========================================= */
[data-theme="asgardian"] {
    --gold: #c5a059;
    --gold-soft: #d8b874;
    --blue-deep: #1a2a4a;
    --blue-accent: #4a6fa5;
    --blue-light: #6b8fc7;
    --blue-glow: rgba(74, 111, 165, 0.4);
    --border-color: rgba(74, 111, 165, 0.25);
    --shadow-accent: rgba(197, 160, 89, 0.3);
    --theme-name: "Asgardian";
}

/* =========================================
   TEMA 2: INFERNAL
   Solo cambia el tono del acento (rojo sutil)
   ========================================= */
[data-theme="infernal"] {
    --gold: #c45a4a;
    --gold-soft: #d87060;
    --blue-deep: #2a1a1a;
    --blue-accent: #6a3a3a;
    --blue-light: #8a5a5a;
    --blue-glow: rgba(138, 90, 90, 0.3);
    --border-color: rgba(138, 90, 90, 0.25);
    --shadow-accent: rgba(196, 90, 74, 0.25);
    --theme-name: "Infernal";
}

/* =========================================
   TEMA 3: CELESTIAL
   Solo cambia el tono del acento (azul claro)
   ========================================= */
[data-theme="celestial"] {
    --gold: #8ab0d8;
    --gold-soft: #a8c5e8;
    --blue-deep: #1a2a4a;
    --blue-accent: #5a7aa5;
    --blue-light: #8ab0d8;
    --blue-glow: rgba(138, 176, 216, 0.3);
    --border-color: rgba(138, 176, 216, 0.25);
    --shadow-accent: rgba(138, 176, 216, 0.25);
    --theme-name: "Celestial";
}

/* =========================================
   TEMA 4: DRUIDIC
   Solo cambia el tono del acento (verde sutil)
   ========================================= */
[data-theme="druidic"] {
    --gold: #7aaa6a;
    --gold-soft: #8ec07e;
    --blue-deep: #1a2a1a;
    --blue-accent: #3a5a3a;
    --blue-light: #6a8a6a;
    --blue-glow: rgba(106, 138, 106, 0.3);
    --border-color: rgba(106, 138, 106, 0.25);
    --shadow-accent: rgba(122, 170, 106, 0.25);
    --theme-name: "Druidic";
}

/* =========================================
   TEMA 5: ROYAL
   Solo cambia el tono del acento (púrpura sutil)
   ========================================= */
[data-theme="royal"] {
    --gold: #9a7aba;
    --gold-soft: #b89ad4;
    --blue-deep: #2a1a3a;
    --blue-accent: #5a3a6a;
    --blue-light: #8a6a9a;
    --blue-glow: rgba(138, 106, 154, 0.3);
    --border-color: rgba(138, 106, 154, 0.25);
    --shadow-accent: rgba(154, 122, 186, 0.25);
    --theme-name: "Royal";
}

/* =========================================
   TEMA 6: FROSTBORN ??
   Cian helado + Blanco escarcha
   ========================================= */
[data-theme="frostborn"] {
    --gold: #7dd3e8;
    --gold-soft: #a8e8f5;
    --blue-deep: #0f2a3a;
    --blue-accent: #2a6a8a;
    --blue-light: #5ab0d8;
    --blue-glow: rgba(90, 176, 216, 0.35);
    --border-color: rgba(90, 176, 216, 0.3);
    --shadow-accent: rgba(125, 211, 232, 0.3);
    --theme-name: "Frostborn";
}

/* =========================================
   TEMA 7: SHADOW ??
   Gris oscuro + Plata metálica
   ========================================= */
[data-theme="shadow"] {
    --gold: #a8a8b0;
    --gold-soft: #c8c8d0;
    --blue-deep: #1a1a20;
    --blue-accent: #4a4a55;
    --blue-light: #787885;
    --blue-glow: rgba(120, 120, 133, 0.3);
    --border-color: rgba(120, 120, 133, 0.25);
    --shadow-accent: rgba(168, 168, 176, 0.25);
    --theme-name: "Shadow";
}

/* =========================================
   TEMA 8: SOLAR ??
   Naranja fuego + Amarillo dorado
   ========================================= */
[data-theme="solar"] {
    --gold: #f0a040;
    --gold-soft: #f8c060;
    --blue-deep: #2a2010;
    --blue-accent: #7a5a2a;
    --blue-light: #b88a4a;
    --blue-glow: rgba(184, 138, 74, 0.35);
    --border-color: rgba(184, 138, 74, 0.3);
    --shadow-accent: rgba(240, 160, 64, 0.3);
    --theme-name: "Solar";
}

/* =========================================
   TEMA 9: ABYSSAL 
   Violeta profundo + Magenta místico
   ========================================= */
[data-theme="abyssal"] {
    --gold: #b060d8;
    --gold-soft: #d080f0;
    --blue-deep: #1a1030;
    --blue-accent: #4a2a6a;
    --blue-light: #7a4aa0;
    --blue-glow: rgba(122, 74, 160, 0.35);
    --border-color: rgba(122, 74, 160, 0.3);
    --shadow-accent: rgba(176, 96, 216, 0.3);
    --theme-name: "Abyssal";
}

/* =========================================
   TEMA 10: EMERALD ??
   Verde esmeralda brillante
   ========================================= */
[data-theme="emerald"] {
    --gold: #40c880;
    --gold-soft: #60e8a0;
    --blue-deep: #0a2a1a;
    --blue-accent: #2a6a4a;
    --blue-light: #4aaa7a;
    --blue-glow: rgba(74, 170, 122, 0.35);
    --border-color: rgba(74, 170, 122, 0.3);
    --shadow-accent: rgba(64, 200, 128, 0.3);
    --theme-name: "Emerald";
}

/* =========================================
   TEMA 11: CRIMSON 
   Rojo sangre intenso + Carmesí
   ========================================= */
[data-theme="crimson"] {
    --gold: #d84060;
    --gold-soft: #f06080;
    --blue-deep: #2a0a15;
    --blue-accent: #6a2a3a;
    --blue-light: #a04a5a;
    --blue-glow: rgba(160, 74, 90, 0.35);
    --border-color: rgba(160, 74, 90, 0.3);
    --shadow-accent: rgba(216, 64, 96, 0.3);
    --theme-name: "Crimson";
}

/* =========================================
   TEMA 12: MONOCHROME ?
   Blanco puro + Negro profundo
   ========================================= */
[data-theme="monochrome"] {
    --gold: #e0e0e0;
    --gold-soft: #f5f5f5;
    --blue-deep: #151515;
    --blue-accent: #454545;
    --blue-light: #757575;
    --blue-glow: rgba(117, 117, 117, 0.3);
    --border-color: rgba(117, 117, 117, 0.25);
    --shadow-accent: rgba(224, 224, 224, 0.25);
    --theme-name: "Monochrome";
}

/* =========================================
   TEMA 13: COPPER ??
   Cobre + Bronce metálico
   ========================================= */
[data-theme="copper"] {
    --gold: #c87840;
    --gold-soft: #e09060;
    --blue-deep: #2a1a10;
    --blue-accent: #6a4a2a;
    --blue-light: #a07040;
    --blue-glow: rgba(160, 112, 64, 0.35);
    --border-color: rgba(160, 112, 64, 0.3);
    --shadow-accent: rgba(200, 120, 64, 0.3);
    --theme-name: "Copper";
}

/* =========================================
   TEMA 14: ARCANE ??
   Rosa mágico + Magenta etéreo
   ========================================= */
[data-theme="arcane"] {
    --gold: #e060a8;
    --gold-soft: #f080c8;
    --blue-deep: #2a1025;
    --blue-accent: #6a2a5a;
    --blue-light: #a04a8a;
    --blue-glow: rgba(160, 74, 138, 0.35);
    --border-color: rgba(160, 74, 138, 0.3);
    --shadow-accent: rgba(224, 96, 168, 0.3);
    --theme-name: "Arcane";
}

/* =========================================
   TEMA 15: TITAN ??
   Azul acero metálico + Plata
   ========================================= */
[data-theme="titan"] {
    --gold: #80a8c8;
    --gold-soft: #a0c8e0;
    --blue-deep: #152030;
    --blue-accent: #3a5a7a;
    --blue-light: #6088a8;
    --blue-glow: rgba(96, 136, 168, 0.35);
    --border-color: rgba(96, 136, 168, 0.3);
    --shadow-accent: rgba(128, 168, 200, 0.3);
    --theme-name: "Titan";
}

/* =========================================
   TEMA 16: PHANTOM ??
   Verde fantasma + Turquesa espectral
   ========================================= */
[data-theme="phantom"] {
    --gold: #60d8b0;
    --gold-soft: #80f0d0;
    --blue-deep: #0a2020;
    --blue-accent: #2a5a50;
    --blue-light: #4a9080;
    --blue-glow: rgba(74, 144, 128, 0.35);
    --border-color: rgba(74, 144, 128, 0.3);
    --shadow-accent: rgba(96, 216, 176, 0.3);
    --theme-name: "Phantom";
}

/* =========================================
   TEMA 17: BLOODMOON ??
   Rojo lunar + Carmesí oscuro
   ========================================= */
[data-theme="bloodmoon"] {
    --gold: #a83040;
    --gold-soft: #c85060;
    --blue-deep: #1a0a10;
    --blue-accent: #4a1a25;
    --blue-light: #7a3040;
    --blue-glow: rgba(122, 48, 64, 0.35);
    --border-color: rgba(122, 48, 64, 0.3);
    --shadow-accent: rgba(168, 48, 64, 0.3);
    --theme-name: "Bloodmoon";
}

/* =========================================
   TEMA 18: OCEANIC ??
   Azul océano + Turquesa profundo
   ========================================= */
[data-theme="oceanic"] {
    --gold: #40a0c8;
    --gold-soft: #60c0e0;
    --blue-deep: #0a1a2a;
    --blue-accent: #1a4a6a;
    --blue-light: #3a7a9a;
    --blue-glow: rgba(58, 122, 154, 0.35);
    --border-color: rgba(58, 122, 154, 0.3);
    --shadow-accent: rgba(64, 160, 200, 0.3);
    --theme-name: "Oceanic";
}

/* =========================================
   TEMA 19: VOLCANIC ??
   Naranja magma + Rojo lava
   ========================================= */
[data-theme="volcanic"] {
    --gold: #e86030;
    --gold-soft: #f88050;
    --blue-deep: #2a1008;
    --blue-accent: #6a2a15;
    --blue-light: #a04a25;
    --blue-glow: rgba(160, 74, 37, 0.35);
    --border-color: rgba(160, 74, 37, 0.3);
    --shadow-accent: rgba(232, 96, 48, 0.3);
    --theme-name: "Volcanic";
}

/* =========================================
   TEMA 20: NEBULA ??
   Rosa cósmico + Púrpura galáctico
   ========================================= */
[data-theme="nebula"] {
    --gold: #c060d0;
    --gold-soft: #e080f0;
    --blue-deep: #1a1030;
    --blue-accent: #4a2a6a;
    --blue-light: #8050a0;
    --blue-glow: rgba(128, 80, 160, 0.35);
    --border-color: rgba(128, 80, 160, 0.3);
    --shadow-accent: rgba(192, 96, 208, 0.3);
    --theme-name: "Nebula";
}

/* =========================================
   APLICACIÓN SUTIL A ELEMENTOS
   Solo cambian los acentos, no la estructura
   ========================================= */

/* Logo - Solo cambia el color del brillo */
.logo {
    color: var(--gold-soft);
    text-shadow: 0 0 10px var(--shadow-accent);
}

@keyframes logoGlow {
    0%, 100% { text-shadow: 0 0 10px var(--shadow-accent); }
    50% { text-shadow: 0 0 20px var(--shadow-accent), 0 0 30px var(--shadow-accent); }
}

/* Sidebar - Solo cambia el item activo */
.server-item.active a {
    color: var(--gold);
}

.server-item.active a::before {
    background: var(--gold);
    box-shadow: 0 0 12px var(--shadow-accent);
}

/* Contenedor - Solo cambia el glow sutil del borde */
.launcher-container {
    border-color: var(--blue-deep);
    box-shadow: 0 0 60px rgba(10, 14, 26, 0.95), 0 0 80px var(--blue-glow);
}

/* Títulos de sección - Solo cambia el color del texto */
.section-title {
    color: var(--gold);
}

/* Valores destacados - Solo cambia el color */
.stat-value {
    color: var(--gold);
    text-shadow: 0 0 10px var(--shadow-accent);
}

/* Inputs - Solo cambia el glow del focus */
form input:focus,
form select:focus,
.form-group input:focus {
    border-color: var(--blue-light);
    box-shadow: 0 0 15px var(--blue-glow);
}

/* Botones - Solo cambia el gradiente sutil */
.btn-primary,
button {
    background: var(--accent-gradient);
}

.btn-primary:hover,
button:hover {
    box-shadow: 0 5px 20px var(--shadow-accent);
}

/* Banner - Solo cambia el borde izquierdo */
.welcome-banner {
    border-left-color: var(--gold);
}

.welcome-banner h2 {
    color: var(--gold);
}

/* Modal - Solo cambia el borde y el ícono */
.modal-content {
    border-color: var(--gold);
}

.modal-header h3 {
    color: var(--gold);
}

.modal-icon-circle {
    background: var(--accent-gradient);
    box-shadow: 0 0 30px var(--shadow-accent);
}

/* Pack popular - Solo cambia el borde */
.pack-card.pack-popular {
    border-color: var(--gold);
}

.pack-card.pack-popular::before {
    background: var(--accent-gradient);
}

/* Tarjeta de pago activa - Solo cambia el borde */
.payment-card.active {
    border-color: var(--gold) !important;
    box-shadow: 0 0 15px var(--shadow-accent) !important;
}

.payment-card.active .payment-title {
    color: var(--gold);
}

/* Slider - Solo cambia el color del thumb */
input[type=range]::-webkit-slider-thumb {
    background: radial-gradient(circle, #fff 0%, var(--gold) 70%);
    box-shadow: 0 0 12px var(--gold);
}

/* Selector de tema en sidebar */
.theme-selector-item a {
    color: var(--gold) !important;
}

.theme-selector-item:hover a {
    color: var(--gold-soft) !important;
}

.theme-option-sidebar.active {
    border-color: var(--gold);
    color: var(--gold);
}

.theme-option-sidebar.active .theme-color-preview {
    border-color: var(--gold);
    box-shadow: 0 0 4px var(--shadow-accent);
}

/* =========================================
   TRANSICIONES SUAVES
   ========================================= */
body,
.launcher-container,
header,
.sidebar,
.main-area,
.stat-card,
.account-panel,
.pack-card,
.payment-card,
.btn-primary,
button,
form input,
form select,
.modal-content,
.logo,
.section-title,
.stat-value,
.server-item a {
    transition: color 0.5s ease, 
                border-color 0.5s ease,
                box-shadow 0.5s ease,
                background 0.5s ease;
}

/* =========================================
   SELECTOR DE TEMAS EN SIDEBAR - COMPACTO
   ========================================= */

.theme-selector-item {
    margin-top: 10px;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
}

.theme-selector-item a {
    font-weight: bold;
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

/* Panel de temas desplegable - COMPACTO */
.theme-panel-sidebar {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin: 6px 8px;
    padding: 6px;
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    animation: themePanelSlideDown 0.3s ease-out;
    
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.theme-panel-sidebar::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

.theme-panel-sidebar::-webkit-scrollbar-track {
    display: none;
}

.theme-panel-sidebar::-webkit-scrollbar-thumb {
    display: none;
}

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

/* Opciones de tema - COMPACTAS */
.theme-option-sidebar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    margin-bottom: 4px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.25s ease;
    background: var(--panel-bg);
    font-size: 9px;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.theme-option-sidebar:last-child {
    margin-bottom: 0;
}

.theme-option-sidebar:hover {
    border-color: var(--blue-light);
    transform: translateX(2px);
}

.theme-option-sidebar.active {
    font-weight: 600;
}

.theme-option-sidebar .theme-color-preview {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* =========================================
   PREVIEWS DE COLOR PARA CADA TEMA
   ========================================= */

.theme-option-sidebar[data-theme="asgardian"] .theme-color-preview {
    background: linear-gradient(135deg, #1a2a4a, #c5a059);
}

.theme-option-sidebar[data-theme="infernal"] .theme-color-preview {
    background: linear-gradient(135deg, #2a1a1a, #c45a4a);
}

.theme-option-sidebar[data-theme="celestial"] .theme-color-preview {
    background: linear-gradient(135deg, #1a2a4a, #8ab0d8);
}

.theme-option-sidebar[data-theme="druidic"] .theme-color-preview {
    background: linear-gradient(135deg, #1a2a1a, #7aaa6a);
}

.theme-option-sidebar[data-theme="royal"] .theme-color-preview {
    background: linear-gradient(135deg, #2a1a3a, #9a7aba);
}

.theme-option-sidebar[data-theme="frostborn"] .theme-color-preview {
    background: linear-gradient(135deg, #0f2a3a, #7dd3e8);
}

.theme-option-sidebar[data-theme="shadow"] .theme-color-preview {
    background: linear-gradient(135deg, #1a1a20, #a8a8b0);
}

.theme-option-sidebar[data-theme="solar"] .theme-color-preview {
    background: linear-gradient(135deg, #2a2010, #f0a040);
}

.theme-option-sidebar[data-theme="abyssal"] .theme-color-preview {
    background: linear-gradient(135deg, #1a1030, #b060d8);
}

.theme-option-sidebar[data-theme="emerald"] .theme-color-preview {
    background: linear-gradient(135deg, #0a2a1a, #40c880);
}

.theme-option-sidebar[data-theme="crimson"] .theme-color-preview {
    background: linear-gradient(135deg, #2a0a15, #d84060);
}

.theme-option-sidebar[data-theme="monochrome"] .theme-color-preview {
    background: linear-gradient(135deg, #151515, #e0e0e0);
}

.theme-option-sidebar[data-theme="copper"] .theme-color-preview {
    background: linear-gradient(135deg, #2a1a10, #c87840);
}

.theme-option-sidebar[data-theme="arcane"] .theme-color-preview {
    background: linear-gradient(135deg, #2a1025, #e060a8);
}

.theme-option-sidebar[data-theme="titan"] .theme-color-preview {
    background: linear-gradient(135deg, #152030, #80a8c8);
}

.theme-option-sidebar[data-theme="phantom"] .theme-color-preview {
    background: linear-gradient(135deg, #0a2020, #60d8b0);
}

.theme-option-sidebar[data-theme="bloodmoon"] .theme-color-preview {
    background: linear-gradient(135deg, #1a0a10, #a83040);
}

.theme-option-sidebar[data-theme="oceanic"] .theme-color-preview {
    background: linear-gradient(135deg, #0a1a2a, #40a0c8);
}

.theme-option-sidebar[data-theme="volcanic"] .theme-color-preview {
    background: linear-gradient(135deg, #2a1008, #e86030);
}

.theme-option-sidebar[data-theme="nebula"] .theme-color-preview {
    background: linear-gradient(135deg, #1a1030, #c060d0);
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .theme-panel-sidebar {
        margin: 6px 5px;
        padding: 5px;
        max-height: 180px;
    }
    
    .theme-option-sidebar {
        font-size: 8px;
        padding: 5px 6px;
        margin-bottom: 3px;
    }
    
    .theme-option-sidebar .theme-color-preview {
        width: 12px;
        height: 12px;
    }
}
/* =========================================
   ?? SELECTOR DE TEMAS EN HEADER
   Cuadraditos pequeños alineados a la derecha
   ========================================= */

.header-theme-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.header-theme-selector:hover {
    border-color: var(--gold);
    box-shadow: 0 0 15px var(--shadow-accent);
}

/* Contenedor de los dots */
.theme-dots-container {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 2px 4px;
    position: relative;
}

/* Cada cuadradito pequeño (dot) */
.theme-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    opacity: 0.7;
    flex-shrink: 0;
}

.theme-dot:hover {
    opacity: 1;
    transform: scale(1.25);
    z-index: 2;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 8px currentColor;
}

.theme-dot.active {
    opacity: 1;
    transform: scale(1.2);
    border: 2px solid #ffffff;
    box-shadow: 
        0 0 8px var(--shadow-accent),
        0 0 12px var(--shadow-accent);
    z-index: 1;
}

/* Nombre del tema activo */
.theme-active-name {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    color: var(--gold-soft);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    padding-left: 8px;
    border-left: 1px solid var(--border-color);
    min-width: 80px;
    text-align: center;
    transition: color 0.3s ease;
}

/* =========================================
   RESPONSIVE - HEADER THEME SELECTOR
   ========================================= */

/* Tablets */
@media (max-width: 1024px) {
    .header-theme-selector {
        padding: 5px 10px;
        gap: 8px;
    }
    
    .theme-dot {
        width: 10px;
        height: 10px;
    }
    
    .theme-dots-container {
        gap: 3px;
    }
    
    .theme-active-name {
        font-size: 9px;
        min-width: 70px;
    }
}

/* Móviles */
@media (max-width: 768px) {
    header {
        padding: 10px 15px !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }
    
    .logo {
        font-size: 16px !important;
        flex-shrink: 0;
    }
    
    .header-theme-selector {
        padding: 4px 8px;
        gap: 6px;
        margin-left: auto;
    }
    
    .theme-dot {
        width: 9px;
        height: 9px;
    }
    
    .theme-dots-container {
        gap: 2px;
        padding: 1px 2px;
    }
    
    .theme-active-name {
        font-size: 8px;
        min-width: 60px;
        padding-left: 6px;
        letter-spacing: 0.5px;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {
    header {
        padding: 8px 12px !important;
    }
    
    .logo {
        font-size: 14px !important;
    }
    
    .header-theme-selector {
        padding: 3px 6px;
        gap: 4px;
    }
    
    .theme-dot {
        width: 8px;
        height: 8px;
    }
    
    .theme-dots-container {
        gap: 2px;
    }
    
    .theme-active-name {
        font-size: 7px;
        min-width: 50px;
        padding-left: 4px;
    }
}

/* =========================================
   ANIMACIONES DEL SELECTOR
   ========================================= */

@keyframes dotPulse {
    0%, 100% {
        box-shadow: 0 0 8px var(--shadow-accent);
    }
    50% {
        box-shadow: 0 0 15px var(--shadow-accent), 0 0 20px var(--shadow-accent);
    }
}

.theme-dot.active {
    animation: dotPulse 2s ease-in-out infinite;
}

/* Efecto ripple al hacer clic */
.theme-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}

.theme-dot:active::after {
    animation: rippleDot 0.4s ease-out;
}

@keyframes rippleDot {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/* =========================================
   AJUSTES AL HEADER EXISTENTE
   ========================================= */

header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px;
}

.logo {
    flex-shrink: 0;
}