.dialogo1 {    
    display: flex;
    width:100%;
    height:100%;
    justify-content: center;
    align-items: center;
}
.dialogo1 .container {
    display:flex;
    flex-direction: column;
    width:350px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 1px 2px 8px black;
}
.dialogo1 .titulo{
    height:60px;
    background-color: #ccc;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items:center;
    border-radius: 10px 10px 0 0;
}
.dialogo1 .content{
    display: flex;
    padding:10px;
    justify-content: center;
    align-items: center;
}
.dialogo1 .foot{
    height: 50px;
    padding:8px;
    border-top:thin solid #999;
}

.dialogo2 {
    display: flex;
    width:100%;
    height:100%;
    justify-content: center;
    align-items: center;
}
.dialogo2 .container {
    display:flex;
    flex-direction: column;
    width:650px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 1px 2px 8px black;
}
.dialogo2 .titulo{
    height:60px;
    background-color: #ccc;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items:center;
    border-radius: 10px 10px 0 0;
}
.dialogo2 .content{
    display: flex;
    flex-direction: column;
    padding:10px;
    justify-content: center;
    align-items: center;
}
.dialogo2 .foot{
    height: 50px;
    padding:8px;
    border-top:thin solid #999;
}
.dialogo-modal {
    display:none;
    background-color: rgba(0,0,0,0.7);
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index: 1500;
    flex-direction: column;
    align-items: center;
}
.dialogo-modal .container{
    border-radius: 10px;
    display:flex;
    background-color: white;
    flex-direction: column;
    width:500px;
    min-height:300px;
    padding-bottom: 10px;
    position: relative;
    animation: slideInFromTop 0.3s ease-out forwards;     
    
}
.dialogo-modal .container .titulo{
    border-radius: 10px 10px 0px 0px;
    padding:10px;
    width:100%;
    background-color: #e1e1e1;
    height:50px;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 18px;
}
.dialogo-modal .container .cuerpo {
    display:flex;
    flex-grow: 1;
    flex-direction: column;
    background-color: white;
    padding-left:10px;
    padding-right:10px;
    
}

@keyframes slideInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-100%); /* Comienza arriba y oculto */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Termina en su posición normal */
    }
}