/* ================================= */
/* 1. DETALLES GENERALES */
/* ================================= */

::selection { background: rgba(var(--morado-rgb), 0.35); }
:focus-visible { outline-color: var(--morado); }
html { scrollbar-color: var(--morado) transparent; }

/* ================================= */
/* 2. SUPERFICIES OSCURAS */
/* ================================= */

.taller-encabezado,
.taller-hero,
.publicar-lateral,
.franja-creadora { background-color: var(--fondo-oscuro); }

/* Hero del catálogo: morado profundo con luces + las líneas onduladas (canvas) */
.hero,
:root[data-tema="oscuro"] .hero {
    background:
        radial-gradient(ellipse 70% 80% at 12% 0%, rgba(var(--morado-rgb), 0.4), transparent 62%),
        radial-gradient(ellipse 60% 70% at 100% 100%, rgba(var(--morado-rgb), 0.3), transparent 62%),
        var(--fondo-oscuro);
}

.hero .lineas-moradas { z-index: 0; }

.pie,
:root[data-tema="oscuro"] .pie {
    background: linear-gradient(180deg, var(--fondo-oscuro-2), var(--fondo-oscuro));
    border-top: 1px solid rgba(var(--morado-rgb), 0.45);
    box-shadow: 0 -24px 70px rgba(var(--morado-rgb), 0.18);
}

.toast {
    background: var(--fondo-oscuro-2);
    border: 1px solid rgba(var(--morado-rgb), 0.5);
    box-shadow: 0 10px 30px rgba(var(--morado-rgb), 0.35);
    color: #fff;
}

/* ================================= */
/* 3. BOTONES Y CHIPS */
/* ================================= */

.btn-ancho,
.btn-negro,
.acciones-detalle .btn-principal,
.filtro-chip.activo,
.opcion-talla.activo,
.chip-sel.activo,
.pasos-checkout span.hecho,
.contador-carrito,
.fab-publicar,
.btn-camara,
.registro-pasos li.activo span {
    background: var(--grad-morado);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(var(--morado-rgb), 0.35);
}

.btn-ancho:hover,
.btn-negro:hover {
    background: linear-gradient(135deg, var(--morado-claro), var(--morado));
    box-shadow: 0 12px 30px rgba(var(--morado-rgb), 0.55);
}

.btn-secundario:hover,
a.btn-secundario:hover {
    background: var(--grad-morado);
    border-color: transparent;
    color: #fff;
}

.icono-boton:hover { background: var(--grad-morado); border-color: transparent; color: #fff; }
.nav-principal a::after { background: var(--morado); }
.btn-top:hover { background: var(--grad-morado); border-color: transparent; color: #fff; }

/* ================================= */
/* 4. TARJETAS DE PRODUCTOS */
/* ================================= */

.tarjeta-imagen {
    box-shadow: 0 12px 30px rgba(var(--morado-rgb), 0.24), 0 2px 8px rgba(var(--morado-rgb), 0.2);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.tarjeta-producto:hover .tarjeta-imagen {
    transform: translateY(-6px);
    box-shadow: 0 24px 54px rgba(var(--morado-rgb), 0.45), 0 0 0 1px rgba(var(--morado-rgb), 0.55);
}

/* ================================= */
/* 5. BOTONES FLOTANTES DE LOS LADOS (asistente IA y corazón) */
/* ================================= */

.btn-ia { background: var(--grad-morado); box-shadow: 0 10px 26px rgba(var(--morado-rgb), 0.5); }
.btn-subir, .btn-subir::before, .btn-subir::after { background: var(--morado); }
.btn-subir:hover, .btn-subir:hover::before, .btn-subir:hover::after { background: var(--morado-claro); }