/* ==========================================
   alertaUI.css v2
   ========================================== */

.alerta-overlay{

  position:fixed;
  inset:0;

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

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

  backdrop-filter:blur(3px);

  z-index:99999;

  padding:24px;

}

.alerta-card{

  width:min(92vw,360px);

  background:#ffffff;

  border-radius:18px;

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

  overflow:hidden;

  animation:alertaShow .22s ease;

}


/*------------------------------*/

.alerta-titulo{

  padding:

    16px
    22px
    6px
    22px;

  text-align:center;

  font-size:20px;

  font-weight:700;

  color:#2f2f2f;

}
/*------------------------------*/

.alerta-mensaje{

  word-break:break-word;

  overflow-wrap:anywhere;

  white-space:pre-line;

  padding:

    0
    22px
    8px
    22px;

  text-align:center;

  font-size:15px;

  font-weight:600;

  line-height:1.35;

  color:#222;

}
/*------------------------------*/

.alerta-footer{

  padding:10px 16px;

  border-top:

    1px solid
    #ece7df;

}


/*------------------------------*/

.alerta-footer-doble{

  display:flex;

  gap:8px;

}


/*------------------------------*/

.btn-alerta,
.btn-alerta-secundario{

  width:100%;

  height:40px;

  border:none;

  border-radius:12px;

  font-size:15px;

  font-weight:600;

  cursor:pointer;

  transition:.15s;

}

.btn-alerta{

  background:#3c3c3c;

  color:white;

}


.btn-alerta:hover{

  transform:translateY(-1px);

}


.btn-alerta:active{

  transform:scale(.98);

}


/*------------------------------*/

.btn-alerta-secundario{

  background:#ece8e2;

  color:#333;

}


/*------------------------------*/

.alerta-info{

  border-top:

    6px solid #4a90e2;

}


.alerta-exito{

  border-top:

    6px solid #4caf50;

}


.alerta-error{

  border-top:

    6px solid #d9534f;

}


.alerta-advertencia{

  border-top:

    6px solid #f0ad4e;

}


.alerta-confirmacion{

  border-top:

    6px solid #555;

}


/*------------------------------*/

@keyframes alertaShow{

  from{

    opacity:0;

    transform:

      translateY(20px)
      scale(.96);

  }

  to{

    opacity:1;

    transform:

      translateY(0)
      scale(1);

  }

}


.alerta-detalle{

  margin-top:6px;

  font-size:11px;

  font-weight:400;

  line-height:1.2;

  color:#777;

  word-break:break-all;

}