/*
 * Formularios: acceso, registro, recuperación, contacto y checkout.
 *
 * Solo lo carga el layout de formulario. Son las cuatro pantallas donde hay
 * campos que llenar; el resto del sitio no necesita nada de esto.
 */

.campo {
    margin-bottom: 1.1rem;
}

.campo label {
    display: block;
    margin-bottom: .35rem;
    font-weight: 600;
    font-size: .95rem;
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid #d5d8dc;
    border-radius: 4px;
    font: inherit;
    background: #fff;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: #e61e29;
    /* El resplandor además del borde: un cambio de color solo no se distingue
       con daltonismo, que es la forma más común de no ver dónde está el foco. */
    box-shadow: 0 0 0 3px rgba(230, 30, 41, .15);
}

.campo textarea {
    resize: vertical;
    min-height: 7rem;
}

.campo__ayuda {
    margin: .35rem 0 0;
    font-size: .85rem;
    color: var(--texto-suave);
}

.campo__error {
    margin: .35rem 0 0;
    font-size: .85rem;
    color: #b91c1c;
}

.campo--error input,
.campo--error select,
.campo--error textarea {
    border-color: #b91c1c;
}

.campo--opciones label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-right: 1.4rem;
    font-weight: 400;
}

.campo--opciones input {
    width: auto;
}

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

.aviso {
    padding: .85rem 1.1rem;
    border-radius: 4px;
    margin-bottom: 1.2rem;
    font-size: .95rem;
    /* Borde a la izquierda además del fondo: los fondos de color se pierden al
       imprimir y en el modo de alto contraste del sistema. */
    border-left: 4px solid transparent;
}

.aviso ul {
    margin: .5rem 0 0;
    padding-left: 1.2rem;
}

.aviso--exito {
    background: #ecfdf3;
    border-left-color: #12805c;
    color: #12805c;
}

.aviso--error {
    background: #fef2f2;
    border-left-color: #b91c1c;
    color: #b91c1c;
}

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

/* ── Botones de envío ───────────────────────────────────────────────── */

.acceso__boton,
.registro__boton,
.recuperar__boton,
.contacto__enviar,
.checkout__enviar {
    display: inline-block;
    width: 100%;
    padding: .85rem 1.4rem;
    border: 0;
    border-radius: 4px;
    background: #e61e29;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.acceso__boton:hover,
.registro__boton:hover,
.recuperar__boton:hover,
.contacto__enviar:hover,
.checkout__enviar:hover {
    background: #c4161f;
}

button[disabled] {
    opacity: .6;
    cursor: progress;
}

/* ── Cajas centradas de acceso ──────────────────────────────────────── */

.acceso__caja,
.registro__caja,
.recuperar__caja {
    max-width: 30rem;
    margin: 2.5rem auto;
    padding: 2rem;
    border: 1px solid #ececec;
    border-radius: 6px;
}

.acceso__titulo,
.registro__titulo,
.recuperar__titulo {
    margin: 0 0 1.4rem;
    font-size: 1.5rem;
}

.acceso__enlaces,
.registro__enlaces,
.recuperar__enlaces {
    margin: 1.3rem 0 0;
    text-align: center;
    font-size: .92rem;
}

/* ── Contacto y checkout: dos columnas ──────────────────────────────── */

.contacto__cuerpo,
.checkout__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

.checkout__bloque {
    border: 1px solid #ececec;
    border-radius: 6px;
    padding: 1.3rem 1.5rem;
    margin: 0 0 1.5rem;
}

.checkout__bloque legend {
    padding: 0 .5rem;
    font-weight: 700;
    font-size: 1rem;
}

.checkout__resumen,
.contacto__canales {
    border: 1px solid #ececec;
    border-radius: 6px;
    padding: 1.4rem;
    /* Se queda a la vista al bajar por un formulario largo: en el checkout es
       lo que evita perder de vista lo que se está comprando. */
    position: sticky;
    top: 1.5rem;
}

.checkout__lineas {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.checkout__lineas li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .2rem 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid #f2f2f2;
    font-size: .92rem;
}

.checkout__cantidad {
    grid-column: 1;
    color: var(--texto-suave);
    font-size: .85rem;
}

.checkout__subtotal {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    white-space: nowrap;
}

.checkout__total {
    display: flex;
    justify-content: space-between;
    font-size: 1.05rem;
    margin: 1rem 0;
}

.checkout__nota,
.carrito__nota {
    font-size: .87rem;
    color: var(--texto-suave);
    line-height: 1.6;
}

@media (max-width: 860px) {
    .contacto__cuerpo,
    .checkout__cuerpo {
        grid-template-columns: 1fr;
    }

    .checkout__resumen,
    .contacto__canales {
        position: static;
    }
}

/* Solo para lectores de pantalla: se usa en las etiquetas de los buscadores,
   donde el marcador visual es el icono y no el texto. */
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}