/* Unidad 062-decorar-con-stickers — el overlay fijo y la libretita de Lili.
 *
 * Fichero propio de la app (mismo patrón que `notas/static/notas/panel.css`) y NO
 * `config/tailwind/input.css`: las utilidades de Tailwind se compilan a mano con el binario
 * standalone y `panel.css` es la salida ya compilada, así que una clase nueva de Tailwind no
 * existiría hasta la próxima compilación. Todo lo de aquí es CSS plano, con los tokens
 * SEMÁNTICOS del brandbook (`--color-*`, ya definidos por `panel.css`) para que el modo oscuro
 * y «reducir movimiento» sigan funcionando sin repetir ni un hex.
 */

/* El overlay entero deja pasar el puntero (`pointer-events: none`) y solo los stickers
 * colocados lo capturan (`auto`, abajo): así ningún sticker tapa un botón o un enlace real de
 * la pantalla que tenga debajo — patrón investigado en
 * docs/conocimiento/primer-js-propio-del-proyecto.md. `z-index: 10` lo deja POR DEBAJO de la
 * barra de navegación (z-20) y de los avisos flotantes (z-50): decorar nunca estorba. */
#overlay-stickers {
    position: fixed;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
}

.sticker-colocat {
    position: absolute;
    width: 88px;
    height: 88px;
    pointer-events: auto;
    /* `touch-action: none` SOLO aquí, en el elemento que se arrastra — nunca en `<body>` ni en
     * el overlay entero: así el scroll normal del móvil sigue intacto en el resto de la
     * pantalla y solo este elemento entra en modo arrastre. */
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.sticker-colocat img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none; /* el gesto lo captura el contenedor, no la imagen */
    -webkit-user-drag: none;
}

.sticker-colocat.arrossegant {
    cursor: grabbing;
    filter: drop-shadow(3px 3px 0 var(--color-stone-400));
}

/* El botón de quitar (R-81) solo aparece cuando la libreta está abierta: mientras Lili no está
 * decorando, sus stickers son decoración y nada más — ninguna cruz encima. */
.sticker-colocat .boton-treure {
    display: none;
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    border: 2px solid var(--color-stone-900);
    border-radius: 9999px;
    background: var(--color-surface-elevada);
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

#overlay-stickers.llibreta-oberta .sticker-colocat .boton-treure {
    display: block;
}

/* La libretita: siempre a mano, en cualquier pantalla, plegada en una esquina. */
#libreta-stickers {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

#tirador-libreta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 2px solid var(--color-stone-900);
    border-radius: 0.625rem;
    background: var(--color-primary);
    color: var(--color-text);
    box-shadow: 2px 2px 0 var(--color-stone-400);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
}

#tirador-libreta:hover {
    box-shadow: 4px 4px 0 var(--color-stone-400);
}

#stickers-catalogo {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    max-width: min(20rem, 80vw);
    max-height: 50vh;
    overflow-y: auto;
    padding: 0.75rem;
    border: 3px solid var(--color-stone-900);
    border-radius: 1rem;
    background: var(--color-surface-elevada);
    box-shadow: 3px 3px 0 var(--color-stone-400);
}

#stickers-catalogo .catalogo-buit {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.sticker-catalogo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    touch-action: none; /* mismo criterio que arriba: solo el elemento arrastrable */
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

@media (prefers-color-scheme: dark) {
    #tirador-libreta,
    #stickers-catalogo {
        border-color: var(--color-primary);
    }
}