.overlay-alerta{
    position: fixed;
    inset: 0;
    overflow-y: auto;
    background: rgba(18, 25, 40, .55);

    backdrop-filter: blur(8px);

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

    padding: 24px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: .35s ease;

    z-index: 999999;
}

.overlay-alerta.mostrar{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.card-alerta{
    max-height: 90vh;
    overflow-y: auto;
    width: min(360px, 100%);

    background: #ffffff;

    border-radius: 32px;

    position: relative;

    text-align: center;

    padding:
        34px
        28px
        30px;

    box-shadow:
        0 35px 80px rgba(0,0,0,.22);

    transform:
        translateY(30px)
        scale(.94);

    opacity: 0;

    transition:
        .4s cubic-bezier(.22,1,.36,1);
}

.overlay-alerta.mostrar .card-alerta{
    transform:
        translateY(0)
        scale(1);

    opacity: 1;
}

.alerta-cerrar{
    position: absolute;

    top: 16px;
    right: 18px;

    border: none;
    background: transparent;

    font-size: 34px;

    line-height: 1;

    color: #7b8495;

    cursor: pointer;

    transition: .2s ease;

    z-index: 10;
}

.alerta-cerrar:hover{
    transform: scale(1.08);
}

.alerta-visual{
    position: relative;

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

    min-height: 235px;

    margin-bottom: 8px;
}

.alerta-fondo-celular{
    position: absolute;

    width: 295px;
    height: 175px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #eef4ff,
            #dce8ff
        );

    z-index: 1;
}

.alerta-celular{
    position: relative;

    z-index: 2;

    width: 225px;

    max-width: 92%;

    display: block;
}

.alerta-titulo{
    font-size: 28px;

    font-weight: 800;

    color: #08245c;

    margin:
        0
        0
        10px;
}

.alerta-texto{
    font-size: 15px;

    line-height: 1.5;

    color: #5f6c82;

    margin: 0;
}

/*
|--------------------------------------------------------------------------
| ALERT FACEBOOK
|--------------------------------------------------------------------------
*/

#alert-facebook .card-alerta{
    width: min(370px, calc(100% - 34px));

    background: transparent;

    box-shadow: none;

    padding: 0;
}

#alert-facebook .alert-facebook-card{
    position: relative;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #eef4ff 100%
        );

    border-radius: 34px;

    padding:
        10px
        28px
        28px;

    text-align: center;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,.7);

    box-shadow:
        0 30px 80px rgba(0, 31, 84, .18);
}

/*
|--------------------------------------------------------------------------
| BADGE SEGURIDAD
|--------------------------------------------------------------------------
*/

#alert-facebook .alert-facebook-badge{
    position: absolute;

    top: 24px;
    right: 24px;

    width: 46px;
    height: 46px;

    object-fit: contain;

    background: #ffffff;

    border-radius: 50%;

    padding: 6px;

    z-index: 5;

    box-shadow:
        0 10px 24px rgba(0,0,0,.10);
}

/*
|--------------------------------------------------------------------------
| VISUAL
|--------------------------------------------------------------------------
*/

#alert-facebook .alert-facebook-visual{
    position: relative;

    width: 100%;
    height: 190px;

    display: flex;
    align-items: center;
    justify-content: center;
}

#alert-facebook .alert-facebook-imagen{
    position: relative;

    z-index: 2;

    width: 195px;

    max-width: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 16px 26px rgba(0,44,125,.12)
        );
}

/*
|--------------------------------------------------------------------------
| TITULO
|--------------------------------------------------------------------------
*/

#alert-facebook .alert-facebook-titulo{
    color: #002a8d;

    font-size: 24px;

    line-height: 1.08;

    font-family: 'Flexo-Demi', sans-serif;

    font-weight: 700;

    margin:
        0
        0
        14px;
}

/*
|--------------------------------------------------------------------------
| TEXTO
|--------------------------------------------------------------------------
*/

#alert-facebook .alert-facebook-texto{
    color: #5f6c82;

    font-size: 15px;

    line-height: 1.55;

    max-width: 290px;

    margin:
        0
        auto
        24px;
}

/*
|--------------------------------------------------------------------------
| BOTON
|--------------------------------------------------------------------------
*/

#alert-facebook .alert-facebook-boton{
    width: 80%;

    height: 42px;

    border: 0;

    border-radius: 999px;

    background: #ff7800;

    color: #ffffff;

    font-size: 16px;

    font-family: 'Flexo-Demi', sans-serif;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

    box-shadow:
        0 16px 30px rgba(255,120,0,.24);
}

#alert-facebook .alert-facebook-boton:hover{
    transform: translateY(-1px);

    box-shadow:
        0 20px 36px rgba(255,120,0,.28);
}

/*
|--------------------------------------------------------------------------
| ALERT CONSULTA DOCUMENTO
|--------------------------------------------------------------------------
*/

#alert-consulta-dni .alerta-acciones,
#alert-consulta-ruc10 .alerta-acciones,
#alert-consulta-ruc20 .alerta-acciones{
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

#alert-consulta-dni .alerta-btn,
#alert-consulta-ruc10 .alerta-btn,
#alert-consulta-ruc20 .alerta-btn{
    flex: 1;

    height: 48px;

    border: 0;

    border-radius: 999px;

    font-size: 14px;

    font-family: 'Flexo-Demi', sans-serif;

    font-weight: 700;

    cursor: pointer;

    transition: .2s ease;
}

#alert-consulta-dni .alerta-btn-principal,
#alert-consulta-ruc10 .alerta-btn-principal,
#alert-consulta-ruc20 .alerta-btn-principal{
    background: #ff7800;
    color: #fff;

    box-shadow:
        0 12px 24px rgba(255,120,0,.22);
}

#alert-consulta-dni .alerta-btn-principal:hover,
#alert-consulta-ruc10 .alerta-btn-principal:hover,
#alert-consulta-ruc20 .alerta-btn-principal:hover{
    transform: translateY(-1px);
}

#alert-consulta-dni .alerta-btn-secundario,
#alert-consulta-ruc10 .alerta-btn-secundario,
#alert-consulta-ruc20 .alerta-btn-secundario{
    background: #eef2f8;
    color: #4c5d78;
}

#alert-consulta-dni .alerta-btn-secundario:hover,
#alert-consulta-ruc10 .alerta-btn-secundario:hover,
#alert-consulta-ruc20 .alerta-btn-secundario:hover{
    background: #e3e9f4;
}

.alerta-texto-empresa{
    white-space: normal;
    line-height: 1.7;
    font-size: 15px;
    color: #5f6c82;
}

.alerta-texto-empresa strong{
    display: block;
    font-size: 16px;
    color: #08245c;
    font-weight: 700;
    margin-bottom: 6px;
}
.alerta-empresa-detalle{
    display: block;
    margin-top: 6px;
}