/*
 * Ventanas de aviso.
 *
 * SweetAlert2 viene con su propio aspecto: título a 1.875rem, botones azules
 * redondeados y una caja de 32 rem. Puesto tal cual se nota que es de otra
 * parte, y el título —que es donde acababa el mensaje entero— salía a tamaño de
 * titular de portada.
 *
 * Las reglas apuntan a las clases del propio complemento y no a las nuestras,
 * a propósito: así valen para cualquier ventana del sitio, venga de
 * `Avisos.error`, de `Avisos.confirmar` o de una llamada suelta a `Swal.fire`
 * que alguien escriba mañana sin acordarse de pasar `customClass`. Las clases
 * propias se conservan para lo que no tiene equivalente en el complemento, como
 * la lista de fallos.
 *
 * `!important` en casi todo porque la hoja del complemento se carga después y
 * sus selectores son igual de específicos: sin él ganaría por orden de
 * aparición.
 *
 * Los avisos de esquina —el «Deshacer» del carrito— quedan fuera con
 * `:not(.swal2-toast)`: son otra cosa, pequeña y de paso, y con el tamaño de
 * una ventana centrada no cabrían.
 */

.swal2-popup:not(.swal2-toast) {
    max-width: 30rem;
    padding: 26px 26px 22px;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
}

/* ── Título ─────────────────────────────────────────────────────────── */

/*
 * Es el encabezado de la ventana y tiene que ganarle al cuerpo: es lo que se
 * lee primero y muchas veces lo único que hace falta leer.
 */
.swal2-popup:not(.swal2-toast) .swal2-title {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--texto) !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
}

/* ── Cuerpo ─────────────────────────────────────────────────────────── */

/*
 * Por debajo del tamaño de lectura del sitio. Es una línea o una lista corta
 * que se mira y se cierra, no un texto en el que uno se queda: al mismo tamaño
 * que el título competía con él y la ventana se leía como un bloque uniforme de
 * letra grande.
 */
.swal2-popup:not(.swal2-toast) .swal2-html-container {
    font-size: .86rem !important;
    line-height: 1.55 !important;
    color: var(--texto) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
}

/* Los fallos de un formulario, enumerados. Alineados a la izquierda porque son
   una lista que se lee punto por punto, no una frase suelta. */
.aviso-swal__lista {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    text-align: left;
}

.aviso-swal__lista li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 5px;
}

.aviso-swal__lista li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .58em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #e61e29;
}

.aviso-swal__lista li:last-child {
    margin-bottom: 0;
}

/* ── Botones ────────────────────────────────────────────────────────── */

.swal2-popup:not(.swal2-toast) .swal2-actions {
    margin-top: 22px !important;
    gap: 10px;
}

/*
 * Los botones son los del sitio —`.boton`—, así que aquí solo se les quita el
 * margen que el complemento pone a los suyos y se les da un ancho mínimo para
 * que «Cancelar» y «Sí, continuar» no queden de tamaños dispares.
 */
.swal2-popup:not(.swal2-toast) .swal2-actions .boton {
    margin: 0;
    min-width: 124px;
    justify-content: center;
}

/*
 * Red de seguridad para una ventana que no pase por `Avisos`.
 *
 * Sin `buttonsStyling: false` el complemento pinta sus propios botones azules.
 * Estas dos reglas los dejan al menos con el color de la marca, para que una
 * llamada olvidada no saque un botón azul en mitad del sitio.
 */
.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-confirm {
    background-color: #e61e29;
    border-radius: 6px;
}

.swal2-popup:not(.swal2-toast) .swal2-styled.swal2-cancel {
    background-color: #fff;
    border: 1px solid #e4e7ec;
    color: var(--texto);
    border-radius: 6px;
}

/* ── Icono ──────────────────────────────────────────────────────────── */

/*
 * Solo se le quita aire, no se le cambia el tamaño.
 *
 * La equis del icono de error son dos barras colocadas con porcentajes
 * calculados para los ochenta píxeles que trae por omisión: encogiendo la
 * circunferencia, las barras se salen de sitio y queda un círculo con una raya
 * torcida dentro. Con el margen basta para que no se coma el primer tercio de
 * la ventana.
 */
.swal2-popup:not(.swal2-toast) .swal2-icon {
    margin: 2px auto 16px;
}

.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error {
    border-color: #e61e29;
    color: #e61e29;
}

.swal2-popup:not(.swal2-toast) .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: #e61e29;
}

@media (max-width: 575px) {
    .swal2-popup:not(.swal2-toast) {
        padding: 22px 18px 18px;
    }

    .swal2-popup:not(.swal2-toast) .swal2-actions {
        flex-direction: column-reverse;
    }

    .swal2-popup:not(.swal2-toast) .swal2-actions .boton {
        width: 100%;
    }
}


/* ── Nada de mensajes repetidos ─────────────────────────────────────── */

/*
 * Los avisos que van debajo de cada campo se ocultan.
 *
 * Al pasar los mensajes del servidor a ventana, cada fallo salía dos veces: en
 * la lista de la ventana y otra vez, con el mismo texto, debajo del campo. Se
 * queda solo la ventana, que es lo que se lee, y el recuadro rojo del campo,
 * que no es un mensaje sino la señal de dónde hay que corregir.
 *
 * El marcado se conserva: sin JavaScript no hay ventana, y ahí el `<noscript>`
 * de la plantilla de avisos vuelve a enseñarlos. Es el mismo trato que recibe
 * el bloque de arriba del formulario.
 */
.campo__error {
    display: none;
}