/* Gradientes para os temas */
.gradient-blue {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

.gradient-green {
    background: linear-gradient(135deg, #10b981, #22c55e);
}

.gradient-purple {
    background: linear-gradient(135deg, #a855f7, #8b5cf6);
}

.gradient-red {
    background: linear-gradient(135deg, #ef4444, #f43f5e);
}

.gradient-orange {
    background: linear-gradient(135deg, #f97316, #eab308);
}

.gradient-teal {
    background: linear-gradient(135deg, #14b8a6, #06b6d4);
}

.gradient-pink {
    background: linear-gradient(135deg, #d64a8d, #e0569a);
}

.gradient-nude {
    background: linear-gradient(135deg, #a87a4d, #c06f6f);
}

/* Novos gradientes */
.gradient-indigo {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

.gradient-amber {
    background: linear-gradient(135deg, #d97706, #ea580c);
}

.gradient-lime {
    background: linear-gradient(135deg, #65a30d, #16a34a);
}

.gradient-cyan {
    background: linear-gradient(135deg, #0891b2, #0d9488);
}

.gradient-rose {
    background: linear-gradient(135deg, #e11d48, #db2777);
}

.gradient-violet {
    background: linear-gradient(135deg, #7c3aed, #9333ea);
}

.gradient-gold {
    background: linear-gradient(135deg, #d69200, #d97706);
}

.gradient-mint {
    background: linear-gradient(135deg, #1dab72, #059669);
}

.gradient-coffee {
    background: linear-gradient(135deg, #8a5f44, #865f47);
}

.gradient-navy {
    background: linear-gradient(135deg, #3a539f, #4f46e5);
}

.gradient-olive {
    background: linear-gradient(135deg, #7a8618, #8d9c10);
}

/* Gradiente para o preview */
.theme-preview-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid white;
}

/* Estilos para os botões de tema */
.theme-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.theme-btn:hover {
    transform: scale(1.05);
}

.theme-btn.selected {
    border: 2px solid white;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* Estilos para a barra lateral do preview */
.preview-sidebar {
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
}

/* Estilos para os botões de horário do preview */
.preview-time-btn {
    padding: 4px 8px;
    border-radius: 4px;
    color: white;
    font-size: 10px;
}

/* Ajuste para garantir que os botões tenham o mesmo tamanho */
#apply-theme-btn {
    transition: background-color 0.3s ease;
}