/*
 * Proceso de compra: carrito, checkout y confirmación de pedido.
 *
 * Se apoya en los tokens del tema (--tp-heading-primary es el rojo de la marca,
 * Roboto la tipografía) para que no se note el cambio de pantalla, pero el
 * diseño es propio: son las tres pantallas donde se decide la venta y las que
 * más margen de mejora tenían.
 *
 * Criterios aplicados:
 *   · Una sola columna de decisiones y un resumen fijo al lado. En móvil el
 *     resumen sube al final, que es donde se mira antes de confirmar.
 *   · Objetivos táctiles de 44 px como mínimo en todo lo que se pulsa.
 *   · Nada depende solo del color: los estados llevan además icono o texto.
 *   · El foco del teclado siempre visible.
 */

:root {
    --proceso-rojo: #e61e29;
    --proceso-rojo-oscuro: #c4161f;
    --proceso-texto: #1f2733;
    --proceso-suave: #6b7280;
    --proceso-borde: #e4e7ec;
    --proceso-fondo: #f7f8fa;
    --proceso-exito: #0f7b53;
    --proceso-radio: 10px;
}

/* ─────────────────────────────────────────────────────────────────────
   Estructura común
   ───────────────────────────────────────────────────────────────────── */

.proceso {
    /* Solo el vertical: el lateral lo pone `.container`, y con el atajo
       `padding` se quedaba en cero y el contenido tocaba los bordes. */
    padding-top: 34px;
    padding-bottom: 70px;
    color: var(--proceso-texto);
}

.proceso__titulo {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 4px;
}

.proceso__subtitulo {
    color: var(--proceso-suave);
    margin: 0 0 26px;
    font-size: .95rem;
}

.proceso__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 370px;
    gap: 28px;
    align-items: start;
}

/* ── Pasos ──────────────────────────────────────────────────────────── */

.pasos {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.pasos__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    color: var(--proceso-suave);
}

.pasos__numero {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--proceso-borde);
    color: var(--proceso-suave);
    font-size: .82rem;
    font-weight: 700;
    flex: none;
}

.pasos__item--actual {
    color: var(--proceso-texto);
    font-weight: 600;
}

.pasos__item--actual .pasos__numero {
    background: var(--proceso-rojo);
    color: #fff;
}

.pasos__item--hecho .pasos__numero {
    background: var(--proceso-exito);
    color: #fff;
}

.pasos__flecha {
    color: var(--texto-suave);
}

/* ─────────────────────────────────────────────────────────────────────
   Carrito
   ───────────────────────────────────────────────────────────────────── */

.linea {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--proceso-borde);
    align-items: center;
}

.linea:first-of-type {
    border-top: 1px solid var(--proceso-borde);
}

.linea__foto {
    width: 92px;
    height: 92px;
    border-radius: 8px;
    border: 1px solid var(--proceso-borde);
    object-fit: cover;
    background: #fff;
}

.linea__nombre {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 4px;
    line-height: 1.35;
}

.linea__nombre a {
    color: inherit;
    text-decoration: none;
}

.linea__nombre a:hover {
    color: var(--proceso-rojo);
}

.linea__meta {
    font-size: .85rem;
    color: var(--proceso-suave);
    margin: 0 0 10px;
}

