/*
    Avisos legibles en la tienda y el sitio publico.

    El tema (demo9) define sus .alert-* con el MISMO color para el texto y para
    el fondo: rojo sobre rojo, verde sobre verde. Sus propias plantillas metian
    dentro un elemento con color propio, pero un aviso normal sale como una
    barra de color sin texto visible. Pasaba en los doce avisos de los dos
    sitios, no solo en el del pago.

    Aqui se conserva el fondo del tema —que es el aspecto que se espera— y se
    pone encima un texto que se lea.
*/

.alert-primary,
.alert-danger,
.alert-warning,
.alert-black {
    color: #fff;
}

/*
    El verde del tema (#a8c26e) es demasiado claro para texto blanco: se queda
    en 2:1 de contraste y no hay quien lo lea. Se oscurece solo este fondo, lo
    justo para pasar de 4.5:1.
*/
.alert-success {
    background-color: #5f7d35;
    border-color: #5f7d35;
    color: #fff;
}

/* El texto en negrita y los enlaces heredan, que si no vuelven al color del tema. */
.alert-primary strong, .alert-danger strong, .alert-warning strong,
.alert-black strong, .alert-success strong,
.alert-primary b, .alert-danger b, .alert-warning b,
.alert-black b, .alert-success b {
    color: inherit;
}

.alert-primary a, .alert-danger a, .alert-warning a,
.alert-black a, .alert-success a {
    color: #fff;
    text-decoration: underline;
}

/*
    Sin esto el aviso aparece pegado al campo siguiente y no se lee como un
    bloque aparte.
*/
.alert[role="alert"],
.alert[role="status"] {
    margin-bottom: 1.5rem;
}