/* ============================================================
   Buzón Emocional — Botones reutilizables (tokens de variables.css)
   ============================================================ */

.btn {
    display: inline-block;
    border: none;
    border-radius: 999px;
    padding: .75rem 1.6rem;
    font-size: 1rem;
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: filter var(--transition-base), transform var(--transition-scale);
}

.btn:active {
    transform: translateY(1px);
}

.btn-azul {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

.btn-lavanda {
    background: var(--color-primary-btn);
    color: var(--color-white);
}

.btn-azul:hover,
.btn-lavanda:hover {
    filter: brightness(1.05);
}

.btn-borde {
    background: var(--color-white);
    color: var(--color-primary-btn);
    border: 1.5px solid var(--color-primary-btn);
}

.btn-gris {
    background: #e4e6ea;
    color: var(--color-text-dark);
    padding: 0.75rem 1rem;
}

.btn-bloque {
    width: 100%;
}

.btn[disabled],
.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.btn-fila {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}