/* ==========================================================
   ALERTA OSA
========================================================== */

.alertaOsa{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999999;
}

.alertaOsa.d-none{
    display:none !important;
}

/* Oscurece fondo */
.alertaOsaOverlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(3px);
}

/* ==========================================================
   CONTENEDOR GENERAL
========================================================== */

.alertaOsaWrapper{
    position:relative;
    width:min(420px,90vw);
    display:flex;
    flex-direction:column;
    align-items:center;
    overflow:visible;
    z-index:2;
}

/* ==========================================================
   CARTEL
========================================================== */

.alertaOsaCard{
    position:relative;
    width:100%;
    background:#fff;
    border-radius:22px;
    padding:38px 28px 28px;
    box-shadow:0 15px 40px rgba(0,0,0,.25);
    text-align:center;
    z-index:2;
    animation:alertaOsaEntrada .25s ease;
}

/* ==========================================================
   TEXTOS
========================================================== */

.alertaOsaTitulo{
    color:var(--colorPrincipal);
    font-weight:700;
}

.alertaOsaTexto{
    color:var(--colorTextoGeneral);
    line-height:1.5;
}

/* ==========================================================
   BOTÓN
========================================================== */

.btnOsaAceptar{
    background:var(--colorPrincipal);
    color:#fff;
    border:none;
    border-radius:12px;
    transition:.25s;
}

.btnOsaAceptar:hover{
    background:var(--colorSecundario);
    color:#fff;
}

/* ==========================================================
   ANIMACIÓN
========================================================== */

@keyframes alertaOsaEntrada{

    from{

        transform:scale(.85);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/* ==========================================================
   📱 CELULAR GAMA BAJA
========================================================== */

@media (max-width:480px){

    .alertaOsaWrapper{
        width:92vw;
    }

    .alertaOsaMascota{
        width:170px;
    }

    .alertaOsaCard{
        width:235px;
        padding:22px 18px;
        border-radius:18px;
    }

    .alertaOsaTitulo{
        font-size:20px;
        margin-bottom:12px;
    }

    .alertaOsaTexto{
        font-size:14px;
        margin-bottom:20px;
    }

    .btnOsaAceptar{
        width:100%;
        padding:12px;
    }

}

/* ==========================================================
   📱 CELULAR GAMA ALTA
========================================================== */

@media (min-width:481px) and (max-width:767px){

    .alertaOsaWrapper{
        width:340px;
    }

    .alertaOsaMascota{
        width:190px;
    }

    .alertaOsaCard{
        width:285px;
        padding:26px 22px;
    }

    .alertaOsaTitulo{
        font-size:22px;
        margin-bottom:14px;
    }

    .alertaOsaTexto{
        font-size:15px;
        margin-bottom:24px;
    }

    .btnOsaAceptar{
        min-width:170px;
        padding:11px 26px;
    }

}

/* ==========================================================
   📲 TABLET
========================================================== */

@media (min-width:768px) and (max-width:991px){

    .alertaOsaWrapper{
        width:390px;
    }

    .alertaOsaMascota{
        width:220px;
    }

    .alertaOsaCard{
        width:340px;
        padding:30px 26px;
    }

    .alertaOsaTitulo{
        font-size:24px;
        margin-bottom:16px;
    }

    .alertaOsaTexto{
        font-size:16px;
        margin-bottom:28px;
    }

    .btnOsaAceptar{
        padding:12px 32px;
    }

}

/* ==========================================================
   🖥️ DESKTOP
========================================================== */

@media (min-width:992px){

    .alertaOsaWrapper{
        width:430px;
    }

    .alertaOsaMascota{
        width:240px;
    }

    .alertaOsaCard{
        width:400px;
        padding:34px 30px;
    }

    .alertaOsaTitulo{
        font-size:26px;
        margin-bottom:18px;
    }

    .alertaOsaTexto{
        font-size:17px;
        margin-bottom:30px;
    }

    .btnOsaAceptar{
        padding:12px 34px;
    }

}

.alertaOsaMascota{
    width:270px;
    height:auto;
    margin-bottom:-85px;
    z-index:5;
    pointer-events:none;
}