/* =========================================================
   SONICOVA — RESPONSIVE MÓVIL DE LA TIENDA
   Archivo: componentes/tienda_mobile.css

   DISEÑO:
   carpeta + papel + periódico + collage + cinta
   MOBILE FIRST

   IMPORTANTE:
   Se conserva la estructura responsive original.
   Solo se modifica la apariencia visual.
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&family=Montserrat:wght@400;500;600;700;800;900&family=Special+Elite&display=swap');


/* =========================================================
   VARIABLES
========================================================= */

:root{
    --tienda-papel:#f4ead5;
    --tienda-papel-claro:#fff9ed;
    --tienda-papel-sucio:#e5d5b5;

    --tienda-carpeta:#8a7654;
    --tienda-carpeta-oscura:#6f5d43;

    --tienda-rojo:#c52229;
    --tienda-rojo-oscuro:#941b20;

    --tienda-negro:#201b17;
    --tienda-tinta:#39312a;

    --tienda-amarillo:#f4d35e;
}


/* =========================================================
   BASE
========================================================= */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:hidden;
}

img,
video,
iframe{
    max-width:100%;
}

html,
body,
input,
textarea,
select,
button{
    font-family:'Montserrat',Arial,sans-serif;
}


/* =========================================================
   TIPOGRAFÍA DE TITULARES
========================================================= */

.titulo-global,
.nombre-audio,
.modal-right h2,
.modal-denuncia-box h2{

    font-family:'Bowlby One SC',Impact,sans-serif !important;
    font-weight:400 !important;

    letter-spacing:.3px;
    text-transform:uppercase;

    -webkit-text-stroke:.2px currentColor;
}


/* =========================================================
   TODO EL DISEÑO VISUAL MÓVIL
========================================================= */

