/* ========================================================
    BLOQUE: ALERTAS REDONDAS (ALERTA DE EXITO, ERROR, INFO)
   ======================================================== */
.alerta-redonda {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 1.1rem 1.8rem 1.1rem 1.4rem;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(61,71,83,0.11);
    background: #f6f7f8; /* Base pastel neutro */
    margin-bottom: 26px;
    position: relative;
    min-width: 260px;
    max-width: 480px;
    font-size: 1.09rem;
    border: none;
    animation: fade-in-top .4s cubic-bezier(.39,.575,.565,1.000);
}

.alerta-redonda .alerta-icono {
    font-size: 2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.alerta-redonda .alerta-contenido {
    flex: 1 1 auto;
}

.alerta-redonda .alerta-titulo {
    font-weight: 700;
    margin-bottom: 3px;
    font-size: 1.05em;
}

/* --- Botón cerrar alerta --- */
.alerta-redonda .alerta-cerrar {
    position: absolute;
    top: 17px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.45em;
    color: #7b868e;
    opacity: 0.72;
    cursor: pointer;
    transition: opacity 0.14s;
}
.alerta-redonda .alerta-cerrar:hover { opacity: 1; }

/* --- VARIANTES DE COLOR PASTEL PARA ALERTAS --- */
.alerta-redonda.exito {
    background: #d8f6e3; /* Verde pastel */
    color: #227953;
}
.alerta-redonda.exito .alerta-titulo,
.alerta-redonda.exito .alerta-icono { color: #227953; }

.alerta-redonda.error {
    background: #ffe1e1; /* Rojo pastel */
    color: #c13c3c;
}
.alerta-redonda.error .alerta-titulo,
.alerta-redonda.error .alerta-icono { color: #c13c3c; }

.alerta-redonda.info {
    background: #e6f1fc; /* Azul pastel */
    color: #256cae;
}
.alerta-redonda.info .alerta-titulo,
.alerta-redonda.info .alerta-icono { color: #256cae; }

.alerta-redonda.aviso {
    background: #fff5dc; /* Amarillo pastel */
    color: #a88611;
}
.alerta-redonda.aviso .alerta-titulo,
.alerta-redonda.aviso .alerta-icono { color: #a88611; }


/* ========================================================
    BLOQUE: BOTÓN CORAL PRINCIPAL
   ======================================================== */
.btn-blanco-coral {
    background: #ff6d6d;
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 0.78rem 2.2rem;
    font-size: 1.11rem;
    font-weight: 600;
    transition: background .18s;
    box-shadow: 0 2px 8px rgba(140,50,50,.13);
    letter-spacing: .2px;
    display: inline-block;
}
.btn-blanco-coral:hover,
.btn-blanco-coral:focus {
    background: #ff5252;
    color: #fff;
    text-decoration: none;
}


/* ========================================================
    BLOQUE: CÍRCULO ANIMADO DE ÉXITO / ERROR
   ======================================================== */
.animated-circle {
    width: 38px; height: 38px; min-width: 38px; min-height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    margin-right: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.08);
    animation: float 2.5s ease-in-out infinite;
}
.animated-circle.success { border: 3px solid #34C37C; background: rgba(52,195,124,0.09); }
.animated-circle.error   { border: 3px solid #ff6d6d; background: rgba(255,109,109,0.09); }

/* --- Checkmark animado de éxito --- */
.checkmark {
    width: 16px; height: 30px;
    border-right: 3px solid #34C37C;
    border-bottom: 3px solid #34C37C;
    transform: rotate(45deg);
    animation: drawCheck .45s cubic-bezier(.61,.34,.32,1.28) forwards;
}
@keyframes drawCheck {
    0% { width: 0; height: 0; }
    100% { width: 16px; height: 30px; }
}

/* --- X animada de error --- */
.error-x::before, .error-x::after {
    content: '';
    position: absolute;
    width: 20px; height: 3px;
    background-color: #ff6d6d;
    top: 50%; left: 50%;
    border-radius: 2px;
}
.error-x::before { transform: translate(-50%,-50%) rotate(45deg); }
.error-x::after  { transform: translate(-50%,-50%) rotate(-45deg); }

/* --- Animación flotante para círculo --- */
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}

/* --- Animación para fade in arriba --- */
@keyframes fade-in-top {
    0% { opacity: 0; transform: translateY(-18px);}
    100% { opacity: 1; transform: translateY(0);}
}