/* =============================================
   BUTTON.CSS
   Estilos del botón principal de la aplicación.
   Se carga en todas las páginas a través de layout.html.
   ============================================= */

/* ── Botón base y variante "atrás" ──
   Ancho completo, fondo verde, esquinas muy redondeadas.
   .btn--back comparte los mismos estilos base. */
.btn,
.btn--back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    width: 100%;
    font-family: var(--font-sans);     /* los <button> no heredan font del body en todos los navegadores */
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: 20px;
    background-color: var(--near-dark-green);
    color: var(--white);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.btn:hover,
.btn--back:hover {
    background-color: var(--buy-light-green);
    transform: translateY(-1px);       /* ligero efecto de elevación */
}
.btn:active,
.btn--back:active {
    transform: translateY(0);          /* vuelve a la posición original al pulsar */
}

/* ── Modificador "añadir al carrito" ──
   Usado en las cards del catálogo junto con .btn.
   Solo ajusta el espaciado interno del icono. */
.btn--add {
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* ── Modificador "atrás" ──
   Espaciado vertical entre botones de navegación de pasos. */
.btn--back {
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
}