@media (max-width:900px){

    /* -----------------------------------------------------
       FONDO GENERAL
    ----------------------------------------------------- */

    html,
    body{
        width:100%;
        max-width:100%;
        min-width:0;
        overflow-x:hidden;
    }

    body{
        background:
            radial-gradient(
                circle at 12% 18%,
                rgba(255,255,255,.16) 0 1px,
                transparent 2px
            ),
            radial-gradient(
                circle at 76% 42%,
                rgba(0,0,0,.09) 0 1px,
                transparent 2px
            ),
            radial-gradient(
                circle at 42% 83%,
                rgba(255,255,255,.09) 0 1px,
                transparent 2px
            ),
            #d9ccb0;

        background-size:
            17px 17px,
            23px 23px,
            29px 29px;

        background-attachment:scroll;
    }


    /* -----------------------------------------------------
       ESTRUCTURA
    ----------------------------------------------------- */

    .app-layout{
        display:block;
        width:100%;
        min-width:0;
    }


    /* =====================================================
       NAVEGACIÓN MÓVIL
       PANEL NEGRO + PAPEL BLANCO + CINTAS
    ===================================================== */

    .left-buttons {
        position: relative !important;
        isolation: isolate !important;
        z-index: 1000;

        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center;
        justify-content: flex-start;
        gap: 9px;

        width: 100% !important;
        max-width: 100%;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 28px 11px 15px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        background: linear-gradient(
            155deg,
            #302d29 0%,
            #1b1a18 48%,
            #10100f 100%
        ) !important;

        border: 1px solid rgba(255, 246, 225, .12) !important;
        border-bottom: 3px solid #090909 !important;
        border-radius: 2px 7px 3px 1px !important;

        box-shadow:
            -3px 4px 0 #090909,
            3px 7px 0 #292622,
            7px 12px 0 rgba(0, 0, 0, .45),
            10px 18px 24px rgba(0, 0, 0, .34),
            inset 0 1px 0 rgba(255, 255, 255, .08) !important;

        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .left-buttons::-webkit-scrollbar {
        display: none;
    }

    /* MARCO DEL PANEL NEGRO */

    .left-buttons::before {
        content: "" !important;
        display: block !important;

        position: absolute !important;
        z-index: 0 !important;
        top: 7px !important;
        left: 7px !important;
        right: 7px !important;
        bottom: 7px !important;

        width: auto !important;
        height: auto !important;

        background: transparent !important;
        border: 1px solid rgba(255, 248, 232, .14) !important;
        border-radius: 1px 5px 2px 4px / 3px 1px 5px 2px !important;

        transform: rotate(.35deg);
        pointer-events: none !important;
    }

    /* ESQUINA DOBLADA */

    .left-buttons::after {
        content: "" !important;

        position: absolute !important;
        z-index: 1 !important;
        top: -1px !important;
        right: -1px !important;
        left: auto !important;
        bottom: auto !important;

        width: 48px !important;
        height: 42px !important;

        background: linear-gradient(
            225deg,
            #d9cdb5 0%,
            #eee3cd 46%,
            #8c806d 48%,
            #34312d 51%,
            #171717 70%
        ) !important;

        clip-path: polygon(
            15% 0,
            100% 0,
            100% 100%,
            72% 82%,
            54% 55%,
            29% 36%
        );

        pointer-events: none !important;
    }

    /* BOTONES DE PAPEL */

    .left-buttons .btn-dissolve {
        position: relative !important;
        z-index: 3 !important;

        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center;
        justify-content: center;

        width: auto !important;
        min-width: max-content !important;
        max-width: 190px;

        min-height: 35px !important;
        height: auto !important;

        margin: 0 !important;
        padding: 7px 11px !important;

        font-family: 'Montserrat', Arial, sans-serif !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1.15;
        text-align: center;
        white-space: nowrap !important;

        color: #211f1b !important;

        background: linear-gradient(
            145deg,
            #fffdf6 0%,
            #f5eedf 100%
        ) !important;

        border: 1px solid #d6cbb7 !important;
        outline: 1px dashed rgba(119, 37, 34, .72) !important;
        outline-offset: -4px !important;
        border-radius: 3px 6px 2px 5px !important;

        box-shadow:
            2px 4px 0 rgba(0, 0, 0, .34),
            0 6px 10px rgba(0, 0, 0, .22),
            inset 0 1px 0 rgba(255, 255, 255, .95) !important;

        text-shadow: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    /* CINTA BLANCA SOBRE CADA BOTÓN */

    .left-buttons .btn-dissolve::before {
        content: "" !important;

        position: absolute !important;
        z-index: 5 !important;
        top: -8px !important;
        left: 50% !important;

        width: 43px !important;
        height: 12px !important;

        background: linear-gradient(
            90deg,
            #fffefa,
            #f4eee2 55%,
            #fffdf7
        ) !important;

        border: 1px solid #d2c8b7 !important;
        border-radius: 1px 2px 1px 3px / 2px 1px 3px 1px !important;

        box-shadow:
            1px 2px 2px rgba(0, 0, 0, .18),
            inset 0 1px 0 rgba(255, 255, 255, .95) !important;

        transform: translateX(-50%) rotate(-6deg) skewX(-5deg) !important;
        pointer-events: none !important;
    }

    .left-buttons .btn-dissolve::after {
        content: "" !important;

        position: absolute !important;
        left: 5px !important;
        right: 5px !important;
        bottom: 4px !important;

        height: 1px !important;
        background: rgba(70, 65, 58, .22) !important;

        pointer-events: none !important;
    }

    .left-buttons .btn-dissolve:hover {
        transform: none;
    }

    .left-buttons .btn-dissolve:active {
        transform: scale(.98);
    }


    /* =====================================================
       CONTENIDO
    ===================================================== */

    .main-layout{

        position:relative;

        width:100% !important;
        max-width:100%;

        min-width:0;

        margin-left:0 !important;

        padding-left:0;
        padding-right:0;

        /*
         * CARPETA DE PAPEL
         */
        background:
            radial-gradient(
                circle at 18% 16%,
                rgba(255,255,255,.10) 0 1px,
                transparent 2px
            ),
            radial-gradient(
                circle at 82% 76%,
                rgba(0,0,0,.08) 0 1px,
                transparent 2px
            ),
            linear-gradient(
                90deg,
                rgba(255,255,255,.025) 1px,
                transparent 1px
            ),
            linear-gradient(
                rgba(0,0,0,.025) 1px,
                transparent 1px
            ),
            var(--tienda-carpeta);

        background-size:
            19px 19px,
            27px 27px,
            17px 17px,
            17px 17px,
            auto;

        overflow:hidden;
    }

    /*
     * Mancha de carpeta
     */
    .main-layout::before{

        content:"";

        position:absolute;

        top:34px;
        right:-35px;

        width:145px;
        height:42px;

        background:rgba(0,0,0,.09);

        transform:rotate(7deg);

        pointer-events:none;
    }

    /*
     * Papel roto decorativo
     */
    .main-layout::after{

        content:"";

        position:absolute;

        left:-35px;
        top:215px;

        width:120px;
        height:46px;

        background:var(--tienda-papel-sucio);

        transform:rotate(-8deg);

        opacity:.55;

        pointer-events:none;
    }


    /* =====================================================
       TÍTULO
    ===================================================== */

    .titulo-global{

        position:relative;
        z-index:5;

        max-width:calc(100% - 20px);

        margin:22px 10px 17px;

        padding:13px 9px 11px;

        /*
         * HOJA DE PERIÓDICO
         */
        background:
            radial-gradient(
                circle at 18% 25%,
                rgba(0,0,0,.035) 0 1px,
                transparent 2px
            ),
            radial-gradient(
                circle at 80% 70%,
                rgba(0,0,0,.025) 0 1px,
                transparent 2px
            ),
            var(--tienda-papel);

        border:2px solid var(--tienda-negro);

        box-shadow:
            5px 5px 0 rgba(0,0,0,.18);

        transform:rotate(-.7deg);

        font-size:clamp(25px,7vw,34px);

        line-height:1.08;
        letter-spacing:.2px;

        text-align:center;

        overflow-wrap:anywhere;

        text-shadow:
            2px 2px 0 rgba(0,0,0,.10);
    }

    .titulo-global::before{

        content:"";

        position:absolute;

        top:-8px;
        left:16%;

        width:72px;
        height:18px;

        background:var(--tienda-amarillo);

        transform:rotate(-3deg);

        opacity:.9;

        clip-path:polygon(
            0 5%,
            98% 0,
            100% 92%,
            3% 100%
        );
    }


    /* =====================================================
       BUSCADOR
       PAPEL PEGADO A LA CARPETA
    ===================================================== */

    .search-box{

        position:relative !important;
        inset:auto !important;

        width:calc(100% - 24px) !important;

        max-width:100%;
        min-width:0;

        height:auto !important;
        min-height:0;

        margin:15px 12px 22px;

        padding:12px 9px 9px;

        border-radius:0;

        overflow:visible;

        /*
         * PAPEL
         */
        background:
            radial-gradient(
                circle at 15% 22%,
                rgba(0,0,0,.04) 0 1px,
                transparent 2px
            ),
            radial-gradient(
                circle at 83% 74%,
                rgba(0,0,0,.025) 0 1px,
                transparent 2px
            ),
            var(--tienda-papel-claro);

        border:
            1.5px solid rgba(32,27,23,.45);

        box-shadow:
            5px 6px 0 rgba(0,0,0,.20),
            0 10px 15px rgba(0,0,0,.12);

        transform:rotate(.65deg);

        z-index:100;
    }

    /*
     * PAPEL DEBAJO
     */
    .search-box::after{

        content:"";

        position:absolute;

        z-index:-1;

        left:5px;
        right:-5px;
        bottom:-6px;

        height:100%;

        background:#d8c7a3;

        border:1px solid rgba(32,27,23,.15);

        transform:rotate(-1.5deg);
    }

    /*
     * CINTA AMARILLA
     */
    .search-box::before{

        content:"";

        position:absolute;

        top:-11px;
        left:50%;

        width:96px;
        height:25px;

        transform:translateX(-50%) rotate(-2deg);

        background:
            linear-gradient(
                90deg,
                rgba(255,255,255,.13),
                transparent 40%,
                rgba(0,0,0,.05)
            ),
            var(--tienda-amarillo);

        box-shadow:
            0 2px 3px rgba(0,0,0,.12);

        opacity:.94;

        clip-path:polygon(
            0 7%,
            97% 0,
            100% 91%,
            3% 100%
        );
    }


    /* =====================================================
       FORMULARIO
       SE CONSERVA SU ESTRUCTURA ORIGINAL
    ===================================================== */

    .search-form{

        display:grid;

        grid-template-columns:
            minmax(0,1fr)
            1px
            95px;

        grid-template-rows:auto auto;

        align-items:center;

        width:100%;
        min-width:0;

        gap:0;

        padding:7px 9px;
    }

    .search-label{

        grid-column:1 / -1;
        grid-row:1;

        min-width:0;

        padding:3px 2px 7px;

        font-family:'Special Elite',monospace !important;

        font-size:11px;
        font-weight:700 !important;

        letter-spacing:1px;

        line-height:1.35;

        color:var(--tienda-rojo);

        overflow-wrap:anywhere;
    }

    .search-bar{

        grid-column:1;
        grid-row:2;

        display:block;

        width:100% !important;
        max-width:100%;

        min-width:0;

        height:39px;

        margin:0;

        padding:0 9px;

        font-family:'Special Elite',monospace !important;

        font-size:16px;
        font-weight:400 !important;

        color:var(--tienda-negro);

        background:#fffdf5;

        border:2px solid var(--tienda-negro);

        border-radius:0;

        box-shadow:
            2px 2px 0 var(--tienda-rojo);
    }

    .search-bar::placeholder{

        font-family:'Special Elite',monospace !important;

        font-weight:400 !important;

        color:#756b5c;

        opacity:.85;
    }

    .search-bar:focus{

        outline:none;

        border-color:var(--tienda-rojo);

        box-shadow:
            3px 3px 0 var(--tienda-negro);
    }

    .divider{

        grid-column:2;
        grid-row:2;

        display:block;

        width:1px;
        height:22px;

        margin:0 4px;

        background:rgba(0,0,0,.22);
    }

    .sort-select{

        grid-column:3;
        grid-row:2;

        width:95px !important;

        min-width:0 !important;
        max-width:95px !important;

        height:36px;

        margin:0;

        padding:0 4px;

        box-sizing:border-box;

        font-family:'Montserrat',Arial,sans-serif !important;

        font-size:9px !important;
        font-weight:800 !important;

        color:var(--tienda-negro) !important;

        background-color:#fff8eb !important;

        border:1.5px solid var(--tienda-negro) !important;

        border-radius:0 !important;

        box-shadow:
            2px 2px 0 var(--tienda-rojo) !important;

        cursor:pointer;
    }

    .search-box .sort-select{

        appearance:none !important;
        -webkit-appearance:none !important;

        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c52229' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;

        background-repeat:no-repeat !important;

        background-position:right 4px center !important;

        background-size:11px !important;

        padding-right:17px !important;
    }

    .search-box .sort-select option{

        font-family:Arial,sans-serif !important;

        font-size:14px !important;

        font-weight:700 !important;

        color:var(--tienda-negro) !important;

        background:#fff8eb !important;
    }


    /* =====================================================
       PRODUCTOS
       SE CONSERVAN LAS DOS COLUMNAS ORIGINALES
    ===================================================== */

    .grid-sonido{

        display:grid;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        align-items:stretch;
        justify-content:stretch;

        width:100%;
        max-width:100%;
        min-width:0;

        gap:18px 10px;

        margin:0;

        padding:8px 9px 38px;
    }


    /* =====================================================
       TARJETAS — PAPEL / COLLAGE
    ===================================================== */

    .card-periodico,
    .card-periodico:nth-child(2),
    .card-periodico:nth-child(3){

        position:relative;

        width:100% !important;
        max-width:100%;

        min-width:0;

        height:auto;

        margin:0;

        padding:7px;

        transform:none;

        border-radius:0;

        overflow:visible;

        /*
         * PAPEL
         */
        background:
            radial-gradient(
                circle at 15% 18%,
                rgba(0,0,0,.035) 0 1px,
                transparent 2px
            ),
            radial-gradient(
                circle at 80% 73%,
                rgba(0,0,0,.025) 0 1px,
                transparent 2px
            ),
            var(--tienda-papel-claro);

        border:
            1px solid rgba(32,27,23,.40);

        box-shadow:
            4px 5px 0 rgba(0,0,0,.18);
    }

    /*
     * ROTACIONES SUTILES
     */
    .card-periodico:nth-child(4n+1){
        transform:rotate(-.8deg);
    }

    .card-periodico:nth-child(4n+2){
        transform:rotate(.7deg);
    }

    .card-periodico:nth-child(4n+3){
        transform:rotate(.4deg);
    }

    .card-periodico:nth-child(4n){
        transform:rotate(-.5deg);
    }

    .card-periodico:hover{
        transform:none;
    }


    /*
     * PAPEL DEBAJO DE CADA FICHA
     */
    .card-periodico::after{

        content:"";

        position:absolute;

        z-index:-1;

        left:4px;
        right:-4px;
        top:4px;
        bottom:-5px;

        background:#ddcba8;

        border:1px solid rgba(32,27,23,.12);

        transform:rotate(1.2deg);

        pointer-events:none;
    }


    /*
     * CINTA PEQUEÑA
     */
    .card-periodico::before{

        content:"";

        position:absolute;

        top:-6px;

        left:50%;

        width:48px;
        height:12px;

        transform:translateX(-50%) rotate(-2deg);

        background:var(--tienda-amarillo);

        opacity:.92;

        box-shadow:
            0 1px 2px rgba(0,0,0,.10);

        clip-path:polygon(
            0 6%,
            97% 0,
            100% 92%,
            3% 100%
        );

        z-index:5;
    }


    /* =====================================================
       PORTADAS
    ===================================================== */

    .img-portada{

        display:block;

        width:100%;
        max-width:100%;

        height:auto;

        aspect-ratio:1 / 1;

        object-fit:cover;

        border-radius:0;

        border:
            2px solid var(--tienda-negro);

        box-shadow:
            3px 3px 0 var(--tienda-negro);

        background:#d8c8a8;
    }


    /* =====================================================
       INFORMACIÓN
    ===================================================== */

    .info-disco{

        min-width:0;

        margin-top:9px;

        padding:0 2px 2px;
    }

    .nombre-audio{

        max-width:100%;

        margin-top:5px;

        margin-bottom:6px;

        font-size:clamp(16px,4vw,20px);

        line-height:1.12;

        letter-spacing:0;

        color:var(--tienda-negro);

        overflow-wrap:anywhere;
    }

    .descripcion-audio{

        max-width:100%;

        font-family:'Special Elite',monospace;

        font-size:11px;

        font-weight:400;

        line-height:1.45;

        color:#62594e;

        overflow-wrap:anywhere;
    }


    /* =====================================================
       ETIQUETAS
    ===================================================== */

    .tag{

        max-width:100%;

        padding:4px 6px;

        font-family:'Montserrat',Arial,sans-serif;

        font-size:9px;

        font-weight:800;

        color:var(--tienda-negro);

        background:#eee1c5;

        border:
            1px solid var(--tienda-negro);

        border-radius:0;

        white-space:normal;

        overflow-wrap:anywhere;
    }

    .cat-badge{

        max-width:100%;

        color:#fff;

        background:var(--tienda-rojo);

        border-color:var(--tienda-rojo);

        border-radius:0;

        white-space:normal;

        overflow-wrap:anywhere;
    }


    /* =====================================================
       FOOTER DE TARJETA
    ===================================================== */

    .footer-card{

        display:flex;

        flex-wrap:wrap;

        align-items:center;

        gap:5px;

        min-width:0;

        margin-top:9px;

        padding-top:7px;

        border-top:
            1px dashed rgba(32,27,23,.55);

        font-family:'Special Elite',monospace;

        font-size:10px;
    }

    .form-demanda{

        min-width:0;

        margin-top:7px;
    }

    .btn-demandar{

        display:inline-flex;

        align-items:center;
        justify-content:center;

        width:auto;

        max-width:100%;

        min-height:32px;

        padding:7px 9px;

        font-family:'Montserrat',Arial,sans-serif;

        font-size:10px;

        font-weight:800;

        line-height:1.2;

        border-radius:0;

        white-space:nowrap;
    }


    /* =====================================================
       BOTONES DE COMPRA
    ===================================================== */

    .modal-buttons{

        display:flex;

        flex-flow:row nowrap !important;

        justify-content:center;
        align-items:stretch;

        gap:7px;

        width:100%;
        min-width:0;

        margin-top:12px;
    }

    .modal-buttons .buy-btn,
    .modal-buttons .rating-open,
    .buy-btn,
    .rating-open{

        display:inline-flex;

        flex:1 1 0 !important;

        align-items:center;
        justify-content:center;

        width:auto !important;

        max-width:100%;
        min-width:0;

        min-height:36px !important;

        height:auto;

        margin:0;

        padding:7px 5px !important;

        font-family:'Montserrat',Arial,sans-serif;

        font-size:10px !important;

        font-weight:800;

        line-height:1.2;

        text-align:center;

        border-radius:0;

        white-space:normal;

        overflow-wrap:anywhere;
    }

    .favorite-btn{

        max-width:100%;

        min-height:34px;

        padding:7px 9px;

        font-family:'Montserrat',Arial,sans-serif;

        font-size:11px;

        font-weight:800;
    }


    /* =====================================================
       RATINGS
    ===================================================== */

    .rating-selector{

        max-width:100%;

        margin-top:10px;
    }

    .rating-menu{

        max-width:calc(100vw - 24px);

        top:auto;

        bottom:calc(100% + 8px);

        max-height:55vh;

        overflow-x:hidden;
        overflow-y:auto;

        overscroll-behavior:contain;
    }

    .rating-menu label{

        padding:9px;

        font-size:12px;

        overflow-wrap:anywhere;
    }


    /* =====================================================
       MODAL DE DETALLES
    ===================================================== */

    .modal-disco{

        width:100%;
        max-width:100%;
        min-width:0;

        padding:9px;

        overflow-x:hidden;
        overflow-y:auto;

        align-items:flex-start;

        -webkit-overflow-scrolling:touch;
    }

    .modal-box{

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:13px;

        width:100%;

        max-width:600px;

        min-width:0;

        min-height:0;

        height:auto;

        max-height:none;

        margin:auto;

        padding:46px 12px 15px;

        border-radius:0;

        overflow:visible;

        /*
         * PAPEL
         */
        background:
            radial-gradient(
                circle at 20% 20%,
                rgba(0,0,0,.035) 0 1px,
                transparent 2px
            ),
            var(--tienda-papel-claro);

        border:2px solid var(--tienda-negro);

        box-shadow:
            6px 6px 0 var(--tienda-rojo);
    }

    .modal-left,
    .modal-right{

        width:100%;

        max-width:100%;

        min-width:0;
    }

    .modal-left{
        gap:9px;
    }

    .modal-left img{

        display:block;

        width:100%;

        max-width:280px;

        height:auto;

        max-height:250px;

        aspect-ratio:1 / 1;

        object-fit:cover;

        border-radius:0;

        border:2px solid var(--tienda-negro);
    }

    .disco-modal{

        width:75px;
        height:75px;

        max-width:30vw;
        max-height:30vw;

        right:0;
        bottom:5px;
    }

    .modal-right{

        gap:8px;
    }

    .modal-right h2{

        max-width:100%;

        font-size:clamp(23px,6vw,33px);

        line-height:1.1;

        overflow-wrap:anywhere;
    }

    .modal-desc{

        max-width:100%;

        font-family:'Special Elite',monospace;

        font-size:12px;

        line-height:1.5;

        overflow-wrap:anywhere;
    }

    .extra-box{

        max-width:100%;

        padding:8px;

        font-size:12px;

        overflow-wrap:anywhere;
    }

    .cerrar{

        top:7px;
        right:7px;

        width:36px;
        height:36px;

        z-index:5;
    }


    /* =====================================================
       CONFIRMACIONES
    ===================================================== */

    .confirm-card{

        width:calc(100% - 24px);

        max-width:380px;

        min-width:0;

        padding:19px 13px;

        overflow-wrap:anywhere;
    }

    .confirm-card button{

        min-height:35px;

        max-width:100%;

        padding:7px 10px;

        font-size:11px;

        font-weight:800;
    }


    /* =====================================================
       TOAST
    ===================================================== */

    .toast-favorito{

        width:max-content;

        max-width:calc(100vw - 24px);

        padding:11px 14px;

        font-family:'Montserrat',Arial,sans-serif;

        font-size:12px;

        text-align:center;

        overflow-wrap:anywhere;
    }

    .favorito-sticker{

        width:34px;
        height:34px;

        font-size:19px;

        border-width:3px;
    }


    /* =====================================================
       DENUNCIA
    ===================================================== */

    .modal-denuncia{

        width:100%;
        max-width:100%;

        min-width:0;

        padding:9px;

        overflow-x:hidden;
        overflow-y:auto;

        -webkit-overflow-scrolling:touch;
    }

    .modal-denuncia-box{

        width:100%;

        max-width:520px;

        min-width:0;

        max-height:calc(100vh - 18px);

        margin:auto;

        padding:42px 12px 14px;

        overflow-x:hidden;
        overflow-y:auto;

        overscroll-behavior:contain;

        background:var(--tienda-papel-claro);

        border:2px solid var(--tienda-negro);

        box-shadow:
            6px 6px 0 var(--tienda-rojo);
    }

    .modal-denuncia-box h2{

        font-size:23px;

        line-height:1.12;

        overflow-wrap:anywhere;
    }

    .motivo-option{

        min-width:0;

        gap:8px;
    }

    .motivo-texto{

        min-width:0;

        overflow-wrap:anywhere;
    }

    .botones-denuncia{

        display:flex;

        flex-flow:row nowrap !important;

        justify-content:stretch;

        gap:7px;

        width:100%;
    }

    .botones-denuncia button{

        flex:1 1 0 !important;

        width:auto !important;

        max-width:100%;

        min-width:0;

        min-height:35px;

        padding:7px 5px;

        font-family:'Montserrat',Arial,sans-serif;

        font-size:10px;

        font-weight:800;

        line-height:1.2;

        white-space:normal;

        overflow-wrap:anywhere;
    }


/* =====================================================
   BOTÓN USUARIO — PAPEL ESTAMPADO + ICONO ROJO
===================================================== */

.icono-usuario-movil{
    display:none !important;
}

.left-buttons .btn-usuario-movil{
    position:relative !important;
    isolation:isolate !important;
    order:999 !important;

    margin-left:auto !important;

    flex:0 0 42px !important;
    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;

    height:42px !important;
    min-height:42px !important;
    padding:4px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    color:#e5242a !important;

    /* MISMO PAPEL BLANCO QUE LOS DEMÁS BOTONES */
    background:linear-gradient(
        145deg,
        #fffdf6 0%,
        #f5eedf 100%
    ) !important;

    border:1px solid #d6cbb7 !important;
    outline:1px dashed rgba(119,37,34,.72) !important;
    outline-offset:-4px !important;
    border-radius:3px 6px 2px 5px !important;

    box-shadow:
        2px 4px 0 rgba(0,0,0,.34),
        0 6px 10px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    text-decoration:none !important;
    overflow:visible !important;
    z-index:3 !important;
}

/* CINTA BLANCA ESTAMPADA ARRIBA */

.left-buttons .btn-usuario-movil::before{
    content:"" !important;

    position:absolute !important;
    z-index:5 !important;

    top:-8px !important;
    left:50% !important;

    width:30px !important;
    height:10px !important;

    background:linear-gradient(
        90deg,
        #fffefa,
        #f4eee2 55%,
        #fffdf7
    ) !important;

    border:1px solid #d2c8b7 !important;
    border-radius:1px 2px 1px 3px !important;

    box-shadow:
        1px 2px 2px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    transform:translateX(-50%) rotate(-6deg) skewX(-5deg) !important;
    pointer-events:none !important;
}


/* OCULTAR EL TEXTO */

.left-buttons .btn-usuario-movil .texto-usuario{
    display:none !important;
}


/* ICONO DE USUARIO — MISMA FIGURA, RELLENO ROJO */

.left-buttons .btn-usuario-movil .icono-usuario-movil {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #e5242a !important;
    background: transparent !important;
    position: relative !important;
    z-index: 6 !important;
}

/* Conserva el SVG original y rellena la figura en rojo */
.left-buttons .btn-usuario-movil .icono-usuario-movil svg {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    color: #e5242a !important;
    fill: #e5242a !important;
    stroke: #e5242a !important;
    overflow: visible !important;
}

/* Fuerza el relleno rojo en las partes de la figura */
.left-buttons .btn-usuario-movil .icono-usuario-movil svg path,
.left-buttons .btn-usuario-movil .icono-usuario-movil svg circle,
.left-buttons .btn-usuario-movil .icono-usuario-movil svg ellipse,
.left-buttons .btn-usuario-movil .icono-usuario-movil svg polygon {
    fill: #e5242a !important;
    stroke: #e5242a !important;
}

/* Mantiene transparente el fondo del botón */
.left-buttons .btn-usuario-movil {
    background-color: #fff !important;
}



    /* =====================================================
       SELECTOR DE TIPOS
       SOLO CAMBIO VISUAL
    ===================================================== */

    .tipo-fichas-movil{
        display:none;
    }

    .search-box .tipo-fichas-movil{

        display:flex !important;

        align-items:center;
        justify-content:space-between;

        gap:8px;

        min-width:0;
        max-width:48%;

        padding:8px 9px;

        color:var(--tienda-negro);

        background:#fff8eb;

        border:1.5px solid var(--tienda-negro);

        border-radius:0;

        box-shadow:
            2px 2px 0 var(--tienda-rojo);

        font:800 10px 'Montserrat',Arial,sans-serif;

        cursor:pointer;
    }

    .tipo-fichas-fondo[hidden]{
        display:none !important;
    }

    .tipo-fichas-fondo:not([hidden]){

        position:fixed;

        inset:0;

        z-index:99999;

        display:flex;

        align-items:center;
        justify-content:center;

        padding:14px;

        background:rgba(20,17,15,.76);

        backdrop-filter:blur(5px);
        -webkit-backdrop-filter:blur(5px);
    }

    .tipo-fichas-cartel{

        position:relative;

        width:100%;

        max-width:420px;

        max-height:85vh;

        overflow-y:auto;

        padding:25px 16px 18px;

        color:var(--tienda-negro);

        background:
            radial-gradient(
                circle at 20% 20%,
                rgba(0,0,0,.035) 0 1px,
                transparent 2px
            ),
            var(--tienda-papel-claro);

        border:2px solid var(--tienda-negro);

        border-radius:0;

        box-shadow:
            6px 6px 0 var(--tienda-rojo);

        font-family:'Montserrat',Arial,sans-serif;

        transform:rotate(-.5deg);
    }

    .tipo-fichas-cerrar{

        position:absolute;

        top:9px;
        right:10px;

        width:34px;
        height:34px;

        border:1px solid var(--tienda-negro);

        border-radius:0;

        background:#fff8eb;

        color:var(--tienda-negro);

        font-size:24px;

        cursor:pointer;
    }

    .tipo-fichas-etiqueta{

        margin:0 0 8px;

        color:var(--tienda-rojo);

        font-family:'Special Elite',monospace;

        font-size:9px;

        font-weight:900;

        letter-spacing:1.5px;
    }

    .tipo-fichas-cartel h2{

        margin:0;

        padding-right:20px;

        font-family:'Bowlby One SC',Impact,sans-serif;

        font-size:24px;

        line-height:1.2;

        font-weight:400;
    }

    .tipo-fichas-descripcion{

        margin:8px 0 18px;

        color:#74695d;

        font-family:'Special Elite',monospace;

        font-size:11px;
    }

    .tipo-fichas-grid{

        display:grid;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:9px;
    }

    .tipo-ficha{

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        justify-content:center;

        gap:6px;

        min-width:0;

        min-height:100px;

        padding:12px 10px;

        text-align:left;

        color:var(--tienda-negro);

        background:#fffaf0;

        border:1.5px solid #d6cbb8;

        border-radius:0;

        cursor:pointer;

        transition:
            background .15s,
            border-color .15s;
    }

    .tipo-ficha:active,
    .tipo-ficha.actual{

        background:#f5d9c7;

        border-color:var(--tienda-rojo);

        box-shadow:
            inset 4px 0 var(--tienda-rojo);
    }

    .tipo-ficha-icono{

        color:var(--tienda-rojo);

        font-size:23px;

        line-height:1;
    }

    .tipo-ficha strong{

        font-size:11px;

        font-weight:900;
    }

    .tipo-ficha small{

        color:#74695d;

        font-size:9px;

        line-height:1.4;
    }
}


/* =========================================================
   TELÉFONOS PEQUEÑOS
========================================================= */

@media (max-width:480px){

    .left-buttons{
        gap:6px;
        padding:22px 8px 11px;
    }

    .left-buttons .btn-dissolve{
        min-height:33px !important;
        padding:7px 9px !important;
        font-size:10px !important;
    }

    .titulo-global{
        margin:20px 8px 15px;
        font-size:clamp(25px,7vw,32px);
    }

    .search-box{

        width:calc(100% - 20px) !important;

        margin:13px 10px 19px;
    }

    .search-form{

        grid-template-columns:
            minmax(0,1fr)
            1px
            95px;

        padding:7px;
    }

    .search-label{
        font-size:10px;
    }

    .search-bar{
        height:37px;
        padding:0 6px;
        font-size:16px;
    }

    .divider{
        margin:0 3px;
    }

    .sort-select{

        width:95px !important;

        max-width:95px !important;

        height:36px;

        padding:0 4px;

        font-size:9px !important;
    }

    .grid-sonido{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:15px 8px;

        padding:7px 7px 30px;
    }

    .card-periodico,
    .card-periodico:nth-child(2),
    .card-periodico:nth-child(3){

        padding:6px;
    }

    .nombre-audio{
        font-size:16px;
    }

    .descripcion-audio{
        font-size:10px;
        line-height:1.4;
    }

    .footer-card{
        gap:4px;
        font-size:9px;
    }

    .modal-box{
        padding:44px 10px 13px;
    }

    .modal-left img{
        max-height:215px;
    }

    .disco-modal{
        width:68px;
        height:68px;
    }

    .modal-buttons{
        flex-wrap:nowrap !important;
        gap:5px;
    }

    .modal-buttons .buy-btn,
    .modal-buttons .rating-open,
    .buy-btn,
    .rating-open{

        flex:1 1 0 !important;

        min-height:34px !important;

        padding:6px 3px !important;

        font-size:9px !important;
    }

    .botones-denuncia{
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        gap:5px;
    }

    .botones-denuncia button{
        flex:1 1 0 !important;
        padding:6px 3px;
        font-size:9px;
    }
}


/* =========================================================
   TELÉFONOS MUY ESTRECHOS
========================================================= */

@media (max-width:350px){

    .left-buttons{
        gap:5px;
        padding-right:6px;
        padding-left:6px;
    }

    .left-buttons .btn-dissolve{
        padding:6px 8px !important;
        font-size:9px !important;
    }

    .titulo-global{
        font-size:24px;
    }

    .search-box{

        width:calc(100% - 16px) !important;

        margin-right:8px;
        margin-left:8px;
    }

    .search-form{

        grid-template-columns:
            minmax(0,1fr)
            1px
            78px;

        padding-right:5px;
        padding-left:5px;
    }

    .search-bar{
        padding:0 4px;
    }

    .sort-select{

        width:78px !important;

        max-width:78px !important;

        padding:0 3px !important;

        padding-right:15px !important;

        font-size:8px !important;
    }

    .grid-sonido{

        grid-template-columns:
            minmax(0,1fr);

        gap:16px;

        padding-right:13px;
        padding-left:13px;
    }

    .card-periodico,
    .card-periodico:nth-child(2),
    .card-periodico:nth-child(3){

        padding:8px;
    }

    .nombre-audio{
        font-size:19px;
    }

    .descripcion-audio{
        font-size:11px;
    }

    .modal-box{
        padding-right:8px;
        padding-left:8px;
    }

    .modal-denuncia-box{
        padding-right:9px;
        padding-left:9px;
    }
}


/* =========================================================
   ACCESIBILIDAD
========================================================= */

@media (prefers-reduced-motion:reduce){

    .btn-dissolve,
    .card-periodico,
    .buy-btn,
    .rating-open,
    .toast-favorito,
    .favorite-btn,
    .disco-modal{

        scroll-behavior:auto !important;

        transition:none !important;

        animation:none !important;
    }
}