/* ==========================================================================
   Errores de formulario en la tienda
   ==========================================================================
   El partial admin.includes.errors pinta <ul class="adm-errors">, pero esas
   reglas viven en admin.css y la tienda nunca la carga: el resultado era una
   lista con bolitas, sin color y sin marco, arriba de la pagina. Facil de no
   ver justo cuando hay que verla.

   Se carga desde layouts/app-user, asi que vale para todas las vistas de la
   tienda que usan ese partial (checkout, carro, mayorista, y las demas). */

.adm-errors {
    list-style: none;
    margin: 0 0 18px;
    padding: 14px 16px 14px 46px;
    position: relative;
    border: 1px solid #e0b4b4;
    border-left: 4px solid #c0392b;
    border-radius: 6px;
    background: #fdf3f2;
    color: #7f2d22;
    font-size: 14px;
    line-height: 1.45;
}

/* El icono deja claro de una que es un error y no un aviso cualquiera. */
.adm-errors::before {
    content: '!';
    position: absolute;
    top: 14px;
    left: 16px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #c0392b;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
}

.adm-errors li {
    margin: 0;
    padding: 2px 0;
}

.adm-errors li + li {
    border-top: 1px solid #f0dcda;
    margin-top: 4px;
    padding-top: 6px;
}

/* ==========================================================================
   Errores al lado del campo (jquery-validation)
   ==========================================================================
   El mensaje va debajo del input que lo causa: el error arriba de la pagina
   obliga a adivinar cual de diez campos es. */

.field-error {
    display: block;
    margin: -6px 0 12px;
    color: #c0392b;
    font-size: 13px;
    line-height: 1.4;
}

.field-invalid {
    border-color: #c0392b !important;
    background: #fdf3f2;
}

/* Marca el campo que el navegador rechaza, para no dejar al comprador
   buscando cual de todos es. Solo despues de intentar enviar: :invalid a secas
   pinta en rojo un formulario que el comprador todavia no toco. */
form.was-submitted input:invalid,
form.was-submitted select:invalid,
form.was-submitted textarea:invalid {
    border-color: #c0392b !important;
    background: #fdf3f2;
}