/* =============================================================
   ENHANCED UI - Selecciones y Estados Visuales
   ============================================================= */

/* Marcos Seleccionados */
.frame-card.selected {
    border: 4px solid var(--color-text-gray) !important;
    background-color: var(--color-champagne) !important;
    box-shadow: 0 0 0 1px var(--color-text-gray), 0 10px 30px rgba(0,0,0,0.15) !important;
    transform: translateY(-4px) scale(1.02);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
}

/* Indicador de Check (Círculo) */
.check-minimal {
    width: 26px !important;
    height: 26px !important;
    border: 2px solid var(--color-soft-gray) !important;
    background: white !important;
}

.frame-card.selected .check-minimal {
    border-color: var(--color-text-gray) !important;
    background-color: var(--color-text-gray) !important;
}

/* Punto interno del Check */
.check-minimal::after {
    width: 12px !important;
    height: 12px !important;
}

/* Fondos Seleccionados */
.background-card.selected {
    border: 4px solid var(--color-text-gray) !important;
    box-shadow: 0 0 0 1px var(--color-text-gray), 0 5px 15px rgba(0,0,0,0.1) !important;
    transform: scale(1.05);
}

/* Obras Seleccionadas */
.artwork-card.selected {
    border: 4px solid var(--color-text-gray) !important;
    box-shadow: 0 0 0 1px var(--color-text-gray), 0 5px 15px rgba(0,0,0,0.1) !important;
    transform: translateY(-2px) scale(1.02);
}

/* Efecto hover general para tarjetas */
.frame-card:hover, .background-card:hover, .artwork-card:hover {
    box-shadow: 0 12px 35px rgba(0,0,0,0.1) !important;
}