/**
 * ===================================================================
 * BUTTONS.CSS - Estilos de botones
 * ===================================================================
 */

/* Botón primario */
.btn-primary {
    background: var(--primary-color);
    color: var(--text-white);
    border: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    transition: background var(--transition-fast);
}

.btn-primary:hover {
    background: var(--primary-dark);
}

/* Botón secundario */
.btn-secondary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: var(--text-white);
}

/* Botón de acento */
.btn-accent {
    background: var(--accent-color);
    color: var(--text-dark);
    border: none;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    transition: background var(--transition-fast);
}

.btn-accent:hover {
    background: var(--accent-dark);
}

/* Tamaños de botones */
.btn-sm {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-sm);
}

.btn-lg {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--text-lg);
}

/* Botón de bloque */
.btn-block {
    width: 100%;
}

/* Estados de botones */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn:disabled:hover {
    background: var(--primary-color);
}