/* ==========================================================================
   Mensajes de alerta / avisos - Centro Especializado en Lenguas
   Estilos compartidos por PruebaUbicacion.aspx, VerGrupoOfertado.aspx,
   Matricula.aspx y cualquier otra página que necesite avisos consistentes.
   ========================================================================== */

/* --------------------------------------------------------------------
   Avisos específicos (nombre fijo, un solo mensaje en el sitio)
   Migrados tal cual desde PruebaUbicacion.aspx y VerGrupoOfertado.aspx
   -------------------------------------------------------------------- */
.aviso-requisito {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #F5EDF4;
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin-top: 1.25rem;
    border: 1px solid #E6D2E3;
    margin-bottom: 20px;
}

.aviso-requisito-icono {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #681A5D1f;
    color: #681A5D;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aviso-requisito-texto strong {
    display: block;
    font-size: 15px;
    color: #681A5D;
    margin-bottom: 2px;
}

.aviso-requisito-texto p {
    margin: 0;
    font-size: 14px;
    color: #8a5a80;
}

.aviso-credenciales {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #FBEBEB;
    border-radius: 4px;
    padding: 1rem 1.25rem;
    border: 1px solid #F0D0D0;
    margin-bottom: 20px;
}

.aviso-credenciales-icono {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #A32D2D1f;
    color: #A32D2D;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aviso-credenciales-texto strong {
    display: block;
    font-size: 15px;
    color: #A32D2D;
    margin-bottom: 2px;
}

.aviso-credenciales-texto p {
    margin: 0;
    font-size: 14px;
    color: #a35a5a;
}

.aviso-pago {
    background: #EAF3FB;
    border-radius: 4px;
    padding: 1rem 1.25rem;
    border: 1px solid #CFE3F4;
    margin-bottom: 20px;
}

.aviso-pago-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.aviso-pago-icono {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #185FA51f;
    color: #185FA5;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aviso-pago-header strong {
    font-size: 15px;
    color: #185FA5;
}

.aviso-pago-texto {
    margin: 0;
    font-size: 14px;
    color: #4a6b85;
}

.aviso-mayoredad {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #F5EDF4;
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin-top: 1.25rem;
    border: 1px solid #E6D2E3;
}

.aviso-mayoredad-icono {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #681A5D1f;
    color: #681A5D;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .aviso-mayoredad-icono i {
        position: absolute;
        bottom: -3px;
        right: -3px;
        background: #fff;
        color: #681A5D;
        border-radius: 50%;
        font-size: 17px;
        line-height: 1;
    }

.aviso-mayoredad-texto strong {
    display: block;
    font-size: 15px;
    color: #681A5D;
    margin-bottom: 2px;
}

.aviso-mayoredad-texto p {
    margin: 0;
    font-size: 14px;
    color: #8a5a80;
}

.aviso-aclaracion {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #FEF8ED;
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin-top: 1.25rem;
    border: 1px solid #f5e6c8;
}

.aviso-aclaracion-icono {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #854F0B1f;
    color: #854F0B;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aviso-aclaracion-texto strong {
    display: block;
    font-size: 15px;
    color: #854F0B;
    margin-bottom: 2px;
}

.aviso-aclaracion-texto p {
    margin: 0;
    font-size: 14px;
    color: #a3763f;
}

/* --------------------------------------------------------------------
   .aviso-mensaje: componente genérico reutilizable
   Reemplaza los "alert alert-info/warning/danger" de Bootstrap por
   el mismo lenguaje visual de los avisos de arriba (icono circular
   con tinte de color + texto), para usarse en cualquier mensaje
   puntual que no necesite un nombre de clase propio.

   Uso:
   <div class="aviso-mensaje aviso-mensaje-info" role="alert">
       <div class="aviso-mensaje-icono"><i class="fa fa-info-circle" aria-hidden="true"></i></div>
       <div class="aviso-mensaje-texto">
           <strong>Título opcional</strong>
           <p>Texto del mensaje.</p>
       </div>
   </div>

   Variantes de color: -info (azul), -advertencia (ámbar), -peligro (rojo), -exito (verde).
   Modificador .aviso-mensaje-top: alinea el icono arriba en vez de centrado,
   útil cuando el contenido ocupa varias líneas (p. ej. listas).
   -------------------------------------------------------------------- */
.aviso-mensaje {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8f8f8;
    border-radius: 4px;
    padding: 1rem 1.25rem;
    border: 1px solid #ebe4e4;
    margin-bottom: 20px;
}

.aviso-mensaje-top {
    align-items: flex-start;
}

.aviso-mensaje-icono {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aviso-mensaje-texto {
    flex: 1 1 auto;
    font-size: 14px;
}

    .aviso-mensaje-texto strong {
        display: block;
        font-size: 14px;
        margin-bottom: 2px;
    }

    .aviso-mensaje-texto ul {
        margin: 6px 0 0;
        padding-left: 18px;
    }

    .aviso-mensaje .aviso-mensaje-texto p {
        margin: 0;
        font-size: 14px;
        color: inherit;
    }

        .aviso-mensaje-texto p + p {
            margin-top: 8px;
        }

.aviso-mensaje-info {
    background: #EAF3FB;
    border-color: #CFE3F4;
}

.aviso-mensaje-info .aviso-mensaje-icono {
    background: #185FA51f;
    color: #185FA5;
}

.aviso-mensaje-info .aviso-mensaje-texto {
    color: #4a6b85;
}

    .aviso-mensaje-info .aviso-mensaje-texto strong {
        color: #185FA5;
    }

.aviso-mensaje-advertencia {
    background: #FEF8ED;
    border-color: #F5E6C8;
}

.aviso-mensaje-advertencia .aviso-mensaje-icono {
    background: #854F0B1f;
    color: #854F0B;
}

.aviso-mensaje-advertencia .aviso-mensaje-texto {
    color: #a3763f;
}

    .aviso-mensaje-advertencia .aviso-mensaje-texto strong {
        color: #854F0B;
    }

.aviso-mensaje-peligro {
    background: #FBEBEB;
    border-color: #F0D0D0;
}

.aviso-mensaje-peligro .aviso-mensaje-icono {
    background: #A32D2D1f;
    color: #A32D2D;
}

.aviso-mensaje-peligro .aviso-mensaje-texto {
    color: #a35a5a;
}

    .aviso-mensaje-peligro .aviso-mensaje-texto strong {
        color: #A32D2D;
    }

.aviso-mensaje-exito {
    background: #EFF6E9;
    border-color: #D7E8C8;
}

.aviso-mensaje-exito .aviso-mensaje-icono {
    background: #3B6D111f;
    color: #3B6D11;
}

.aviso-mensaje-exito .aviso-mensaje-texto {
    color: #5c8a3f;
}

    .aviso-mensaje-exito .aviso-mensaje-texto strong {
        color: #3B6D11;
    }