/*
 * Logo de Sofi: rompecabezas de 4 colores con círculo central, solo con CSS.
 * Lo usan la tienda y el panel:  <span class="logo-sofi" aria-hidden="true"></span>
 * El tamaño lo pone quien lo usa (width/height); todo va en %, así que escala.
 * La misma figura está en img/logo.svg para el ícono de la pestaña.
 */
.logo-sofi {
    --amarillo: #f9c80e; --rosa: #e9306f; --azul: #1e88e5; --verde: #6cc04a; --hueco: #eef2f7;
    display: inline-block; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 24%;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    background:
        /* brillo suave arriba */
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%),
        /* círculo blanco con aro amarillo */
        /* (ellipse R% R% = círculo de radio R% del logo; el último tope en 100% es su borde) */
        radial-gradient(ellipse 30% 30% at 50% 50%, #fff 0 83%, #fcd34d 85% 98%, transparent 100%),
        /* piezas que encajan en el cuadrante vecino, pegadas al aro */
        radial-gradient(ellipse 8% 8% at 58% 21%, var(--amarillo) 0 94%, transparent 100%),
        radial-gradient(ellipse 8% 8% at 79% 58%, var(--rosa) 0 94%, transparent 100%),
        radial-gradient(ellipse 8% 8% at 42% 79%, var(--azul) 0 94%, transparent 100%),
        radial-gradient(ellipse 8% 8% at 21% 42%, var(--verde) 0 94%, transparent 100%),
        /* huecos blancos en los bordes */
        radial-gradient(ellipse 7.5% 7.5% at 77% 1%, var(--hueco) 0 92%, transparent 100%),
        radial-gradient(ellipse 7.5% 7.5% at 99% 79%, var(--hueco) 0 92%, transparent 100%),
        radial-gradient(ellipse 7.5% 7.5% at 22% 99%, var(--hueco) 0 92%, transparent 100%),
        radial-gradient(ellipse 7.5% 7.5% at 1% 21%, var(--hueco) 0 92%, transparent 100%),
        /* los cuatro cuadrantes */
        conic-gradient(from 0deg at 50% 50%,
            var(--rosa) 0 90deg, var(--azul) 90deg 180deg, var(--verde) 180deg 270deg, var(--amarillo) 270deg 360deg);
}