:root {
  --sp_wsv_alerts_color_rojo: #db2a1b;
  --sp_wsv_alerts_color_amarillo: #bf953e;
  --sp_wsv_alerts_color_verde: #00b07c;
  --sp_wsv_alerts_color_azul: #0081b0;
  --sp_wsv_alerts_color_blanco: #fff;
}

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    padding: 1em 2em 1em 3.5em;
    margin: 2em auto 2em auto;
    position: relative;
    background-color: var(--sp_wsv_alerts_color_amarillo);
    color: var(--sp_wsv_alerts_color_blanco);
    border-radius: 10px;
    list-style: none outside;
    width: calc(100% - 4em);
    max-width: 90%;
    word-wrap: break-word;
    box-shadow: 0px 0px 20px #0001;
    border-top: 0px;
    box-sizing: content-box;
}
body .woocommerce .woocommerce-error :where(a, a:hover, a:focus, a:active, a:visited),
body .woocommerce .woocommerce-info :where(a, a:hover, a:focus, a:active, a:visited), 
body .woocommerce .woocommerce-message :where(a, a:hover, a:focus, a:active, a:visited){
    color: var(--sp_wsv_alerts_color_blanco);
}

.woocommerce-error::after,
.woocommerce-error::before,
.woocommerce-info::after,
.woocommerce-info::before,
.woocommerce-message::after,
.woocommerce-message::before {
    content: " ";
    display: table;
}
.woocommerce-error::after,
.woocommerce-info::after,
.woocommerce-message::after {
    clear: both;
}
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
    font-family: WooCommerce;
    content: "\e028";
    content: "\e028"/"";
    display: inline-block;
    position: absolute;
    top: 1em;
    left: 1.5em;
    color: var(--sp_wsv_alerts_color_blanco);
}
.woocommerce-error .button,
.woocommerce-info .button,
.woocommerce-message .button {
    float: right;
}
.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li {
    list-style: none outside !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
.rtl.woocommerce .price_label,
.rtl.woocommerce .price_label span {
    direction: ltr;
    unicode-bidi: embed;
}
.woocommerce-message {
    background-color: var(--sp_wsv_alerts_color_verde);
}
.woocommerce-message::before {
    content: "\e015";
    color: var(--sp_wsv_alerts_color_blanco);
}
.woocommerce-info {
    background-color: var(--sp_wsv_alerts_color_azul);
}
.woocommerce-info::before {
    color: var(--sp_wsv_alerts_color_blanco);
}
.woocommerce-error {
    background-color: var(--sp_wsv_alerts_color_rojo);
}
.woocommerce-error::before {
    content: "\e016";
    color: var(--sp_wsv_alerts_color_blanco);
}
.woocommerce-error a,
.woocommerce-info a,
.woocommerce-message a {
    color: var(--sp_wsv_alerts_color_blanco);
}

/* WooCommerce Blocks (checkout AJAX/Store API) usa un banner distinto al
   clásico .woocommerce-error/.woocommerce-message; lo tematizamos igual.
   wc-blocks.css define .wc-block-components-notice-banner.is-error con la
   misma especificidad (0,2,0); duplicamos la clase para ganar el empate sin
   depender del orden de carga de las hojas de estilo. */
.wc-block-components-notice-banner.wc-block-components-notice-banner {
    padding: 1em 2em 1em 3.5em;
    margin: 2em auto 2em auto;
    position: relative;
    background-color: var(--sp_wsv_alerts_color_amarillo);
    color: var(--sp_wsv_alerts_color_blanco);
    border: 0;
    border-radius: 10px;
    max-width: 90%;
    word-wrap: break-word;
    box-shadow: 0px 0px 20px #0001;
    box-sizing: content-box;
}

.wc-block-components-notice-banner.wc-block-components-notice-banner.is-success {
    background-color: var(--sp_wsv_alerts_color_verde);
}

.wc-block-components-notice-banner.wc-block-components-notice-banner.is-info {
    background-color: var(--sp_wsv_alerts_color_azul);
}

.wc-block-components-notice-banner.wc-block-components-notice-banner.is-error {
    background-color: var(--sp_wsv_alerts_color_rojo);
    border-color: var(--sp_wsv_alerts_color_rojo);
}

.wc-block-components-notice-banner.wc-block-components-notice-banner svg {
    fill: var(--sp_wsv_alerts_color_blanco);
}

.wc-block-components-notice-banner.wc-block-components-notice-banner.is-error > svg {
    background-color: transparent;
    transform: none;
}

.wc-block-components-notice-banner.wc-block-components-notice-banner,
.wc-block-components-notice-banner.wc-block-components-notice-banner p,
.wc-block-components-notice-banner.wc-block-components-notice-banner li,
.wc-block-components-notice-banner.wc-block-components-notice-banner strong,
.wc-block-components-notice-banner.wc-block-components-notice-banner a,
.wc-block-components-notice-banner.wc-block-components-notice-banner a:hover,
.wc-block-components-notice-banner.wc-block-components-notice-banner a:focus,
.wc-block-components-notice-banner.wc-block-components-notice-banner a:active,
.wc-block-components-notice-banner.wc-block-components-notice-banner a:visited {
    color: var(--sp_wsv_alerts_color_blanco);
}

.wc-block-components-notice-banner.wc-block-components-notice-banner .wc-block-components-notice-banner__content ul {
    margin: 0;
    padding: 0;
    list-style: none outside;
}