.linea__acciones {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.linea__importe {
    text-align: right;
    white-space: nowrap;
}

.linea__total {
    font-size: 1.05rem;
    font-weight: 700;
    display: block;
}

.linea__unitario {
    font-size: .82rem;
    color: var(--proceso-suave);
}

/* ── Contador de cantidad ───────────────────────────────────────────── */

.contador {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--proceso-borde);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.contador__boton {
    width: 40px;
    min-height: 44px;
    border: 0;
    background: #fff;
    color: var(--proceso-texto);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.contador__boton:hover:not(:disabled) {
    background: var(--proceso-fondo);
    color: var(--proceso-rojo);
}

.contador__boton:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.contador__campo {
    width: 54px;
    min-height: 44px;
    border: 0;
    border-left: 1px solid var(--proceso-borde);
    border-right: 1px solid var(--proceso-borde);
    text-align: center;
    font: inherit;
    font-weight: 600;
    /* Sin las flechitas del navegador: ya hay dos botones que hacen eso y
       más grandes. */
    -moz-appearance: textfield;
}

.contador__campo::-webkit-outer-spin-button,
.contador__campo::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.enlace-sutil {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: .88rem;
    color: var(--proceso-suave);
    text-decoration: underline;
    cursor: pointer;
    min-height: 44px;
}

.enlace-sutil:hover {
    color: var(--proceso-rojo);
}

/* ─────────────────────────────────────────────────────────────────────
   Resumen
   ───────────────────────────────────────────────────────────────────── */

.resumen {
    border: 1px solid var(--proceso-borde);
    border-radius: var(--proceso-radio);
    padding: 22px;
    background: #fff;
    position: sticky;
    top: 20px;
}

.resumen__titulo {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 16px;
}

.resumen__fila {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: .95rem;
}

.resumen__fila--total {
    border-top: 1px solid var(--proceso-borde);
    margin-top: 10px;
    padding-top: 14px;
    font-size: 1.15rem;
    font-weight: 700;
}

.resumen__nota {
    background: var(--proceso-fondo);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: .85rem;
    color: var(--proceso-suave);
    line-height: 1.55;
    margin: 16px 0 0;
    display: flex;
    gap: 9px;
}

.resumen__nota svg {
    flex: none;
    margin-top: 2px;
}

.resumen__articulos {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    max-height: 290px;
    overflow-y: auto;
}

.resumen__articulo {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #f1f2f4;
    font-size: .88rem;
}

.resumen__articulo img {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--proceso-borde);
}

.resumen__articulo-cantidad {
    color: var(--proceso-suave);
    font-size: .8rem;
}

/* ─────────────────────────────────────────────────────────────────────
   Formulario del checkout
   ───────────────────────────────────────────────────────────────────── */

.bloque {
    border: 1px solid var(--proceso-borde);
    border-radius: var(--proceso-radio);
    padding: 22px 24px;
    margin: 0 0 20px;
    background: #fff;
}

.bloque__titulo {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.bloque__numero {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--proceso-rojo);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .8rem;
    font-weight: 700;
    flex: none;
}

.rejilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.rejilla--completa {
    grid-template-columns: minmax(0, 1fr);
}

.campo {
    display: flex;
    flex-direction: column;
}

.campo--ancho {
    grid-column: 1 / -1;
}

.campo > label {
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.campo__obligatorio {
    color: var(--proceso-rojo);
}

.campo input,
.campo select,
.campo textarea {
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid var(--proceso-borde);
    border-radius: 8px;
    font: inherit;
    background: #fff;
    color: var(--proceso-texto);
    width: 100%;
}

.campo textarea {
    min-height: 88px;
    resize: vertical;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--proceso-rojo);
    /* Halo además del borde: un cambio de color solo no se distingue con
       daltonismo, que es la forma más común de perder el foco de vista. */
    box-shadow: 0 0 0 3px rgba(230, 30, 41, .14);
}

.campo input:user-invalid,
.campo--error input,
.campo--error select,
.campo--error textarea {
    border-color: #c0392b;
}

.campo__ayuda {
    font-size: .82rem;
    color: var(--proceso-suave);
    margin: 6px 0 0;
}

.campo__error {
    font-size: .82rem;
    color: #c0392b;
    margin: 6px 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── Opciones en tarjeta ────────────────────────────────────────────── */

.opciones {
    display: grid;
    gap: 10px;
}

.opcion {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--proceso-borde);
    border-radius: 9px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease;
    min-height: 44px;
}

.opcion:hover {
    border-color: var(--texto-suave);
}

/* :has() permite marcar la tarjeta entera sin JavaScript. Donde no esté
   soportado la opción sigue funcionando: solo se ve el radio marcado. */
.opcion:has(input:checked) {
    border-color: var(--proceso-rojo);
    background: #fff5f5;
}

.opcion input {
    margin-top: 3px;
    accent-color: var(--proceso-rojo);
    width: 18px;
    height: 18px;
    flex: none;
}

.opcion__texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.opcion__nombre {
    font-weight: 600;
    font-size: .95rem;
}

.opcion__detalle {
    font-size: .84rem;
    color: var(--proceso-suave);
}

/* ─────────────────────────────────────────────────────────────────────
   Avisos
   ───────────────────────────────────────────────────────────────────── */

.aviso {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 13px 16px;
    border-radius: 9px;
    margin: 0 0 18px;
    font-size: .93rem;
    line-height: 1.55;
    border-left: 4px solid transparent;
}

.aviso svg {
    flex: none;
    margin-top: 2px;
}

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

.aviso--exito {
    background: #ecfdf3;
    border-left-color: var(--proceso-exito);
    color: #08603e;
}

.aviso--error {
    background: #fef3f2;
    border-left-color: #c0392b;
    color: #a02a1e;
}

.aviso--info {
    background: #eff6ff;
    border-left-color: #1d4ed8;
    color: #1e40af;
}

/* ─────────────────────────────────────────────────────────────────────
   Vacío y confirmación
   ───────────────────────────────────────────────────────────────────── */

.vacio {
    text-align: center;
    padding: 60px 20px;
    border: 1px dashed var(--proceso-borde);
    border-radius: var(--proceso-radio);
}

.vacio__icono {
    color: var(--texto-suave);
    margin-bottom: 14px;
}

.vacio__titulo {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 6px;
}

.vacio__texto {
    color: var(--proceso-suave);
    margin: 0 0 22px;
}

.exito__marca {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: #ecfdf3;
    color: var(--proceso-exito);
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
}

.exito__cabecera {
    text-align: center;
    margin-bottom: 32px;
}

.exito__codigo {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .5px;
    background: var(--proceso-fondo);
    border: 1px dashed var(--proceso-borde);
    border-radius: 8px;
    padding: 9px 18px;
    margin-top: 10px;
}

.siguientes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.siguientes__paso {
    display: flex;
    gap: 13px;
    align-items: flex-start;
}

.siguientes__numero {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--proceso-fondo);
    color: var(--proceso-texto);
    display: grid;
    place-items: center;
    font-size: .82rem;
    font-weight: 700;
    flex: none;
}

.datos-entrega {
    display: grid;
    gap: 4px;
    font-size: .95rem;
    line-height: 1.6;
}

.datos-entrega dt {
    font-size: .8rem;
    color: var(--proceso-suave);
    font-weight: 400;
    margin-top: 10px;
}

.datos-entrega dd {
    margin: 0;
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────
   Móvil
   ───────────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .proceso__cuerpo {
        grid-template-columns: minmax(0, 1fr);
    }

    .resumen {
        position: static;
    }

    .rejilla {
        grid-template-columns: minmax(0, 1fr);
    }

    .linea {
        grid-template-columns: 74px minmax(0, 1fr);
        row-gap: 12px;
    }

    .linea__foto {
        width: 74px;
        height: 74px;
    }

    /* El importe pasa debajo, alineado a la izquierda con el resto: en una
       columna estrecha, alinearlo a la derecha lo aleja de su producto. */
    .linea__importe {
        grid-column: 2;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .boton,
    .opcion {
        transition: none;
    }
}

/* El botón que cierra cada paso ocupa el ancho de su columna: es la única
   acción del bloque y así no hay que buscarlo. La regla vive aquí y no en el
   componente porque fuera del proceso de compra un botón a todo lo ancho es
   demasiado. */
.resumen .boton--principal,
.bloque .boton--principal,
.d-lg-none > .boton--principal {
    width: 100%;
}

/* ── Aceptación de las condiciones ──────────────────────────────────── */

/*
 * Va dentro del resumen, encima del botón de confirmar: es lo último que se
 * lee antes de mandar el pedido. Se le da un recuadro propio para que no se
 * confunda con las notas grises que tiene debajo, que son informativas y esto
 * es una acción.
 */
.condiciones {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0 0;
    padding: 13px 14px;
    border: 1px solid var(--proceso-borde);
    border-radius: 8px;
    background: #fff;
    font-size: .87rem;
    line-height: 1.55;
    color: var(--proceso-suave);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

.condiciones:hover {
    border-color: #c9cfd8;
}

/* Marcada, el recuadro se apaga: ya está resuelto y deja de pedir atención. */
.condiciones:has(input:checked) {
    background: var(--proceso-fondo);
    border-color: var(--proceso-borde);
}

.condiciones input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: #e61e29;
    cursor: pointer;
}

/*
 * El navegador marca la casilla obligatoria sin rellenar solo después de un
 * intento de envío, que es cuando avisar sirve de algo. `:user-invalid` hace
 * justo eso; `:invalid` a secas la pintaría en rojo nada más cargar.
 */
.condiciones:has(input:user-invalid) {
    border-color: #c0392b;
    background: #fdf3f2;
}

.condiciones a {
    color: #e61e29;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.condiciones a:hover {
    color: #c0392b;
}

/* Marca de campo opcional, al lado de la etiqueta. Es la contraria del
   asterisco rojo: dice que ese se puede dejar en blanco sin pensarlo. */
.campo__opcional {
    font-weight: 400;
    font-size: .82rem;
    color: var(--texto-suave);
}